Creating Successful Style Guides

Related posts:


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 specifying a grid for a web page template

Example of an application style guide specifying a web page template grid

Enterprise-wide style guides may include standards specific to an organization. These style guides may overlap with company branding style guides that are often defined by marketing departments. They can outline a variety of company-wide items such as standard colors, typography, logos and language.

Corporate style guide example

Example of branding color definitions found in a corporate style guide

Platform specific guidelines are often tailored to a specific platform, such as desktop, web, or mobile. These style guides often give particular guidance on how to design for that platform, such as control and content guidelines.

Example of a website style guide

Example of a link control definitions in a website style guide

The style guide you choose to create can be any combination of these three types. It’s up to you to figure out what makes the most sense for you.

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

Amy Quinn

Amy Quinn is a Product Manager of UX Tools at Infragistics. For the past decade, she has been a user researcher and interaction designer both as a consultant and as part of internal UX teams. She has a Masters of Human Computer Interaction from Carnegie Mellon University.

19 comments on this article

  1. 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!

  2. Pingback: Johnny Holland – It’s all about interaction » Blog Archive » Creating Successful Style Guides « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  3. Pingback: All Teched Up!! « Caintech.co.uk

  4. Pingback: Most Tweeted Articles by Usability Experts

  5. Pingback: jean philippe gousse » Blog Archive » Creating Successful Style Guides

  6. Pingback: User Experience, Usability and Design links for February 16th | BlobFisk.com

  7. Pingback: Meine neusten Bookmarks von 11.10.2010 bis 14.17.2010 | knalleffekt.ch - ein Usability, Web 2.0 & User Centered Design Blog

  8. Pingback: Johnny Holland – It's all about interaction » Blog Archive … | Drakz Free Online Service

  9. Pingback: bartosz: johnnyholland.org/ b. dobre | flaker.pl

  10. Pingback: Johnny Holland – It’s all about interaction » Blog Archive » Creating Successful Style Guides » Web Design

  11. 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 )

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

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

  14. Pingback: bits and pieces » Blog Archive » reader concept + more

  15. Vicky Teinaki on

    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.

  16. Pingback: Business Centered Design Blog » Creating Successful Style Guides

  17. Pingback: uberVU - social comments

  18. Pingback: Style guides are not UI specifications « The Workbench

  19. Pingback: Amazon Kindle