How to Brand Your Squarespace Website

With so many beautiful templates to choose from on Squarespace, it's tempting to just use their existing styles. I know when I first started designing with Squarespace, I didn't want to delete the demo pages. I wanted to just edit them and keep them beautiful. However, even though the demo sites look and work great, you have to consider if the style aligns with your existing brand. Do the existing page layouts present your unique message in the best way? Are visitors being directed to the pages you want them to see? Sometimes it's best to start with a blank canvas and rebuild the site so that it functions in the most efficient way for your business and your brand.

Starting with a Blank Canvas

When I begin a web design project, the first thing I do is delete all the demo pages and their content. This gives me a clean start to rebuild the sitemap and optimize the flow of content. For small sites, I can usually draw the wireframe with paper and pencil to figure out the best page order and where content should be placed. For larger sites, I've used MS Excel and Google Sheets to organize the pages. Every page gets its own sheet where the content flow is arranged.

Is there another tool you've utilized to organize your large sitemaps? Let me know in the comments section below.

Excel Sitemap

Excel Homepage Layout

Once I've come up with a satisfactory layout, I move over to Squarespace to implement it. I show this version to my clients because I find it easier to explain how their site flows when I have a working example to demonstrate with.

Starting fresh like this can ensure that your site is built from the ground up to support your particular mission and work exactly as you need it to. It also makes it easier to make design decisions when there isn't already a style in place that you're trying to work around, which brings me to my next tip.

Squarespace Page Layout

Style Your Site

Squarespace has a robust style editor. Whether you've decided to start with a blank canvas or not, adjusting the style editor should be one of the first things you do when designing your site. It's also an easy way to make sure your site is aligned with your brand identity.

At the very least you should:

  1. Change the fonts to your brand fonts. If Squarespace doesn't have your exact font, choose something that's similar.
  2. Change the colors of links, buttons, and backgrounds. There's no reason not to use your brand colors here. Don't get stuck using boring black text everywhere.
  3. Change the style of buttons. Squarespace offers solid, outlined, and raised button styles. This may seem small, but they do have an impact on the style of your site. I find that outlined buttons give a more upscale feel than the other two.

Style Your Headings

Your headings are the page and section titles on your site. I recommend styling these differently than the body copy. Add some color, change the font, make them bolder and bigger.

For some reason, heading font styles aren't always visible in the style editor. This doesn't mean that you can't style them, but it does mean you will have to use the Custom CSS editor to inject your styles. I know, I know, this means coding. You're probably using Squarespace to avoid ever having to code and I've already praised that as being one of the benefits of using Squarespace. You can skip this tip and utilize the easily accessible styling options in the style editor, but I will share the coding for those who want to try it out.

This bit of code is actually really simple. First I'll define each heading and how it's normally used.

  • h1 - Heading 1, this is the main heading on a page; usually the largest in font size.
  • h2 - Heading 2, this is the first subheading on a page; usually smaller than h1 and larger than h3
  • h3 - Heading 3, this is the second subheading on a page; this is smaller than h1 and h2

Now here's the code you can paste into the Custom CSS code injection area on your site to change the font size and color of your headings:

h1 {font-size: 32px; color: #218D97;}
h2 {font-size: 24px; color: #F79B37;}
h3 {font-size: 18px; color: #ABAFC4;}

Here's how you'd customize these heading styles to match your brand:

  • Adjust the font size by changing the number before "px" which stands for pixels. Font sizing works the same way here as it does in Microsoft Word or any word processing program.
  • The number sequence after "color:" is called a hex code. Every color has a hex code. If you have a brand guide, the hex code may have been provided for you on the page that details your color palette. If you don't have a guide or established brand colors, you can use this color picker to get the codes. Once you've chosen your color, simply copy the hex number that's generated and paste it over the color code in the example I provided. Make sure that the hashtag (or pound/number sign if you're old school like me) always comes before the number like it does in my example.

Don't worry you can't break your site in the Custom CSS injection area. If all fails, just erase it and go back to the safety of the style editor, or contact me and I can help you out.

Add in Branded Images

The images you use will probably have the largest impact on your site's style. If you've completed a branding project, you should have a brand board. The images you choose for your site should fit in with the established style of that board. Original images are always the best, but if you don't have those on hand, or what you have isn't the quality needed for your site, stock images are your next best option.

Stock image vendors I can recommend are:

I recommend downloading previews of all the stock images you're interested in using and assembling them into a new brand board.

Before you place an image on your site, consider these questions:

  • Do each of these new images fit in with your brand identity?
  • Are these images evoking the right feeling?
  • Do your brand colors appear in the images?

Know Your Brand Voice and Use It

So far we've discussed site layout, styling, and images. All of these create the architecture of your website, but what's just as important as all of these pieces is your copy. What you say is as important as how you say it.

You can give your website and brand a lot of personality with the voice you use. You can also attract your target audience by speaking their language. If your target audience is young and hip, throw in some of their lingo. If your target audience is chic and sophisticated, express your knowledge and culture. Your words are a powerful tool and your website will be filled with them, so make the most of it. You can also seek the help of a copywriter if you get stuck.

Web Design, BrandingKiah SmithTips, Coding, SquarespaceComment