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

<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

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.

null

Is your website accessible?

A large proportion of users cannot gain access to the information and services the Web provides and this represents a dichotomy. The Web was designed to provide universal access to information, however many web sites are inaccessible to people with disabilities. This paper examines web accessibility and provides simple methods for checking a site’s accessibility.

Read blog article

null

How to configure Jaws to optimise the UX

By understanding the ways in which Jaws can be configured, it is possible to easily tailor the Jaws environment to suit your needs. This can make the user experience both more efficient and more enjoyable.

Read blog article

Let's work together

We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.

Contact us