7 ways to customise your Squarespace site
I love Squarespace. Mum-Folk is built on it and I recommend it to any clients looking to create a professional, design led website or blog. It’s easy to use and there is an excess of cool, well designed templates - so perfect if you’re a blogger or business just starting out and may not have the budget to invest in a custom designed site.
Having said that, if you want your website to stand out and not look like a carbon copy of the next, it’s essential to customise it to suit your brand.
Here are 7 things you can do to optimise your website and elevate it from the crowd.
1. Brand identity
Before you begin customising your website make sure all your brand elements are in place - logo, colour swatches, font selections, textures etc. Don’t have this yet? Do not pass GO or collect £200. Get in touch and let’s see what Mum-Folk can create for you.
PRO TIP:
Set up a brand kit or a brand folder that houses all of your brand elements in one handy place and organise your images into categories, web pages or blog posts. Try out Canvaforwork for a great way to standardise and keep all your brand elements together and easily accessible.
2. Brand fonts
An easy place to start is to update the fonts in the website template - these should match your brand fonts (see above if you don’t have brand fonts yet or check out this post on how to choose the right font for your brand). Use your brand fonts consistently throughout your site so choose how to format a header, body text and call to action buttons, then apply these typographic rules rigidly throughout. The easiest way to make your website look amateur is by choosing too many fonts or using inappropriate type (i.e. overly decorative fonts that are hard to read), another common mistake is switching up your fonts every time you create a blog post or blog post graphic. This will confuse the look and feel of your site and dilute your brand. Set typographic rules and stick to them. Your readers will thank you for it.
To edit fonts in Squarespace from the main menu go to Design > Style Editor, here you can set styles for headers, body text, navigation links etc. There are also lots of helpful tutorials on how to change and customise fonts here.
PRO TIP:
Choose fonts that match your brand values and are above all easy to read on and off line. For more on this topic read How to choose a Font for your Brand and 4 Ways to Combine Fonts for more information on this topic.
3. Brand colours
Add pops of your brand colours to your website through adding background colours, textures, coloured text, buttons and borders. Colour is a great way to catch viewers attention - but use it intentionally, for example bright colours work well for text links and buttons to encourage call to action but lighter, muted colours are better for backgrounds as text may become unreadable. You don’t have to fill your website with colour - little touches of colour in the right places can go a long way.
Think about how can you add colour and interest to customise your site? Even if you’re not a designer you can still create icons, custom buttons and graphics in free software such as Canva which you can then upload to Squarespace as a graphic rather than using the default style options. Then make use of the ‘hyperlink’ option to make this graphic click through to another page, effectively making it a button. Try using solid colour for call to actions instead of an outlined rectangle, watercolour wash backgrounds to add texture and detail, hand drawn colourful lines or elements. The list is endless!
To edit colours in Squarespace, select the page you want to style and click on Style Editor (left hand menu), style options will then open up on the left.
PRO TIP:
However, don’t go overboard - keep it simple. Don’t try to use all of your colours if you have a large palette, better to use one dominant colour such as a colourful background and then add touches of secondary colours to complement. If you’re unsure of your brand colour palette read this post.
4. Add a favicon
A what? That little graphic that appears beside your website’s name in a web browser tab. To add a favicon in Squarespace go to the main menu, click Design > Logo & Title and under the Browser Icon (Favicon) section, upload a .png file with a transparent background (a white box around your image doesn’t look quite as professional). Favicon’s are tiny - 50px by 50px - so keep it simple. A single letter, initial or icon works well.
It’s all about the details and applying a favicon and a touch of your brand elements across all of your webpages creates consistency which in turn instantly makes you look more credible.
Brand elements include, logos, secondary logo marks, icons etc. Your primary logo should sit in the same position on every page but it’s useful to have a secondary logo or a brand icon that you can use on graphics or posts within webpages. This variation stops your site from becoming oversaturated with the same logo repeated multiple times.
5. Get creative with layout
Squarespace’s templates are already designed to have beautifully balanced layouts, however you’re not confined to this and it’s worth playing around with the drag and drop edit features to switch things up and get more creative.
Try moving blocks around on the page, adding a gallery block or creating your own page using image blocks, text and buttons.
PRO TIP:
Even though Squarespace makes beautifully design sites, there are more restrictions on this platform than say Wordpress which is infinitely customisable so make sure you choose the right Squarespace template in the first place. Think about the content you want to include on your site and different types of pages and functionality you will need and sketch out a wireframe (a rough layout) of your elements. Then make sure that the template you choose can accommodate this functionality before you begin customising and adding content. If you can’t find an exact match, another option is to edit the code (only recommended if you have coding experience though!) or find a developer that can - in a few hours and a small investment they could optimise your site and turn it from meh to ah-meh-zing!
6. Edit your photos consistently
Create photography guidelines to produce images with a consistent look and feel - then use these guidelines to create images that have the same lighting and appearance to stay ‘on-brand’. This will unify your users’ experience and reinforce your brand values through a recognisable aesthetic.
If you’re using stock photography, buy images from the same seller - it’s all very well downloading the odd image here and there from different stock sites, however every photographer treats their images differently so when put together on the same site the images often jar and don’t sit nicely together. It’s better to buy a block of images that have all received the same post editing treatment. Have a look on Creative Market for sets of blog or website images.
PRO TIP:
If you’re using all your own imagery, try converting to black and white if your photos differ greatly in appearance, this can help pull everything together and make it look like part of the same set.
7. Tone of voice and blog post graphics
Make sure your writing style and tone or voice - the way your brand interacts verbally with it’s audience - matches your brand image so if your brand is sleek and modern, your copy should align to this too.
Similarly blog post graphics really help to bring your site alive and make it your own but these also must fit the brand style and values and work seamlessly with your content. They are also integral to seeding your content across other platforms so make sure you include one Pinterest-friendly image in your post for example. Because these graphics might show up in contexts other than your website, be sure to include your website address and secondary icon to indicate who the post belongs to. Don’t include your primary logo on these graphics as it will saturate your site and become too repetitive. This is one of the reasons that I include secondary logo marks and logo variations for my clients within custom design projects to give their brand flexibility and prevent their graphics from getting too repetitive.
As always with blog post graphics try to keep it simple - use the same graphic template for a blog post series for example or keep certain elements consistent such as background image but change the colour. Don’t switch up your fonts and pay attention to how you set the title text, e.g. avoid awkward breaks in phrases. If you’re using illustrations, use the same style across the site as this will help tie all the content together.
PRO TIP:
Add icons to your page to help direct the reader’s attention and break up information. The Noun Project as a wide range of free icons that are easy to download and customise.