We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.
If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating.
A design pattern refers to a reusable and applicable solution to general real-world problems. For example, a solution for navigating around a website is site navigation (a list of links that point to different sections of the site), a solution for displaying content in a compact space are module tabs.
There are many ways to tackle a specific requirement – and as a designer – the most important thing you can do is selecting the option that best reflects the needs of your users.
In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns. Use these recommended sources to gain knowledge about a particular UI problem or to gain inspiration and insight on best practices, techniques, and examples of exemplary UI designs. Great thank-you goes to Pavel Konoplitski for providing us with related resources.
UI Design Patterns for Sites and Web Applications Link
UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.
QUINCE: X Patterns Explorer3
QUINCE is a beautiful and stunning web application that helps you explore an innumerable amount of user experience design patterns such as date pickers and two-panel selectors. The application requires the Silverlight plugin and is best viewed under Internet Explorer (though we have verified it to work well in Firefox and Safari).
Interaction Design Pattern Library5
Welie.com has an interaction design pattern library maintained by Martijn van Welie6, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows7. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.
Created and maintained by Matthew Smith and Chris Pollock10, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows11 and breadcrumbs12. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.
This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. What’s more, users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.
The UI Pattern Factory21
The UI Pattern Factory is a UI design library and gallery. What’s great at UIPF is that they sometimes share videos22 in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com23.
Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library, maintained and presented by the Yahoo! Developer Network (YDN), shares design patterns to the web design and web development community. They also have a recently-launched forum25 where you can swap stories with fellow UI designers and discuss patterns showcased in the design pattern library.