Achieving consistency with style guides

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:

Logo use – application of the logo throughout different situations. Considerations may be the size, colour or position.
Tone of Voice – personality of the content. How is the copy written? Will it have a naturalistic language, or be full of specific technical speech?
Typography – the primary (or secondary) typefaces. This can be listed in terms of headings, body or other styles.
Colour palette – RGB/hex values showing primary and secondary palettes. Colours that are used throughout a system.
Imagery – photography or illustration style. This could be anything from dramatic black and white photography to complex vector background illustrations. All imagery should fit with the tone of voice.
Iconography – style and application of icons. These may be from an existing set, or specific to the product/system.
Animation – styles for the animations of different elements. For example, the way menus open/close on click, or hover effects on buttons appear. This should fit with the tone of voice, be it subtle transitions or playful background animations.

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.

GDS Design Principles

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.

See also:

Excellent examples

Do you have any experiences of creating style guides? Leave a reply below or contact me by email.