via Flickr by Sheila Sund
via Flickr by Sheila Sund

[alert]The aim of this guide is to help you create a store style guide to ensure that your client understands the different elements of your design in order to help them use the design for proper branding.[/alert]

In order for branding to be effective, it must be easily recognizable; the viewer should immediately associate and identify the branding materials with the company that they represent.

A big key to branding materials being recognizable is for them to be visually consistent. A style guide will help maintain visual consistency by showing and telling your client how to use the different design elements.

Keep in mind that your client has not had your training and as such does not have as unerring an eye for what looks good and what doesn’t. Providing them with a style guide will keep them from experimenting too much with your design and preserve both your designs integrity and your reputation as a designer.

There are four major design elements that should be included in your style guide: logo, color, typography or fonts, and images.

Step 1: Show Your Client What The Logo Looks Like

The logo is the most recognizable part of a brand identity; it is also the one that will be subject to the most possible use variations.

Make sure your style guide includes different images of the different variations of your logo design.

Step 2: List Down The Different Situations In Which Each Logo Can Be Used

Not only should your style guide include all possible variations on the logo look, it should include the different situations in which each logo look should be used.

Step 3: Explain The Different Variations On The Logo Look

Depending on how your client will use the logo, there will be variations in the design. Make sure to explain these variations. Include acceptable colour variations, minimum and maximum sizes, layout, placement and even allowable white spaces.

The style guide of the University of Illinois gives the user a visual representation of different variations of the logo, including acceptable colors the logo can come in. The guide also shows when and where they should be used.

University of Illinois Style Guide

This example from Vidyo provides visual examples of the acceptable layouts and sizes in which the logo can be used.

Vidyo examples

TIP: Minimum and maximum size ranges are important to keep the design from becoming illegible.

This example from Walmart’s style guide shows how they specify the amount of clear space around their signature and logo.

Walmart example

TIP: Don’t use measurements such as inches or centimetres to measure acceptable white space, rather use a portion of the logo to set the clearance.

Step 4: List Down And Show All Colors Used In The Design

The right use of color is important in maintaining brand integrity. Just think about how different the McDonalds logo would be if it wasn’t for the “golden arches” or how confusing it might get if Coke used blue or Pepsi stopped using blue.

Your style guide should include a defined color palette. Have a visual representation of every color – in every shade – that can be used in the design.

Make sure to clearly define each color by name and color value. You should also provide primary, secondary and alternative colors for every use; values for print (CMYK) or digital projects (RGB, HEX); and pantone colors.

TIP: Make sure to include color swatches aside from color names and values.

The following examples from the style guide of Channel 4 and the Scouts contain color swatches, names and values.

Channel 4 example

Colour Palettes

Step 5: List Down When The Different Colors Should Be Used

Make sure to explain when and where each shade of color in your color palette should be used. Tell your client which shade should be used for backgrounds, or texts or other design elements. Include situations in which a certain shade should be used.

Step 6: List Down And Show All Fonts That You Used In The Design

You need to specify what fonts you have used in all aspects of your design. Include guidelines for additional styling, size and use of color.

This example from Heineken’s style guide contains the basic information on acceptable fonts. It presents the three primary types of fonts they use and a bit of instruction on when to use them.

Typography example

Step 7: Explain Which Fonts Should Be Used In Specific Situations

Make sure to include guidelines for when each font should be used and how it should be used. Specifying size and colour is especially important as it will ensure that the text will be easily visible and readable.

This example from the style guide of Kew Gardens specifically states that italics are only for Latin names. It also shows examples of the fonts in acceptable colors.

Typography example2

Step 8: Provide Image Guidelines

You should provide guideline on how images should be gathered, edited and used. Images used should help establish a particular tone which should reflect the entire brand.

TIP: The best way to explain is to show them examples of acceptable and unacceptable images.

Take this example from Adobe. The style guide emphasizes the use of images of people to allow people to better emphasize with the subject material.

Image example

The MacMillan style guide also present several examples of the sort if images that should and should not be used. It also dwells on how they should be presented, including tips on cropping and editing.

Macmillan example

Learn From Others

A style guide doesn’t have to be a weighty tome. A simple one page document covering the four basic elements can suffice.

This article has an example of a simple one page template that you can download and use for your style guide.

For inspiration, however, you might want to take a look at some of the style guides listed at these links:

You might also want to check out this youTube link for additional tips on how to make your style guide

Final Checklist

  • Show them all the different looks that the logo can have.
  • Explain when the different logo looks should be used.
  • Provide a color palette.
  • Explain when each shade in the color palette should be used.
  • Show them all the different fonts that can be used.
  • Specify when the different font variations should be used.
  • Provide them with image guidelines.



I'm Katrina McKinnon, creator of eCommerce University, founder of McKinnon Group and Small Revolution. I'm using my 20 years' experience in building and operating online businesses to create engaging educational materials that helps others become successful online workers. Find me on LinkedIn and Twitter.

Write A Comment