Squarespace 201 Part 2: The Buildout — Squarespace Circle: Build your web design business

Exclusive Resources

Circle member guides

Friday, July 13, 2018

Squarespace 201 Part 2: The Buildout

This guide is designed to walk you through the process of building out a website. You'll learn how to make an outline, choose a template, and add content and finishing touches.

06_STILL_LIFE_265_V3_Master.jpg
Squarespace has curated a collection of beautiful and diverse templates designed exclusively with the needs of small businesses in mind.
— Justin Gilman, Studio Rubric

Before You Start: Client deep dive

Whether you use our Project Form or have a process of your own, you should take the time to learn about your client’s brand and business, their goals for their website, and their aesthetic sensibilities. Having a deep understanding of your client’s needs and wants before beginning to build goes a long way in avoiding miscommunications. Some pointers:

  • Get clear on your client’s strategic goals, the services and products they offer, and their ideal customer.
     
  • Take a deep dive into your client’s area of expertise. Get the lay of the land and find out how they want to be seen in their industry.
     
  • Ask your clients about the nitty gritty: Who needs access to the website? What assets do they already have? What assets will need to be created?

Download the fully-designed Project Form in the PDF version here and the plain text version here.

201-2-1.jpg
 

Create a contract

Conversations are a great place to start, but written agreements are easier to reference after you begin building. Having an organized document explaining your process, fees, and expectations is invaluable. There’s no substitute for professional legal advice; that being said, here’s a list of potential website specific topics that you may want to cover in addition to your usual contract terms.

While we hope this list of topics is useful as you think about your contract terms, please remember that we’re not your lawyers and we can’t provide you with specific contract or legal advice. Your contract is ultimately an agreement between you and your client, and you may wish to consult with a lawyer.

  • Website will be built on Squarespace using a standard template.
     
  • Project timeline, including allotted time for rounds of revisions.
     
  • If you will be providing Squarespace training, include specifics about format, number of hours, and number of trainees.
     
  • If your fee includes costs for additional assets or subscriptions (stock photography, G Suite, etc.). Detail the approval process for purchasing additional assets.
     
  • If your services will continue beyond launch of the website, and if so, the nature, and cost of those services.
     
  • If your services will include copywriting and/or search engine optimization (SEO) research and implementation.
     
  • If you will create custom CSS or other code injections, and if so, specify who will be responsible for maintaining that code after launch.
     
  • Who will pay the Squarespace subscription fee and domain fees (if any).
 

Make an outline

A solid outline acts like a framework to support the buildout of the website itself. Summarizing your client’s website in an outline not only refines their vision, it doubles as a convenient checklist to use while building. If you’re not sure what should go into that outline, check out a handful of sites of businesses or individuals that are in the same field or offer similar services as your client: Each site’s look and feel will vary, but it won’t take long to tease out the essential elements. Check out Squarespace’s Design resources and tips for more industry-specific tips.

Here’s an example of a simple outline.

download.png
 

Collect Assets

asset_collection.png
We can’t emphasize enough the need for having a very firm handle on assets - including written content - at the beginning of the project!

When we were new to website design we were so eager to please our clients that we’d get started before they had everything in-hand or in-process and ended up wasting time.
— Emily Kencairn

The best way to keep a project on schedule is to collect assets at the beginning. The more organized you are, the easier it will be for you and your
client to work together. Our recommendation is to create a shared folder with subfolders that track your client’s website page structure and content requirements (Dropbox and Google Drive are both great options). You can take this one step further by specifying resolution requirements for artwork and word counts for copy. Check out this help article for best practices in formatting images

Share the folder with your client, talk them through it, and let them upload on their own time. If your client is missing assets, decide whether you have enough to move forward, and create a plan to develop or purchase the missing pieces.

 

Selecting a Template

Templates are at the core of the Squarespace experience, so making an informed selection will simplify the rest of the design process.

As you consider templates, ask yourself the critical questions outlined below to determine which one will work best for your client. With template selection, it is important to examine the underlying features and avoid making a decision based solely on demo content.
 

What is the primary goal of the website?

At this point it should be clear whether your client
is primarily looking to drive sales, generate leads,
or attract visitors. We recommend that you pick
a template designed to achieve that goal. The category filters on the Templates page will be helpful in narrowing your choices. For example while all templates support Commerce, certain templates are especially well-suited for online stores.
 

What type of assets are you showcasing?

If your client wants a more image-focused site, take a close look at Gallery pages and blocks. If your client needs to communicate who they are through copy, pay particular attention to how Page collections can be laid out to break up text and create more compelling designs.
 

Does my client like it?

Once you’re down to a few finalists that meet your client’s needs, ask for their input on the final decision. When presenting template options to your client, it can be helpful to include
links to customer examples from each template page, links to websites you’ve designed with each template (if any), and even annotated screenshots showing what features they should be evaluating. Highlighting the advantages and key points of each template you would like your client to consider will make it easier for them to sign off on a template.

 

Squarespace maintains a comparison of key features by template family, and members of the Circle community have created template feature comparison charts. While they occasionally fall out-of-date, you may find them helpful:

SSUPERS
Using My Head
ilovecreatives
Paige Brunton
 

What differentiates each template?

Built by our award-winning Design Team, Squarespace templates help determine how a site will look and how visitors will navigate it. While each template in our template store is unique and distinctive, many of them share the same underlying structure and settings. Internally, we describe templates that share the same underlying structure and settings as “variants,” and say that variants with a shared structure are members of a template “family.” By reviewing the variants within a single family, you and your client can get a sense of the template family’s flexibility.

Each variant represents a certain type of website, but it’s important not to take them too literally. A variant that’s presented as a restaurant website can be transformed into a chic law firm website. With this in mind, your

main criteria for picking a variant should be the design, layout, navigation, and other structural implications
of choosing a variant in a certain template family.

We recommend familiarizing yourself with our template guides to get a better sense of template families and the different features each one offers.

 

The four-step buildout process

Once you’ve picked your client’s template and started the six-month trial, it’s time to build.

There are lots of ways to approach building a Squarespace website, but we’ve found that breaking the process into four distinct steps works well:

STEP 1 — Architecture setup
STEP 2 —Styling
STEP 3 — Layout and Content
STEP 4 — Finishing touches

201-2-4.jpg
download (1).png
 

Step 1 — Architecture setup

In this step, you’ll frame out the website by adding, deleting, duplicating, or reordering pages to match the outline you’ve already developed, creating a solid information architecture for the website. When you’re done, the Pages panel will show every page for the website in the proper order relative to each other.

Step 2 — Styling

In this step you’ll create the look and feel of the site. Depending on your timeline and your client’s expectations, consider using dummy copy (e.g., lorem ipsum) and image placeholders. Keeping the content generic will maintain your client’s focus on the design elements, which are the moving parts at this point in the process.


Key styling elements

  • Tagline: font, color, size, and placement
     
  • Navigation styles: font, line height, and letter spacing
     
  • Copy treatments: font, color, and size
     
  • Page styles: header or no header, and background colors

Getting feedback

Here’s an approach to getting your client’s feedback on multiple Style options:

  • Set the styles for the first version that you want to share and take a screenshot of the homepage.
     
  • Download and save the style tweaks as a JSON file by using the tweak export functionality, which is currently available to Circle members only.
     
  • Reset styles for a second version
     
  • Take another screenshot and download the re-styled tweaks
     
  • Repeat as needed
     
  • Share the screenshots with your client, and import the tweaks from their preferred version to continue designing.
 

Step 3 — Layout and content

You’ve got the website’s architecture framed out, and your client’s sign-off on the styling, so it’s time to start laying out and adding finalized content to each page.

A few things to keep in mind:
 

Make the most of your template

Our Templates team thinks deeply about helping you create pages that not only look good, but perform well. If you picked a template with your client’s specific goals in mind, closely examine the content in the template’s homepage. See how it’s optimized to achieve certain goals. It’s unlikely that you’ll be able to simply swap in your client’s content, so to avoid reinventing the wheel, consider maintaining the essence of the template’s demo content.
 

Optimize for a goal on every page

While the landing page should be keyed to your client’s primary goal—leads, sales, or subscribers—look for opportunities on other pages to achieve specific goals.

For instance, a blog can include a Promotional Pop-Up inviting visitors to sign up for their mailing list. Clients with stores can use a pop-up to promote a new product or announce a sale. An “About” page can include a lead-generating submission Form Block or a click-to-send-an-email button. The key is to keep your client’s strategic goals in mind and ensure that every aspect of their website is contributing to those goals.

Put Squarespace to work

Use more page types, blocks, and layouts to create distinct visitor experiences and leverage the power of Squarespace.

For instance, if your client will maintain a blog, consider layouts that go beyond the traditional chronological scroll. The Index Page, Summary Block, or Archive Block are all great tools for presenting work in novel ways.

Take advantage of the starter layouts built into Regular Pages to quickly stage a page structure, even if you don’t have all of the client’s copy and images laid out yet. Blocks without content will still show demo text or images, giving your client a good idea of how the final version will look.

For a dynamic introduction, add a background video to a Cover Page or homepage banner. Background videos play on a loop without sound while a visitor explores the page. To showcase artwork, create a slideshow that opens in a lightbox.
 

Double-check styling

Once you’ve replaced the dummy content with your client’s actual content, take another look through each page to see what needs fine-tuning. Review text to be sure all the fonts and colors are unified and there aren’t any typos.

Double-check images for any issues that might show up with cropping or padding on different sized screens.
 

Make content requests en masse

This is the point where unforeseen gaps in your client’s assets and content will become apparent. All else being equal, we think it’s better to wait until the end of this step to ask your client to fill in the gaps rather than making one-off requests along the way. It’ll simplify their life and yours.

Step 4 — Finishing touches

 

You built the architecture, styled it, and then populated it with assets and content. The next step is adding finishing touches to the website. Some of these finishing touches, such as connecting social accounts, will require your client’s input, so you may need to wait until the handoff. In any event, you should create a running punch-list of finishing touches the website will require before going live.

 

Downloads

Some key finishing touches:

Want more?

Check out this Circle member AMA by Lisa Mullis of Paraphrase Communications. She talks about client content creation and offers a free content template to help with a smooth buildout process.

Written by Tony Syros

Take your next creative step

Have three
Squarespace sites?

You're eligible to join. Claim your membership.

Join now

Not quite there yet?

Submit your email address and get our free guide to website design.

Checkbox *
Circle Homepage Intro Background