Posted by: communicationcloud | January 5, 2012

My 3 favourite design pattern libraries

A bit about design patterns first

(I wrote this bit for anyone who hasn’t heard of design patterns – feel free to skip down to my list of libraries if you like)

A design pattern is a generic solution that has been used multiple times to resolve a particular problem or achieve a particular goal within a specific context. (A “problem” or “goal” in this context is something like displaying search results, filtering data, picking a date in a form, and so on; the solution would commonly refer to the combination of the visual design and the users’ interaction with it.)

Design patterns are useful as guidance to anyone designing UIs because:

  • Design patterns save time and effort on design work – providing you pick the pattern you use carefully you benefit from the effort that someone else has already put into identifying. In some cases you can even reuse code for implementing the solution.

Do bear in mind that you’ll still need to test out your UI – to confirm that the individual design component you’ve made use of does work in the context in which you’ve implemented it.

  • Reusing design patterns reduce the learning curve for users. Common design patterns already fit with users’ mental models so they require less processing effort. The familiarity also gives the user confidence in the interaction working as expected, so there’s less anxiety too.

When deciding whether to reuse an existing pattern or design a new one, it’s worth bearing in mind that even a very clunky way of doing something can become so familiar enough that a more successful design would be difficult to achieve. For example, in a project I worked on recently, the web application saved each change the user made automatically … but users were used to saving manually in equivalent software they’d used, so were anxious about whether their data was saved. The solution? We’re currently considering reintroducing a “Save” button…

My 3 favourite design pattern libraries … and a couple of special mentions too

Below are the design pattern libraries that people have recommended to me recently and that I’ve found most useful as reference points for software UI design. They’re not necessarily the best libraries around – just the ones that have worked well for me in terms of their content, navigation, and relevance to software UX.

Do let me know if there are really useful ones that aren’t on my list.

A collection of patterns implemented and curated by Anders Toxboe (who describes himself as “a Danish web developer”).  Each design pattern comes with a screenshot and commentary on the problem it solves and variations on use. Sometimes there are also multiple examples of the same design pattern or of alternative patterns for the same problem. The library is very website-oriented, but its breadth and quantity of patterns mean there’s also plenty for software UIs too.

This library has a community feel, with designs and comment contributed by other users of the site. I find this discussion one of the most useful features of the site – to help evaluate whether the pattern is relevant.

See the library at:

Yahoo Design Pattern library

Part of the Yahoo Developer Network site, this library is smaller and tends to only present one pattern for each solution. However, the commentary is particularly good – so where there is a relevant design pattern its worth referencing

See the library at:

This library’s a bit different in that its part of a commercial venture; however the library itself is still free. Each page shows multiple implementations of patterns for the same purpose (e.g. there’s a page of input prompts), each with its own commentary. This is handy for comparing different solutions and deciding which is the closest match for your needs

Some patterns also come with code snippets, which can be particularly useful for understanding the more linear aspects of use – or for creating a quick prototype for usability testing. Licensing conditions for reusing designs are also listed (many are under Creative Commons license).

As with, you can also create your own library – free for a one-user license, with licensed options for use as a collaboration tool.

See the library at:

Also a couple of special mentions for libraries with specific uses:

Endeca User Interface Design Pattern Library

This one’s focused particularly on search and navigation (not surprisingly, since Endeca’s a search tool), and covers things like search results, faceted navigation, and results display. The library is managed by Endeca and although it encourages comment, there doesn’t seem to be much interaction from visitors. However, the usage notes and examples of specific aspects of implementation of design make it a really useful resource for designing ways of navigating.

See the library at:

Created and managed by an interface designer, this library is very website focused. It also only shows screenshots of design; there’s no explanation, commentary or opinion. However, I still find it a handy resource for inspiration – e.g. if you want to think up a better way of giving error messages or a 404 page this library has a nice collection of examples.

See the library at:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: