CYMK Swatches

Style Guides

Style Guides (sometimes called a Pattern Libraries) are reference documents containing definitions of UI design elements. Consistency is a contract with the user promising that, once the user has learned a product’s functions and where to find them, these will remain consistent until the user completes their tasks. Breaking that contract without thoughtful consideration can decrease trust, increase user frustration, and diminish usability. As a rule, elements that look the same should function the same, and vice-versa. If you need an element to have a different behavior, the element should have a different appearance to prime the user’s expectation for that different behavior. Style Guides require designers to mindfully design consistent appearance for consistent functionality.

A company likely already has a “brand bible,” or marketing style guide. However, marketing style guides are often written with print in mind and will need to be translated for use in digital products – points and inches need to become pixels, CMYK colors need to be expressed in RGB and hex values, etc. This article will not cover the creation of a branding or marketing style guide, but will help with the creation and use of a style guide for digital products.

Description

Schedule Time & Gather Materials

Clock Icon

Schedule Time:

  • Time Needed: Weeks

Updates ongoing indefinitely

Gather Materials

Gather Materials:

  • Any existing marketing or digital style guide
  • Current live pages

Carry Out This Method

Colored pencils in a metal case

Step One

Meet with product stakeholders to determine the Style Guide format, how it should be accessed, and what it should include. Design and UI elements will be included, but the inclusion of items like body copy guidelines, code snippets, and vocabulary may be the domain of other departments or be included in separate documents.

If you are free to determine what is included in the style guide, include code snippets. Consistency is best maintained if developers and designers use the same source.

Step Two

Design a modular framework. Rather than defining entire page layouts, focus on defining the components. This allows new standards-adherent page layouts and templates to be built as new content types are introduced.

Step Three

Gather existing style materials.

Step Four

Create a list of authorities to contact with questions, concerns, or proposed changes.

Step Five

Review available standards materials to document which design rules are consistent, inconsistent, or undefined altogether.

Step Six

You may need to build certain standards (or an entire UI style guide) from the information in a marketing style guide intended for print collateral.

  • Spacing around logos should be translated into values proportionate with the logo size, not the screen size.
  • You can use Photoshop, Illustrator, or one of several web-based color conversion tools to change CMYK values into color hex codes for web use.
  • You may need to adjust requirements for accessibility. For example, if text appears dark enough on a printed page but is too light for readability on the web, adjust to a darker shade.

Step Seven

Define any thus far undefined standards based on what exists on the live site.

  • If a standard has no live examples on a site, make sure the standard is needed before defining it.
  • If you are building a new site, add the definitions of each standard as they are built.

Step Eight

Include screenshots, with displayed measurements, for every style defined.

Step Nine

When the style guide is complete, make sure it is reviewed by any relevant parties (including the project team and stakeholders) before it is socialized and presented as the official reference point for all designers and developers.

Step Ten

A style guide is a living document. People rapidly lose faith in a document that is not current. As design issues come up and web standards change, discuss updates.

Step Eleven

Whenever an update is done, make sure the changes are socialized and a new complete style guide is distributed – avoid the distribution of update-only supplement pages.

Try These Tips

  • Make your style guide easy to reference. Online searchable text is ideal. For print style guides, include both a table of contents and an appendix or index (include synonyms!). If designers and developers can’t find what they need in five minutes, they will deviate from standards.
  • If time does not allow you to build a full style guide, build one that only includes the rules for web typography, colors, grid and spacing, and how page content sections are defined. These standards alone will result in greatly improved consistency.
  • Every defined style should adhere to basic web usability guidelines. Verify that a site using your styles would, at the very least, meet the 10 Usability Heuristics and satisfy accessibility requirements (see Heuristic Evaluation).
  • Many corporations have their UI style guides online. Looking at them may help you determine what to include and the approach to take for your style guide.
  • For a dynamic, collaborative approach to style guides which allows for searchability and a single reference point, see Style Frameworks.

Explore More Resources

Shipping & Delivery

Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat net

Vestibulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat netus.

Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac vestibulum amet elit