Defining the Online Style Guide in UX

ts

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.

Example: http://brand.uber.com

<img alt=Uber Brand Guidelines"" src=“https://static.nomensa.com/MF_blog_uber_0_bef8ad1d7c.png” />

Design Language - Guidelines for Designers

(e.g. Apple, Microsoft, Google, IBM)

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.

<img alt=IBM Design Language Web Page"" src=“https://static.nomensa.com/MF_blog_ibm_0_97ec6ab654.png” />

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.

<img alt=NB Ziggo Visual Guidelines for the web"" src=“https://static.nomensa.com/MF_blog_ziggo_0_4062c749d8.png” />

Toolkit

(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.

<img alt=Mailchimp toolkit"" src=“https://static.nomensa.com/MF_blog_mailchimp_0_b61866f933.png” />

Table showing the differences between guideline types

<img alt=Table showing the differences between guideline types
“” src=“https://static.nomensa.com/table_for_blog_0_cbd6d568bb.png” />

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.

Further reading

• Creating a brand the UX design agency way
• Defining brand experiences in a digital world
• Moving to UX design maturity

UX design can be a real differentiator for your products and services, let us help you to set yourself apart from your competition.

If you would like Nomensa to help you with your user experience challenges or to provide you with a UX evaluation of your website/mobile app, please don’t hesitate to get in touch.

You can give us a call on +44 (0) 117 929 7333 or submit this short form. In the meantime, take a full look at the UX Design services that we offer.