Yahoo! Design Pattern Library for web developer

Design pattern describes as optimal solution to a common problem within a specific context . In this article, you will read about the 8 Yahoo! Design Pattern Library for web developer from Yahoo! Design Pattern Library . All work is licensed under a Creative Commons Attribution 2.5 License.

1. Alphanumeric Filter Links

   

   Create nice Animation of alphanumeric link pagination like Yahoo! Movies alphanumeric pagination.The content is arranged by alphabetically .

   Demo: Alphanumeric Filter Links Demo

2. Animate Transition

   Image credit: Yahoo Developer Network 

   Create a nice Animated Transition like Animation of drag & drop in My Yahoo!  Transitions are a powerful way to communicate change in a user interface. Transitions can communicate a change in relationships between elements on a page or a change in an element’s state.

   Demo: Animate Transition Demo

3. Architecture of a Review

   Image credit: Yahoo Developer Network

   A product or website needs to present ratings and reviews with a variety of informational elements. With architecture guidelines , it help you to find group related information and diffuse user confusion.

   Demo: Architecture of a Review Demo

4. Brighten Transition

   

   Create a Brighten Transition effect after filtering like Brighten after filtering in Yahoo! Tech . Color changes do not generate the same level of attention in the brain that movement changes generate. How much attention the dimming and brightening of an area on the screen will get is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states (greater contrast; more attention).

   Demo: Brighten Transition Demo

5. Calendar Picker

   

   The calendar widget provides a familiar graphical interface like Animation of calendar picker in Upcoming to users who may find it easier to select a date or multiple dates using a familiar metaphor over harder to use interface elements like drop downs and entry fields.

   Demo: Calendar Picker 

6. Yahoo Carousel

   

   The carousel allows a designer to better utilize page real estate while providing an engaging experience for object selection. Depending on the context, a carousel may be used to provide a peripheral browsing option when the users attention is primarily focused on something that demands a large portion of the available real estate.

   Demo: Yahoo Carousel

7. Vote to Promote

   

   Such types of pattern come to more popular in Social bookmarking sites Digg, Reddit, Newsvine, among others .It Such good way to promote community participation, and provide a low-cost means for surfacing popular content. The user wants to promote a particular piece of content in a community pool of submissions. This promotion takes the form of a vote for that item, and items with more votes rise in the rankings to be displayed with more prominence.

   Demo: Vote to Promote Demo

8. Auto Complete

   

   Reducing the number of keystrokes allows for faster user input. Display a list of suggested items that most closely match what the user has typed. Continue to narrow or broaden the list of suggested items based on the user’s input.

   Demo: Auto Complete Demo