Posted on: 13 March 2014
Visual Style Guides: Designing for consistency
All the big brands have one, do you? It exists to help keep the brand in tact and consistent no matter where it’s used or how it’s seen. This is what makes an organisation recognizable without seeing a company name or logo. But as important as something like this is, it is often thought of as an add-on, something extra. It’s not.
What is a Visual Style Guide?
A visual style guide is a document that describes in detail the intent of the design and specifically how it was built. It also forces the designer to articulate their own visual system and maybe find inconsistencies and correct them before the product is developed.
Why create a visual style guide?
Creating a style guide is an amazing tool for both the designer and anyone trying to understand and build on what has already been created. Having this type of functional document will help aid design consistency and ensure that the intent of all the previous design work stays intact. This can encompass such things as logo use, fonts, typography, layouts and grids, images, colours, specifications and guidelines on all of those, tone, and of course visual examples to support each rule. Some style guides also offer sections on code, icons, badges, button hierarchy, and the list goes on.
What is visual consistency?
Visual consistency is a well-planned layout that fits across many different layouts- layouts with completely different functionality and purpose. This is far more detailed than one might think.
Before starting any type of project with multiple layouts and complex interactions, I always look at the project as a whole and not as individual pages. Approaching the problem from this angle will help you think systematically.
The ability to approach a design in a systematic way is always a challenge, where to start, what will work, and what won’t. A lot of this is really discovery in the early stages of constructing visual layouts (iteration is your best friend here to getting the design in a good place).
TIP: I find that starting with a grid and a few pre-planned colour palettes help keep me on track.
As these problems start to work themselves out inconsistencies start to become more obvious. It could be a type style only used once or two colours that are almost identical being used in a random manner. Resolving these things creates hierarchy and methodical design choices.
If you start seeing inconsistencies you just can’t put your finger on it’s sometimes easier to just pull these elements out of the design. This can help to really understand their system. Look at them in an isolated way see if they all share the same colours, sizes, curves, etc.
In the end, the creation of a style guide should be built into your creative process. Keep it clear and easy to follow. If your visual style guide is exceptionally long, consider creating a mini version. After all, the point is to not just create a style guide, but to have it followed, right?