Yahoo!'s Design Pattern Library

July 27, 2010

Recently, and I can’t remember why, I came across Yahoo!’s Design Pattern Library. Just like a programming design pattern describes, in code, an accepted way of handling a specific task, this library has almost 60 (at this time) examples for how to layout and handle common visual elements.

The patterns are organized by category: layout, navigation, selection, rich interaction, and social. For example, there’s a pattern for showing the availability of a person (like you’d see in IM) and another for how breadcrumbs should be used. Mostly the patterns are descriptions of what you should do, based upon what’s best for the end user. Many of the patterns do have links to code examples, although those will often make use of the Yahoo! User Interface library.

Part of the design pattern library is a stencil kit, available for OmniGraffle (the program I use), Adobe Illustrator, Visio, and other applications. Using this kit you can quickly create a mock-up of the user interface. And being Yahoo!, all of this is available for free.