Are you looking for the right style for the design of your website or, in general, for your product? Sometimes it’s a matter of consistency. Once the distinctive traits that graphically identify your idea have been identified it is a good idea for them to be constantly present and easily recognizable. Therefore, designers’ tools include style guides. A “style guide” is literally a handbook that helps us to remain consistent with ourselves from A to Z.
“Let’s take a typical design flow: I have to add a page to the website; I start drawing it on sketch/photoshop/illustrator, perhaps with the mock-up of a page already made, by modifying it. I need to insert a list… How did I make the lists on the other pages? And the search begins…”
This is one of the many cases in which it would be convenient to have a good style guide to hand.
What is a style guide like? It is a document containing the whole design system that acts as a guide first for the creation of new graphic mock-ups and then for their implementation. It can comprise numerous sections and be more or less exhaustive according to the team’s requirements.
The important thing is that it is always:
- Up-to-date
- Shared
- Used
A style guide is above all a communication and cooperation tool. In fact, if it is not shared, recognized and used by the whole team it is useless. It can have different formats: the first brand style guides were actual paper manuals, then they were replaced by pdf documents, perhaps stored in shared folders (alas never opened). Now, live, online and often public style guides are spreading, which can also contain a library of components. The latter are particularly advantageous due to the ease of access by the whole team, who will have fewer excuses for forgetting about them.
But why make a style guide?
Style guides offer a series of advantages:
- They maintain the consistency of the design in every part of the product
- They define rules recognized by everyone Once established together and formalized in a tool that is easy to use, it becomes almost automatic to follow them
- Although they require a substantial initial effort, they allow time savings during the product creation step, as they provide all the components already made and the rules for assembling them
- They can replace other types of design documents
- They are a good starting point for explaining the design to new team members, or for handovers
- They replace the handover of oral information which, while being more immediate, can be dangerous, as it relies on the designer’s memory alone.
How to create a style guide
Naturally, creating a style guide for a new product is different from creating one for an existing product.
In the former case the style guide will be created gradually as the new design is developed; but let’s talk about the latter case.
First of all we need a clear idea of the current situation. It is useful to compile an inventory of components, recording every case in which they are presented differently. Take note of colour codes, text styles, elements (such as buttons, icons, text input, checkboxes, etc.), layouts. It is likely in this step to come across inconsistencies in the elements created organically over time. Once all the components have been collected, it is time to remove redundant ones and make a definitive list. To have an exhaustive document, it is advisable to combine at least two types of style guide: design language and pattern library.
The document can be drawn up with the preferred tool, but it is important to remember that the first version isn’t the definitive one. Various revisions may be needed to obtain a really usable result.
With the first ones it becomes clear that in practice some details won’t work as they were designed to and, when this happens, the team’s advice should be taken and the necessary changes made.
At the end a definitive document is produced which can then be used in practice.