Skip to Content Skip to Navigation

Creating a User Interface Style Guide

Updated 15 January 2020 (Published 1 March 2016) by Miles in Website design & UX

Creating and improving a web application as a team can make brand consistency a challenge. Here's how we've tackled it for our employee engagement startup, 6Q.



Creating a User Interface Style Guide

New projects and user interfaces (UI) always begin with the best of intentions. As a designer, I'll usually have a pretty clear idea of how brand and interface design elements will translate across a website or app, and collaborate with our development team to build it with this in mind. But as projects increase in complexity and new features are added by different team members, this original ideal and the reasons behind it can easily be lost in iterations. Our solution for our own employee survey startup6Q, was to create a UI style guide (sometimes called a pattern library) to keep as a reference and make sure the user interface is consistent across the board. Style guides are nothing new - they have been used in the print industry for brand identity for years - but a UI style guide is more than a colour palette and a list of do's and don'ts for logos. 

What is a UI Style Guide?

A UI style guide consists of design elements and rules that can be referred to by designers and developers in order to create a cohesive and consistent user experience. The 6Q style guide is a living document of all of the key brand elements, language, typography and user interface components throughout the web application, hooked directly into the same CSS so that any updates will be automatically reflected in the guide. As a dynamic guide rather than a Word document, it can show how the buttons, dropdowns and modals can be interacted with, animated or changed depending on browser size. 

6Q UI Style Guide in progress  In creating the style guide, decisions had to be made to iron out inconsistencies and update the original plan for the user interface to reflect the evolving brand identity and functionality of 6Q. The guide provided a clear starting point for discussions amongst the team about how each element should look and how it creates a smooth and enjoyable experience for our users.

Why create a UI style guide? 

Whilst creating the initial guide has taken some up front, the long-term benefits are clear:

  • Time is saved by using consistent design patterns rather than reinventing the wheel each time.
  • Design and code consistency is easier to maintain with a single point of reference.
  • Additions to the applications styles beyond the current scope of the guide can be questioned and integrated more cohesively.
  • A shared vocabulary is created around the names of design elements, making it easier for the team to communicate smoothly.
  • Any new designers or developers to the project can easily get a feel for the user interface and ensure their work is consistent.
  • As a dynamic guide it will evolve alongside the interface itself, ensuring that it stays up to date with minimal work.

Part of the 6Q style guide Although UI style guides are fantastic for large websites or applications with a lot of complexity, they can also be a useful reference for consistency in smaller websites managed by teams of people. There are various tools available for creating your own style guide, but one can be made as a simple HTML page as part of your website with a minimum amount of setup time.  

Going forward 

The 6Q UI style guide will likely always be a work in progress, as new ideas and updates are being added frequently. But for every new addition it provides a great starting point to continue to produce that cohesive user experience. 

UI style guide inspiration 

Here's some inspiring examples from businesses who have published their style guide publicly: 

Summary

Like any other guide or manual, creating a style guide helps to save time, maintain consistency, provide easier communication among team members and much more. So, always remember to always create a guide along the way of your projects for easy future references!