User interface and interaction design patterns

A list of web IxD/UI design pattern resources assembled by the UX Exchange community.

by Nathanael Boehm on 22 November, 2009

  • 12 Standard Screen Patterns
    A collection of screen patterns including Master, Search Results and Column Browse by co-author of Designing Web Interfaces: Principles and Patterns for Rich Interactions Theresa Neil. Not much detail but some good examples of each pattern.
  • 40+ Helpful Resources On User Interface Design Patterns
    An index of resources including UI-Patterns.com, Konigi and UI Scraps.
  • Designing Interfaces: Patterns for Effective Interaction Design
    A website centered around Jenifer Tidwell’s book Designing Interfaces: Patterns for Effective Interaction Design.
  • Pattern Tap
    Currently contains 45 collections of patterns including forms, layout and typography each with dozens or hundreds of examples of different patterns. More of a library than abstracted templates and patterns but still quite inspirational.
  • patternBrowser
    Not so easy to use or navigate and a little less practical but still a good resource of ideas.
  • The Diemen Repository of Interaction Design Patterns
    They seemed to sketch out the topic structure first instead of incrementally covering each topic so there’s a bit of incomplete material, however seems quite interesting with some good discussion.
  • The Interaction Design Patterns Page
    A good, growing collection of interaction design resources. Don’t be fooled by the dated design of the page – it’s well maintained.
  • UI Patterns – User Interface Design Pattern Library
    All interaction patterns are accompanied by an example screenshot and well-articulated usage, solution, rationale and discussion content. Quite good.
  • Welie.com
    Great index of interaction scenarios and patterns with consistent content sections for each type and plenty of examples. Also recommended.
  • Yahoo! Design patterns
    Not a lot of patterns and they’re all UI rather than covering UI and interaction. The solution content isn’t very useful – a bullet list of ideas without any real guidance.
  • ecommr
    Dedicated to e-commerce patterns, it’s essentially a library of examples rather than any discussion around patterns and abstraction. Good to see what other high-profile companies are doing with e-commerce implementations rather than having to visit all their sites individually.
  • Designing social interfaces
    Focussed on social experience design, this is a wiki with a rather difficult to parse index page. The content pages have no structure and are essentially a linear discussion on each topic, accompanied by examples. Persist with it though, it has some fantastic content which you can use to make and justify design decisions.
  • UX Pattern Explorer by Infragistics Quince
    Requires Silverlight 2 for optimal experience, but a HTML version is available.  Easy to navigate with a lot of discussion about each interaction and some abstraction of examples showing states or enhanced with callouts. High recommended.

Special thanks to contributors Matt Goddard, Paul Hibbitts, Zoltán Gócza and Didier Burton for posting these links at UX Exchange.

Post to Twitter Post to Delicious Post to Facebook

// purecaffeine.com, UX, design, social media and Gov 2.0 blog by designer Nathanael Boehm, Canberra, Australia. Licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.

Related posts:

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: