8 Easy Steps to the Squarespace Web Design Process

Web-Design-Process-Blog.jpg

This guide will take you through the process of building out a website on Squarespace, from making an outline and choosing a template to adding content and launching. Text. Photos. Sitemaps. Logos. Templates. Editing. Branding. Website builders. Videos. Outlines. Planning.

These are some of the critical aspects that go into designing a website on from start to finish.

When you are designing a website on Squarespace for the first time, it can be tempting to jump from place to place.

I've been there before.

And I've seen others there before.

Often when I work with clients on their websites, they want to get right into the design of the website. The pretty stuff.

Then to the content. Then back to the design. And then back to some edits on the content.

The result is a messy process that takes away from the goal of making a website in the first place.

To build a website that meets your goals, looks beautiful, and gets done on time requires a well thought out process.

Why? Take a look at these stats:

  • 38% of people will stop engaging with a website if the content/layout is unattractive (source Blue Corona)
  • 48% of people cited a website’s design as the number one factor in deciding the credibility of a business. (source Blue Corona)
  • Nearly 8 in 10 of consumers would stop engaging with content that doesn’t display well on their device. (source Adobe)

If you don't follow a process, you run the risk of building a website that won't meet the needs of your visitors and business.

A successful website is more than a beautiful design. It's creating a website that aligns with your business strategy and goals.

Great websites attract visitors and help people understand your products, services, and brand. That means every piece of your website needs to be designed with an end goal in mind.

So how do you begin?

For me, it requires following a structured web design process that I use for every Squarespace website I build. This process contains 8 steps that build upon one another, increasing my efficiency and delivering a final website through a structured approach.

What is a Web Design Process?

Smashing Magazine defines the web design process as,

A Web design process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a roadmap for each project.

You will find many different articles about the web design process online. Most contain similar steps that help guide people through the process of designing a website from start to finish.

Read these other web design process posts:

Why Follow a Process? 

There are many benefits that come with following a structured web design process. By following a process you will:

  • Speed up the design process
  • Keep your project organized
  • Help hold everyone involved accountable and on the same page
  • Design a website with the end goal in mind leading to more subscribers, leads, and sales.

8 Easy Steps to the Squarespace Web Design Process

This guide will take you through the process of building out a website on Squarespace, from making an outline and choosing a template to adding content and launching.

The 8 steps to designing a website on Squarespace.

Use this table of contents to scroll to the step you want to learn more about.

Step 1. Gather Information Step 2. Create a Website Plan Step 3. Make a Sitemap Step 4. Develop a Visual Identity Step 5. Gather and Create Assets Step 6. Build Your Website Step 7. Test Step 8. Launch

8 Steps to the Squarespace Web Design Process Infographic

Step 1. Gather Information

Before you get into designing a website on Squarespace, begin by asking yourself:

  • Why do I want a website?
  • What is the purpose of my website going to be?
  • Who is my website for? Or who is my target audience?
  • What competitor websites of mine already exist and how can I make mine better than theirs?
  • What makes you different from your competitors?
  • Are there any other website designs and styles that I like or catch my eye?

The first step is all about brainstorming the most important questions that need answering.

Use a mind-mapping software like MindMeister (affiliate link) to help fuel your brainstorm. Below is an example I use to help guide my web design projects.

Having an understanding of your needs and wants before building goes a long way in avoiding miscommunications and errors.

Step 2. Create a Website Plan

The next step is taking the information you gathered in step 1 and organizing it into a website plan.

A website plan is a document that identifies the main goals, target audience and key messaging before creating anything.

A basic website plan consists of 4 sections:

  1. Business Information
  2. Target Audience
  3. About the Website
  4. Project Details

Recommended reading: How to Create a Simple Website Plan that Will Get You Big Results [Free Template Included]

A well-executed plan helps keep you focused and sets the direction of your project.

Step 3. Make a Sitemap

After you finish creating your website plan, you can use it to make a sitemap. A sitemap acts as a framework to support the build-out of the website itself.

Sample Sitemap Made in MockFlow

Having a solid outline helps fine-tune your vision for the website and can be used as a reference for building it out in Squarespace during step 6.

Recommended Tools for Creating Sitemaps:

Step 4. Develop a Visual Identity

Now that you have made your sitemap, the next step is developing a visual identity for your website.

Create Idea Boards - An idea board is a collection of ideas or inspiration that you can use as a reference when designing your website. Use Evernote (affiliate link) to collect idea from around the web that catch your eye and store them in different notebooks. For example, you might have an idea notebook for photography, colors, and font styles you like.

Website Inspiration - Research other websites for inspiration. Don't only look at competitors websites at this point. Try expanding your research into different categories.

Pay close attention to elements like calls-to-action, page elements, and brand image/perception. Add the websites you like to Evernote and store them for later.

Create a Brand Style Guide - Once you have done some research on ideas and inspiration, put it all together by creating a brand style guide.

Sample Style Guide

According to 99designs, there are six essential elements that need to go in every brand style guide:

  • Brand story
  • Logo
  • Voice
  • Imagery
  • Typography
  • Color palette

6 elements of a brand style guide

A strong brand tells the world why they should choose you over the competition. A brand style guide helps you and your team stay true to that brand.

Recommended Tools and Resources for Developing a Visual Identity:

Step 5. Gather and Create Assets

The best way to keep a project on schedule is to gather and create assets (copy, logos, video, etc..) at the beginning.

Use the sitemap you made in step 3 as a guide to gather and create your assets.

Do this by setting up a main folder for each page and subfolders within them using Google Drive or Dropbox.

For example:

Google Drive Asset Folder Set Up

Share the folders with anyone involved in the project and let them upload assigned assets on their own time.

If you happen to be missing any content, decide if you have enough to move forward, and create a plan to develop or buy the missing pieces.

Recommended Tools for Gathering and Creating Assets: 

  • Hemmingway - For copy formatting and editing
  • Grammarly - For checking grammar and misspellings
  • Canva - For creating custom DIY graphics
  • iStock Photo - For royalty-free images, illustrations, and videos
  • The NounProject (affiliate link) - For print and web icons
  • DropBox (affiliate link) - For setting up your asset folders
  • GoogleDrive (affiliate link) - For setting up your asset folders

Step 6. Build Your Website

By this point, you have taken care of the brunt of the work. Now comes the fun part. Building your website.

Recommended reading: 9 Reasons Why You Need to Build Your Website on Squarespace

Follow these 4 phases to build out your website on Squarespace.

Phase 1. Start a free trial by choosing a template on Squarespace.

How to Choose a Template - Squarespace offers over 40 beautiful designed website templates to choose from.As you consider templates, ask yourself the critical questions outlined below to determine which is best for your website.

  • What is the Primary Goal of the Website? - You should have determined the goals of your website when you created your website plan. Usually, goals center around driving leads, sales, or traffic. Pick a template that will help achieve your primary goal.
  • What Types of Assets am I Showcasing? - You've gathered and created your assets in step 5 of the process. If you need to communicate your brand visually, choose a template that features larger banner images, portfolios, and galleries. If you need to communicate your brand through copy, choose a template that features strong headlines and text-based page layouts.
  • How have others used the template? - The best ideas often come from others. If you are not familiar with Squarespace templates, look at how others have already used them. A good place to start is looking at Squarespace's customers. I've also put together 73 Squarespace website examples you can use for inspiration.

Tip: Support your template search with this template guide from Squarespace.

Phase 2. Architecture Setup - After you selected a template, move forward with setting up the architecture of your site. Create your website pages in Squarespace referencing your sitemap from step 3.

Architecture Set up in Squarespace

Phase 3. Styling - Reference the visual identity you developed in step 4 to style the look and feel of your website. To style your website open the style editor in Squarespace.

Squarespace Style Editor

During this step there are a few key areas you want to style:

  • Logo - Size and placement
  • Main menu navigation - Background color, font style, line height, and letter spacing.
  • Copy - Font style, size, and color
  • Buttons - Font style, color, size, shape

Use this time to test a few different styling variations of your website until you find the perfect look.

Phase 4. Layout and Content - Once you set up the architecture of your website and have completed the styling, it's time to layout and add content to your pages.

Go to the storage folders you structured in step 5 and start adding the content you gathered and created. Take advantage of Squarespace's drag-and-drop builder and content blocks to build your website with ease.

Step 7. Test

After your the site has all its visuals and content, you’re ready for testing. Things to check when testing your site before launch:

  • Broken links - Go through each page and make sure your links are working.
  • Integrations - Social media accounts, Google Analytics, calendars, etc..
  • Different web browsers - List of most popular browsers
  • Preview on different device types - Mobile, tablets, laptops, and desktops
  • Images and image sizes - Squarespace recommended image size is between 1500px and 2500px
  • Spelling and grammar - Another pair of human eyes never hurts!
  • Meta titles and descriptions - Make sure all pages have both so you're found in search engines.

Step 8. Launch

Finally. You've made it to launch day. Congrats! It's time to launch your website to the world.

Recommended Tools and Resources for Launch Day and Beyond:

Post-Launch

Launching your website is the start of growing your online presence. A website is an ongoing process and requires constant updating and refining.

Share in the comments below your plan for growing your website and online presence. Is it social media? A content strategy? Paid advertising? Let me know and we'll chat about the next steps you can take.