mikewhobikes

What’s a design pattern?

A design pattern is a “general reusable solution to a commonly occurring problem” (source). It could also be described as a convention, a template, or a best practise. Whatever word you use, the purpose of a design pattern is clear: to establish a standard, reusable approach to solving a problem.

Breadcrumb navigation is an example of a design pattern. In order to solve the problem of showing users where they are located within a hierarchy, sites commonly display a horizontal list of links like this: Home > Products > Electronics > Scanners

Usability is one of the main advantages of using design patterns. If your interface looks and functions like others the user is accustomed to, they are more likely to feel comfortable interacting with yours.

The Best Design Pattern Sites

So where’s the best place to go when looking for design patterns? In no particular order, here are my personal favourites:

1. Interface Collection for Design Inspiration (PatternTap.com)

This site is fast becoming a very popular resource due to its vast quantity of design pattern examples.

2. Elements of Design: A Web Design Showcase (Smileycat.com)

This site is very similar to PatternTap in that it showcases a variety of website elements. The examples shown are all top-notch and there is plenty of variety, making this an excellent site for inspiration.

3. UI Pattern Factory (UIPatternFactory.com)

UI Pattern Factory is smaller than the others but has a lot of promise. Along with showing examples of each pattern there is also a detailed article explaining when it should be used and why it works. Highly recommended.

4. Interaction Design Pattern Library (WeLie.com)

This site features a huge collection of patterns with clear examples and great articles as well.

5. UI Patterns (UI-Patterns.com)

UI Patterns offers what the name suggests: a wide variety of patterns, many of which I don’t recall seeing on other sites. The accompanying articles are thoughtfully written and concise.

6. Yahoo! Design Pattern Library (Yahoo.com)

No list of design patterns sites would be complete without Yahoo!’s Design Pattern Library. This contains a lot of high quality content from a source who clearly know what they’re talking about. Short videos showing the patterns in use further add to the usefulness.

BONUS: Designing Interfaces: Patterns for Effective Interaction Design

Added August 31, 2008: Not only does this look to be a terrific book, but they’ve also released some — or all? — of the patterns online. Each pattern has a very thorough examination and good examples.