Boxes and Arrows
Boxes and Arrows is an online publication dedicated to the art and science of designs. In the site, you will find plenty of information regarding effective interaction designs such as how to get a web form’s structure right and designing for user-generated and social media based content. The tone and style of Boxes and Arrows is professional and academe-centric so articles usually leverage information from research and academic papers.
CSSbake is a unique web design gallery that focuses on website components rather than the overall web design. For example, you can find showcases of good navigation or beautiful comment sections. CSSbake “focuses on the ingredients that make a site good” and is a great place to attain inspiration for common User Interface design patterns.
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.
Designing Social Interfaces
In this resource, you will find patterns for social and collaborative sites and applications. The site is a wiki-style site that allows for user-generated and user-edited content, and is a companion site for a book called “Designing Social Interfaces“. You will find insights on how to effectively present content and build features into your project that leverage the advantages of collective and shared knowledge.
Elements of Design
Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.
Functioning Form is the weblog of UI designer and author Luke Wroblewski. You can learn about designing for humans by reading through his insightful articles on the site and find useful lists such as a collection of resources on website buttons.
Interaction Design Pattern Library
Welie.com has an interaction design pattern library maintained by Martijn van Welie, 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 slideshows. 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.
MephoBox is a design gallery that presents web design patterns and trends such as login forms and typography use with the aim of inspiring designers with their own work. Users can vote on designs and leave comments on them, allowing viewers to sort results by “most popular” and “most viewed” for quickly finding well-liked designs.
patternBrowser is a unique web application for browsing user interface design patterns on a variety of products including mobile devices. It is a great resource for quickly finding a ton of inspiration in a compact, well-organized, and very searchable manner.
Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. 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.
QUINCE: X Patterns Explorer
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).
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.
Written by Experience Designer Jason Robb, UI Scraps is a weblog that catalogs, good, bad, and notable interface designs. Expect to find critiques of submission forms and praises for good designs and UI Scraps.
User Interface Engineering
User Interface Engineering is an organization on usability, web design, and information architecture. It is a great place for learning about effective design patterns for common UI problems. For example, you can learn about faceted search or previous and next actions in web forms.
UXmatters is a web magazine dedicated to sharing information about the user experience. In the publication, you will find a ton of information on effective and usable design patterns and techniques regarding the design of interfaces centered around its users.
The UI Pattern Factory
The UI Pattern Factory is a UI design library and gallery. What’s great at UIPF is that they sometimes share videos 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.com.
Web Design Practices
Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component.