Schedule Time & Gather Materials
- Time Needed: Weeks
Updates ongoing indefinitely
- Any existing marketing or digital style guide
- Current live pages
Carry Out This Method
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.
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.
Gather existing style materials.
Create a list of authorities to contact with questions, concerns, or proposed changes.
Review available standards materials to document which design rules are consistent, inconsistent, or undefined altogether.
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.
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.
Include screenshots, with displayed measurements, for every style defined.
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.
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.
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
- Nielsen Norman Group: Front-End Style-Guides: Definition, Requirements, Component Checklist
- Usability Matters: Styleguides: more than just about style
- A List Apart: Creating Style Guides
- Usability net: Style guides
- Usability Geek: Official Usability, User Experience & User Interface Guidelines From Companies
- Ask Tog: First Principles of Interaction Design (Revised & Expanded)