how to: cohesive design on your squarespace website
Now we’re not going to get into HOW to design a cohesive website… not exactly.
But I wanted to share with you a couple quick + simple steps to add to your website design process that will solve soooo many headaches as you DIY your Squarespace website!
Let’s get into it.
1 - Create a styles cheatsheet.
This will be a huge help for you if you’re using Squarespace 7.0 - they made keeping your styles cohesive a LOT easier in 7.1!
Consistency in your website design is KEY - especially when it comes to colours and fonts. Creating a style guide is an easy way to make sure you know exactly what settings to use all over your website.
Here’s what to put on your style guide:
All your brand colour hex codes. You’ll want the background colour for your site, your main accent colour, a secondary accent colour, and your body font colour at the very least. I use about 6 main colours throughout my site!
All your font styles. Write down the font-family, weight, letter spacing, line-height, and size you’ll be using for your Headings (H1, H2, H3) and your paragraphs (body text). This will make it so much easier to use those same settings for different text areas in your site (like blog post titles, image captions, and more). It’s best to use no more than 3 fonts in a website for consistency (though 2 is probably ideal).
If you’re using Squarespace 7.1, they’ve made it a lot easier to create cohesion in your site because you set your fonts in ONE place!
2 - Design as much as you can on ONE page.
This is my favourite tip that I originally learned from Caroline at Wandering Aimfully!
Create Site Styles PAGE on your website where you style as many blocks as possible. This makes it so much easier to go through all your Squarespace options and create dynamic cohesion - because you see it all in one place!
Here’s what I recommend putting on this page:
All text styles (H1, H2, H3, Paragraphs)
Line block.
Quote block.
Newsletter block.
A button in each size. (3 total.)
All image blocks (Stack image, Collage image, Overlap image, Poster image, Card image).
Summary carousel block.
How to build the page and use it for styling
If you’re using Squarespace 7.0:
Create an Index page
Create a normal page section without a background
Add all the blocks above
Then duplicate the page section, place it into the same index page, and add a background image in a colour or style you plan to use on the website. (If you are using a template that doesn’t have Index pages, just duplicate the regular page! It’s handy if you can see both versions on one page, but it’s not necessary!)
Now jump into your Design > Site styles and go through all your available settings and adjust! Remember to peak at the styles cheatsheet we made earlier to help guide this process for you.
If you’re using Squarespace 7.1:
Create a page and make the top section use a colour profile you plan to use throughout most of the website. This will likely be Light Minimal or Light Bold).
Add all the blocks listed above
Duplicate the page section and change the colour profile to one that you plan to use regularly
Click Edit and then click the paintbrush icon in the top right of the window to open the site styles! Go through and style as much as you can.
Let me show you what my styles page looks like to give you a big of an idea of the final product.
3 - Use the same icons + images throughout the site.
You really don’t have to re-invent the wheel every time you reach a new part of your website design! Feel free to use some of the same icons, illustrations, and images (or similar!) around your site. This will create continuity and make your brand really clear to people.
For example, you’ll see a cute little eye shape, a head shape, and arched shapes all over my site. I use them in different ways all over the place. They add a little extra flare to some of my pages and strengthen my brand identity by having them appear over and over!
I hope this helps you with creating consistent design on your Squarespace website!
If you have any questions, I’d be happy to hear from you in my email! Send me an email here.
