Yahoo! Design Pattern Library Released

By YUI TeamFebruary 13th, 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 boxesandarrows.com

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!

Thanks,
Bill Scott and Erin Malone,
Yahoo! Platform Design

30 Comments

  1. Read/WriteWeb Filter…

    – The Trendiest Web2.0 Page on the Net! (it’s funny cause it’s true… apologies to Fred, who for all I know may’ve invented the ‘big red jagged circle’ effect) – ‘Future of Web Apps’ slides… (beautifully designed presentation from Tom……

  2. [...] It’s a busy day over at the Yahoo Developer Network. Nate Koechley has written a detailed and insightful look at Yahoo’s Graded Browser Support. At the same time, Yahoo have released their design patterns library under a Creative Commons attribution license — these design patterns should dovetail nicely with microformats and John Allsopp’s work on Web Patterns. [...]

  3. This is exactly what the web needs. Open source modules that the community can work together on to improve and implement in their own environments. It seems obvious enough, but it takes a heavy-weight like Yahoo! to host something like this and make it great. Plus Yahoo! gets the obvious benefit of having their code hammered on and improved on by all kinds of enthusiastic volunteers.

    As an aside:

    “…for as many patterns as makes since.”

    This sentence needs to be corrected.

  4. First, thanks for catching the awkward sentence construction :-) Will correct.

    I really like your phrase, “that the community can work together on to improve…” That is exactly the spirit of both libraries. Look forward to hearing what ways we can improve any aspect of the offerings. Or what you would like to see.

  5. [...] The Yahoo! Design Pattern Library was released “to share the common patterns that [they] see emerging at Yahoo! It is hoped that by opening up [their] design patterns [they] can share [their] current thinking as well as solicit your valuable feedback…[Yahoo] believe[s] 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.“ save to del.icio.us | find technorati links [...]

  6. [...] Both these libraries together provide help to build Web 2.0 websites for users craving for richer functionalities, but still complying with the accessibility and web standards. You can find more information about them on the Yahoo! UI blog, especially the posts Yahoo! UI Library and Yahoo! Design Patterns Library. You can also subscribe to the Yahoo! Developer Network mailing list for further involvement. [...]

  7. [...] I guess if everyone follows the DPOADP, then it works.  Just hope that Microsoft doesn’t have a different Design Pattern for their Design Patterns or it’s going to be an uphill battle both ways.  In the snow.  Barefoot. And yes, I did find the link above in Yahoo’s User Interface Design Blog. [...]

  8. As part of your patterns references you may want to mention the Portland Pattern Repository at

    http://c2.com/cgi/wiki?PortlandPatternRepository

    it’s been around for a long time and was created by Ward Cunningham.

  9. Thanks for the pointer. Yes, that is an original.

  10. Hi,

    wonderful work Yahoo!

    Might I be so immodest as to point out an initiative I started some months ago Web Patterns, the aim of which is to collaboratively build a pattern language for web design and development.

    john

  11. Hey John,

    Not a problem. Anyone who has a pattern library should let us know. I actually just came across your site last week. It slipped my mind when I listed the pattern libraries. I will get your site added to the list of pattern libraries on our right bar.

    Feel free to email me separately so that we can discuss ways to work collaboratively!

  12. Thank you so much for providing this resource! I’m looking forward to learning as much as possible with regards to design patterns and how they apply to RIA’s and application design in general.

    Thanks again!
    -f

  13. [...] Na prvi pogled vse skupaj izgleda zelo obetavno, meni osebno pa se zdi super, da so brezplačno na voljo zelo uporabna orodja in resursi, ki bodo morda pomagali k standardizaciji uporabniških vmesnikov. Očitno bo kar nekaj mojih prostih uric namenjenih prebiranju omenjene vsebine, po njihovih napovedih pa je to šele začetek. [...]

  14. [...] Along with its UI Library, Yahoo! yesterday announced the publication of the Yahoo! Design Pattern Library, a collection of solutions for common web design problems. Here are a few of the patterns you’ll find in the library: [...]

  15. [...] Along with its UI Library, Yahoo! yesterday announced the publication of the Yahoo! Design Pattern Library, a collection of solutions for common web design problems. Here are a few of the patterns you’ll find in the library: [...]

  16. this is what sets you apart :)

    excellent, truly remarkable move :)

  17. [...] Y esta movida suma mucho valor a la comunidad de diseñadores de interfaz, web y de AI… en el blog lo explican muy bien: “es acerca de compartir, de cambio, de participación y de una visión” y realmente no se guardaron NADA. [...]

  18. [...] Y esta movida suma mucho valor a la comunidad de diseñadores de interfaz, web y de AI… en el blog lo explican muy bien: "es acerca de compartir, de cambio, de participación y de una visión" y realmente no se guardaron NADA. [...]

  19. James McKinney said:
    February 23, 2006 at 10:10 pm

    I think it’d be better to integrate feedback directly into the patterns website than to rely on comments on a weblog. The problem with weblog posts is that after a few weeks, no one reads the comments (or the comments get spammed). Also, comments are not a very good way to encourage discussion (compare with message boards or mailing lists), because it’s a lot of work just to find out who’s replying to you and who’s starting a new topic (the pingbacks also get in the way). Besides, you’ll get much more feedback if you allow users to more easily discuss with each other (I know there’s a Yahoo! group, but the blog should strive to be just as friendly to discussion).

    In any case, forcing users to follow a link from the patterns website to a weblog and to scroll all the way down to write some feedback adds unnecessary obstacles. To get the most feedback, you need to get out of the user’s way.

    Lastly, please put a link to “post a comment” at the end of the article: most people want to comment after having read the story, not before :)

  20. James,

    I agree with your assessment. The original desire was to release the pattern library with commenting built into each pattern page. In fact that is the way the internal Yahoo! Pattern Library is designed. However, we did not have time to implement a commenting system or install/configure a content management system like Drupal in time for our release.

    There is a down side to the commenting within a pattern, however. I have seen this happen internally. Once you get several comments it is no different than the comments being on a blog article. The same issues about threading, etc. arise. And it is also vunerable to spam as well.

    I think in the next push of the library we will create a link on each pattern page that take you to a thread for the given pattern.

    On the placement of the “post a comment”… We use wordpress and this is the way comments are handled. Not sure it can be changed. I did a quick survey of the most popular blogs and they do commenting the same way. The idea is that you generally comment on an article after reading the comments about an article. I will look into how feasible a quick jump style link would be to add.

    Thanks!

  21. Hi,
    Just a plea for better version control… we seem
    to have people providing patches to yui but nowhere
    can I find a list of versions. In order for the
    community to help enhance and understand the state
    of yui there really needs to be something like
    svn.mythtv.org/trac/ or at least a
    browsable CVS repository.

    Just my 2 cents… for such beautiful code it
    seems a shame there isn’t an obvious version
    tracking repository… maybe there is but I
    couldn’t find it.

    Cheers,

    Doug

  22. Great discussion. Kudos to ya.

  23. great job,guys. Yahoo! is really a good boy.

    one step of Yahoo!,great move of human being.:)

    in my humble opinion, why not go one step further?
    i just mean that why not pulish more patterns to public immediately,since that the patterns released is just tiny part of the internal library.

    anyway,great job.

  24. [...] It’s a busy day over at the Yahoo Developer Network. Nate Koechley has written a detailed and insightful look at Yahoo’s Graded Browser Support. At the same time, Yahoo have released their design patterns library under a Creative Commons attribution license — these design patterns should dovetail nicely with microformats and John Allsopp’s work on Web Patterns. [...]

  25. Good work, the design is realy good, best regards

  26. [...] Actualización: Para los interesados en los patrones, han abierto un grupo de discusión en yahoo groups:Yahoo! Design Pattern Discussion Group (via yuiblog) [...]

  27. [...] find more information about them on the Yahoo! UI blog, especially the posts Yahoo! UI Library and Yahoo! Design Patterns Library. You can also subscribe to the Yahoo! Developer Network mailing list for further [...]

  28. The more time that is spent dissecting, analyzing, and critiquing a design by the wrong kinds of people the worse that design gets. The same trend applies to the number of people involved in the design process.
    Thx a lot for infomation!