close

Shelley Bassett

Menu

Close

Creating a Style Guide

Laying out a Style Guide


May 16, 2018

What goes into a style guide, complete with a downloadable template to kick start your design process.

Along with brainstorming numerous ideas and creating a mood board to sum up the final direction, a style guide is an important document for any designer to master. Style guides can be used for a number of reasons, from defining a brand identity to the basic visual guidelines for a new website. Despite the name style guide, the rules laid out in a document like this should be strictly adhered to. Unlike a mood board, this isn’t an inspiration document. These are the visual rules for the project.

Style guides are used by many different people, often within the same company. The role of the style guide is to keep each element of the project or brand on brand. This means that the presentation is uniform across all platforms and media, from web, to packaging to stationary.

Laying out an in-depth style guide isn’t an easy task. But there are a few things that a good guide will include. And if you’re struggling, I have a free template for you to download.

Types of Style Guides

The diversity of applications that a brand might see can create many different types of style guide. This can create many varieties of document, or incredibly in-depth ones. Here are a few common types.

Branding

A branding style guide is going to focus mainly on the elements of the brand. This will include things like logos, colours and fonts. It might also include technical specifications describing how much space should be left around logos and icons. Additionally, include when to use various forms of logos or other icons.

Document

Document guides may include elements of the brand along with additional guidelines. They focus on fonts and typography, and may include how images should be used and referenced. Page layouts and grid guides are also useful.

Web Design

Web design style guides follow the rules of branding guides. They will probably include elements of the branding, but, like a document guide,  will expand on this with web elements like heading and paragraph styles, button styles, and image guides.

Style Guide for UrbanGreen.Garden

Style Guide for UrbanGreen.Garden

What to Include

Style guides should be more than just a list of instructions for designers. A good style guide will show how each element ought to appear. It’s not always easy to know what to include in these guides. Include enough information that the brand will be presented consistently without overwhelming the user. Identify and focus on the key elements that are reusable across designs. The style guide doesn’t need to be all-encompassing, but should create a solid foundation.

Logos

Every company will have a logo or word-mark, it is the face of the company, and often the most recognisable feature of the branding. Even simple or text-based logos require some form of instruction. It might be placement, size, surrounding white-space, backgrounds or any combination of these. Take special care if there are different sizes or version of the logo to encompass different scales. Be specific and clear about what constitutes correct usage of the corporate logo.

Colours

Like the logo, a colour is often a very easily identifiable part of the brand. Document the most common and important colours well. Include HEX or RGBA codes for web and CMYK for print and document guides. Also reference colours that belong together or need separating. This can be done visually in the layout or with a simple footnote. If one colour is a few shades off, it can bring unwanted attention to an area of the design.

Typography

Typographic style guides can range from very simple to incredibly in-depth. At least, the fonts and where they appear ought to be listed. Going deeper, it is often helpful to reference the weight, size, line height and other elements to create a uniform appearance. This is especially important for the presentation of large areas of text.

Interactions

If the style guide is for a website, app or other project that people might interact with, it’s good practice to include elements that have different states. This could include link styles before and after being clicked, or even what it might look like during a mouse-over. Buttons, forms and popups (modals) are also important to consider. These elements have to be functional and legible at each state, while still fitting with the feel and brand.

Style Guide for Massacre in Melbourne

Style Guide for Massacre in Melbourne

A Sample Style Guide

A style guide ought to follow it’s own rules, which is why they can be such a tricky document to create. After identifying the elements required, be sure to include enough information on their use.

To get you started, here’s a really basic style guide, ready to go. It contains places for logos, typography and colours. The zip file contains a PDF and and InDesign document, easily edited and customised. Feel free to adapt it to your needs.

Got suggestions for updates? Leave a comment below. And don’t forget to sign up for more great freebies.

Leave a comment

Advertisement

Leave a Message | No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *