UX Resources - Pattern Library

I’m having a bit of writer’s block at the moment.  I can’t seem to crank out the final post in my wireframing series if my life depended on it.

So instead of twiddling my thumbs until inspiration strikes, I thought I’d share some resources I’ve found to be extremely helpful in my product management and UX design efforts.

Designer’s Block

Whenever I’m tackling a unique design problem and I get stuck (much as I am with my writing at the moment) I tend to turn to other websites for inspiration.

More specifically, I turn to libraries of pre-defined user interface elements to help me through the process.

I can’t even begin to describe how many times these sites have gotten my creative juices flowing and helped me brainstorm several potential solutions in a matter of minutes.

I hope you find them as helpful as I do:

Yahoo! Design Pattern Library

First up is the Yahoo! Design Pattern library.  Yahoo! has really done a bang up job here.  Not only do they have a ton of well defined UI patterns but the implementation notes (e.g. “What problem does this solve?”, “When to use this pattern”, etc.) make it even easier to decide which pattern might apply to your particular design problem.

And if you’re designing any kind of social site, the patterns outlined here are some of the best I’ve seen and can easily improve your engagement metrics if followed properly.

Click here to visit the Yahoo! Design Pattern Library now!

UI-Patterns

The UI-Patterns library kicks ass!  It’s not as well outlined and articulated as the Yahoo! library but it provides UI examples from all over the web for a specific pattern.

So when we were wrestling with how to implement article rating systems in our daily e-letter, I went to this site and checked out their voting and ranking patterns.  They had example implementations from a dozen different sites (digg, reddit, break.com, and the list goes on).

It made it very easy to see how the same pattern could be implemented in different ways.  That in turn helped us zero in on a pattern we liked but also inspired us to innovate a bit and add a little extra to the interaction to make it our own.

Visit UI-Patterns now

Blink Design Library

The Blink Design Library is graciously provided by the folks at Blink Interactive (Seattle design shop).  It isn’t the most comprehensive or in-depth pattern library I’ve worked with, but it’s constantly added to and the blog format makes it easy to browse through tons of random patterns.

I find that I visit this site for the fun of it, even when I’m not looking for a specific pattern.  The ideas it helps generate make up for the (small) shortcomings of the library itself.

Visit The Blink Design Library

Welie.com Pattern Library

The Martin van Welie pattern library is pretty amazing.  Some of the examples are a bit dated but I find that the organization of content, clarity of writing and the number of examples make it one of the more well rounded pattern libraries out there.

The style of writing feels a bit academic.  But I actually enjoy it as it helps me think through my UX decisions in a much more rigorous manner.

I also recommend reading through Martin’s other writings which can be found on his About Me page.

Visit the Welie.com Pattern Library