10 collections of design patterns to keep you from reinventing the wheel

8. november, 2008 16:45

When building websites, it’s a good idea to take a look around, and check out how other people have solved the problems, you’re facing. Instead of just googling around, you can make use of a pattern collection. Pattern collections are websites that collect examples of how different challenges can be solved. You can find numerous examples of how to build things like breadcrumbs, search results and user registration processes.

Patterns can’t tell you the answer to every question, you might face. In fact, they often leave you with more questions than answers. And there might be times, where you need to do something in a different way than everybody else. But it is always a good idea to know why – and how other people tried to solve the challenge, you’re facing.

There are heaps of pattern collections ready. User Experience professionals apparently just love to build websites about websites. Here’s ten good places to find inspiration.

1. Welie
The strength of Welie isn’t the number of patterns. Many of the other sites, I’m listing have a lot more patterns. But Welie has a thorough breakdown of every pattern – when and how to use it, further reading etc.

2. Yahoo!

Good old Yahoo! has made another collection of patterns. It’s quite reasonable in it self, but in my opinion the most interesting part is their attempt to build a pattern collection for reputation on social sites (points, prizes, titles, top lists etc.)

3. Konigi

Konigi might just be the largest of the many pattern-collections. Through their tag cloud, there is great access to the many different patterns.

4. UXrepublic

UXrepublic is trying to build a community around sharing patterns. Naturally, that comes with both advantages (numbers) and disadvantages (varying quality). If you want to pitch in, there’s even a Firefox-extension making it easy to participate.
5. Berkeley

Berkeley made a classic collection of design patterns. Like Welie, the great advantage here is, that they have written great texts on advantages and disadvantages of every pattern. Furthermore, on most patterns there’s also recommendations on how to make the interface accessible.


6. UI-patterns.com

Like Welie and Berkeley, the focus on UI-patterns is describing what an interface element is good and bad for.

Product Planner

7. Product Planner

Product Planner is rather different from most other pattern collections. Here, it is flows that are being documented – for instance register a user account, invite another user and similar flows.

Pattern Tap

8. Pattern Tap

Pattern Tap is yet another pattern collection. The greatest asset is the number of different ecamples. For instance, there are 36 different 404-pages! The easiest entry to their content is through Collections.


9. Flickr

There are quite a few big and small pattern collections on Flickr, if the other collections left you empty handed. For instance, check out this, this and this.

Morten Just
10. Morten Just

If it’s just too hard to find, what you’re looking for, Morten Just built a Google Custom Search for a number of different pattern collections, including some of the above.

Find more patterns
There’s even more patterns on my delicious: delicious.com/morten/patterns.

Read more about using patterns in webdesign in this (old) article from 37signals. The first half is probably more relevant than the second part.

Tags: , , , , , ,

Kategoriseret som: