Normally for a project as small as Breeze you wouldn’t produce a style guide because pretty much everything you need is in the mockups and because there are so few screens, and only me working on it, it’s quite straight forward to keep things consistent.

That said, I am about to create the final interface mockup in vector format so it would be nice to have the colours for the “weather disc” in a more formal presentation than the quick bitmap paint blobs I created earlier. It’s also an opportunity to discuss and share other style guides, just in case a project you are working on ends up becoming a multi-page website or multi-platform app.

In essence, as style guide should provide formatting and presentation information to allow a brand and experience to remain consistent i.e. what typeface to use in what context, how large the different headings should be, colours, acceptable use of logo, how much padding, etc. basically anything that has a visual presence in a project needs rules assigned to its use. This is especially important when there are two or more people working on the same project.

Style Guide for Breeze

Bringing all these rules together and presenting them as you expect them to appear in a project is what constitutes a style guide. Here is the example I created for Breeze:

You can download the PDF from here.

In this instance the style guide isn’t particular useful (other then formalising the colours used to represent temperatures and wind speeds), but it does serve a second purpose. It demonstrates you went through the process to try and maintain consistency and if you’re going to be assessed on branding a project, it’s perfect evidence.

Style Guides for Larger Projects

As I’ve already mentioned, the above represents a very simple example of a style guide. You need to look to the big brands and projects to see where they become useful.

Below is a small collection of guides I am sharing because of the varying size of the products they are attached to and because of their familiarity, starting with possibly the most important; the BBC:

Global Experience Language – BBC Style Guide

In true BBC fashion, they have such a huge amount of content on differing platforms to manage they had to move beyond the typical style guide and produce, what they call, a Global Experience Language (GEL). It’s rules are the heart of every BBC product and cover everything from TV graphics to a mobile website.

A huge undertaking then and the response is equally huge and impressive:

Screen Shot 2013-06-07 at 10.44.28 — Because of the enormity of the task, the creators of the response based all style decisions around a 10 point philosophy.

Screen Shot 2013-06-07 at 10.43.01 — A look at the typefaces used throughout the brand and an example of its evolution.

Screen Shot 2013-06-07 at 10.42.01 — Pixel precise measurements provide the development team with clear instructions on how and where to place elements of the interface on the website.

Screen Shot 2013-06-07 at 10.43.43 — They even designed a bespoke set of icons with fairly flexible usage instructions demonstrating trust in judgements between design and development teams.

Visual Masterclass – Google Visual Assets Guidelines

So with the BBC’s style guide we saw an example of a company who predominately have a national audience, no fixed demographic and a range of media outputs. What then, is the difference in generating and applying visual styles to a product line that exists only on screen and represents the forefront of cutting edge web-based technology to the entire planet?

Let’s take a look shall we?

Screen Shot 2013-07-10 at 21.24.02 — I love this little introduction to how Google’s icons should be perceived. It really sets the tone for the rest of the document. Not many words but saying plenty.

Screen Shot 2013-07-10 at 21.24.37 — Clear evidence of their shift from the simple to the simplified. Google never really relied on skeuomorphic design for any of its elements in the first instance so they have less distance to travel than some.

Screen Shot 2013-07-10 at 21.24.45 — No discussion, just a title and some examples. This speaks volumes without raising its voice.

Screen Shot 2013-07-10 at 21.24.55 — Again, 2 words and a some images is all that’s required to get this point across.

Screen Shot 2013-07-10 at 21.26.02 — But just because there isn’t reams of writing doesn’t mean the details are being neglected…

Screen Shot 2013-07-10 at 21.25.45 — … even the fine details.

Screen Shot 2013-07-10 at 21.25.32 — It is clear how icons of this ilk should be coloured.

Screen Shot 2013-07-10 at 21.25.19 — Once again, hardly any words required.

Screen Shot 2013-07-10 at 21.25.03 — And finally, the potentially tricky aspect of shadowing described with 2 illustrations and some clear right’s & wrong’s.

View the full guide here: Part 1: http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

Here we see a clear and concise guide that doesn’t shout because the design can hear them yet the creators have provided a road-map for the successful creation of pretty much any new asset as well as details on how to update the current the ones.

This guide was issued in 2012 and since then, Google have overhauled pretty much all of their provisions, products and services with this new visual style.

One thing that is more than just an overhaul of visual style is the inclusion of increasingly complex contextual illustrations, and rather paradoxically, because they’ve adopted a simpler visual direction, they are free to use illustrations and infographics without clouding the meaning or their intentions.

Here’s some examples:

Screen Shot 2013-07-10 at 21.51.54 — The concept of including more illustrations, specifically on product homepages is a clear attempt by Google to make their products more accessible and attach an element of fun.

Screen Shot 2013-07-10 at 21.52.04 — I won’t spoil your viewing pleasure of this part of the guide (visit link below) but it is clear to see they are now differentiating their target audiences into personal and business. The new visual style allows both of these goals to be realised.

View the full guide here: Part 2: http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

Overprotective – Macmillan Brand Identity Guidelines

Google’s style guide is a triumph of detail and elegance that answers all questions before they’re asked; all delivered with a gentle tone from people with a fastidious attention to detail.

The final example under the spotlight is the style guide for Macmillan Cancer Support.

Before we start, I just want to make it clear that this, in my opinion, is an excellent style guide. One of the most detailed (to the point where there’s a brief Photoshop tutorial) guides I have ever seen… but it is a mirror opposite of Google’s and is worthwhile briefly exploring because it’s good to compare contrasts.

Now, they have every right to protect their brand but it treats the reader as a bit of an idiot:

Screen Shot 2013-07-10 at 22.18.08 — This point could be made without the overbearing information and slightly patronising examples.

Screen Shot 2013-07-10 at 22.20.22 — Who hates to say it? The founder of Macmillan? The people who are supported by them? Or a designer of the branding?

Screen Shot 2013-07-10 at 22.22.20 — You do at least get a Photoshop tutorial – but is this because you (the designer working with this brand) are not trusted?

Now I understand that MAYBE, the creators of these branding guidelines had to be so rigorous with their explanations because the people working with this might not all be designers due to the different relationships people have with this organisation. But I’m sure this guide isn’t targeting the fund raisers and the event organisers (directly), especially if you’re giving advice in Photoshop.

Therefore, for all its detail, if I were working as a designer for Macmillan and I was handed this, all I would think is “they clearly don’t trust me, or my training…”.

Conclusions

Anyway, that’s enough on style guides for now.

In short, style guides only really become useful when you’re working on large projects where you depend on other designers (take that however loosely you want) to help keep a consistent approach to visual communication/design, and it should be fairly obvious that the detail they cover is directly proportional to the amount of objects, products, services, departments etc. and number of people working on them.

For smaller projects, brief style guides are still useful for quick visual reference to help keep various elements consistent in presentation and range from sticky notes with dimensions & colour codes on to single page keepsakes like the style guide I created for the Breeze App.

James Field Designs

Breeze Style Guide & Style Guides for Bigger Projects