24 Inspirational Blogs, Books and Articles on User Interface Patterns

6 mins read

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

visit the website of UI Patterns

2. Pattern Tap

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

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.

visit the website of UI Scraps

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.

visit the website of Patternry

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.

visit the website of Yahoo!

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.

visit the website of Boxes and Arrows

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.

visit the website of Open Source Design Pattern Library

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

visit the website of Fluid Infusion

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.

visit the website of Welie

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.

visit the website of Open Design Patterns

11. Ecommr

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.

visit the website of Ecommr

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.

visit the website of Quince

13. Dezining Interactions

The blog of Erin Malone, a user experience designer, public speaker and co-author of “Designing Social Interfaces”, who shares her thoughts about design, patterns and code.

visit the website of Dezigning Interactions

14. Web & Patterns

W&P displays screen shots of interface design patterns, usability techniques and best practices and is a very nice resource for anyone who wants to quickly browse for an inspiration on a specific design element.

visit the website of Web & Patterns

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.

visit the website of Endeca User Interface Design Pattern Library

 

Flickr Groups

16. Search Patterns

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

17. Design 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

18. [Design Solutions]

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]

 

Articles

19. “Interface 101 – Part One: Basic Interfaces” by Fuel Your Interface

The first article is maybe the most important one because it explains in several parts what interfaces are all about. A must-read!

Read the article

20. “Design Patterns: Introduction” by LukeW

5 interaction designers answering two questions: “What Do We Mean by Design Patterns?” and “What’s the Best Way to Communicate Patterns?”

Read the article

21. “User interface design” by Wikipedia

I couldn’t miss out on this one. No additional information is needed.

Read the article

22. “Human Interface Design Principles” by Apple

This article is a small part of the Apple Human Interface Guidelines and a must-read!

Read the article

 

Books

23. “Designing Web Interfaces: Principles and Patters for Rich Interactions” by Bill Scott and Theresa Neil

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!

24. “Designing Interfaces: Patterns for Effective Interaction Design” by Jenifer Tidwell

Last but not least, a great book filled with best practices on interface patterns and practical advice for easy implementation. An absolute must-read!

 

About the author

I'm the creator and editor of paulolyslager.com, a blog about on Web Design, User Experience and Usability. Currently I'm working as UX Manager for a leading supplier of nutrients and supplements to the European market based in Berlin, Germany. Follow me @paulolyslager or google+.
My Book Collection on UX
My Book Collection on UX

People who have read this article, also liked reading...

20 responses to “24 Inspirational Blogs, Books and Articles on User Interface Patterns”