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:
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?
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:
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:
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…”.
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.