4 Best User Interface Design Pattern Libraries

by on 09/13/10 at 2:45 pm

As designers, sometimes we need a little inspiration to get our creative juices flowing. User interface patterns could give us the ideas we need to design something amazing. That’s why I put together four of the best user interface design pattern libraries around the web. I have searched and looked at dozens. But these four offer the best examples with an easy browsing navigation. The first two offer patterns only. The last two offer patterns with explanations on how to use each pattern.

4 Best User Interface Design Pattern LibrariesElements of Design

4 Best User Interface Design Pattern LibrariesPattern Tap

4 Best User Interface Design Pattern LibrariesPatternry

4 Best User Interface Design Pattern LibrariesUI Patterns


4 Best User Interface Design Pattern Libraries 4 Best User Interface Design Pattern Libraries

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

19 Responses to “4 Best User Interface Design Pattern Libraries”

  1. Josh L

    Sep 13th, 2010

    My personal favorite is the Yahoo! Design Pattern Library:

    http://developer.yahoo.com/ypatterns/

    The explanations for each pattern are extremely detailed and often include examples of how Yahoo! uses these patterns in their own products.

    • anthony

      Sep 13th, 2010

      I like that one too, but I didn’t include it because it only provides one example for each pattern. The ones on the list provide several, so you get a better idea of the different variations.

  2. Matt

    Sep 14th, 2010

    Nice round up, thanks for this! It’s good to see options besides yui.

  3. WC

    Sep 14th, 2010

    Last link is relative and not absolute. It doesn’t go where you want it to.

  4. J-P

    Sep 14th, 2010

    (Psst: your link for the UI patterns logo is bust – it goes to an internal uxmovement.com page rather than ui-patterns.com)

  5. Steffen

    Sep 14th, 2010

    The UI-Patterns link is broken. Should be

    http://ui-patterns.com/

    :)

  6. Cristi

    Sep 14th, 2010

    Hey Anthony,

    Just wanted to tell you that the link on UI Patterns logo is not correctly pointing to the site.

    Other than that, kudos for your work on this site!

  7. Moon

    Sep 14th, 2010

    Hey these are good resources for the designers/webmasters. Please look at our site and respond here, how does the web design looks?

    here is it: http://www.reginout.com

  8. Sarah E. Welch

    Sep 14th, 2010

    Any good design pattern sites for desktop applications?

    • anthony

      Sep 16th, 2010

      Hey Sarah. I posted a collection of UI Guidelines for Desktop and Mobile Applications. Check it out.

  9. Christian Watson

    Sep 24th, 2010

    Thanks for the mention! I created my site to fill a need when working with designers on my team — I could have something to refer to when I needed to provide direction or give feedback.

    It also helps when I am wireframing a new website feature. In fact, most of the categories have come about because I knew that I was going to need reference material for something we were designing at work.

    I’m glad others have found it useful. I also wanted to make it super easy to navigate, with a minimum of clicking.

    • anthony

      Sep 25th, 2010

      No problem. You have a good site on your hands. Thanks for contributing to the community.

  10. Kwayzi

    Sep 28th, 2010

    What of Welie.com?

  11. Bruce

    Oct 21st, 2010

    Actually, Manu’s are good ones too, perhaps not as robust. I like the spirit of your research here. We all need to remember that patterns should be used in the right context of your work. Most work that we do (in my experience) actually produce custom patterns which combine several patterns or use a different method to address a specific biz/user need. I don’t know how many times I’ve seen a yahoo pattern thrown into a wireframe only to realize that the pattern doesn’t match the expectation of the users. Yahoo patterns are what Yahoo standardizes to. While they might work for “pagination” – it might not be the method that your users expect or require.

    I use Pattern Tap to help inspire my designers to “think” – sometimes designers translate too literally from a wireframe and lose the creative details that wires might lack. Their alpha is especially nice- just wish they’d add some level of detail on how patterns [are meant to] address needs. Thanks for writing.

  12. Daniel Rose

    Nov 16th, 2010

    For UI patterns (focused on desktop), I find Quince by Infragistics a great resource: http://quince.infragistics.com/

  13. Praveesh

    Nov 17th, 2011

    Thanks a lot for sharing :)

  14. Sergey Pakhandrin

    Dec 3rd, 2011

    I’ve started a new service http://inspired-ui.com. It’s a collection of great mobile UI patterns. Daily updates, daily inspiration! Check it out guys!

Leave a Comment