What to Include in a Website Style Guide

So you're planning on redesigning your website - or maybe this is your first and you want to get it right the first time. If you've had any experience with trying to implement any vision you might have of a website you'll know it's particularly tricky to transfer your idea to the page while keeping everything consistent.

That's where a style guide comes in:

What is a style guide?

A style guide is a set of rules and standards that designers and writers should adhere to. It is your “house style” written down in a document or a web page. Publications like newspapers almost always have one and they are also very useful for websites.

When should you create a style guide?

Before you start building the website! This is your chance to consolidate all your ideas and designs into one cohesive document.

Why should you be using a style guide?

Putting the time and effort into writing a style guide will benefit your brand and website in the long term, as well as when your website is being built. A style guide ensures that your website and brand stay consistent. Consistency is important as it helps towards building trust, demonstrating quality and website usability. As a brand, it is important to show that you are diligent and care about the finer detail. No one likes visiting a site with broken formatting or inconsistent and confusing design.

What goes into a style guide?

There are a few things you should always include in a style guide. We'll cover those must-haves right here.

The brand statement, philosophy, tone

The first thing to do is write a few words about your brand and how you want everyone else to think about you - state what is important to your identity. Everyone who is making changes and designing elements for your website, image ads and social media channels should be aware of your identity. More importantly, everyone within the company should more or less agree on the brand statement.

Layout

Where are you going to place your page elements and what elements are universal to your website? Create templates for different content types and keep them consistent and easy to read.

Are you using a grid? What size? Will you be using a base grid? When designing a website it is common practice to use a grid. Using a grid helps you decide how you want to split up the page.

This is also the time to decide how many pixels in from the edge you want your logo, headers, footer, etc. While it seems like you are now being a bit pedantic, if you don’t write this down, the techie implementing your design won’t do it the way you want.

Typography

Having all the fonts written down in a document helps. Over time it is easy to end up using a lot of different fonts and font sizes - especially for "specials" and "offers". Make sure you have a style in mind for such "special occasions" otherwise someone may break the way the whole site looks for a weekend sale!

So, list the font families, styles, sizes and colours you are using for headers (H1 to H6), copy, quotes and every other form of text on your site.

Branding/Colour

Work out the colour themes you are going to use, and the colours that will be consistent throughout your site then write the HEX and RGB colour code. Having two colours that look almost the same but just slightly off looks awful - and will drive you mad in the future for not catching it!

Colour consistency is also important for usability. If you stick to one colour for buttons or links, visitors will quickly work out how to use your site

Navigation, Links and Buttons

Objects that have similar functions should have similar visual styles - colour, saturation, and/or shape. The more important something is to your visitor, the bigger the object representing it on the page should be.

Specify the size and colour of the font on the button and the case it uses – all caps, proper case, title case, etc.

Are you using square or rounded buttons? If you are using rounded corners, specify the radius of the corners.

Assets

What image file types are you using - png, jpg, gif? What is the maximum file size? Specify the dimensions for images used in specific contexts, such as alongside blog posts, or in lists of articles or products.

Tone of Voice

The tone of voice is how you want your content to read, for example, edgy and young; friendly and accessible; authoritative; and so on. Once you have established your personality - which was the first thing you wrote in your style guide, remember! - work out the tone of voice to fit that personality.

Conclusion

As well as applying to your website, the style guide you create can also be used for email marketing, assets used in your social media marketing, and all other forms of online communication to ensure your brand is consistent.  

If you’re planning a new website, especially if lots of people will be working on it, you need to create a style guide. Even if you don’t include everything listed above, at least have a think about the fonts and colour - they seem to be the two things that can go a bit crazy. Good luck!