24 Inspirational Blogs, Books and Articles on User Interface Patterns

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.

blogs

1. UI Patterns

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, …

2. Pattern Tap

3. UI Scraps

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.

4. Patternry

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.

5. Yahoo! Design Pattern Library

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.

6. Boxes and Arrows

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.

7. Open Source Design Pattern Library

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.

8. Fluid

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’.

9. Welie

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.

10. Open Design Patterns

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.

12. Quince : UX Design Patterns

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.

14. Codepen

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.

15. Endeca User Interface Design Pattern Library

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.

Books

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!

Paul Olyslager

Paul is the creator, editor and most regular writer of paulolyslager.com. He's also working as UX Lead for Home24, a leading online shop for furniture and home accessories, based in Berlin, Germany. Read all about Paul or find him on Twitter, LinkedIn or Facebook. View other posts by Paul Olyslager.

@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 !

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.

@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!

The resources posted by you in the blog are very useful for me! I was looking for this exact and particular information for a long time. Thanks.

I would love to hear your thoughts on this.

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!