Translating your web design into Squarespace (Part V)

Get excited, it's time to bring your design to life in Squarespace!

This post is the final post in this series, where we saw how you can start shaping up your web design idea BEFORE creating your site in Squarespace.


One of the issues that come from working with Squarespace is that everything is so easy to move around and setup, that you have too many choices and options to work with!

That's why this series has focused on preparing you for this stage, so you know exactly what to do and where everything goes, making the process a lot less stressful, saving you time, and making you confident that your client will love the finished site because she already loves the design!!


If you've been following along this series by now:

  • You’ll be clear on the site’s two main goals.
  • You’ll know how many and which pages you need to build.
  • You’ll know what each page should lead to.
  • You’ll know what content you should have on each page, which is a great way to know if the information your client gave you is complete.
  • You'll have chosen the best template that fits your client's requests and business needs.
  • You'll have created sketches, wireframes, prototypes and/or mockups and style guides to be approved by your client before moving on.
  • You'll be eager to jump into Squarespace to bring your design to life!!


Don't know what's going on here? Take a look at the previous posts of this series:

  1. How to prepare to create a website in Squarespace.
  2. How to organize your pages' content.
  3. My approach on choosing the perfect Squarespace template for my client's site.
  4. How to plan your site's layout and design.


Where to begin?

If you didn't create a prototype for your homepage that's perfectly fine.

The first thing you'll need to do then is set up all the pages you'll be creating and organizing them accordingly.

Then, you can move onto setting the main styles in the Style Editor like:

  • Header organization.
  • Font sizes and colors.
  • Button sizes and colors.
  • Footer style.
  • Site width + content inset (when applicable).


Then, you can go ahead and set up the design of the homepage by using your mockup as a guide.

I like to go section by section, styling it completely – including code – before moving onto the next, this way I get a better overview of how everything’s turning out!


Once the homepage is fully designed, I move onto the inner pages starting with the ones that I already created a mockup for. I style each completely before moving onto the next.


Keep in mind that some types of pages can't be styled at the beginning along with the other settings, since their styling options will only appear once you're inside that particular page.

So in your case, when designing the galleries for the flower arrangements, consider tweaking its settings before moving onto another page.


This also applies to any forms you're adding to your pages, so in your case if your client decided to have her inquiries sent through a form in the contact page, you should consider styling the form before moving onto another page, ESPECIALLY if you're creating a lightbox form since you might forget later.


Pro tip: keep a post-it block nearby to quickly jot down all these changes you need to do later so you don't forget!


Responsive design

Checking your site's mobile layout is not optional anymore.

You need to make sure your client's site works great on any device to provide her clients a seamless experience when visiting her site.

I like to create the entire desktop design first and then go over it, page by page, in mobile view.

This way I don't lose the momentum I have translating my mockups into Squarespace!


Squarespace's responsive design ins't perfect, so depending on the layout you're creating you will need to use code to fix some things and make them work better.

One thing you should always keep in mind is that responsive design doesn't mean you need to recreate your desktop layout to the dot, it means you need to make sure the visitor's experience is as good as it is on desktop. Even if that includes removing elements, moving things around or adjusting sizes.


SEO and other important tasks

(This step depends on if you offer it along with your services)

After all the design is done, I take care of any email integrations required, check that the forms are working (you can set up a temporary email like temp-mail if you don't want to fill your inbox with test emails), check button links, and take care of the page and image descriptions for SEO.

You can certainly do this at the same time you’re building, however I find it a lot quicker to set everything in place first and then go back to take care of these other tasks.


Once all of this is done, I check the links of the site again and keep a post it around for any minor details I need to remember to change before launch; for example, switching the storage method on the forms since I set my email – or a temporary one – instead of my client’s while testing.


And that's it!

Once you're done with all the steps in this series you'll have successfully created your client's website in Squarespace!


I hope you enjoyed these posts and found them helpful for your next web design projects.


Thanks for reading and until next time my friend!