UI Design Patterns

The last few months have been a very intense time as I have recently changed jobs. In my new role, Interaction Design is a critical part of the job description (yeah) but this has put my personal UI toolbox to the test .  Over a series of weeks, I tried to expose myself to as many UI design solutions as possible. During this search, I have uncovered a large collection of some really great sites that I would like to share. In order not just to flood my senses with design solutions and improve recollection for the future, I started a notebook of highlighted UI solutions. Actually, it started a few doodles on scraps of paper, but it soon graduated to it's own notebook.

The method of documentation is simple, for each new resource I discover, I choose at least 3 solutions that I find interesting or relevant. I study each solution, then after a few minutes, sketch the UI from memory. For me this, this works well for internalizing the UI solution in my brain for future recall. Occasionally, I have redrawn the UI slightly different, or how I remember it, transforming it into something different.

My list of top UI design resources:

UI Design Patterns for Websites and Applications

1. UI-patterns.com

UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.

2. Interaction Design Pattern Library

Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.

3. Pattern Tap

Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.

4.  design|snips

This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. Users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.

5. The UI Pattern Factory

The UI Pattern Factory is a UI design library and gallery. The added extra from this collection  is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com. A very comprehensive collection.

6. Web Design Practices

Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component. This information is good when explaining why design solutions have been chosen.

7. Elements of Design

Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

8. UI Patterns

UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.

9. Little Big Details

A great tumblr site that gives a daily dose of UI inspiration

10.Ultimate guide to table UI patterns

A rather short, but good,overview of types of table UIs as well examples.

I will add new ones as I find them, but so far this list is my new UI design toolbox.

Flickr Collections and Groups

1. Design Patterns

This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is very well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.

2. Design Patterns Group

In this Flickr Group, there are over 300 items that you can browse through to see interface design solutions and trends.

3. Web Form Design: Filling In the Blanks

Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. This is an excellent and inspirational resource to have around for times when you are designing web forms.

4. Search Patterns

Peter Morville has a Flickr collection dedicated to gathering design to for effective search. For different types of search UI inspiration this an excellent resource.

I will add more resources as I find them, but for now, this will fill my UI design toolbox quite well.