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.
Alphanumeric Filter Links
Create nice Animation of alphanumeric link pagination like Yahoo! Movies alphanumeric pagination.The content is arranged by alphabetically .
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
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.
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
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
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
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
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