What it is
A collection of user interface elements (for example colors, icons, and buttons) used frequently across a website or service, consisting of the base patterns and helpful information about how to use them.
Reasons to use it
To aid in designing a solution that uses user interface elements consistently. Maintaining a set of approved, reusable patterns makes it easier to produce new features or make updates to existing products or services.
Large: 1–2 hours per pattern for initial documentation, with ongoing maintenance and extension.
How to do it
Start identifying common components as early as possible, ideally while you and the team are creating new design elements. These common pieces form the patterns that you will create guidelines for. Specify the components that make up each user interface pattern and note possible constraints or restrictions.
Describe or visualize how someone will use the pattern and how it should respond to the user. (For example: how a button renders on load, hover, and click.) Provide any data as to why it's good for the end user.
Include any code or snippets that front end developers can use to implement the pattern.
Show examples of how the same pattern could work in different solutions.
Publish the design pattern library in an open, accessible space where the product team can use and extend it. (Common implementations of a design pattern library are in a wiki or brand style guide.)
Applied in government research
No PRA implications. No information is collected from members of the public.
- The Draft U.S. Web Design Standards, a pattern library for the federal government from 18F
- Blog posts from 18F about the process of creating the Draft U.S. Web Design Standards
- Open FEC's pattern library from 18F