Recently, I worked on a project where the client was looking to set up a style guide. In this case, they hadn’t yet set up their own branding beyond a logo, so it was a way to begin to explore typography, colour palettes and creating some elements they could carry forward to define their digital guidelines.
This took the form of a PDF with notes for developers, though could also have been developed into an online style guide, linked closely to a pattern library of elements that are common throughout their digital applications.
Defining styles creates consistency within the brand. When style guides are lacking, the application may end up combining a patchwork of styles. If several applications for the same company all have a very different look and feel, it creates confusion for the user, a lack of trust and identity in the brand and an impression of an incomplete or inconsidered final product.
Who are they for?
In terms of our practical applications, those scoping at the start of the project should be aware of the overall brand values. Style guides can be set up referencing existing brand guidelines, and used by UX and visual designers to define the look and feel of the application and developers to ensure elements are correctly fitting to the overall brand. The client can be reminded at any stage of how their values have been considered.
What can be included?
Style guides can begin in a Lean way – a pared down version with the minimum required. Some elements could include:
Similarly, pattern libraries, which define elements with snippets of code, can be set up to run in tandem with the style guide. A good example is Lightning Design’s system or the excellent guidance provided by GDS.
When to use them
Style guides are best implemented early on, to reduce the amount of time required to make changes much later in the project. They don’t end, but rather organically grow, as the project expands. Keeping the style guide (and pattern library) up to date throughout the project gives consistency and consideration to the final product.
- Adam Fairhead’s post on Creativebloq about using Lean Style Guides
- How to build a visual style guide
Do you have any experiences of creating style guides? Leave a reply below or contact me by email.