James Melzer

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.

Score! Patterns

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.

"…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

Pace Layering

Peter Morville's rendition of Stewart Brand's Pace Layering ConceptStewart 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:

  1. the brand standard
  2. interaction patterns
  3. style guides
  4. components

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

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

More from the Archive...

Morville's Facets of User Experience Refined?

Back in 2005, I had the hubris to try to improve on Peter Morville's iconic Facets of UX diagram, also known as "the honeycomb diagram". Read on...

Adaptive Path MX East 2007

In 2007, I attended my favorite conference ever. Before live-tweeting, we live-blogged. This post was my notes from two days of talks and activities. Read on...

Pattern Library Resources

In 2008, I started working extensively with UX pattern libraries, first for SRA and then for EightShapes. In this blog post I gathered together the best resources on the subject. Read on...

Applying Mental Models Outside UX

In 2010, I presented a poster on a mental modeling project. Read on...