I Like Your Style! Create a Simple Style Guide to Save Time

Your website is built and launched, and it's time to  get to work on maintaining your site with images and content, and getting traffic through social media and email marketing campaigns.

It’s hard work, and you have many sources for content. There is a risk that it can all get a messy.

Style Matters

More...

Creating a style guide can make it a little bit easier to create consistent, professional content across all the platforms you use.

Brand Integrity

High converting websites consistently have one important trait: their scent. It’s also known as “integrity of branding”.  At every touch point (website, social media, documents, emails, email marketing etc) the person viewing your content will know, consciously or sub-conciously, that it is your content.

Flask
Flask
Flask
Flask

When they click on one of your social posts, or ads or other distributed content, our users will know that the content they arrive at is where they expect to be, and that this step is the next logical step in the trail. The scent removes interrupts and unconsciously tells them that they are on your trail. Following you.

When you have a dozen people making content of all kinds, whether they are from within your organisation or outside, you want want them to create content that has your branding and your scent.

A style guide saves you, as the website administrator, valuable time.

What Is A Style Guide

Enter your text here...

A style guide means different things to different people. It is exactly what it's name implies, a guide on how to use the branding style of our organisation. A big corporation might have one that looks like this:

Mall of America Style Guide

This also has a video.

A small business or not-for-profit needs less complexity.

THE ONE PAGE STYLE GUIDE

Website Success Lab uses a much simpler, One Page Style Guide. We print it and keep it handy whenever we are creating content. With easy access to the colours and fonts, and how they are to be used, we save a lot of time, and content creators can deliver content that needs less attention before publishing.

There are 5 parts to the One Page Style Guide:

  • Logos
  • Ancilliary graphics
  • Colours
  • Fonts and heading styles
  • Accessibility

The other steps needed to make this work most efficiently are to:

  1. Share your logos from a central shared space (Google Drive, Dropbox, Onedrive).
  2. Ensure that your content creators have access to the font on their local computers. Use Sky Fonts to provide easy access to the Google Fonts  on the desktop.

Logos

Whether your logo was created by a volunteer on a Friday afternoon, or you spent tens of thousands of dollars for a full branding consulting process, your logo is an important part of your organisation’s identity. It should be used consistently, presented with respect and never changed arbitrarily.

At a minimum you should have:

  • A large, small, and medium sized logo in full colour
  • The above with a transparent background
  • A large small and medium mono/ greyscale logo
  • A large small and medium reverse logo (one that works on the opposite colour to your primary logo – ie on black instead of white)

These should be available in .png and/or .jpg and in high resolution.

Ancilliary images

Favicons, logo parts, other standard branding images and other images that you use routinely to embed your brand in your content should be made available and noted in your One Page Style Guide.

Some of these might need instructions on how and when to use them. For example, I have three colours for my Favicons. These are used on the website (they appear next to the page name, and on the bookmark bar when anyone bookmarks the site), and I will use them in course content as I create it, but I don’t want those used in downloadable documents, within website content or as part of other images.

Fonts

Use simple fonts for your website text. Make it easy to read and ensure it displays properly on mobile and in different browsers. There is some complex neuroscience around fonts, but keeping it simple is your best path to success.

You can use a different font your heading styles but also make sure these fonts are easy to read and work in different browsers.

Your website designer will be able to tell you which fonts are in use on your website and logo. If you have purchased a template for your website the information that came with it should document the exact font styles.

Translate the website fonts to document templates. This reduces complexity and people won’t have to think too hard about what fonts to use. Do this by making sure that everyone has access to the font files. Using Google Fonts and Skyfonts is the easiest way to do this.

The rules about fonts should be clear to all content creators: Use the standard fonts and don't change font styling.

Fonts for messages on images (sometimes known as memes) can vary to emphasise the message, but keep the style reflective of your website. Changing fonts, colours and image style in a meme may disrupt the scent and confuse your users.

Colours

This is the most common mistake people make with branding and styling. Colours display differently on different devices and they may not look quite like you expect. It is important that the colour is used by code, not by how it looks on your monitor.

Colours on the website are identified using a hex colour code. This is 6 digits and letters following a #. You can use this number to input the exact colour in imaging software (such as Photoshop), website editors and image services (such as Canva). This way you will get the right colours every time. You will also be able to properly select a tonal match.

In Word and some other software, you may need the RGB code which is a ratio of Red Green and Blue in the colour. This is 3x3 digit numbers.

There are other ways to identify colours. For example, if you are doing a lot of professional printing you may need the CMYK colour identifier in your style guide. Ask your printer or designer if you need assistance with that.

Styles

Your style guide should contain at least Heading1 (H1), Heading2 (H2), Heading 3 (H3), and standard text style. These styles should indicate font, font colour, font size and any unusual styling such as justification or underline.

Using styles correctly will create consistent content, both in your website and in documents. Here are some principles:

  • Don’t skip heading styles. This disrupts the flow of the reader.
  • Make heading levels visibly different.
  • Don’t use italics in heading styles.
  • Don’t change the style of a heading.
  • Don’t use random styling or heading styles in line for emphasis. Use a quote style, or bold.

Changing colours, fonts and font sizes in the middle of a paragraph just looks amateur.

User Experience - Contrast

Have you ever been to a site that makes you strain to read the text because of the colours, or where the background is dark and the foreground is so bright that it distracts from the content.

People who find it difficult to read because of a vision impairment, such as older people, and blind people, may need to use technologies to read your website, such as screen readers, zooming systems, or colour changers. These technologies expect your site to follow certain standards, including the styling principles we talked about before. If your site is not set up to be easy to read with these technology, the ability of people to get what they need from your site is diminished, sometimes they can't read it at all.

One of the most important parts of giving your site visitors a good experience is the contrast.

Good contrast makes your site easy to read. Having text colours that poorly contrast with the background means your readers will find it hard work.

Create a contrast table for your style guide. The table indicates which colours contrast well with other colours.

WCAG2 is the international standard for website accessibility and an important aspect of this is contrast. Your website meet the standard from at level A, AA, or AAA. which is the most stringent compliance level. 

With your contrast aim for WCAG2 AA level. You can test your colours here.

Instruct your designers to meet the standards right at the beginning of your website development process. They may resist, but your site will be better if you insist on it. A good designer will meet your brief with accessibility.

In your Style Guide, create a matrix of colours. This is easy to do with a table in your word processor, and it is already setup in our downloadable template, just fill in this form at the bottom of the page to get access to the template. 

Test your colours as foreground and background and note whether they pass, fail or are compliant for WCAG2 AA at font sizes of 18+.

If you have a lot of colours it may take some time to create the matrix. You only need to do it once and record it in your style guide. When you have it, people will reference it regularly and create content and images that will be easy to read.

These are the steps I used to create the content matrix in my document:

  1. Insert a table in a document, or use a spreadsheet. (Office or Google)
  2. Add your colour hex codes to the first rows and columns.
  3. Along the diagonal note N/A these are the same colour as background and foreground.
  4. Fill the cells in the rows with their corresponding colours. These will be the backgrounds.
  5. Go to the Contrast Checker. There are others checkers, but this is easy to use, displays clear results, and it can create a PDF for you at the end if you remember to save to the list.
  6. Set the background for one of your rows.
  7. Test each other colour as foreground.
  8. Note in the corresponding cell in your table whether it Passed, Failed, Passed A or Passed AA18+
  9. Repeat 6-8 for all your background colours.

This is actually the most used part of our style guide. It is easy to ensure that content and images have good contrast and to choose colours for different applications, such as text on buttons, on images, and in content widgets.

Putting it all together

Now that you have your style guide contents you can create the guide.

This is what the Website Success Lab Style Guide Looks like:

Website Success lab Style Guide Snap

 I’ve included an example Word document that you can download to get you started. This has a page 1 with example content that looks just like the Website Success Lab snapshot above. It also has Page 2. We look into this in the next section.

Style Guide Page 2

The second page of this document can be used for additional details such as:

  • Tools and resources you use regularly for content creation.
  • Contact details of your designers and website developers.
  • Additional constraints on styling.
  • Descriptions of the tone and language to be used.
  • Gramatical conventions. For example, do we use Australian or US spelling.
  • Word length recommendations for different types of content.
  • Image size specifications.
  • Anything else useful to your content creators.

Now you’ve done it, what to do with it?

Distribute the style guide to all of your content creators, particularly if they are sourcing images, making videos, documents and presentations.

Hopefully this will help them to create consistent content that not only provides great value for readers, but also looks compelling and doesn’t distract from your site.

Saving Time

There is more you can do to save time for your content creators, and yourself. Here are some tips:

  • Learn to use the editor in your website, especially to apply styles.
  • Create template documents with heading, text, quote and other styles included with the correct font and colours.
  • Make sure that everyone is familiar with proper use of styles in whatever word processing system you use.
  • Consistently use styles in the proper order. Don’t skip styles just because the priority of your text doesn't seem to fit.
  • Skipping styles is more confusing for readers.
  • Learn how to add a colour theme to your Word document template. This will save a lot of time because you can pick your colours directly from the theme rather than having to enter the RGB code every time.

Don't forget to download the template. The form is below.

Like us over on Facebook. Share your experience of using the style guide.

Lisa Harvey