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 startup, 6Q, 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!