How To Create A Store Style Guide For Every Designer

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.

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.

You need to know this guide because …

helps create consistency across all of your business materials
serves as a single communication material which defines your store’s identity
is shareable within your team and/or outsourced staff – allowing more control over your brand
serves as a crucial document for new ventures, projects, store updates, and such

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. It is important that your store’s identity is clear and already in place because this will help you establish a style guide that’s unique and in line with your brand.

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.

Think of your brand as a person. How do you convey this personality through your store/brand? Identify the traits that will appeal to customers.

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.

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

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.

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: Use color swatches of your preferred primary and secondary colors to ensure that whoever will use it will be able to determine which colors are used for specific elements (such as buttons, banners, font color, etc.) on your website and/or other content types.

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

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.

Start with fonts for headlines, sub-headlines, product descriptions, captions, and others. Update your documentation as you progress and share it with your client.

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.

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 smashingmagazine specifically shows the different meaning of Slab Serif and when to use it. Also, it shows examples of the fonts in acceptable colors.

screenshot of Slab Serif use — screenshot smashingmagazine.com

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.

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.

Step 9: Define Your Brand’s Tone and Voice

Your product will help you identify your brand’s tone and voice. Most online stores use a casual, friendly tone and voice that appeals to customers because they are more personable.

Virtual Assistant Checklist — **Download your free cheatsheet of Virtual Assistant Freelancer**

You can start by asking these questions:

Should you be friendly, quirky, or funny?
Or should you be serious, strict, or straightforward?

Essentially, your tone and voice should be consistent. They should resonate within your store’s content, marketing, and communication materials.

Here’s a guide from Mail Chimp which is perfect example of documented tone and voice for different content types.

Step 10: Create Templates For Specific Content Types

With a style guide on-hand, you will be able to create a template for each and every page of your e-store as well as online/offline marketing materials. It doesn’t have to be elaborate and complex, but concise and easy to use for any of the staff.

Once the templates are in place, it will be a lot easier for you and your staff to stay consistent with any e-store content creation and update.

Example Of Simple Style Guides For Inspiration

Please note that these three examples are here to inspire you to create your own style guide. They are actually part of either a more comprehensive design manual or several-page-long style guide.

The idea is to take a look at how each style guide is organized according to elements such as logo, colors, typography/font, and other graphic elements, so you’ll be able to create your own style guide that is neat and easy to understand.

The best part of creating your own store’s style guide is having your staff help you in the process. So, if you have a graphics guy on-board, you can ask him to help out with the color palette and logo, for example.

Example 1: Qapital

Example 2: Yelo Spa

Example 3: bourne

Sample Template Of A Simple Style Guide

You can create your own simple style guide like the one we did above. You can update the format and the placing of elements according to your preferences.

This is just to give you an idea of what your store’s style guide should include based on the steps we’ve listed earlier. In creating a template for each content type, you may refer to this simple template and update the necessary elements that each one calls for.