How To Make Your Squarespace Site Stand Out, Part 1: Images and Style Tweaks
So, you're building your Squarespace website. The last thing you want is for it to look like the template or — worse — anyone else's website. So how do you stand out on Squarespace?
Thankfully, Squarespace makes it easy to change the character of your website with no specialist knowledge. You can fiddle with fonts, colours, title placements and menu positions in the Style Editor. Some templates provide more options — or ‘tweaks’ — than others (if you like lots of choice, the Brine template family provides the most).
Here's a few ideas on how to use images and colours and fonts to make your site stand out. In Part 2 I’ll give you some ideas for code tweaks to add further originality.
But first of all...
Stand Out For The Right Reasons
Squarespace templates are already designed for usability and simplicity. There's no need to overthink the layout or add too many quirks. After all, there’s a fine line between “oh cool” and “oh that’s annoying.”
However, your website is an individual representation of you, your organisation’s character and ethos, your audience, and how you make their lives easier or better. These are the individual elements of your brand and even small businesses should have a brand.
So, stand out to reflect your points of difference, not just for the sake of standing out, m'kay?
Do you really need a banner?
When I created the first version of the Catwood website I nervously showed it around to my husband and a few friends. A colleague of my husband immediately leaned in and asked "Why do all websites look like that these days?" And took the wind right out of my sails.
The answer is two-fold:
Because an image provides so much information about the purpose of your website in one easy-to-digest communication hit. Words have to be read one by one, but an image says it all.
Because people are beginning to expect their websites to look this way.
If you're careful though, you can stand out by breaking that expectation. Have a look at this gorgeous piece of work:
That's the entire homepage; a representative image and everything you need to know, all above the fold (this is the Avenue template). Which brings me to...
Be Meticulous About Images
Squarespace templates are designed primarily to showcase images. Why? Because images communicate more efficiently than words. Our brains form an opinion of your site based on your images before they commit to reading individual words. Here are a few image tips:
1. Make your images truly delicious to look at...
Sharp, nicely composed, bright (or with plenty of contrast if black and white). I really can’t labour this point enough: the quality of your images is a direct reflection of the quality of the products and services you provide.
2. Visually communicate your message...
This is especially true of the first image people see (the homepage or landing page banner), which should represent the end goal of your service. How do you make people’s lives better? Do you add fun, comfort, warmth, style, convenience, colour, light, peace? Settle on one concept and choose an image that exemplifies it.
3. Stick to an image theme across the site...
The images on my website are patterned illustrations with a lot of light blue in them. This brings cohesion to all the pages on the site. You could use images from one shoot, or pictures with a specific style.
4. Use images of people, especially people looking directly at the camera...
The people in your images don’t have to be models, but the images themselves have to be captivating; sharp, bright, interesting, capturing a moment of intimacy, and somehow telling a story of however your business benefits your customers.
Make sure the people don't look too different from your target audience (or what they aspire to be). For example, don’t put off a largely older target market with images of trendy young things.
5. Beware of stock images...
It's better (though many times more expensive) to commission a photographer. If you use stock images, avoid business people doing business. Choose unusual images from free image sites to add some authenticity and individuality.
Lock Down Your Logo and Colour Palette
If you have a logo and colour palette for your business already, perfect. Consistency is key when it comes to branding, so make your website a visual continuation of your brand. Here are some practical ways to translate your brand to your website.
If you don’t already have a visual style for your business, building a Squarespace website is the perfect opportunity to create one.
1. Make Yourself A Logo...
In Design - Logo and Title, select Create a New Logo. Select an image that represents your business, add your name, change the colour/font and move things around. It's a simplistic logo design feature that's been controversial in the graphic design world, but it does the job if you don't have the resources for a professional designer. Check the top of this page for an example.
2. Choose a signature colour...
If no colours are already associated with your business, take inspiration from your images. The Color Hunter website will analyse an image and tell you what the main colours are. Or just choose (then work backwards to your images).
My signature light blue came from a photoshoot for the photo on my About page. Blue suits me best and the photographer suggested I use it on the site too.
3. Find two or three colours to compliment your signature colour...
There are plenty of tools available online to help you choose complimentary colours. Or try different colours then test and test again to see what works.
When I was developing PA Per Hour I knew I wanted to use retro black and white photographs to represent the benefits of the business. I needed a contrasting bright colour to stand out in titles over the images.
In a flash of inspiration, I Googled ‘bright colours to compliment a grey room.’ The first colour I tried was gold, which turned out to be too retro a colour to contrast with the style of the images. Then I settled on a more modern-looking turquoise.
Choose Your Font Carefully
Fonts are a super way to make your site stand out and Squarespace has plenty built in. But there are so many fonts available, and so many considerations. How do you even begin to choose?
I'm still very much a beginner when it comes to font selection. I try not to overthink it and use my instincts to tell me what looks good and what doesn't quite work.
1. Browse for ideas...
The Typewolf website is a great resource when selecting fonts — really the only site I know of to make font choice accessible to mere mortals. Think about the tone and mood of your site as you browse the favourites lists. Anything not already available via Squarespace is available to buy and install, or Google for free alternatives to the fonts you like.
2. Go on readability...
Serif fonts are easier on the eye and easier to read than sans serif fonts. If you write a blog, try out a few serif fonts to see what works best on different screen sizes. The blog site Medium uses a particularly simple yet bookish font.
However, sans serif fonts appear to suit technical information, look cleaner and more serious especially in titles, and are the dominant choice online.
3. Go on what looks nice...
I originally used something similar to the London Underground font on this website, but it struck me one day that it didn’t really work with the modern illustrations. I don't know why, but a serif font (Merriweather) seems to work better, perhaps by creating a contrast between old and new. A similar effect happened on PA Per Hour, where retro images contrast with modern sans serif, bright turquoise lettering.
4. Test in different browsers and screen sizes...
Some fonts will look perfect on the screen of your Mac but be squashed into ugliness on an Android phone. Test and test again.
5. Don't be afraid to fiddle with the letter spacing...
Squarespace defaults to a fairly spread out style. This may be because spread out equals easier to read, after all, everything on Squarespace is spread out. Whatever the reason, one of the first things I do after choosing a font is fiddle with letter spacing in the Style Editor (technically known as kerning) until I hit what I think looks best.
A Few More Quick Style Tips
If you want to change a specific element of your site, go to the page, then navigate to the Style Editor. Click on the element (on the page) and the Style Editor will provide the options you need to tweak it.
Make sure your text stands out from the background colour and images. An image overlay can help dull down your images just enough to allow text in one colour to stand out across the site. I tend to keep backgrounds white, but a light colour can subtly change the mood. Light text on a dark background is a brave move.
Some text, such as that on menus, buttons and some titles, defaults to upper case in Squarespace. One of the first things I do is change it back to sentence case and see how it looks. Search for Text Transform options in the Style Editor.
And What If The Style Editor Won't Let You?
In Part 2 there are some advanced tips on how to make a Squarespace site stand out, including adding custom CSS code to your website.
A Squarespace website designer based in Oxford, UK, I'm on a mission to turn uninspiring, unloved websites into interesting, relevant experiences that show instantly what you offer and why people need you in their lives. More info.
