24 Inspirational Blogs, Books and Articles on User Interface Patterns

6 mins read

Home    Book Reviews    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, …

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

visit the website of Codepen.io

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!

 

Designing Web Interfaces

Designing Web Interfaces: Principles and Patterns for Rich Interactions – by Bill Scott and Theresa Neil

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!

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!

 

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 .

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

  1. techwench says

    great articles saved them for future use
    thanks!!!
    …..

  2. technology review says

    Very intresting article on blogs,books and user interface patterns

    Thanks!

  3. Marco Monteiro says

    Nice article! is it ok if i re-use it on my blog referenced to this source obviously! =)

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

  5. 24 inspirational blogs, books and articles on #ui #patterns http://bit.ly/hmkslY

  6. prisca says

    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 :)

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

  8. Great resources on UI patterns… http://bit.ly/gi3Anz

  9. Karen says

    Great list of references Paul!

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

  11. Jess says

    Another good one is http://www.useyourinterface.com!

  12. Thank you for that Jess! Indeed a very nice collection of interaction design patterns.

  13. Ideavate says

    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.

  14. nanik udassi says

    nice blog

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!



(will not be published)






provides you with all the tools to generate actionable insights, both desktop as mobile.“
- Paul