Smashing Magazine - we smash you with the information that will make your life easier. really.
40+ Helpful Resources On User Interface 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
UI-patterns.com
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.
Konigi
Konigi highlights exemplary interaction design and visual design use in the real-world. There are plenty of ways to utilize, navigate, and find your desired content on the site, including a Tags page featuring popular keywords used in entries within the showcase split up into three categories: keyword, product, and company.
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).
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.
Pattern Tap
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.
design|snips
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.
UI Scraps
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.
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.
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 forum where you can swap stories with fellow UI designers and discuss patterns showcased in the design pattern library.
StyleIgnite
StyleIgnite archives and displays the latest trends in web design. Hundreds of styles that are submitted by users are there for you to check out and gain inspiration from. What’s unique about StyleIgnite is that not only are they a gallery, but they also provide you with code snippets and assets to achieve the designs that you like.
blink design library
blink design library is a weblog-formatted design library that centers a post’s topic on a particular user interaction pattern with the aim of cataloging and exploring that subject. You will find topics and discussions on common interaction components such as buttons and web forms.
patternBrowser
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.
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.
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.
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.
CSSbake
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.
UI Patterns
UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.
Functioning Form
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.
MephoBox
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.
Designing Interfaces
Designing Interfaces is a book format site for the book, “Designing Interfaces: Patterns for Effective Interaction Design” written by Jennifer Tidwell. In the site, you will find loads of design patterns and articles on interaction design. You’ll learn about topics such as organizing site content, soliciting actions and commands from users, and presenting complex data.
UIZEN
UIZEN is a collection of user interface designs that features real-world websites and web applications. The site serves as a useful reference for times when you are in need of effective design inspiration.
UXmatters
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.
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.
Niche and Specialized Design Pattern Resources
Design Patterns for Data Graphics
This resource deals with the discussion of useful design patterns for presenting data. You will find information and downloads on suggested diverging color themes (to easily distinguish related data sets between each other) and data resolution.
Patterns Of cooperative INTERaction
This web page shares information on cooperative (social/team-based) systems design patterns. Here, you will find resources and articles on topics such as multiple presentations of information and collaboration in small groups.
Information Design Patterns
There is an art and a science behind presenting information to users. This site discusses and shares information regarding effective and usable information and data structures.
Learnability Gallery
What makes information and interfaces learnable? How can you present data so that users are able to absorb the content you are presenting? This visual gallery features effective design patterns that expose techniques for designing information with high-learnability.
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.
Open Source Design Pattern Library
This resource features design patterns as it pertains to open source websites and applications. Users are able to submit their own pattern entries to share.
hcipatterns.org
This resource deals with pattern languages in Human-Computer Interaction and user interface design. You can learn about common language patterns, tools used in the study of HCI, and additional useful news and information.
Common Ground
Common Ground is a documentation of a pattern language for Human-Computer Interaction design. You will find a lot of wonderful resources on HCI such as WYSIWYG Editor design patterns and presenting information to users using step-by-step instructions.
ecommr
ecommr is a website showcase of the best (and worst) e-commerce site and web application designs. The site explores topics in e-commerce content presentation and user interface patterns that allow for a great user experience. They focus on entire site designs as well as specific components of an e-commerce website such as customer service landing pages and size charts.
Ajax Patterns
Ajax Patterns is a wiki-style site discussing design patterns that apply the use of Ajax techniques. It is a massive resource for web application developers to gain insight on design patterns involving highly-responsive Rich-Internet Applications.
30 Essential Controls
This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application.
Design For Mobile
This site is dedicated to designing mobile applications and websites. The site is a wiki so the content is truly collaborative and user-edited. With mobile devices becoming very prevalent, the need for compatible and usable mobile systems grows, and this should be your first stop to learning more about this emerging field in web technology.
Wiki Patterns
Wikis allow for shared collaboration and puts the responsibility of creating and maintaining the site’s content towards its users. This resource discusses effective design patterns for creating (or implementing) a user-friendly wiki.
Flickr Collections and Groups
Flickr is a wonderful and visual-based resource for learning and finding design patterns. In this section, we share with you some notable collections and groups to peruse for interaction design pattern research and inspiration.
Design Patterns
This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.
Design Patterns Group
In this Flickr Group, there are over 300 items that you can browse through to see interface design trends. With a membership of over 360 Flickr users, you’ll be sure to encounter fresh content on a regular basis.
Web Form Design: Filling In the Blanks
Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. It is a handy and inspirational resource to have around for times when you are crafting highly-usable web forms.
[Design Solutions]
This Flickr collection by User Experience Designer Gustavo Pimenta presents common interactive design patterns neatly subcategorized into sets such as Graphs and Logins.
namics UI Pattern Library
This public Flickr group consists of 9 Flickr members and is a group intended for capturing UI design pattern trends from the real-world.
Search Patterns
Peter Morville has a Flickr collection dedicated to gathering design patterns for effective search, subcategorized into helpful sets such as Web Search and Advanced Search.
Related content
If you enjoyed this article, please check out the following article which you might also like:
Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals.
- 101 Comments
- 1
- 2June 15th, 2009 3:44 pm
Nice collection for bookmark !! Thanks for the effort.
DKumar M.
@instantshift - 3June 15th, 2009 3:49 pm
Awesome post.
- 4June 15th, 2009 4:03 pm
Fantastic resource! This beats the crap out of “60 Rare and Unusual Vintage Signs”..
- 5June 15th, 2009 4:53 pm
Huge resources! Thanks
- 6June 15th, 2009 5:44 pm
I wish you can make a template for me to mess with!
My site’s comment area is damn boring! Rockbunch.com/ mind me not, ain’t fun to look at it for a sec!
- 7June 15th, 2009 6:17 pm
Brilliant resource. Would also recommend usability.org which has a great 292 page book free for download.
- 8June 15th, 2009 6:39 pm
I have to suggest one overlooked on this list, a book and companion site called “Designing Web Interfaces” by Bill Scott & Theresa Neil (my mentor). You can visit the blog at http://designingwebinterfaces.com. There is also a companion Flickr site but I can’t remember the address off hand, it’s linked from the main blog site.
The focus is generally on web and desktop application design rather than general website design. It’s a great book & tremendously useful. It should probably be added to this already great list of resources.
- 9June 15th, 2009 6:55 pm
very useful, personally i have started to “record” such patterns my self using OneNote 2007, and have to say is very useful, though did not think to research such things
as always a great post
- 10June 15th, 2009 7:25 pm
Awesome list of resources. Thanks guys.
- 11June 15th, 2009 8:33 pm
This is way I’m here every day !! Thanks a ton !!!
- 12June 15th, 2009 9:28 pm
Nice list….
I would like to suggest one more site for UI inspirations – http://www.wb4d.comthanks
- 13June 15th, 2009 10:17 pm
Thanks, good collection of interface resources here. I particularly like Smashing Magazine’s posts on UI design and WordPress themes.
- 14June 15th, 2009 10:32 pm
pretty useful post.
thanks. - 15June 15th, 2009 10:50 pm
Wow! This is a really great and useful article!
Great job Jacob and thank you Smashing Magazine for sharing this with us! - 16June 15th, 2009 10:50 pm
UI is the most important part of any system.
Thanks for great collection! - 17June 15th, 2009 11:07 pm
Useful overview. Just spotted that the link to Open Source Design Pattern Library contains a ‘v’ too much.
- 18June 15th, 2009 11:14 pm
great list, will take them in the evening with a tea to shuffle
- 19June 15th, 2009 11:19 pm
Very useful post, will help a lot in designing interfaces.
Thanx Smash - 20June 15th, 2009 11:54 pm
The headlines on your blog posts use a font size that is too large. I find myself wanting to step back away from my monitor to read them.
- 21June 16th, 2009 12:04 am
Thank you, Jacob! Great collection of resources, very helpful.
- 22June 16th, 2009 12:12 am
Real good resource, just what I was looking for..
Thanks a lot…. - 23June 16th, 2009 12:29 am
Nice collection, I use pattern tap alot, has some really great stuff on there!
Thanks SM!
- 24June 16th, 2009 1:30 am
GOOD POST..
I will send it to my friends on ~~~ www-BlackWhiteLoving-com ~~~~..I find many friends there and I share my life with them..many people there upload their nice pics there.. - 25June 16th, 2009 1:35 am
Great Post….very helpful resources.
- 26June 16th, 2009 1:53 am
a great collection of work.
- 27June 16th, 2009 2:02 am
Handy, and inspiring for new web projects. Thanks :)
- 28June 16th, 2009 2:03 am
Very good list of resources. Thanks Jacob!
- 29June 16th, 2009 4:15 am
one of the best article ever! thanks!
- 30June 16th, 2009 4:58 am
thanks for feeding us again sm, keep it up!!!
- 31June 16th, 2009 5:58 am
I thought I’d offer the “UI Scrapbook” collection of ui element screenshots: http://browsertoolkit.com/ui_scrapbook.html
There are a ton of good examples, and the color palettes from the images are already exported to hex colors.
Cheers,
PD - 32June 16th, 2009 6:49 am
Hey, really appreciate the notice of Quince!
I’d like to note that the experience should be essentially the same in IE, FF, Safari, and even Chrome, on both Win and Intel-based Macs, i.e., it’s not better on Win/IE as said. If you find any problems, please do let us know. We also offer the pattern content in plain HTML+CSS for those who can’t run Silverlight.
Anyways, great list, and we’re honored to be among those enumerated.
- 33June 16th, 2009 6:58 am
Aweeeeeeeeeeeeeeeeeeeeeeeesomeeeeeeeeeeeee
- 34June 16th, 2009 8:22 am
really nice links
thanks a lot - 35June 16th, 2009 8:44 am
WOOOOAH! That first site linked? It’s data is from 2002!!! Not exactly current (or even relevant anymore, at the rate the web changes)
- 36June 16th, 2009 9:18 am
I wonder if these type of pattern libraries exist for other discipline i.e. product design and architecture?
- 37June 16th, 2009 10:16 am
Overall interesting but some of those links are OLD, one is from 2002! Makes me wonder how old some of the other info is.
- 38June 16th, 2009 11:49 am
Aaah! nice post and very useful too.I always follow Pattern tap before starting any project …MephoBox is new to me but dam good..Thanks!!
- 39June 16th, 2009 12:18 pm
Thank you for featuring CSSbake! Great resource list :)
- 40June 16th, 2009 2:07 pm
Thanks so much, but where do you find all that stunning stuff !
- 41June 16th, 2009 2:41 pm
I’d like to add Markus Drews’ picasaweb.google.com/konfiguratorpatterns – a pattern library for product configurators (German). His Master’s Thesis Master’s Thesis is about the same topic.
- 42June 16th, 2009 9:50 pm
another great article.. keep it up SMASHINGMAGAZINE
- 43June 16th, 2009 10:48 pm
Really loved this article
- 44June 17th, 2009 12:30 am
I’d like to suggest another handy resource which is pretty recent Web & Patterns
- 45June 17th, 2009 1:30 am
Best post in a looong time!
- 46June 17th, 2009 1:55 am
very good collection
Thanks Smashing
- 47June 17th, 2009 11:46 am
The best post I’ve seen there! I’ve been studying some of the resources some half a year ago, but the list of other resources is just awesome!
- 48June 17th, 2009 6:05 pm
nice resources, there’s a lot of user interface sites. thanks Smashing.
- 49June 18th, 2009 1:59 am
One of the best posts yet! Thanks
- 50June 18th, 2009 2:32 am
Quite Informative. Thanks for the post :)
- 51June 18th, 2009 3:49 am
Fantastic post! Nice resources.
Thanks for the post! - 52June 18th, 2009 4:45 am
Thanks for mentioning UI Scraps! Much appreciated! =)
Cheers,
Jason R.
- 53June 22nd, 2009 1:26 pm
Thank you for including our post on 30 Essential Controls for RIAs. You have pulled together a great set of resources.
We also have a post with 12 Standard Screen Patterns for productivity web applications.
And 100s of patterns for rich interactions posted on Designing Web Interfaces- explore the book section and all the examples from the book are on Flikr.
- 54June 29th, 2009 9:45 am
Thanks for adding the 30 essential controls article. Following on with what Theresa mentioned you might find useful to add our Flickr collection directly. In addition to the 300+ pattern examples (http://www.flickr.com/photos/designingwebinterfaces/collections/72157606817815788/) I added 500+ screencasts (interface movies @ http://www.flickr.com/photos/designingwebinterfaces/collections/72157611425349742/) of patterns in action. Prior to my current role at Netflix, I was the curator of the Yahoo! Design Pattern Library. So some of this is a follow on to that work.
Thanks!
- 55June 29th, 2009 9:50 am
Oh one more site I did not see mentioned. The Design of Sites was one of the first Design Pattern books and is a great resource: http://www.designofsites.com/design-patterns/. The site has a pattern explorer as well.
Thanks for pulling this together!
- 56July 7th, 2009 10:18 pm
Thanks!
- 57July 8th, 2009 9:43 am
Interactive design is one profession in which you’re never bored.
- 58August 8th, 2009 4:20 am
Great! A must-read for all web designers.
Thanks - 59
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- Magazine RSS Feed
175,683 readers - Follow us on Twitter
83,849 followers
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- A Roundup Of 25 Advanced CSS Tips And Tutorials - http://bit.ly/3Uhdcv (via @DesignerDepot)
- The best part about being an editor is meeting so many talented folks across the globe. It is really amazing.
- 5 Free Health Icons (thermometer, aspirin etc.) - http://bit.ly/uGogp
- An extensive Web Design Twitter List by @imrogb - http://bit.ly/designlinks
- Getting Started With Content Management Systems - http://bit.ly/3gewNA
- How to use an Apostrophe - http://bit.ly/1EGSzs (via @DesignerDepot)
- Google Closure Compiler - http://bit.ly/4aWAjR - a tool for making JavaScript download and run faster





























nice resources ;)