Defining the Online Style Guide in UX

Style guides are becoming more part of our UX design process here at Nomensa. In fact, it’s now very difficult to create a website without the rigour of cataloguing the system in some form of a guide. They are useful for the internal team as a reference and also promote consistency for future designs.

There are lots of different forms of guidelines which exist for different purposes. They are defined by the type of audiences viewing them (fellow Designers, Developers, Marketing Managers) and also by what they’re being used for.

Here’s a quick look at some different types:

Brand guidelines

Also known as:

  • Design manual
  • Brand style guide (eg Uber)

Traditionally used to explain the brand and how to use the design elements of a company's brand. This will often contain top level design principles, tone of voice, photography guidelines, rules for logo usage.


Design Language - Guidelines for Designers

(e.g. Apple, Microsoft, GoogleIBM)

Specifying rules but encouraging freedom to create new designs. Often has a wide ranging colour palette, layout rules but no specific grid, typography specified but often without specific sizing.

Style guide

(e.g. Ziggo)

Also known as a:

  • Visual Style guide
  • Website Style guide
  • Style guide

A mixture of design principles, visual guidelines and example components (often images of components) which help inform layout decisions.

NB Ziggo is password protected.


(e.g. Mailchimp)

Also known as:

  • Framework
  • UI Style guide
  • Pattern library

This moves the style guide to the next level and provides all the components in code form for reuse. This is particularly useful for designers and developers.

Table showing the differences between guideline types

Quite often there are a mixture of audiences that need to have guidelines. If this happens I find it helps to create the guidelines in the appropriate place.

e.g. If you have some photography guidelines that describe treatments (such as use of black and white photography and how to choose photography then this should go in the Brand guidelines) where technical constraints such formatting imagery ratios should go in the style guide.

A decision needs to be made early on in terms of forming a 'design language' or 'style guide’ - this depend on the type of audience and how the guidelines will be used. 

I hope this article helps clarify some of the differences.

Add a comment

Fields marked with an asterisk (*) are mandatory.