I have recently been placed in charge of a project to design and manage a pattern library for my organization. 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.
"…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 |
For my project, I see four distinct areas of the library, each with its own team (eventually), processes and governance:
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.
Hi James,
I’m glad to see you find Pattern Tap worthy to be mentioned among such a strong list of pattern libraries. Of course, as you mentioned, Pattern Tap is indeed unique and focuses on design inspiration more than a focused analysis of interface patterns.
Having said that, if it would be helpful to utilize the framework for Pattern Tap for your collection, with some amendments that would help detail each pattern, then let me know, I’d be interested to work with you on something like that.
Matthew,
I’ve been enjoying Pattern Tap a lot. I am considering it as a tool for us to research and share examples, since that seems to be its strength. The bulk of our work is going to be ‘behind the firewall,’ so I can’t use Pattern Tap for the patterns and standards themselves.
even more UI screenshot collections
http://www.flickr.com/photos/designingwebinterfaces/sets/
http://www.flickr.com/photos/morville/collections/72157603785835882/
http://www.flickr.com/photos/guspim/sets/72057594051302852/
http://www.flickr.com/photos/guspim/collections/72157600047307884/
http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
http://designsnips.com/ (mostly visual design)
Namespaces in Sun’s pattern library
For many components, the component id (with variation id) is used as the container class name in the HTML code. This is not always the case, although the reason is unclear. I recommend always using the component id as the container class name. This will make components in the field easier to find and maintain.
In a few cases, both the generic component id (nam01) and the id with variation (nam01v3) are used on nested containers, or as separate class calls on the same container. This dual-classing is done when most of the basic layout is handed by the parent, and the variation merely enhances these basics. For example: http://www.sun.com/webdesign/components/pc00.html . In cases where the structure of each variation is entirely different, simply use the variation id as the only class. For example: http://www.sun.com/webdesign/components/g03.html .
All components are categorized by where they occur on the page and where they occur in Sun’s web properties. The categories are used for displaying groups of components, either as an index or as a filter.
A great case study from Oracle:
http://www.uigarden.net/english/the-bulls-eye-a-framework-for-web-application-user-interface-design-guidelines and don’t forget to click through to part 2.
Oh, and I almost forgot social patterns: http://designingsocialinterfaces.com/patterns.wiki/index.php?title=Main_Page
Better just check the whole bibliography at http://delicious.com/jamesmelzer/pattern_language
If you have Silverlight, there is also Quince, a pattern library with several examples of each pattern.
http://quince.infragistics.com/#/
another screenshot collection that is similar to PatternTap is http://ui-patterns.com/
Hi James,
I did a lot of research on pattern libraries myself when I first started working on one for my company. It’s far from being complete. We haven’t even publicized it for use within the company yet. Getting everyone to buy in to the idea should be interesting.
Your delicious bookmarks on the subject seem very extensive, I will surely browse through to see if there is anything I might have missed during my research. I will also let you know if you are missing any that I think is helpful.
Your project seems broader than mine but I hope to keep checking your blog to see your progress.
Best,
Dilini
Smashing Magazine pulled together their own collection of interaction design galleries and patterns resources: http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/