{"id":14112783,"url":"https://github.com/willyp713/awesome-ui-guides","last_synced_at":"2025-08-01T15:32:50.757Z","repository":{"id":58719095,"uuid":"533347284","full_name":"willyp713/awesome-ui-guides","owner":"willyp713","description":"A list of UI design guides","archived":false,"fork":false,"pushed_at":"2022-11-17T22:16:22.000Z","size":66,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T00:01:12.760Z","etag":null,"topics":["awesome","awesome-list","design","ui","ux"],"latest_commit_sha":null,"homepage":"https://www.reddit.com/r/web_design/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willyp713.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-06T13:52:51.000Z","updated_at":"2023-10-11T03:25:20.000Z","dependencies_parsed_at":"2023-01-23T11:45:32.586Z","dependency_job_id":null,"html_url":"https://github.com/willyp713/awesome-ui-guides","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willyp713%2Fawesome-ui-guides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willyp713%2Fawesome-ui-guides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willyp713%2Fawesome-ui-guides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willyp713%2Fawesome-ui-guides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willyp713","download_url":"https://codeload.github.com/willyp713/awesome-ui-guides/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228393577,"owners_count":17912861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","design","ui","ux"],"created_at":"2024-08-14T10:03:55.424Z","updated_at":"2024-12-06T00:30:36.965Z","avatar_url":"https://github.com/willyp713.png","language":null,"funding_links":[],"categories":["Other Lists"],"sub_categories":["TeX Lists"],"readme":"# Awesome UI Guides\n\n[![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)\n\n\nA curated list of UI design articles, guides, and best practices.\n\nBased 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).\n\n--------------------\n\n## Contents\n\n- [Accessiblity](#accessiblity)\n- [Breadcrumbs](#breadcrumbs)\n- [Buttons](#buttons)\n- [Cards](#cards)\n- [Carousels](#carousels)\n- [Checkboxes \u0026 Toggles](#checkboxes--toggles)\n- [Datepickers](#datepickers)\n- [Dropdowns](#dropdowns)\n- [Forms](#forms)\n- [Loaders](#loaders)\n- [Miscellaneous/General](#miscellaneousgeneral)\n- [Modals](#modals)\n- [Navigation](#navigation)\n- [Pagination](#pagination)\n- [Radio Buttons](#radio-buttons)\n- [Search Inputs](#search-inputs)\n- [Sliders](#sliders)\n- [Tables](#tables)\n- [Tabs](#tabs)\n- [Text Fields](#text-fields)\n- [Tooltips](#tooltips)\n\n--------------------\n### Accessiblity\n- [18F Accessibility Guide](https://accessibility.18f.gov/) - US Government technology consultancy's best practices for accessiblity.\n- [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.\n\n### Breadcrumbs\n\n- [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.\n- [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.\n\n### Buttons\n\n- [7 Basic Rules for Button Design](https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4) - Best practice for designing a button.\n- [Cheatsheet for buttons](https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112) - Understanding different types of buttons and how to use them together.\n\n### Cards\n\n- [Card UI design: fundamentals and examples](https://www.justinmind.com/ui-design/cards) - Fundamental concepts for creating UI cards.\n- [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.\n- [Designing cards](https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6) - Practical tips for avoiding common mistakes with UI cards.\n\n### Carousels\nAre you sure you want a carousel? *See* [Should I Use a Carousel?](http://shouldiuseacarousel.com/)\n\n- [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.\n- [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.\n- [Designing a User-Friendly Homepage Carousel](https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e) - Fundamentals for usable carousels.\n\n### Checkboxes \u0026 Toggles\n\n- [Checkbox vs Toggle Switch](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) - Understanding the difference between checkboxes and toggles, and when to use each.\n- [Toggle-Switch Guidelines](https://www.nngroup.com/articles/toggle-switch-guidelines/) - Best bractices for toggle design from NNG, the UI/UX thought leader.\n- [41 Modern CSS Checkbox Designs](https://uicookies.com/css-checkbox/) - Long list of inspirational examples of checkbox designs.\n\n### Datepickers\n\n- [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.\n- [Date Picker Design Best Practices](https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5) - Practical list of dos and don'ts for date pickers.\n\n### Dropdowns\n\n- [UI cheat sheet: dropdown field](https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432) - Extensive list of considerations for building quality dropdowns\n- [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/) - Best bractices for dropdown design from NNG, the UI/UX thought leader.\n- [Drop down list design: the complete guide](https://www.justinmind.com/blog/drop-down-list-design/) - Fundamentals for drop down use cases and design.\n\n### Forms\n\n- [Design Better Forms](https://medium.com/nextux/design-better-forms-96fadca0f49c) - Common form mistakes and how to fix them.\n- [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.\n- [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.\n\n### Loaders\n\n- [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.\n- [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.\n- [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.\n\n### Miscellaneous/General\n- [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/).\n- [Digital Services Playbook](https://playbook.cio.gov/) - US Government playbook for human-centered design, agile process, and modern architechture.\n- [Methods for Human-Centered Design Research](https://methods.18f.gov/) - List of human-centered design research practices with practical guides to implement.\n- [Ten Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) - Jakob Nielsen's everlasting 10 general principles for interaction design, maintained since 1994.\n- [The Laws of UX](https://lawsofux.com/en/) - A collection of researched-based best practices that designers can consider when building user interfaces.\n\n### Modals\n\n- [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.\n- [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.\n- [Modal \u0026 Nonmodal Dialogs: When (\u0026 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.\n- [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.\n\n### Navigation\n\n- [Navigation design: Almost everything you need to know](https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/)\n- [UX Design for Navigation Menus](https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea)\n- [The Fastest Navigation Layout for a Three-Level Menu](https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2)\n\n### Pagination\n\n- [Paging, Scrolling, and Infinite Scroll](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php)\n- [UX: Infinite Scrolling vs. Pagination](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)\n- [Users' Pagination Preferences and \"View All\"](https://www.nngroup.com/articles/item-list-view-all/)\n\n### Radio Buttons\n\n- [Selection controls — UI component series](https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546)\n- [Radio Buttons UX Design](https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc)\n- [Radio button design: easy selection and decision-making](https://www.justinmind.com/ui-design/radio-button-patterns-examples)\n\n### Search Inputs\n\n- [Best UX practices for search inputs](https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448)\n- [Design a Perfect Search Box](https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c)\n- [Site Search Suggestions](https://www.nngroup.com/articles/site-search-suggestions/)\n\n### Sliders\n\n- [Designing The Perfect Slider](https://www.smashingmagazine.com/2017/07/designing-perfect-slider/)\n- [Slider design UI patterns and examples](https://www.justinmind.com/blog/slider-design-web/)\n- [Slider Design: Rules of Thumb](https://www.nngroup.com/articles/gui-slider-controls/)\n\n### Tables\n\n- [Design better data tables](https://medium.com/nextux/design-better-data-tables-4ecc99d23356)\n- [The Ultimate Guide to Designing Data Tables](https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a)\n- [Designing better data tables for enterprise UX](https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e)\n- [Modern Enterprise UI design — Part 1: Tables](https://medium.com/pulsar/modern-enterprise-ui-design-part-1-tables-ad8ee1b9feb)\n\n### Tabs\n\n- [Module Tabs in Web Design: Best Practices and Solutions](https://www.smashingmagazine.com/2009/06/module-tabs-in-web-design-best-practices-and-solutions/)\n- [12 Tabs Design guidelines](https://www.nngroup.com/articles/tabs-used-right/)\n\n### Text Fields\n\n- [UI cheat sheet: text fields](https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8)\n- [Text fields \u0026 Forms design — UI components series](https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0)\n- [The Anatomy of Input Field](https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7)\n\n### Tooltips\n\n- [Tooltip Guidelines](https://www.nngroup.com/articles/tooltip-guidelines/)\n- [Designing Better Tooltips For Mobile User Interfaces](https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/)\n- [Tooltips: your secret weapon for improving feature discovery](https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillyp713%2Fawesome-ui-guides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillyp713%2Fawesome-ui-guides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillyp713%2Fawesome-ui-guides/lists"}