Six Great UI Design Pattern Resources

A design pattern is a repeatable solution to a common interface problem. They can be thought of as useful reference guides for particular design or interface requirements. The idea being that, if a problem has been solved well in the past, this knowledge can (and indeed should) be reused.

The web has made it really easy for designers to share such patterns, and a number of really nice resources exist that all good interface designers should be aware of. Here are our top six choices at the moment:

1. UI Patterns - ui-patterns.com

Set up by a Danish designer, this site not only has lots of great design examples, but it also provides neat summaries of the problems being solved and how best to use the solutions. It is really useful for budding designers who are still getting a feel for their role.

A particularly interesting feature on this site is the ability to browse by user, and see all their contributions in one place. It is a shame the site has not been updated for a while, but the quality of patterns available is still worth checking out.

2. Yahoo! Design Pattern Library - developer.yahoo.com/ypatterns

Similar to UI Patterns, the Yahoo! pattern library provides lots of useful annotations about each design pattern (why and when to use, as well as special cases and accessibility considerations). What’s more, each pattern comes with links to code examples, and uses in the real world (on Yahoo! properties and elsewhere). 

3. Designing Interfaces - designinginterfaces.com/firstedition

This is actually a companion site to the book of the same name (the 2nd edition is now available). The book is very deserving of a place on any interface designer’s shelf, and the website is similarly useful. The number of patterns isn’t as great as some of the other sites here, but the quality is extremely high. This collection is put together by the author, rather than being ‘community contributed’, which does show in the quality.

 4. Pattern Tap - patterntap.com

Pattern Tap offers a slightly wider, more eclectic, mix of patterns than the other sites listed here. It offers screenshots of actual websites as well and nothing in the way of notes or annotations.

What it does offer is a wide selection of inspiring ideas. Examples include splash pages, dashboards, and even camera apps. Pattern Tap supports mobile and tablet devices, and includes an easy way to filter search results based on device type.

5. Elements of Design - smileycat.com/design_elements

Similar in concept to Pattern Tap, this site offers a slightly different look at design patterns. Categories include the usual buttons and calendar pickers, but also banner ads and email styles. Examples are shown as screenshots of actual sites. The blog is also well worth a look as well, as it features lots of posts interface designers will find informative.

6. Quince - infragistics.com/products/quince

Quince and Quince Pro are our own pattern library tools. They are designed to simplify the design process and help interaction designers work together in a smarter way. Quince offers a dynamic community that helps designers feel inspired to create beautiful useable designs. Quince Pro builds on the core product, and allows private libraries of patterns to be created and shared in a really easy to use manner.