text-highlight
Jun 20, 2017

Creating a simple design style guide

by Nick
Nick Parker
Founder & CEO
“It's good... I just made a couple of changes”

With fifteen years’ experience running his creative agency, Nick works with small and large businesses from a yuuuuge variety of industries. His skill set reaches from floor to ceiling. 

From graphic design to UI, he always puts the user first, himself second, his friendly neighbour third, and so on and so forth. He enjoys crafting immersive experiences that encourage deeper engagement. He is a recovering emo.

Lightcreative  Nick  V2

There are quite a few ways to approach a design style guide. In this article we're going to focus on a simple, low-fuss, bare-minimum style guide, designed to prevent your visual brand identity from being butchered by third-party suppliers. Because let’s face it, no one knows how to look after your brand baby quite like you do. 

Whether you're the designer or the brand owner, it's important for you, first and foremost, to understand where the brandmark (logo) will be used and how it should be applied. If you don’t have clarity around this, then it’s ridiculous to get upset when your brand is thrown to the wolves and liberties are taken. So, take the time to produce a simple design style guide to avoid any inconsistencies and brand confusion.

Image
Don't let anyone disrespect your brand.

Below are the four bare essentials you should include to prevent branding chaos. We’ve used the design style guide we produced for our homies at hsquared to illustrate what we’re talking about.

1. Logo variants 

Your brandmark should be flexible…within reason. This means you should be realistic with all the different applications your brandmark will face, and design accordingly. Consider:

  • Will the brandmark need to work inverse on a coloured, or dark background? Probably.
  • Will it be used in one colour publications? It’s possible. 
  • Will it need to be reproduced in miniature as a favicon? Most likely. 

In the case of hsquared, we identified that the full inline brandmark wasn’t always going to be appropriate, so we produced an alternative lockup with significantly reduced detail that’s far more legible and recognisable at a smaller size.

Artboard Copy 9 Lit Hsq Blog
Logo variants for hsquared.

2. Minimum size and clear space 

Once you’ve created rules around the logo variants, make sure you define parameters for sizing and space. Minimum size is sometimes tough to define. You can’t always predict when you’ll be designing for different situations, like tiny favicons or sponsorship that crams your logo alongside ten others (don't crowd the logo please! Give it some breathing space!). But having some simple parameters for people to work within will help prevent any diabolical treatment of your brandmark. It’s also a good idea to define the clear space around your brandmark. This is the imaginary forcefield that prevents the brandmark from being placed too close to the edge of a page and protects from unwanted intrusions by other nearby graphic elements.

Artboard Copy 8 Lit Hsq Blogaaa
Minimum clear space and size for hsquared logo.

3. Typography 

Your design style guide may end up with a range of typefaces to be used in different scenarios. At very least, you should define the core typeface and styles that can be used throughout any collateral. 

Quite often you’ll also need to define the web font separately, as your core typeface may not be appropriate for use online. Another alternative you may want to include is system fonts, for those times that a computer doesn’t have your preferred font installed. This can happen with applications such as MS Word or within emails. By defining all the best case alternatives, you ensure the best possible outcome for brand consistency when those unexpected scenarios arise.   

Artboard Copy 6 Lit Hsq Blog
Typography variants for hsquared.

4. Colour palette 

Then there’s your colour palette. This part is pretty fun but super important, so you’ll want to get it right. 

When choosing a palette, make sure you consider both print and digital usage. RGB and CMYK present quite differently, so spend some time picking the colour breakdowns that work best for both. The breakdowns you should include are CMYK (for print), RGB (for screen), HEX (for web), and a lot of printers also like you to define a PMS (for offset printing). 

You may also decide to offer up tones of each swatch, for those times when a designer requires more freedom to express their creativity.   

Artboard Copy 7 Lit Hsq Blog
Colour palette for hsquared.

There’s a heck of a lot more that can go into a style guide but as a bare minimum, make sure you define the four essentials:

  • Logo variants
  • Minimum size and clear space
  • Typography
  • Colour palette

Your brand will, at some point, be in the hands of a printer, publisher, or designer who is more concerned about their next coffee break than with the 80mm of clear space that you want around your brandmark. So by handing over these few simple rules, in a conveniently packaged design style guide, you’re simply saying, very politely: “Take care of my baby. Here’s how”.  

Light Creative is a Melbourne-based creative, content, and digital agency.