Pattern Library Resources
I have recently been placed in charge of a project to design and manage a pattern library for my organization. [Editor's note - This post was written in 2008. Some of the resources mentioned have been taken down]. The library will contain high-level interaction patterns, components, and style guidance from a range of internal and external projects. I plan to reference existing patterns wherever possible, particularly the work from Yahoo! The biggest part of the gig right now is setting a vision for the project and deciding on a strategy to get there. The scope is ambitious, so I will need help. To that end, another major part of my immediate task is outreach and training. That’s where this page comes in. It’s a starting point, a placeholder, until I can set up our internal resources.
Christopher Alexander created the first pattern library for American architectural standards, methods and habits. His patterns were arranged into a formal hierarchy (and an early hypertext) from global truths about epic cities down to the smallest detail of construction methods. From there, the term ‘pattern’ seems to have spread to computer science, where it was used to mean a standardized solution to a problem. The UX community seized it recently, and has brought it back fairly close to Alexander’s original intent.
- Christian Crumlish of Yahoo! – presentation on pattern libraries. [gone: See also his pitch to the Yahoo! team. (video) ]
- Erin Malone of Yahoo! – article on pattern libraries (article)
- Wireframing with Patterns (article)
- Designing Web Interfaces: Principles and Patterns for Rich Interactions (book)
- Jared Spool on Designing a Pattern
- Will Evans interviewed Christian Crumlish, Erin Malone and Lucas Pettinati for Boxes & Arrows recently. It’s a great read and produced several memorable quotes:
"…patterns focus innovation and creativity on the leading edge of the problem: the unsolved part." -Xian
"…A pattern is closer to a checklist than to a mock or a wireframe." – Xian
"Consuming pattern libraries does not in and of itself create good interaction designers." – Lucas Pettinati
Stewart Brand’s wonderful concept of Pace Layering helps explain why different kinds of standardization projects need to be maintained differently. The rate of change is slower in an interaction pattern library than in a code repository, for example. And the organization’s brand changes very slowly compared to the relatively rapid changes in its style guide. The illustration on the right is from Peter Morville, illustrating Brand’s point.
|Slow||Brand||logo, vision, message|
|Interaction Patterns||standardized interactions, flows|
|Style Guide||colors, typography, tone|
|Components||standardized widgets for code and media|
|Fast||Code||actual code widgets|
Types of Pattern Libraries
For my project, I see four distinct areas of the library, each with its own team (eventually), processes and governance:
- the brand standard
- interaction patterns
- style guides
I should also note that many of the ‘pattern library’ examples below and one the web are actually screenshot galleries. These are great as sensitizing examples for creating a pattern, but are not actually patterns themselves.
Examples of Pattern Libraries
- Yahoo Design Pattern Library
This is the preeminent Design pattern library.
- Pattern Tap – Interface Design Solutions
This is a visual design focused gallery of examples
- Interface Patterns from Jenifer Tidwell who wrote Designing Interfaces and created MIT’s Common Ground HCI pattern library
- Welie’s pattern library
- [gone: Information Design Patterns
Info visualization focused]
Examples of Style Guides
- [gone: Sun Web Design Standards (layouts, HTML, branding, color, etc.)
This is the pre-eminent corporate component/style library. ]
- [gone: Wachovia Style Guide
This is a pretty typical corporate style guide. ]
- BBC Guidelines
This blends an editorial guide with a style guide and a technical standards spec.
Examples of Component Libraries
- Yahoo UI Library
This is the preeminent component library. See also JQuery’s documentation for a similar example.
- [gone: Sun Web Design Component Library
This is the preeminent corporate component/style library. ]
- Microsoft Health common user interface (using Silverlight)