How to create a design style guide: 25 pro tips

When handing over a creative project, most agencies for freelancers include a document known as a style guide. This not only adds an additional air of professionalism to the work but rationalises to your client the creative choices you made and that there really was method behind the madness of the creative journey you took them on. Here are 25 tips for ensuring your style guide does the job right in ensuring others do it right.

Words: Paul Wyatt

01. Avoid pomposity

Don't let power go to your head or you'll end up looking ridiculous and unprofessional

We creatives are a sensitive bunch haunted by nightmares about clients screwing up our (much laboured upon) designs. There is a tendency to become over protective, preachy and dare I say…a little mouthy when it comes to rolling these out to the folk who pay for them. A style guide that is overly bombastic in tone, portentous, shouty and mouthy will only end up stifling its creative application.

02. Allow for some slack

Most style guides read like the work on control freaks. They shouldn't. They should serve as a guide to any other agency, freelancer or licensing company who is working with the brand you initially helped develop. They should allow for the brand to develop whilst establishing an overall framework.

03. It doesn't have to be perfect

Obviously we'd all love to spend time and energy crafting the perfect design style guide for each project. But in the real world, that's not always possible. If you're up against a tight deadline and not able to create a style guide with lots of bells and whistles (and examples), be sure to include the most pertinent and helpful information about the brand or piece of work you're created in the time you do have.

04. Essential elements

Start off with:

• a written overview of the company it's for
• a rationale for the work carried out
• information about logos; font usage; colour palette; tone of voice
• photographic guides
• collateral information

If you have enough time, it's worth adding some examples of logo and typographic usage as well as links to master artwork/ brand collateral templates and helpful contacts within your agency or company.

05. Give the client options

Name your design style guide something like Styleguide_lite_v0.1 and explain to your client that this is the “lite” (sic) guide to working with the brand, which is suitable for everyday creative use. Should they wish for an additional more thorough version this can be classed as a separate project… with a separate budget.

06. Hit the right tone

This fun style guide for Danger Mouse feels at home with the colourful cartoon series' style. (Image courtesy of Danger Mouse? FremantleMedia Ltd & ? Cosgrove Hall Productions Ltd. Licensed by FremantleMedia Enterprises)

If you're creating a style guide for, say, a cartoon show then make it as fun, colourful and wacky as that series. If it's for an asset management company, make it as clean and straight down the line as that companies thinking and brand equity is.

This shows the client you understand the brand or television property you've been working on. Plus it will instantly put that tone in the mind of the designer who's given the style guide to use.

07. Guide don't preach

Remember you are producing a style guide which, when applied successfully will produce a common system of elements that work together, reinforce brand values and embrace successful interpretation of that guide.

The wagging finger approach will instantly put the person who uses the guide in school mode. “Don't do this, don't do that” is a surefire way to cause someone to drive someone nuts and want to not use the guide successfully.

In terms of tone you will catch more flies with honey than with vinegar and encourage innovation from the guide's usage by allowing the possibility for interpretation and innovation.

08. Think of it like a cook book

Look on a style guide as being similar to a cook book which is full of brand recipes and ingredients that work well together and create a successful blend of flavours and tastes. It should allow for experimentation but clearly explain where too much of the wrong type of ingredient will spoil the brand broth.

09. Concentrate on the visible

Look around your workplace and you'll (hopefully) see colleagues who look presentable and are nicely dressed. Quite possibly a large percentage of these people do not have matching pants and socks or bras and knickers. But who cares? You (hopefully) don't get to see them. Similarly, in your style guide concentrate on the visible and the relevant. Try not to deep dive into creating colour palettes which then have sub colour palettes and then further sub, sub colour palettes which might never be used or seen.

10. Less is more

Ask yourself if every 'rule' you add to your design style guide is absolutely necessary. By giving too much information you may just end up confusing the creative using the guide - or giving them so much information they won't possible remember all of it.

11. Be helpful and specific

A guide to creating the type treatments used in Danger Mouse

Try to give out helpful and practical advice to the creative reading your guide. If you are using a particular type of overlapping text (see image above) or a certain type of Photoshop treatment (see image below) then think about adding a page to your style guide that explains exactly how to do this.

12. Think creatively

Your style guide is an extension and expression of your creativity. It should have its own guidelines applied to it and communicate the brand simply and effectively. There's no rule that says it has to be in PDF format (although admittedly a lot are) - you could have the whole thing online. Think creatively, but don't over complicate. Five clicks to a logo download are just annoying. Keep it simple.

13. Work with a copywriter

Big, bold words help energise and communicate brand values in an effective visual way

Work with a copywriter to energise and communicate the brand. This style guide potentially will be used client-side by the in-house creative team or sent out to other agencies to be applied in future work.

For your guide to be applied successfully it's essential to communicate effectively in written form the brand spirit; the reason behind the work; what the guide is there for; and what the brand goals are that the creative using the guide should be mindful of.

14. Get the right tone

Adding examples of tone of voice can help someone new to the brand relate to it

Peculiarly “tone of voice” is sometimes forgotten in style guides. A tone of voice section includes a guide to copy tone and appropriate style and how messaging is communicated to an audience.

It works hand in hand with the creative vision. If you think about a brand such as Virgin their tone of voice is quite irreverent and perfectly matches the visuals. A style guide should include these details as it helps to communicate who the brands audience are and the spoken vision which is aligned to the visual one. Hand in hand these both effectively communicate the brand.

15. Proofread your work

Proofread your guide before sending it out. Typos and bad grammar make you look awfully silly if you're sending out a “best practice” guide to your work.

If at all possible, have someone else read the guide for you and ask them to flag up anything that isn't clear, and whether any parts need further explanation.

16. Show elements on a page

An example from the BBC visual language guide of elements positioned on a grid

Don't just say. Do.

The best way to have someone get to grips with the creative vision shown in the guide it to pack it full of examples of what you're going on about. So for example, if an element is to be positioned on a grid, just so then show it in situ.

17. Master artwork and templates

Your guide will be severely lacking if it doesn't include the artwork mentioned in it. Create a repository online for all brand materials and index these by category so they make sense.

One great big list of brand asset download links is of no real help to anyone. Create categories relevant to your style guide and add the links there. Cross link between pdf or web pages to each download as well as having this separate “Download” area.

Add version numbers and dates to template file names which are likely to update over time and do the same with your style guide.

18. Create art-worked examples

Art worked header examples from the BBC visual language guide

Art-working up examples of creative templates can be a great way to showcase how the guide can be interpreted. Also consider supplying these files for download with the style guide.

19. Explain your typographical choices

Informative usage guides for type

"Type which has long and very fine serifs has a habit of breaking up on screen and becoming illegible when used on television, so big blocky sans serif fonts are best."

That, ladies and gentleman, is an informative tidbit of information. If you didn't know much about type then that would prove useful if you had a choice between two brand fonts for an animated type treatment for television.

Pepper your guide with brief tidbits of information like this and remember that not everyone is a type guru. Don't write volumes but instead educate by rationalising and giving examples of usage.

Different types for different media are shown in this guide

Oh and if your brand font is bespoke, supply it. If it's available from a font library, give out the download link. Don't distribute fonts you have no rights to do so for.

20. Rationalise your thinking

A creative example of a visual typographic rationale

If you took a friend to your favourite Angus Steakhouse for dinner and they sat there nursing a single malt whilst refusing to eat you'd think their behaviour quite bizarre.

If, on the other hand, they explained they were a vegetarian you'd immediately understand their predicament and pop out for a stuffed pepper and some cous cous.

Similarly you need to rationalise your thinking behind why a logo would look bad with a drop shadow or why all the type shouldn't be used in title case.

Typographic rationales explained in a style guide

No one's a mind reader and creatives mostly approach style guides with suspicion with the thought that this document will limit their creativity. Rationalise your thinking simply and clearly in order to prevent this.

21. Anticipate questions

At the end of the guide include relevant contacts and create a group email address should the reader have any queries about the guide and need to get in touch should there be something the guide does not explain. Although if you've included all the relevant details in your guide this should very rarely happen.

Also consider creating an FAQ as part of the guide and think about the top 20 questions a creative might ask about a brand when they first approach it. “I hate your logo. Do I have to use it?” is a question which isn't allowed.

22. Take people on a journey

However mawkish that title may sound it's exactly what you're aiming for. Approach the job as if you were creating an immersive creative experience but in book (or online) form. Take the stand that your reader knows nothing about the brand they're about to work with and from the brand mission statement to showcasing collateral examples educate the reader with bite size information about what the brand represents and how the creative elements work together.

23. Collateral flexibility

Collateral flexibility shown in this recent work for wesee.com

Briefly touch on the brand collateral's flexibility. It will show the client you're thought about future proofing your work as well as covering off the potential that your guidelines for a purely online brand may one day actually need an indication of what print, outdoor or broadcast collateral could look like,

24. Leave room for improvement

In order to survive in any commercial enterprise we have to adapt and change. Brands change constantly either organically or to reflect markets and fashions. Creating a style guide that bolts down a brand and stifles it to such a degree where it can't develop over time is disastrous and rather silly. There's always room to grow and develop and your guideline should reflect that.

25. See some examples

Channel 4's style guide is in our list of top examples