Over the years, I’ve been stockpiling useful blogs and design pattern libaries so that I have a go-to list of resources when I’m in need of examples. Here’s my list, in no particular order, which I hope to keep updated over time.
Change Log
- May 16, 2010: Original Post
- October 22, 2011: Updated to include Mobile Design Pattern Libraries
- November 21, 2011: Added Theresa Neil’s Mobile Design Pattern Library
- December 1, 2011: Added my iPhone gallery
Web UI Design Pattern Libraries
- Interface Design Pattern Browser: A true UI design pattern explorer produced by the Interface Design Team of the University of Applied Sciences Potsdam
- Design Snips: Categorized snippets of good digital design.
- Welie Interaction Pattern Library: An interaction design library pioneered by Amsterdam’s Martijn van Welie, an Interaction Design Consultant with a Ph.D. in HCI.
- Open Source Design Pattern Library: A community where designers, developers, and other people interested in patterns can come to reference material, collaborate on patterns and designs and share knowledge.
- MephoBox: A CSS gallery focused on collections of individual elements.
- Konigi: A showcase of visual design and interface design
- Quince: A community-driven UX and UI pattern libary that also offers private design pattern storage. Definitely one of the most complex and actively managed sources of design patterns.
- Pattern Tap: This categorized collection of “good web” spans visual and UX design.
- UI Pattern Factory: Last time I checked, this was SOURCED from the Flickr library above. A UI Design Pattern library sourced from the Flickr group.
- Elements of Design: Although this is actually a design showcase, its separated by element and may therefore provide some modular design pattern inspiration.
- Ext GWT Explorer Demo: This showcases interactive RIA patterns accompanied by code.
Mobile UI Design Pattern Libraries
- UX on the iPhone: My informal collection of design samples from iPhone apps and the Mobile Web
- Flickr Mobile Design Pattern Gallery: Over 600 examples from the upcoming book ‘Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More’, O’Reilly Media 2011, Theresa Neil,
- Pttrns.com: Strong collection of iOS patterns
- Designing Mobile Interfaces Patterns Wiki: Accompanies O’Reilly’s Designing Mobile Interfaces
- Mobile-patterns.com: Compiled by Mari Sheibley, lead designer at FourSquare
- Mobile Game Patterns: Compiled by Ryan Hoover, Director of Product Management at San Francisco-based mobile startup, PlayHaven.
- Android Patterns: I enjoy this collection because rather than screen caps from real sources, this site compiles sketches of solutions and describes the challenges they solve for. I’d love to see a collection like this that goes beyond Android.
- A thorough compilation of UI Guidelines for mobile and tablet web app design, provided by Maximiliano Firtman, author of O’Reilly book Programming the Mobile Web
Design Blogs
- Knotebook: A community blog about design, ideas, trends, WordPress, and more.
- Blink Design Library: An informal collection of design examples with commentary from Blink, the Seattle-based user experience consulting firm (love them!)
More Design Pattern Library Lists
If you didn’t find the type of pattern you were looking for in any of the above, here are a few other lists of design pattern libraries, many of which you’ll find on my list, as well. Someday I’ll match these lists back into mine, but for now they are separate links.
- Designing Social Interfaces Design Patterns Wiki: This is a companion site to a similarly titled book. It features an awesome list of links to design pattern libraries, with an emphasis on those that address social.
- 25 UI Inspiration and Design Pattern Resources from Speckyboy.com
- Smashing Magazine’s 40 Helpful Resources on User Interface Design Patterns
What design pattern libraries are missing from my list? Please share your favorite resources in the comments so that I can add them.
See also
Check out the mobile application pattern gallery with over 600 examples from the upcoming book ‘Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More’, O’Reilly Media 2011, Theresa Neil:
http://www.flickr.com/photos/mobiledesignpatterngallery/collections/
Great, was looking for some patterns… Sung Choi thanks for the link to Squidfingers, a great simple to use resource.
You might want to check out this library of patterns for touch-based safety-critical applications: http://patterns.intuio.at
Sweet, I can get some great ideas from this! Thanks.
And some resources ABOUT patterns:
- http://www.visi.com/~snowfall/InteractionPatterns.html
- http://hci.rwth-aachen.de/paid
- http://www.hcipatterns.org/tiki-index.php
(Split my comment into 2, probably was too spammish as one larger post.)
Good list! A few more than I have on my list, with a focus on
interaction design and HCI: http://developer.yahoo.com/ypatterns/ – http://www.designofsites.com/home/ – http://ui-patterns.com/ – http://designinginterfaces.com/ – http://www.elsevierdirect.com/companions/9781558608405/index.html – http://www.usability.gov/
Tileables – fantastic! http://tileabl.es/
I always like squidfingers: http://www.squidfingers.com/patterns/