dans.blog: Use existing UI Design Patterns to solve your UI problems...

I came across a couple of sites this morning that show off examples of existing UI design patterns that I believe will be useful to all developers. While there's always room to improve, many of the design problems we run into while developing applications can be solved with existing design patterns. The links below are good resources for showing existing patterns, why they're useful and examples of when to use them.

UI Patterns - User Interface Design Pattern Library
This is a community based site where users can suggest new patterns and comment on the existing examples. Many of the examples have screenshots of multiple implementations of the same concept, so this can be a good way to spark ideas on how to solve a problem you're facing.
Designing Interfaces - Patterns for Effective Interaction Design
This is a support site for the O'Reilly book Designing Interfaces: Patterns for Effective Interaction Design. There's a lot of really good examples of design patterns and is extremely useful even if you don't own the book (although this looks like a good book for reference library.)
Yahoo! Developer Network - Design Pattern Library
One thing I like about this site there's videos to full illustrate the pattern in action (just click on the "Play" button in the screenshots.) While this is a great companion guide if you use the Yahoo! UI Library, you don't need to be using the library for this site to provide value.
Welie.com - Patterns in Interaction Design
This site contains more corner case issues and is a little more comprehensive in the types of patterns they illustrate.

I'm working on laying a "dashboard" page where we need to display lots of various information, but in as small a viewport as possible (our goal is to try to avoid scrolling.) I'm using this sites to give me some ideas of ways to implement various solutions.

I'd highly recommend everyone just spend some time looking through the sites today and see what kind of creativity it sparks.

Categories: HTML/ColdFusion

7 Comments

Erik Giberti
Nov 5, 2008 @ 10:40 AM

I've been thinking about user interfaces a lot myself lately. I'd add a few more resources to this list to really fill out the stuff not covered by these pattern sites. Human Factors International http://www.humanfactors.com/downloads/GUIDesign.as... has some great information for free and while I don't always agree with what he says, Jakob Nielson http://www.useit.com also provides some interesting usability guidance.
Danilo Celic
Nov 5, 2008 @ 11:49 AM

You might want to take a read through Stephen Few's book Information Dashboard Design, you can get to it via his site: http://www.perceptualedge.com/

Please do read through his site, including his blog, but especially take a read through the Examples pages where he critiques a number of digital dashboards. If you read through his blog you'll soon find out that he is quite opinionated, but I feel that he offers well thought out reasons for his strongly held opinions.

HTH
William from Lagos
Nov 5, 2008 @ 5:40 PM

Can you recommend books? I am looking forward to buying a couple of books on User Interface design and Information architecture this christmas
Dan G. Switzer, II
Nov 6, 2008 @ 8:01 AM

@William:

While I don't have it, the book who's supporting material is at http://designinginterfaces.com/ looks pretty good. I usually find the O'Reilly books to be very good reference material.
Gerald Guido
Nov 6, 2008 @ 10:38 AM

Information Architecture for the World Wide Web is a classic. It totally changed the way I looked as building sites/apps.

http://books.google.com/books?id=hLdcLklZOFAC

Thanx Dan. These are great resources. I have passed them on to a bunch of friends.
vpxl
Nov 20, 2008 @ 6:23 PM

I read this page - http://books.google.com/books?id=hLdcLklZOFAC, good peice, thanks.
William from Lagos
Nov 20, 2008 @ 7:00 PM

@vpxl - Thanks for sharing. As a matter of fact, I just ordered it a couple of days ago

Comments for this entry have been disabled.