Welcome

Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback.

Most recently, we've added a collection of Reputation patterns to our growing collection of social design patterns.

We're also pretty jazzed about our wireframe stencil kit. The stencils in it are mapped to the patterns in this library and the code modules in YUI.

What's a Pattern?

A pattern describes an optimal solution to a common problem within a specific context. more...

Recent Patterns see all...

  • Calendar Picker Pattern
  • Carousel Pattern
  • Collectible Achievements Pattern
  • Calendar Picker
    User wants to find or submit a particular piece of information based on a date or between a date range.
  • Carousel
    User needs to browse among a set of like objects represented pictorially.
  • Collectible Achievements
    Some participants in communities respond to opportunities to collect and display awards.
  • The Competitive Spectrum Pattern
  • Identifying Labels Pattern
  • Leaderboard Pattern
  • The Competitive Spectrum
    The designer needs to match the reputation system to the community's degree of competitiveness.
  • Identifying Labels
    Community members need to identify distinguished members of the community.
  • Leaderboard
    In highly competitive communities, users may want to know who are the very best performers in a category or overall..
  • Named Levels Pattern
  • Numbered Levels Pattern
  • Page Grids Pattern
  • Named Levels
    Participants in a community need some way to gauge their own personal development within that community.
  • Numbered Levels
    Participants in a community need some way to gauge how far they've progressed within that community.
  • Page Grids
    Web sites have a need for consistency amongst common page elements.


  • Points Pattern
  • Ranking Pattern
  • Reputation Pattern
  • Points
    In some communities, participants want a tangible measurement of their accomplishments.
  • Ranking
    In highly competitive communities, users may want to compare their performance against that of their peers.
  • Reputation
    The user expects to develop a reputation and hopes for insight into the reputations of others.

  • Self Healing Transition Pattern
  • Top X Pattern
  • Vote to Promote Pattern
  • Self Healing Transition
    Designer wants to show that an object has been removed from a list of objects.



  • Top X
    Participants in some communities welcome the challenge of striving to enter the top tier of competitors.
  • Vote to Promote
    User wants to promote a particular piece of content in a community pool of submissions.



Join Our Design Pattern Community

There's two ways to talk back. First, we blog our patterns. Second, we have a forum for general discussion.

» Check out Updates at yuiblog.com

» Join the Discussion at the Yahoo! Pattern Group

Yahoo! UI Library

Need code?
Get our open source Ajax library.

» Learn More

Copyright © 2005-2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings