Things to Consider When Creating An Effective User Centered Style Guide

The Benefits of A Style Guide

A style guide is undoubtedly one of the most important elements of any given project. Aside from forcing you to define your style, it also establishes rules for your clients and those who take over the project as well as allowing you to maintain control of the design so that when last minute changes occur, you can refer to something concrete. In my experience, creating a style guide can be somewhat daunting depending on the size of the project so I present to those of us in the user interface design and development space, a few things to keep in mind when creating an organized and effective user centered style guide.

Benefits

- An aid for new participants of the project or product team.

- Allows the designer to maintain control of the design.

- Describe guidelines and standards.

 

Establish Consistency

Establishing rules regarding colors, icon styles and layout styles is imperative because by doing so, you establish consistency across your product. This could mean that in the embryonic stages of creating your style guide, a discussion of the term consistency and what it means to you and your client is necessary. Consider the following:

•  Error message

•  General GUI layout or Visual Design

•  Icons

•  Color palette

Below are examples of how the consistencies in icons and colors have been determined:

 

 

Defining Style Guide Elements According to Design Pattern Libraries

Design pattern libraries are repositories of design solutions and/or resources such as controls which are used as building blocks that help solve common design problems.  In fact, it is quite often that in order for a design pattern library to be fully realized, it is necessary for it to contain several controls which themselves, are essentially design patterns applied through code. They either come preset with any given operating system such as iOS, Android, Windows 8 and Mac OSX or they are established and agreed upon by the designers and stakeholders right from the beginning of the project. Some common examples of these are our very own NetAdvantage Controls such as  WebDataTree, WebTab and WeDataGrid as well as the ones included in the various design pattern libraries in our Quince product.

Applying this early on saves you time as it helps keep everything organized according to the design pattern library used in your project. However, this can require an investment of your time upfront as you need to provide the time to gather which controls or elements will be used and is usually challenging if the project is the type that grows organically. Nevertheless, following this organized approach means that regardless of how big the project gets nor how often the client makes modifications, identifying the most commonly used elements or controls is still less tedious since you can just refer to one section of your entire style guide and either add or subtract pages from that given section.

The example below illustrates the measurements, colors and various states of the buttons and check boxes used across an entire project.

 

 

Summary

Ensuring that you have a consistent and effective Style Guide is a great fundamental discipline to follow and apply in all your projects every time yet it can be challenging especially when working on a large project. However, in my experience, a very useful exercise you can use is what is called Group Consistency Inspections wherein you gather the designers, developers and everyone involved in your project to go through the implemented elements and compare them side by side with the established or official Style Guide document.

Useful Book Resource:

Coordinating User Interfaces for Consistency (Nielsen, 1989)