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 Konoplitski1 for providing us with related resources.

UI Design Patterns for Sites and Web Applications

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.

UI Patterns3

QUINCE: X Patterns Explorer4
QUINCE is a beautiful and stunning web application that helps you explore an innumerable amount of user experience design patterns such as date pickers5 and two-panel selectors6. 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).

QUINCE: X Patterns Explorer7

Interaction Design Pattern Library8
Welie.com has an interaction design pattern library maintained by Martijn van Welie9, 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 slideshows10. 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 Tap12
Created and maintained by Matthew Smith13 and Chris Pollock14, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows15 and breadcrumbs16. 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.

Pattern Tap17

This design gallery focuses on common web page components such as navigation19 as well as popular design trends such as Grid20 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 Scraps22
Written by Experience Designer Jason Robb23, UI Scraps is a weblog that catalogs, good, bad, and notable interface designs. Expect to find critiques of submission forms24 and praises for good designs25 and UI Scraps.

UI Scraps26

The UI Pattern Factory27
The UI Pattern Factory is a UI design library and gallery. What’s great at UIPF is that they sometimes share videos28 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.com29.

The UI Pattern Factory30

Yahoo! Design Pattern Library31
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 forum32 where you can swap stories with fellow UI designers and discuss patterns showcased in the design pattern library.

Yahoo! Design Pattern Library33

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 library35
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 buttons36 and web forms37.

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 Practices40
Web Design Practices is a gallery of web design patterns such as breadcrumb navigation41 with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component.

Web Design Practices42

Web Design Practices43

Elements of Design44
Elements of Design focuses on particular components of a web design such as login forms45 and site navigation46 in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

Elements of Design47

User Interface Engineering48
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 search49 or previous and next actions in web forms50.

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 navigation52 or beautiful comment sections53. 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 Patterns55
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.

UI Patterns56

Functioning Form57
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 buttons58.

MephoBox is a design gallery that presents web design patterns and trends such as login forms60 and typography use61 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 Interfaces63
Designing Interfaces is a book format site for the book, “Designing Interfaces: Patterns for Effective Interaction Design64” 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.

Designing Interfaces65

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 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 Arrows68
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 right69 and designing for user-generated and social media based content70. 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 Graphics71
This resource deals with the discussion of useful design patterns for presenting data. You will find information and downloads on suggested diverging color themes72 (to easily distinguish related data sets between each other) and data resolution73.

Design Patterns for Data Graphics74

Patterns Of cooperative INTERaction75
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 information76 and collaboration in small groups77.

Information Design Patterns78
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.

Information Design Patterns79

Learnability Gallery80
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.

Information Design Patterns81

Designing Social Interfaces82
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 Interfaces83“. 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.

Designing Social Interfaces84

Open Source Design Pattern Library85
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.

Open Source Design Pattern Library86

This resource deals with pattern languages in Human-Computer Interaction and user interface design. You can learn about common language patterns88, tools89 used in the study of HCI, and additional useful news and information.

Common Ground90
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 patterns91 and presenting information to users using step-by-step instructions92.

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 pages94 and size charts95.


Ajax Patterns97
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 Controls98
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.

30 Essential Controls99

Design For Mobile100
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 Patterns101
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 Patterns102
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 interfaces103 and Calendar Views104.

Design Patterns105

Design Patterns Group106
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 Blanks107
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]108
This Flickr collection by User Experience Designer Gustavo Pimenta presents common interactive design patterns neatly subcategorized into sets such as Graphs109 and Logins110.

[Design Solutions]111

namics UI Pattern Library112
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 Patterns113
Peter Morville has a Flickr collection dedicated to gathering design patterns for effective search, subcategorized into helpful sets such as Web Search114 and Advanced Search115.

Flickr Collection: Search Patterns116

If you enjoyed this article, please check out the following article which you might also like:


  1. 1 http://www.amazedev.com/ui-patterny/
  2. 2 http://ui-patterns.com/
  3. 3 http://ui-patterns.com/
  4. 4 http://quince.infragistics.com/
  5. 5 http://quince.infragistics.com/#/Search/ViewPattern$pattern=Date+Picker
  6. 6 http://quince.infragistics.com/#/Search/ViewPattern$pattern=Date+Picker
  7. 7 http://quince.infragistics.com/
  8. 8 http://www.welie.com/patterns/index.php
  9. 9 http://www.welie.com/about/index.php
  10. 10 http://www.welie.com/patterns/showPattern.php?patternID=slideshow
  11. 11 http://www.welie.com/patterns/index.php
  12. 12 http://patterntap.com/
  13. 13 http://squaredeye.com/
  14. 14 http://sim.plified.com/
  15. 15 http://patterntap.com/tap/collection/slideshows
  16. 16 http://patterntap.com/tap/collection/breadcrumbs
  17. 17 http://patterntap.com/
  18. 18 http://designsnips.com/
  19. 19 http://designsnips.com/category/Navigation/
  20. 20 http://designsnips.com/category/Grid/
  21. 21 http://designsnips.com/
  22. 22 http://uiscraps.tumblr.com/
  23. 23 http://jasonrobb.com/
  24. 24 http://uiscraps.tumblr.com/post/92427024/97-bottles-error-message-fail-disappointing-error
  25. 25 http://uiscraps.tumblr.com/post/90007981/disambiguity-article-dates-are-awesome-i-love
  26. 26 http://uiscraps.tumblr.com/
  27. 27 http://uipatternfactory.com/
  28. 28 http://uipatternfactory.com/p=refining-search/
  29. 29 http://www.flickr.com/groups/uipatternfactory/
  30. 30 http://uipatternfactory.com/
  31. 31 http://developer.yahoo.com/ypatterns/index.php
  32. 32 http://developer.yahoo.net/forum/index.php?showforum=12
  33. 33 http://developer.yahoo.com/ypatterns/index.php
  34. 34 http://www.styleignite.com/
  35. 35 http://designlibrary.blinkinteractive.com/
  36. 36 http://designlibrary.blinkinteractive.com/buttons/
  37. 37 http://designlibrary.blinkinteractive.com/forms/
  38. 38 http://www.patternbrowser.org/code/pattern/pattern.php?4,1,0,1,0,6.php
  39. 39 http://www.patternbrowser.org/code/pattern/pattern.php?4,1,0,1,0,6.php
  40. 40 http://www.webdesignpractices.com/
  41. 41 http://www.webdesignpractices.com/navigation/breadcrumb.html
  42. 42 http://www.webdesignpractices.com/
  43. 43 http://www.webdesignpractices.com/
  44. 44 http://www.smileycat.com/design_elements/
  45. 45 http://www.smileycat.com/design_elements/login_forms/http:/www.smileycat.com/design_elements/navigation/
  46. 46 http://www.smileycat.com/design_elements/navigation/
  47. 47 http://www.smileycat.com/design_elements/
  48. 48 http://www.uie.com/articles/
  49. 49 http://www.uie.com/articles/faceted_search/
  50. 50 http://www.uie.com/articles/previous_next_luke/
  51. 51 http://www.cssbake.com/
  52. 52 http://www.cssbake.com/ingredients/navigation/
  53. 53 http://www.cssbake.com/ingredients/comments/
  54. 54 http://www.cssbake.com/
  55. 55 http://www.uipatterns.net/
  56. 56 http://www.uipatterns.net/
  57. 57 http://www.lukew.com/ff/
  58. 58 http://www.lukew.com/ff/entry.asp?740
  59. 59 http://box.mepholio.com/
  60. 60 http://box.mepholio.com/collections/13/popular
  61. 61 http://box.mepholio.com/collections/27/recent
  62. 62 http://box.mepholio.com/
  63. 63 http://designinginterfaces.com/
  64. 64 Designing%20Interfaces:%20Patterns%20for%20Effective%20Interaction%20Design
  65. 65 http://designinginterfaces.com/
  66. 66 http://www.uizen.com/
  67. 67 http://www.uxmatters.com/index.php
  68. 68 http://www.boxesandarrows.com/
  69. 69 http://www.boxesandarrows.com/view/getting-a-forms146
  70. 70 http://www.boxesandarrows.com/view/designing-the
  71. 71 http://geography.uoregon.edu/datagraphics/patterns/index.htm
  72. 72 http://geography.uoregon.edu/datagraphics/color_scales.htm
  73. 73 http://geography.uoregon.edu/datagraphics/patterns/index.htm#Resolution%20indicates%20data%20quality
  74. 74 http://geography.uoregon.edu/datagraphics/patterns/index.htm
  75. 75 http://www.comp.lancs.ac.uk/computing/research/cseg/projects/pointer/patterns.html
  76. 76 http://www.comp.lancs.ac.uk/computing/research/cseg/projects/pointer/patterns/multipleRepresentationsOfInfo/multipleRepresentationsOfInfo.html
  77. 77 http://www.comp.lancs.ac.uk/computing/research/cseg/projects/pointer/patterns/collocatedTeamwork/collocatedTeamwork.html
  78. 78 http://interface.fh-potsdam.de/infodesignpatterns/patterns.php
  79. 79 http://interface.fh-potsdam.de/infodesignpatterns/patterns.php
  80. 80 http://www.usabilityinstitute.com/resources/learnabilityGallery.htm
  81. 81 http://www.usabilityinstitute.com/resources/learnabilityGallery.htm
  82. 82 http://www.designingsocialinterfaces.com/patterns.wiki/index.php?title=Main_Page
  83. 83 http://www.designingsocialinterfaces.com/
  84. 84 http://www.designingsocialinterfaces.com/patterns.wiki/index.php?title=Main_Page
  85. 85 http://www.uidesignpatterns.org/
  86. 86 http://www.uidesignpatterns.org/
  87. 87 http://www.hcipatterns.org/patterns.html
  88. 88 http://www.hcipatterns.org/patterns.html
  89. 89 http://www.hcipatterns.org/tools.html
  90. 90 http://www.mit.edu/~jtidwell/common_ground.html
  91. 91 http://www.mit.edu/~jtidwell/language/wysiwyg_editor.html
  92. 92 http://www.mit.edu/~jtidwell/language/step-by-step_instructions.html
  93. 93 http://www.ecommr.com/
  94. 94 http://www.ecommr.com/category/elements/customer-service/
  95. 95 http://www.ecommr.com/category/elements/size-chart/
  96. 96 http://www.ecommr.com/
  97. 97 http://ajaxpatterns.org/
  98. 98 http://designingwebinterfaces.com/essential_controls
  99. 99 http://designingwebinterfaces.com/essential_controls
  100. 100 http://patterns.littlespringsdesign.com/index.php/Main_Page
  101. 101 http://www.wikipatterns.com/display/wikipatterns/Wikipatterns
  102. 102 http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
  103. 103 http://www.flickr.com/photos/factoryjoe/sets/72157601069327862/
  104. 104 http://www.flickr.com/photos/factoryjoe/sets/152201/
  105. 105 http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
  106. 106 http://www.flickr.com/groups/designpatterns/
  107. 107 http://www.flickr.com/photos/rosenfeldmedia/sets/72157604272550634/
  108. 108 http://www.flickr.com/photos/guspim/collections/72157600047307884/
  109. 109 http://www.flickr.com/photos/guspim/sets/72157603690235070/
  110. 110 http://www.flickr.com/photos/guspim/sets/72157600048694309/
  111. 111 http://www.flickr.com/photos/guspim/collections/72157600047307884/
  112. 112 http://www.flickr.com/groups/namics_uipatterns/
  113. 113 http://www.flickr.com/photos/morville/collections/72157603785835882/
  114. 114 http://www.flickr.com/photos/morville/collections/72157603790573187/
  115. 115 http://www.flickr.com/photos/morville/collections/72157603790640389/
  116. 116 http://www.flickr.com/photos/morville/collections/72157603785835882/
  117. 117 http://www.smashingmagazine.com/2008/01/24/usability-and-interface-design-books/
  118. 118 http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  119. 119 http://www.smashingmagazine.com/2008/01/16/evolve-your-user-interface-to-educate-your-users/
  120. 120 http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
  121. 121 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

  1. 1

    Thanks for mentioning UI Scraps! Much appreciated! =)


    Jason R.

  2. 52

    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.

  3. 103

    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.


  4. 154

    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!

  5. 205


  6. 256

    Interactive design is one profession in which you’re never bored.

  7. 307

    Great! A must-read for all web designers.

  8. 358

    My modest collection of UI pearls: http://www.flickr.com/photos/uipearls/

  9. 409

    very usefull !!!

  10. 460

    we are testing your “pattern” for moderated comments.

  11. 511

    Great resources, amazing article. Thank you

  12. 562

    The jewel is what a precious or semiprecious stone incorporated into a piece of jewelry. Our site will display the up-to-date jewels information, the discription of jewelry, the rhinestone, the jewel earring, the jewel ring, the jewel bracelet etc.Net marketing Inc. registered in California USA in 2000. They do a variety of the garment accessories, plastics, home goods, leather, toys, crafts and jewels of international trade 。It suppot Traditional Chinese, Japanese and English.find affordable vacation packages, city sightseeing tours,America tours,Canada tours, bus tours at joyfultours

  13. 613

    Great list of resources!

    I wrote a book on Web Application Design Patterns. Some of the readers may find it useful. See: amazon.com/s/ref=nb_sb_ss_i_5_11?url=search-alias%3Daps&field-keywords=web+application+design+patterns&x=0&y=0&sprefix=web+applica

  14. 664

    Thanks for the great share!

  15. 715

    Useful post, Just subscribed to your feed.

  16. 766

    good list….really help full….thnks…love. parry

  17. 817

    Nice and useful list! Another place to visit for .NET design patterns (coding) is http://www.dofactory.com.

  18. 868

    I had stopped by the site and took a look at your ranking for some of your terms and just wondered if you’d be at all interested in having your site improved in terms of where it’s ranked on the major engines, Google Yahoo etc. with the terms you’d like as well as some I’d like to suggest. I can get your site on page 1 and have done so for about 283 people to date. Yes, I’m a real person, Yes, I actually just came back from viewing your site. I already know you get a ton of offers day to day. This is obviously different, I have plenty of references, work from home alone, have been doing this since 92 and still find time to raise 3 little girls.

    Call me at home if you want to, I work at home all day long helping people out with their traffic and sites, automating page content updates via rss feeds (google loves that), doing press releases, article creation and distribution, building one way inbound links, graphic and site design, I can even add (by the thousands) targeted social media followers (like twitter) to your account all day long, automating messeges you want to send out to them about your site. Posting ads on top various high traffic classified ad sites various cities, states etc. I have clients that are swearing by what it is I do for them and would love to show you some examples if you’re at all interested.


  19. 919

    Tons of resources here. Thanks for the great compilation.

  20. 970

    Great post, really informative.

  21. 1021

    Lots of great ideas and great components here. The one UI component I have never been able to find for the web is a good multi-user/multi-group calendar like a few hosted ones. Does anyone know of one that can be linked to a private MySQL database? All the web calendar components I have been able to find are essentially single-user that can’t be filtered to show events from just one or more venues/groups.

  22. 1072

    Web Design Practices has not been updated for ages.

  23. 1123

    Thanks for this great selection!

  24. 1174

    I like your post. I found it when I was looking through digg. I’ll go bookmark your site now.http://www.raybanstoreuk.com/

  25. 1225

    Prismic Reflections

    August 11, 2011 4:19 am

    impressive designs….thanks for sharing

  26. 1276

    I relay inspired by all those great collection…..

  27. 1327

    thanks for all these collection sending

  28. 1378

    Great collection. Thanks for sharing!

  29. 1429

    Tnx ,very good :) <3

  30. 1480

    Love this resource ** however** please note that your link to UI Patterns is incorrect. It currently goes to uipatterns.net It should go to uipatterns.com


↑ Back to top