Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/willyp713/awesome-ui-guides

A list of UI design guides
https://github.com/willyp713/awesome-ui-guides

List: awesome-ui-guides

awesome awesome-list design ui ux

Last synced: 16 days ago
JSON representation

A list of UI design guides

Awesome Lists containing this project

README 

        
# Awesome UI Guides



[![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md)



A curated list of UI design articles, guides, and best practices.



Based on the original list compiled by Victor Ponamariov on [Reddit](https://www.reddit.com/r/webdev/comments/mpgc9g/how_to_design_almost_any_ui_element_list_of_58) and [Twitter](https://twitter.com/vponamariov/status/1381584285300359169).



--------------------



## Contents



- [Accessiblity](#accessiblity)

- [Breadcrumbs](#breadcrumbs)

- [Buttons](#buttons)

- [Cards](#cards)

- [Carousels](#carousels)

- [Checkboxes & Toggles](#checkboxes--toggles)

- [Datepickers](#datepickers)

- [Dropdowns](#dropdowns)

- [Forms](#forms)

- [Loaders](#loaders)

- [Miscellaneous/General](#miscellaneousgeneral)

- [Modals](#modals)

- [Navigation](#navigation)

- [Pagination](#pagination)

- [Radio Buttons](#radio-buttons)

- [Search Inputs](#search-inputs)

- [Sliders](#sliders)

- [Tables](#tables)

- [Tabs](#tabs)

- [Text Fields](#text-fields)

- [Tooltips](#tooltips)



--------------------

### Accessiblity

- [18F Accessibility Guide](https://accessibility.18f.gov/) - US Government technology consultancy's best practices for accessiblity.

- [Creating accessible input errors and help text](https://medium.com/pulsar/creating-accessible-input-errors-and-help-text-74c7e00e757a) - Utilizing visual and audio helpers to make input fields more accessible.



### Breadcrumbs



- [Breadcrumbs: 11 Design Guidelines for Desktop and Mobile](https://www.nngroup.com/articles/breadcrumbs/) - Best bractices for breadcrumbs from NNG, the UI/UX thought leader.

- [Are breadcrumbs still fresh for UX?](https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b) - Mix of theory and practical examples.



### Buttons



- [7 Basic Rules for Button Design](https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4) - Best practice for designing a button.

- [Cheatsheet for buttons](https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112) - Understanding different types of buttons and how to use them together.



### Cards



- [Card UI design: fundamentals and examples](https://www.justinmind.com/ui-design/cards) - Fundamental concepts for creating UI cards.

- [Simple Design Tips for Crafting Better UI Cards](https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e) - Mix of theory and application for improving on the basics of Card design.

- [Designing cards](https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6) - Practical tips for avoiding common mistakes with UI cards.



### Carousels

Are you sure you want a carousel? *See* [Should I Use a Carousel?](http://shouldiuseacarousel.com/)



- [Carousel/slider design best practices (with examples)](https://webflow.com/blog/carousel-slider-design-best-practices) - Overview of effective carousel design and when NOT to use one.

- [Carousel Usability: Designing an Effective UI for Websites with Content Overload](https://www.nngroup.com/articles/designing-effective-carousels/) - Best bractices for carousel design from NNG, the UI/UX thought leader.

- [Designing a User-Friendly Homepage Carousel](https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e) - Fundamentals for usable carousels.



### Checkboxes & Toggles



- [Checkbox vs Toggle Switch](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) - Understanding the difference between checkboxes and toggles, and when to use each.

- [Toggle-Switch Guidelines](https://www.nngroup.com/articles/toggle-switch-guidelines/) - Best bractices for toggle design from NNG, the UI/UX thought leader.

- [41 Modern CSS Checkbox Designs](https://uicookies.com/css-checkbox/) - Long list of inspirational examples of checkbox designs.



### Datepickers



- [How to Design a Perfect Date Picker Control?](https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a) - Examples of a variety of styles of date pickers, including consideration for failure and errors.

- [Date Picker Design Best Practices](https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5) - Practical list of dos and don'ts for date pickers.



### Dropdowns



- [UI cheat sheet: dropdown field](https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432) - Extensive list of considerations for building quality dropdowns

- [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/) - Best bractices for dropdown design from NNG, the UI/UX thought leader.

- [Drop down list design: the complete guide](https://www.justinmind.com/blog/drop-down-list-design/) - Fundamentals for drop down use cases and design.



### Forms



- [Design Better Forms](https://medium.com/nextux/design-better-forms-96fadca0f49c) - Common form mistakes and how to fix them.

- [Form Design: 13 Empirically Backed Best Practices](https://cxl.com/blog/form-design-best-practices/) - List of best practices for form design backed by research and case studies.

- [The UX behind designing better forms](https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2) - Walkthrough of improving an existing form while learning best practices along the way.



### Loaders



- [Progress Indicators Make a Slow System Less Insufferable](https://www.nngroup.com/articles/progress-indicators/) - Best bractices for progress indicators from NNG, the UI/UX thought leader.

- [Stop Using A Loading Spinner, There's Something Better](https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e) - How to use more helpful indicators of progress to avoid anxiety induced by indeterminate spinners.

- [Best Practices For Animated Progress Indicators](https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/) - When to use animation in prgoress indicators.



### Miscellaneous/General

- [A List Apart](https://alistapart.com/) - Expert articles and guides for web content, design, UX, and more. Companion to the book publisher [A Book Apart](https://abookapart.com/).

- [Digital Services Playbook](https://playbook.cio.gov/) - US Government playbook for human-centered design, agile process, and modern architechture.

- [Methods for Human-Centered Design Research](https://methods.18f.gov/) - List of human-centered design research practices with practical guides to implement.

- [Ten Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) - Jakob Nielsen's everlasting 10 general principles for interaction design, maintained since 1994.

- [The Laws of UX](https://lawsofux.com/en/) - A collection of researched-based best practices that designers can consider when building user interfaces.



### Modals



- [Best Practices for Designing UI Overlays](https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/) - Dos and don'ts for UI overlays.

- [Big, bold UX — using modal windows for in-app user engagement](https://www.appcues.com/blog/modal-dialog-windows) - Examples of bright, cheerful and attention-grabbing overlays.

- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/) - Best bractices for dialog boxes and overlays from NNG, the UI/UX thought leader.

- [Modern Enterprise UI design — Part 2: Modal dialogs](https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92) - Recommendations for best use of modal overlays in an information-heavy interface, like enterprise applications.



### Navigation



- [Navigation design: Almost everything you need to know](https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/)

- [UX Design for Navigation Menus](https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea)

- [The Fastest Navigation Layout for a Three-Level Menu](https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2)



### Pagination



- [Paging, Scrolling, and Infinite Scroll](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php)

- [UX: Infinite Scrolling vs. Pagination](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)

- [Users' Pagination Preferences and "View All"](https://www.nngroup.com/articles/item-list-view-all/)



### Radio Buttons



- [Selection controls — UI component series](https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546)

- [Radio Buttons UX Design](https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc)

- [Radio button design: easy selection and decision-making](https://www.justinmind.com/ui-design/radio-button-patterns-examples)



### Search Inputs



- [Best UX practices for search inputs](https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448)

- [Design a Perfect Search Box](https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c)

- [Site Search Suggestions](https://www.nngroup.com/articles/site-search-suggestions/)



### Sliders



- [Designing The Perfect Slider](https://www.smashingmagazine.com/2017/07/designing-perfect-slider/)

- [Slider design UI patterns and examples](https://www.justinmind.com/blog/slider-design-web/)

- [Slider Design: Rules of Thumb](https://www.nngroup.com/articles/gui-slider-controls/)



### Tables



- [Design better data tables](https://medium.com/nextux/design-better-data-tables-4ecc99d23356)

- [The Ultimate Guide to Designing Data Tables](https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a)

- [Designing better data tables for enterprise UX](https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e)

- [Modern Enterprise UI design — Part 1: Tables](https://medium.com/pulsar/modern-enterprise-ui-design-part-1-tables-ad8ee1b9feb)



### Tabs



- [Module Tabs in Web Design: Best Practices and Solutions](https://www.smashingmagazine.com/2009/06/module-tabs-in-web-design-best-practices-and-solutions/)

- [12 Tabs Design guidelines](https://www.nngroup.com/articles/tabs-used-right/)



### Text Fields



- [UI cheat sheet: text fields](https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8)

- [Text fields & Forms design — UI components series](https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0)

- [The Anatomy of Input Field](https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7)



### Tooltips



- [Tooltip Guidelines](https://www.nngroup.com/articles/tooltip-guidelines/)

- [Designing Better Tooltips For Mobile User Interfaces](https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/)

- [Tooltips: your secret weapon for improving feature discovery](https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e)