Check out design patterns created by Fluid and other contributors in the Open Source Design Pattern Library!

What is a Design Pattern?

According to architect Christopher Alexander, the father of the Pattern Language movement in computer science, a pattern is "a proven solution to a common problem in a specified context." Thus, each pattern is a three-part rule, which expresses a relation between a certain context, a problem, and a solution.

Design patterns serve as tools to communicate ideas, solutions, and knowledge about commonly recurring design problems. User interface design patterns help designers and developers create the most effective and usable interface for a particular situation.

Patterns can be expressed hierarchically, with each level representing a different level of granularity, and there may be many different ways to (physically) implement each pattern.

For more information on design patterns, see the General Design Pattern FAQ.

How to Write a Good Design Pattern

The How to Write a Good Design Pattern page gives background information on design patterns followed by guidelines and advice on writing helpful and effective patterns. It should be of interest to pattern authors, designers, and solution implementers, as well as anyone else interested in how patterns can contribute to the creation of well-crafted user interfaces.

Open Source Design Pattern Library

Once you've written a design pattern, how can you share it with others? The Open Source Design Pattern Library (or OSDPL) is a free and open resource created by the Fluid Project where developers and designers can collaboratively create, share, and discuss user interface design patterns.

You can visit the Open Source Design Pattern Library to see the latest progress on the project and to begin participating!

How you can help the OSDPL

If you are interested in assisting in this effort, here are some helpful links:

Contribute a design pattern to the OSDPL
Join the fluid-talk mailing list
Test the OSDPL by trying it out and giving us feedback
Drupal and CSS help is needed. Please drop us a line to become a volunteer!

Fluid Design Pattern presentations

Design Pattern Resources

UI Design Pattern Libraries

Welie Design Patterns
Tidwell Design Patterns
Yahoo Design Patterns
Berkeley Web Patterns Project
Open Design Patterns
Open Design Patterns (This is a different site from the one above)
Information Design Patterns
Peter Morville's Search Patterns
AjaxPatterns
Design of Sites Pattern Browser (registration required)
Sakai Design Patterns Library
Sakai Design Patterns ideas
User Interface Design Patterns
UI-Patterns.com
Oracle Browser Look and Feel Resources
Hypermedia Design Patterns Repository
The Brighton Usability Pattern Collection
The Pattern Language Network

UI Design Pattern Screenshot Collections

Other Design Pattern Resources

Implementing a Pattern Library in the Real World: A Yahoo! Case Study pdf html add'l resources
PLML (Pattern Language Markup Language)
UC Berkeley's Web Patterns Library group's "Comparative Analysis of Collections"
The Pattern Gallery - includes history and examples of pattern libraries
Discussion of Design Patterns & Libraries on IxDA's mailing list
The Interaction Design Patterns Page - includes info on Papers About Pattern Languages for Interaction Design, Patterns and Pattern Languages for Interaction Design, How to Write Patterns
WebPatterns.org
processes + patterns: best practices on steriods by Peter Boersma
The encyclopedia entry on Interaction Design Patterns on Interaction-Design.org
Open Directory: Patterns & Anti-Patterns
HCIPatterns.org - includes People, Events, Patterns, Publications, Tools
Interaction design pattern Wikipedia page
Yahoo! UI Pattern Authors Yahoo! group/mailing list
Summary of A Pattern Language by Christopher Alexander
Architypes.net's Pattern Index
Patterns and Software: Essential Concepts and Terminology

Browser not supported