Yahoo! Design Pattern Library Released

By YUI TeamFebruary 13, 2006

I'm excited to announce that today we are releasing the Yahoo! Design Pattern Library to the public under a friendly Creative Commons License. The goal in releasing this library is for us to share the common patterns that we see emerging at Yahoo! It is hoped that by opening up our design patterns we can share our current thinking as well as solicit your valuable feedback.

We believe design patterns are powerful. First, they offer a solution in context of a problem. Second, they provide a name for the solution. Taken together as a set, pattern libraries form a solution language that can enhance our ability to communicate design ideas. Lastly, they provide us a context in which to discuss a number of associated issues: the thinking behind a solution; issues around accessibility, and de-gradeablity; other related patterns; examples of usage; and code samples to name a few.

In case patterns are a new concept to you, here's a little history to get you up to speed.

Background on Patterns

Christopher Alexander coined the concept of a pattern language for architecture with his seminal book, A Pattern Language. He defined a pattern as a solution to a problem in context.

Patterns spread much later to the software architecture world with the publication of the book Design Patterns. A couple of years later Jenifer Tidwell published a site called Common Ground, later updating it and finally releasing an O'Reilly book, Designing Interfaces in November 2005.

Besides Tidwell's pattern library, others have created or are in the process of creating pattern libraries. Welie has a wonderful site as does Laakso. There is also a set of patterns at the Diemen Repository.

More recently, Michael Mahemoff created the Ajax patterns site for capturing both interaction and software design patterns for Ajax applications.

And just a few weeks back, Jared Spool published an excellent article The Elements of a Design Pattern which discusses how to express a pattern. Some of the background research for that article is based on our own pattern library.

Which brings us to our library-- the Yahoo! Design Pattern Library. Yahoo! gave a conference presentation on how this library was brought to life at the IA Summit in 2005. It was followed up with a more detailed article on

So, Why Another Pattern Library?

Given all of the resources above, one might wonder, "Why do we need another pattern library?"

It's About Sharing

Well first, its not so much that we are releasing another pattern library. We are releasing our pattern library. It is really in the interest of sharing what we are learning about designing rich internet applications for Ajax and Flash that has led us to open up our design thinking to the public through our pattern library.

It's About Change

With the advent of Ajax technologies, there are new idioms appearing in the web space. Some of these idioms are straight (e.g., drag and drop) from the desktop. Others are unique to the web. And still others are a curious blend of the two. By creating a venue to share what we are learning about these new ideas we feel we can participate in elevating the state of the art in web design and development.

It's About Participation

But probably the most exciting part for us is your participation! We are keenly interested in creating a shared vocabulary for designing for the web. And we feel that by opening up our thinking you can help us improve. In that vein we welcome your feedback.

That's the purpose of this blog. Here, we will post articles on each of the patterns we release as well as what we may be thinking about upcoming patterns. All patterns will be posted under the Design category, so feel free to subscribe to our design-oriented articles. Development articles are filed under Development, and you can subscribe to those articles here. Or if you want it all, you can get it here.

For fuller discussions on patterns head to over to our forum group, ydn-patterns.

It's About a Vision

And the larger vision is that our Design Pattern site becomes a place where we can hang all kinds of goodness-- code examples, interaction movies illustrating patterns, design discussions, etc. As the pattern library grows we hope that it will contain a rich set of community knowledge to inform all of us on better design solutions.

Humble Beginnings

But, hey all great things must start small, right? The internal Yahoo! Design Pattern Library contains a lot of patterns. But what we released today is a small set of just 13 patterns. What gives? Well, we had to start somewhere. We chose a couple of patterns that represent more recent Ajax-driven patterns (e.g., Drag and Drop Modules) as well as traditional patterns (Breadcrumbs). And while we currently provide only a few links to code examples, our vision is provide them for as many patterns as possible.

But the vision is much larger. Internally, we have been tracking, documenting and cultivating a large set of Ajax patterns. Look for those to roll out in future releases.

So let us know what you think. What ways can we improve the library? What are other items that you would want to see listed in a pattern? What can we do to improve the site?

Ideas welcome!

Bill Scott and Erin Malone, Yahoo! Platform Design