Why consistency is key in web design
This is the guide for you if:
- You’re not happy with your website, but you can’t quite put your finger on WHY
- You’re just starting with brainstorming your website or rebranding/building
- You want to get better at design and improve how your business shows up in the world
Consistency is the secret sauce to establishing a professional web presence (or any design for that matter), while making your life easier. Your future self will thank you.
With simple planning and a good understanding of your business’s design choices, it’ll be easy for you to implement consistency as you start creating or editing your website.
By the end of this article, you’ll be a pro at identifying inconsistencies in your website regardless. It’s a blessing and a curse, really.
WHAT IS CONSISTENCY?
Consistency is when similar elements on your webpage look alike. This includes everything from the site structure and layout to the font and color choices.
It’s important for three key reasons:
Trust + Authority — Inconsistent features across your webpage, especially glaringly obvious ones, send a message to your user that you haven’t put in a lot of effort into making a good impression. If you haven’t put in the effort, why should they trust you? Why should they give you their time or money? We all know a sketchy site when we see one.
Information organisation – The user of your website will set up expectations in their head for your website as they browse it. For example, as they start to browse the links on your site, they’ll look for other links in the same font, color, and size, and it will be harder for them to recognise links that do not share these features. Make it easy for your potential clients to navigate your site. This also applies for site structure – if your navigation and header layout changes on every page, the users won’t be able to focus on the content and will leave.
Branding — Your brand guide is your design bible. Having a website that uses your brand’s fonts, symbolism, and colors consistently is an amazing way to reinforce your brand power. The same goes with social media profile and anywhere your business is online. Consistency across platform further builds the user’s trust since they instantly see that they are on the right page and still connecting with the same business.
How can I tell when my webpage is inconsistent?
A lot of patience and attention to detail – if something seems “off” about your webpage, go through the elements individually and try to match them up so that they share similar properties.
Here’s a checklist of elements and their properties that you can reference if you’re not sure where to start:
Fonts:
- How many sizes of fonts/text do you have? Are they different in each section? Aim for 2-3 sizes and colors for Headers and ONE style and size for body copy.
- Are the sizes legible?
Colours:
- How many colours are you using? Are they all part of your brand or did you sneak one in to “make it pop”?
- Are all the text sections legible against the background color?
Images:
- Are my images all of similar quality? Are any of them significantly more blurry/pixellated than the other ones? If so, you might want to remove them – quality over quantity!
- Are all of my images that are in the same section the same size and shape? Is there even spacing between them?
Layout:
- Is my navigation clearly identifiable and separate from the regular links on the page?
- Is there a clear call-to-action throughout the website? Is it similarly formatted and emphasized so that it’s easy for the user to identify?
- On different pages on the site, is the size and shape of similar elements the same? Try to stick to similar layouts
- Do all these elements have a purpose/add to the page?
Let’s look at some quick visual do’s and don’t’s.
Do: Make sure that elements that are consistent from page to page on your website look the same.
Don’t: Change core components of your layout from page to page! In the example above, the user could become confused navigating the site because the menu placement has changed.
Do: Make sure that spacing between similar elements is the same.
Don’t: Forget to double check the spacing between elements! These kinds of mistakes are usually unintentionally made, but a little bit of extra patience and attention to detail can really help bring your website to a polished and refined level.
Do: Make sure that you use the same fonts (color, size, weight, and typeface!) in similar settings
Don’t: Play around here – you might have a lot of fun choosing different wacky fonts for different parts of your site, but ultimately it makes it very difficult for the viewer to look for important information!