Creating Successful Style Guides
Amy Quinn
on
February 15th, 2010 
Style guides are a great way to ensure user experience consistency when developing an application and a way to communicate user experience standards across an organization. They can be application specific, platform specific, and may encompass enterprise-wide standards. A style guide can help make the development of user interfaces more efficient and help ensure good user interface design practices.
Types of Style Guides
Style guides for applications usually contain specific instructions on how to design and develop an application’s UI. In some instances, code snippets may also be provided to simplify development of the application.
Example of an application style guide specifying a web page template grid
Example of branding color definitions found in a corporate style guide
Example of a link control definitions in a website style guide
Style Guides Are Not UI Specifications
Style guides are different from user interface specifications:
- A specification document details the functionality of a UI design for developers building an application. It is usually more descriptive and is often accompanied by wireframes that act as blueprints for the design. In contrast, a style guide is often a general outline of the elements of a UI design.
- Style guides have a longer shelf-life than specifications documents that are often tied to a project life-cycle. When an application is first created, some elements of the initial specification document might turn into the application style guide for long-term reference.
- Elements of a style guide may be referred to from a specification. For example, the functionality of a web application enhancement would be captured in a specifications document; but the operation of standard UI controls found throughout the website would be outlined in the website style guide and referred to by the specifications document.
How to be Successful
Over the years, I have had a chance to create a variety of style guides. The format and purpose of these style guides were variable and were suited to the task at hand: such as details of the grid layout, colors and typography used in a website and a general guidebook providing guidance on the use of website user interface controls and how to write web-based content. From these experiences, I’ve learned a lot about what makes a style guide a success and I’d like to share some of these tips with you.
1. Keep the audience in mind
Style guides can be written for numerous audiences (e.g. other user experience practitioners, developers, graphic designers, business analysts, etc.) and the content should be structured to match the audience. Graphic designers would benefit from knowing the colors used in a website elements and programmers may desire knowing the code used to create a control.
2. Plan for success
When planning a style guide, seriously consider what would make your style guide successful in your organization. Would it be ensuring your company understands how to better design usable applications? Or would it be ensuring the large-scale website you are creating has a consistent user experience? Or would it be something else?
3. Keep it alive
Documents produced in traditional document formats can become stale and quickly become outdated. Successful style guides are produced in a manner that supports easy maintenance and supports a living document.
4. Define a review process
Create a process that supports modification and review of the style guide to actively ensure style guide maintenance and buy-in. You may want to have a person or group of people responsible for periodically updating a style guide.
5. Think of the platform differences
Style guides can be platform specific or neutral. Design guidelines can be different depending on the platform (i.e. Windows vs. Mac, iPhone vs. Blackberry). Consider how you want to support communicating any platform differences when creating your style guide.
6. Socialize the document in your organization
The use of your style guide should be communicated throughout all levels of your organization to ensure everyone knows the existence of the guide, understands how to use the guide, and actively works to use and maintain the guide. The more people about your style guide, the more successful you and your style guide will be.
7. Clearly define mandatory and flexible standards
User interface design is part art and part science and user interface paradigms shift quickly. Ensure that your style guides support new platforms and creative ideas by specifying what standards are mandatory and what are flexible. For example, you may want to ensure certain usability rules are strictly adhered to throughout your applications (i.e. “Sans serif fonts must be used for text that will be read on a screen”), but be more flexible in other areas (i.e. “Radio buttons should be used when a user is asked to select one item from a list of items.”)
8. Make the style guide as scannable and searchable as possible
Style guides can be very dense and contain a lot of detailed information. Search and browsing capabilities will make it easier for people to find what they are looking for in your style guide. In addition, use as many visual examples as possible to support quick scanning of style guide elements.
9. Provide real world examples
Successful styles guides often show one or more examples from real applications for illustration. If you are writing a style guide for a specific application, use examples from that application to demonstrate your point. If you are writing a style guide for a large organization with many applications, ensure that your examples encompass all of the applications you are describing.
I hope you find these tips helpful when you are creating your own style guides. Do you have any additional tips you would like to share?
—–
Header image by nathanborror / /CC by 2.0
February 15th, 2010 at 4:48 pm
Today when documentation is something that is generally being stripped down to its minimum, style guides seem to be a good way to get an overview of the app. Simple to maintain and not to much to grasp in a quick read. Thanks for a great article!
February 15th, 2010 at 6:25 pm
[...] Johnny Holland – It’s all about interaction » Blog Archive » Creating Successful Style Gui…johnnyholland.org [...]
February 15th, 2010 at 7:53 pm
[...] Johnny Holland It’s all about interaction Blog Archive [...]
February 16th, 2010 at 1:07 pm
[...] I Say To Girls » Blog Archive » Why Geeks Make Good Lovers 2 Tweets Johnny Holland – It's all about interaction » Blog Archive » Creating Succes… 2 Tweets Inclusive Universe – Wendy Chisholm 2 Tweets [...]
February 16th, 2010 at 2:50 pm
[...] Creating Successful Style Guides via Johnny Holland – It's all about interaction by Amy Quinn on 2/15/10 [...]
February 16th, 2010 at 7:01 pm
[...] Creating successful style guiresStyle guides are a great way to ensure user experience consistency when developing an application and a way to communicate user experience standards across an organization. They can be application specific, platform specific, and may encompass enterprise-wide standards. A style guide can help make the development of user interfaces more efficient and help ensure good user interface design practices. [...]
February 17th, 2010 at 3:07 pm
[...] Creating Successful Styleguides – [...]
February 17th, 2010 at 11:49 pm
[...] post: Johnny Holland – It's all about interaction » Blog Archive … Share and [...]
February 18th, 2010 at 11:30 am
[...] bartosz przed chwilą johnnyholland.org/…15/creating-successful-st… b. [...]
February 18th, 2010 at 1:47 pm
[...] Johnny Holland – It’s all about interaction » Blog Archive » Creating Successful Style Gui… [...]
February 18th, 2010 at 10:03 pm
A variant of style-guide for instructing end users about application usage is user guide/help manuals. A lot of content and many elements of style guides can be easily used in writing manuals/introduction videos. During an UX research for a class room project we noticed that these help manuals are greatly helping novice users. Successful User guides also pretty much follow the same guidelines of successful style guides with the difference being end users as audience. Twitter, Apple etc engages users by providing visual help guides ( http://help.twitter.com/forums/10711-getting-started/entries/14663-changing-your-password )where as many sites uses traditional textual help guides ( http://www.facebook.com/home.php?#!/help.php?page=746 ) leading to confusion leaving scope for users to come up with their own user guides ( http://www.youtube.com/watch?v=J9kMZKNM9S0 )
February 18th, 2010 at 10:10 pm
Now that my comment is moderated, I would love to write a special article on user guides as it deserves and their role in digital sphere. As I my expertise is limited to academic setting, I would like work in collaboration. You can contact me at submitted email ID.
February 21st, 2010 at 12:16 pm
Good overview. I blogged recently about style guides and following an object-oriented approach to abstracting style elements to maximise the extensibility and programmability of a style guide; for example describing the generic dialog box, then describing the specifics of a warning dialog vs an information dialog avoiding duplication of common attributes – reflecting how it should be coded in the stylesheet and solution architecture.
February 22nd, 2010 at 3:21 am
[...] guide for style guides. Filed under design | tech on February 17th, 2010 by bchao | No Comments [...]
February 22nd, 2010 at 10:26 am
Great – just thought I’d add in a similar thread that came from the IXDA http://www.ixda.org/discuss.php?post=48237 . The comments are pretty much the same: identify what needs to be (and not to be) explained, allow for use, give examples.
March 4th, 2010 at 10:20 am
[...] Creating Successful Style Guides März 04th, 2010 | Category: Allgemeines via johnnyholland.org [...]
March 9th, 2010 at 2:35 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by uxtweeter: Creating Successful Style Guides http://bit.ly/aqb49T...
March 10th, 2010 at 12:50 pm
[...] Tagged 2010, johnny holland, style guides Johnny Holland currently has an article on creating successful style guides. [...]