Design Pattern Library

Patterns from A to Z

Alphanumeric Filter Links
The user needs the ability to look up information alphabetically within a large data set.
Animate Transition
The designer needs to communicate that an object is changing its spatial relationship within the page.
Architecture of a Review
A product or website needs to present ratings and reviews with a variety of informational elements.
Auto Complete
The user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed.

Breadcrumbs
User needs to navigate potentially large quantities of information efficiently, without becoming lost.
Brighten Transition
Designer wants to make a previously dimmed object a point of focus by making the object bright again.
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.

Collapse Transition
An object is no longer of primary importance, but must remain available in a smaller form.
Cross Fade Transition
Designer wants to communicate that a new view of an object is replacing the previous view.
Cursor Invitation
Designer needs to cue the user that an object can be interacted with.
Dim Transition
Designer needs to communicate that an object is of secondary importance.

Drag and Drop Modules
The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.
Drop Invitation
Designer needs to indicate valid candidate drop sites during a drag and drop operation.
Expand Transition
Designer needs to show the detail of an object in its context or reveal a previously collapsed object.
Fade In Transition
Designer needs to communicate that an object is being added to the page or application.

Fade Out Transition
Designer needs to communicate that an object is going away.
Hover Invitation
Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object.
Item Pagination
The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.
Module Tabs
The user needs to navigate through one or more stacked panes of content without refreshing the page.

Navigation Tabs
The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.
Page Grids
For consistent use of common page elements, page width, division of space, ad usage and code base.
Rating an Object
A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in.
Search Pagination
The user needs to view a set of search results ranked by relevance that is too large to easily display within a single page.

Self Healing Transition
Designer wants to show that an object has been removed from a list of objects.
Slide Transition
The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page.
Spotlight Transition
Designer needs to call attention to where a data value or content has changed within the interface.
Tool Tip Invitation
Designer needs to cue the user about what will happen if they click the mouse on the hovered object.

Vote to Promote
User wants to promote a particular piece of content in a community pool of submissions.
Writing a Review
User wants to share her opinion with others about an object (place, person, thing) in greater detail than a simple rating.