I was going through my bookmarks looking for a problemsolver I needed for my latest webdesign project and I found myself doing exactly the same thing of which I warned you all before, badly tagging in delicious. Don’t make the same mistake as I did.
Instead of bookmarking all these sources seperately, you can just bookmark this resource list of inspirational blogs, books and articles on user interface patterns. I’ll keep on updating it with new sources. Suggestions are as always very welcome.
is a “collection of User Interface Design Principles and User Interface Usability Patterns present on web applications and sites today”. This collection includes many useful and very specific categories such as 404-pages, navigation, search suggestions, …
visit the website of UI Patterns
Similar to UI patterns but the screenshots are divided into more categories, making it easier to find a specific interface pattern solution such as pagination or forms.
visit the website of Pattern Tap
A blog by Jason Robb, who publishes interesting design solutions to everyday design problems. This is not a collection of patterns as we know it (such as the ones I previously mentioned), but rather Jason’s personal view on interface design.
visit the website of UI Scraps
Janne Lammi, Matti Varjokallio and Johannes Hocksell describe Patternry as a UI Design Pattern Library and is, as you expected, a collection of web design patterns. They take interface patterns from all sorts of websites and share their opinion on how it was used, which problem it has solved, … Soon it will also be a community where everyone can share, create and collaborate on design patterns but for now they’re still in beta.
visit the website of Patternry
Yet another pattern library, maintained by Yahoo!. At the moment the collection contains 59 patterns divided into 5 main categories: layout, navigation, selection, rich interaction and social. By joining the community you can read and comment on the blog and join the discussion in the many forums.
B&A does not confine themselves merelly to user interface design (so no collections of screenshots here), but discuss more general topics including graphic design, interaction design, information architecture and the design of business.
Nevertheless, B&A is a great resource and if you haven’t got them bookmarked yet, you should do it right now.
visit the website of Boxes and Arrows
The OSDPL has sorted their pattern library into five categories and is accompanied by a disciption explaining the design problem at hand. The collection isn’t all that big, but that doesn’t make it less useful. Also, OSDPL is a Fluid Project which is a open-source software community.
visit the website of Open Source Design Pattern Library
Fluid Infusion is not a collection of patterns as such but rather a javascript library. As mentioned on their website: “Developed by an international group of software developers and interaction designers, Fluid Infusion combines JavaScript, CSS, HTML and user-centered design, rolling them all into a single package that sits on top of the popular jQuery toolkit.Infusion includes ready-to-use components as well as a framework to build your own. You can find some great and working examples of ‘inline text edit’ and ‘grid reordening’.
visit the website of Fluid Infusion
A big collection of patterns in interaction design. As Martijn van Welie stated on the website, he tried to group them meaningfully and I think he succeeded just wonderfully in doing so. The categories are well chosen, making the entire operation of finding the desired pattern so much easier. Each pattern comes with multiple examples of websites or applications.
Open Design Patterns is a wiki page which contains a small amount of patterns (feel free to add your own content) and discusses the problem, usage, solution and the accessibility thereof. Some examples are in a video format, making it easier to understand a pattern when it needs user interaction.
visit the website of Open Design Patterns
A big collection of e-commerce interface and design elements with a clear focus on the individual elements that make up online stores, all categorized per design element and retailer.
Quince is a community driven UX design pattern explorer and has a wide collection of patterns, all neatly organized and browsable. You could give the Silverlight version a try, giving you the option to explore patterns by tasks, tags and typical UI placement, but I personally prefer the normal HTML version.
The blog of Erin Malone, a user experience designer, public speaker and co-author of “Designing Social Interfaces”
visit the website of Dezigning Interactions
Codepen displays screen shots of interface design patterns, including the HTML, CSS and JS to code it on your page. It is a great resource for anyone who wants to quickly browse for inspiration on a specific design element.
visit the website of Codepen.io
The EUIDL describes principled ways to solve common user interface design problems related to search, faceted navigation, and discovery. The library includes both specific UI design patterns as well as topics – groups of patterns related to significant aspects of search and discovery such as: search, faceted navigation, promotional spotlighting and results manipulation.
visit the website of Endeca User Interface Design Pattern Library
Peter Morville, founder of Semantic Studios and author of the book “Search Patterns: Design for Discovery” grouped his findings into a pattern library which is dedicated to search and navigation.
visit the Flickr Group of Search Patterns
A huge collection of user interface patterns by Brian Christiansen, Director of Digital Media at User Interface Engineering. If you need anything, you’ll probably find it here.
visit the Flickr Group of Design Patterns
Similar to the Design Patterns Flickr group but adds more general design lay-outs to the collection, such as about pages, infographics and RSS-feed icons.
visit the Flickr Group of [Design Solutions]
The first article is maybe the most important one because it explains in several parts what interfaces are all about. A must-read!
5 interaction designers answering two questions: “What Do We Mean by Design Patterns?” and “What’s the Best Way to Communicate Patterns?”
I couldn’t miss out on this one. No additional information is needed.
This article is a small part of the Apple Human Interface Guidelines and a must-read!
What can I tell you, I just love to read about web design. Because I could spend a small fortune on books, I find it very useful and wise to read a few reviews before I actually buy a book. Instead of spending my time looking for the next purchase, I thought I’d write a review for a change. Read the full review now!
A great book that explores all kind of interface patterns into detail. Really usable material for interaction designers. I even wrote a little review of Designing Web Interfaces a while ago because I think it’s really worth reading!
Last but not least, a great book filled with best practices on interface patterns and practical advice for easy implementation. An absolute must-read!
Traditional research methods are by no means dead, as data analytics and attitudinal continue to…
We’re at an inflection point with personal transportation. Driving by hand is old-school. Driverless or…
Many designers and digital marketers are giving user experience more and more emphasis as the…
Storytelling is no longer limited to our childhood memories. I mean who doesn't love to…
Wearable technology is making it easier for consumers and businesses to access, gather, send and…
Special offers that can expire at any moment. Little extra's getting into your shopping cart…
View Comments
great articles saved them for future use
thanks!!!
.....
Very intresting article on blogs,books and user interface patterns
Thanks!
Nice article! is it ok if i re-use it on my blog referenced to this source obviously! =)
@Marco Monteiro: If you mean:"can I copy your content?" I would have to decline for obvious reasons :-). You can always write a small summary about what this post is all about with a link to this page. Nice to hear that you liked the article !
24 inspirational blogs, books and articles on #ui #patterns http://bit.ly/hmkslY
Excellent article, Paul :)
you ended up distracting me for quite some time... some very nice links here.
Particularly liked PatternTap which I had seen before but forgotten about - wonderful little site.
Thanks again :)
@prisca: Hi Prisca, thanks for the comment and nice to hear you liked the article. Have to say that PatternTap has been one of my favourite pattern collections since I first discovered it a few years ago. Still going strong with new updates!
Great resources on UI patterns... http://bit.ly/gi3Anz
Great list of references Paul!
Well written article, well researched and useful for me in the future.I am so happy you took the time and effort to make this article. Very nice post