How to design almost any UI element.
A curated list of 58 articles
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="RĂŒckhand Zeigefinger nach unten" aria-label="Emoji: RĂŒckhand Zeigefinger nach unten">
A curated list of 58 articles
Buttons.
7 Basic Rules for Button Design by @101babich
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
Button">https://uxplanet.org/7-basic-r... Design
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
Cheatsheet">https://uxdesign.cc/button-de... for buttons by @tessgadd
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112">https://uxdesign.cc/ui-cheat-...
7 Basic Rules for Button Design by @101babich
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
Button">https://uxplanet.org/7-basic-r... Design
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
Cheatsheet">https://uxdesign.cc/button-de... for buttons by @tessgadd
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112">https://uxdesign.cc/ui-cheat-...
Text fields.
UI cheat sheet: text fields (Awesome article!
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ€©" title="Vom Star geblendet" aria-label="Emoji: Vom Star geblendet">)
https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8
Text">https://uxdesign.cc/ui-cheat-... fields & Forms design â UI components series
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
The">https://uxdesign.cc/text-fiel... Anatomy of Input Field
https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7">https://uxplanet.org/the-anato...
UI cheat sheet: text fields (Awesome article!
https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8
Text">https://uxdesign.cc/ui-cheat-... fields & Forms design â UI components series
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
The">https://uxdesign.cc/text-fiel... Anatomy of Input Field
https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7">https://uxplanet.org/the-anato...
Checkboxes & Toggles.
Checkbox vs Toggle Switch by @uxplanet
https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Toggle-Switch">https://uxplanet.org/checkbox-... Guidelines by @NNgroup
https://www.nngroup.com/articles/toggle-switch-guidelines/
Toggle">https://www.nngroup.com/articles/... design patterns from @just_in_mind
https://www.justinmind.com/blog/toggle-design-patterns-examples/
38">https://www.justinmind.com/blog/togg... Checkbox Designs
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đł" title="Errötetes Gesicht" aria-label="Emoji: Errötetes Gesicht">
https://uicookies.com/css-checkbox/ ">https://uicookies.com/css-check...
Checkbox vs Toggle Switch by @uxplanet
https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Toggle-Switch">https://uxplanet.org/checkbox-... Guidelines by @NNgroup
https://www.nngroup.com/articles/toggle-switch-guidelines/
Toggle">https://www.nngroup.com/articles/... design patterns from @just_in_mind
https://www.justinmind.com/blog/toggle-design-patterns-examples/
38">https://www.justinmind.com/blog/togg... Checkbox Designs
https://uicookies.com/css-checkbox/ ">https://uicookies.com/css-check...
Radio Buttons.
Selection controls â UI component series (AWESOME
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ€©" title="Vom Star geblendet" aria-label="Emoji: Vom Star geblendet">)
https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546
Radio">https://uxdesign.cc/selection... Buttons UX Design
https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc
Radio">https://uxplanet.org/radio-but... button design: easy selection and decision-making
https://www.justinmind.com/blog/radio-button-design-examples/">https://www.justinmind.com/blog/radi...
Selection controls â UI component series (AWESOME
https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546
Radio">https://uxdesign.cc/selection... Buttons UX Design
https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc
Radio">https://uxplanet.org/radio-but... button design: easy selection and decision-making
https://www.justinmind.com/blog/radio-button-design-examples/">https://www.justinmind.com/blog/radi...
Tables.
Design better data tables by @CoyleAndrew (
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="LĂ€chelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: LĂ€chelndes Gesicht mit herzförmigen Augen">)
https://medium.com/nextux/design-better-data-tables-4ecc99d23356
The">https://medium.com/nextux/de... Ultimate Guide to Designing Data Tables
https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
Designing">https://medium.com/design-wi... better data tables for enterprise UX
https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e">https://uxdesign.cc/data-tabl...
Design better data tables by @CoyleAndrew (
https://medium.com/nextux/design-better-data-tables-4ecc99d23356
The">https://medium.com/nextux/de... Ultimate Guide to Designing Data Tables
https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
Designing">https://medium.com/design-wi... better data tables for enterprise UX
https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e">https://uxdesign.cc/data-tabl...
Datepickers. (It& #39;s a pain
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đŁ" title="Standhaftes Gesicht" aria-label="Emoji: Standhaftes Gesicht">)
How to Design a Perfect Date Picker Control?
https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a
Date">https://uxplanet.org/how-to-de... Picker Design Best Practices
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5
A">https://uxplanet.org/date-pick... hunt for the perfect date picker UI
https://uxdesign.cc/date-picker-design-5c5ef8f35286">https://uxdesign.cc/date-pick...
How to Design a Perfect Date Picker Control?
https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a
Date">https://uxplanet.org/how-to-de... Picker Design Best Practices
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5
A">https://uxplanet.org/date-pick... hunt for the perfect date picker UI
https://uxdesign.cc/date-picker-design-5c5ef8f35286">https://uxdesign.cc/date-pick...
Sliders.
UNBELIEVABLE article. @smashingmag is a golden resource really.
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
Slider">https://www.smashingmagazine.com/2017/07/d... design UI patterns and examples from @just_in_mind
https://www.justinmind.com/blog/slider-design-web/
Slider">https://www.justinmind.com/blog/slid... Design: Rules of Thumb from NNGroup
https://www.nngroup.com/articles/gui-slider-controls/">https://www.nngroup.com/articles/...
UNBELIEVABLE article. @smashingmag is a golden resource really.
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
Slider">https://www.smashingmagazine.com/2017/07/d... design UI patterns and examples from @just_in_mind
https://www.justinmind.com/blog/slider-design-web/
Slider">https://www.justinmind.com/blog/slid... Design: Rules of Thumb from NNGroup
https://www.nngroup.com/articles/gui-slider-controls/">https://www.nngroup.com/articles/...
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">https://www.smashingmagazine.com/2009/06/m... Tabs Design guidelines
https://www.nngroup.com/articles/tabs-used-right/">https://www.nngroup.com/articles/...
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">https://www.smashingmagazine.com/2009/06/m... Tabs Design guidelines
https://www.nngroup.com/articles/tabs-used-right/">https://www.nngroup.com/articles/...
Dropdowns
UI cheat sheet: dropdown field (Like this one
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ„°" title="Smiling face with 3 hearts" aria-label="Emoji: Smiling face with 3 hearts">)
https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
Dropdowns:">https://uxdesign.cc/ui-cheat-... Design Guidelines
https://www.nngroup.com/articles/drop-down-menus/
Drop">https://www.nngroup.com/articles/... down list design: the complete guide
https://www.justinmind.com/blog/drop-down-list-design/">https://www.justinmind.com/blog/drop...
UI cheat sheet: dropdown field (Like this one
https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
Dropdowns:">https://uxdesign.cc/ui-cheat-... Design Guidelines
https://www.nngroup.com/articles/drop-down-menus/
Drop">https://www.nngroup.com/articles/... down list design: the complete guide
https://www.justinmind.com/blog/drop-down-list-design/">https://www.justinmind.com/blog/drop...
Pagination
Paging, Scrolling, and Infinite Scroll by @uxmatters
https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php
UX:">https://www.uxmatters.com/mt/archiv... Infinite Scrolling vs. Pagination by @101babich
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
Users& #39;">https://uxplanet.org/ux-infini... Pagination Preferences and "View All"
https://www.nngroup.com/articles/item-list-view-all/">https://www.nngroup.com/articles/...
Paging, Scrolling, and Infinite Scroll by @uxmatters
https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php
UX:">https://www.uxmatters.com/mt/archiv... Infinite Scrolling vs. Pagination by @101babich
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
Users& #39;">https://uxplanet.org/ux-infini... Pagination Preferences and "View All"
https://www.nngroup.com/articles/item-list-view-all/">https://www.nngroup.com/articles/...
Search inputs
Best UX practices for search inputs
https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448
Design">https://uxdesign.cc/best-ux-p... a Perfect Search Box
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
Site">https://uxplanet.org/design-a-... Search Suggestions by @nngroup
https://www.nngroup.com/articles/site-search-suggestions/">https://www.nngroup.com/articles/...
Best UX practices for search inputs
https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448
Design">https://uxdesign.cc/best-ux-p... a Perfect Search Box
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
Site">https://uxplanet.org/design-a-... Search Suggestions by @nngroup
https://www.nngroup.com/articles/site-search-suggestions/">https://www.nngroup.com/articles/...
Breadcrumbs.
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
https://www.nngroup.com/articles/breadcrumbs/
Are">https://www.nngroup.com/articles/... breadcrumbs still fresh for UX?
https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b
Breadcrumb">https://medium.com/madison-a... examples for inspiration
https://www.justinmind.com/blog/breadcrumb-examples/">https://www.justinmind.com/blog/brea...
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
https://www.nngroup.com/articles/breadcrumbs/
Are">https://www.nngroup.com/articles/... breadcrumbs still fresh for UX?
https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b
Breadcrumb">https://medium.com/madison-a... examples for inspiration
https://www.justinmind.com/blog/breadcrumb-examples/">https://www.justinmind.com/blog/brea...
Carousels.
Carousel/slider design best practices (with examples) by @webflow
https://webflow.com/blog/carousel-slider-design-best-practices
Carousel">https://webflow.com/blog/caro... Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/
Designing">https://www.nngroup.com/articles/... a User-Friendly Homepage Carousel
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e">https://uxplanet.org/designing...
Carousel/slider design best practices (with examples) by @webflow
https://webflow.com/blog/carousel-slider-design-best-practices
Carousel">https://webflow.com/blog/caro... Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/
Designing">https://www.nngroup.com/articles/... a User-Friendly Homepage Carousel
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e">https://uxplanet.org/designing...
Modals.
Best Practices for Designing UI Overlays by @oliverlindberg
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://xd.adobe.com/ideas/pro... href=" https://www.appcues.com/blog/modal-dialog-windows">https://www.appcues.com/blog/moda... from @appcues
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
https://www.nngroup.com/articles/modal-nonmodal-dialog/
Modal">https://www.nngroup.com/articles/... dialogs
https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92">https://medium.com/pulsar/mo...
Best Practices for Designing UI Overlays by @oliverlindberg
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://xd.adobe.com/ideas/pro... href=" https://www.appcues.com/blog/modal-dialog-windows">https://www.appcues.com/blog/moda... from @appcues
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
https://www.nngroup.com/articles/modal-nonmodal-dialog/
Modal">https://www.nngroup.com/articles/... dialogs
https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92">https://medium.com/pulsar/mo...
Cards.
Card UI design: fundamentals and examples
https://www.justinmind.com/blog/cards-ui-design/
Simple">https://www.justinmind.com/blog/card... Design Tips for Crafting Better UI Cards
https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e
Designing">https://uxplanet.org/simple-de... cards
https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6">https://uxdesign.cc/designing...
Card UI design: fundamentals and examples
https://www.justinmind.com/blog/cards-ui-design/
Simple">https://www.justinmind.com/blog/card... Design Tips for Crafting Better UI Cards
https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e
Designing">https://uxplanet.org/simple-de... cards
https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6">https://uxdesign.cc/designing...
Tooltips.
Tooltip Guidelines
https://www.nngroup.com/articles/tooltip-guidelines/
Designing">https://www.nngroup.com/articles/... Better Tooltips For Mobile User Interfaces
https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/
Tooltips:">https://www.smashingmagazine.com/2021/02/d... your secret weapon for improving feature discovery by @sofiaqt
https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e">https://uxdesign.cc/tooltips-...
Tooltip Guidelines
https://www.nngroup.com/articles/tooltip-guidelines/
Designing">https://www.nngroup.com/articles/... Better Tooltips For Mobile User Interfaces
https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/
Tooltips:">https://www.smashingmagazine.com/2021/02/d... your secret weapon for improving feature discovery by @sofiaqt
https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e">https://uxdesign.cc/tooltips-...
Navigation.
Navigation design: Almost everything you need to know
https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
UX">https://www.justinmind.com/blog/navi... Design for Navigation Menu from @Prototypr
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea
The">https://blog.prototypr.io/ux-design... Fastest Navigation Layout for a Three-Level Menu from @uxmovement
https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2">https://uxmovement.medium.com/the-faste...
Navigation design: Almost everything you need to know
https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
UX">https://www.justinmind.com/blog/navi... Design for Navigation Menu from @Prototypr
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea
The">https://blog.prototypr.io/ux-design... Fastest Navigation Layout for a Three-Level Menu from @uxmovement
https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2">https://uxmovement.medium.com/the-faste...
Loaders.
Progress Indicators Make a Slow System Less Insufferable
https://www.nngroup.com/articles/progress-indicators/
Stop">https://www.nngroup.com/articles/... Using A Loading Spinner, Thereâs Something Better
https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e
Best">https://uxdesign.cc/stop-usin... Practices For Animated Progress Indicators
https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/">https://www.smashingmagazine.com/2016/12/b...
Progress Indicators Make a Slow System Less Insufferable
https://www.nngroup.com/articles/progress-indicators/
Stop">https://www.nngroup.com/articles/... Using A Loading Spinner, Thereâs Something Better
https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e
Best">https://uxdesign.cc/stop-usin... Practices For Animated Progress Indicators
https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/">https://www.smashingmagazine.com/2016/12/b...
Forms.
Design Better Forms by @CoyleAndrew (Really good read!
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="LĂ€chelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: LĂ€chelndes Gesicht mit herzförmigen Augen">)
https://medium.com/nextux/design-better-forms-96fadca0f49c
Form">https://medium.com/nextux/de... Design: 13 Empirically Backed Best Practices by @iamalexbirkett
https://cxl.com/blog/form-design-best-practices/
The">https://cxl.com/blog/form... UX behind designing better forms by @charmiekapoor
https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2">https://uxdesign.cc/the-ux-be...
Design Better Forms by @CoyleAndrew (Really good read!
https://medium.com/nextux/design-better-forms-96fadca0f49c
Form">https://medium.com/nextux/de... Design: 13 Empirically Backed Best Practices by @iamalexbirkett
https://cxl.com/blog/form-design-best-practices/
The">https://cxl.com/blog/form... UX behind designing better forms by @charmiekapoor
https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2">https://uxdesign.cc/the-ux-be...
If you want to have it as a single list instead of a thread, check out Reddit& #39;s first comment:
https://www.reddit.com/r/webdev/comments/mpgc9g/how_to_design_almost_any_ui_element_list_of_58/">https://www.reddit.com/r/webdev/...
https://www.reddit.com/r/webdev/comments/mpgc9g/how_to_design_almost_any_ui_element_list_of_58/">https://www.reddit.com/r/webdev/...
Let me add one more resource:
https://user-interface.io"> https://user-interface.io
Once a week, I send a newsletter covering different UI/UX topics. Everything related to user interfaces.
No ads, no spam.
Soon will start a blog there because it& #39;s not very convenient to post a lot of info in threads.
https://user-interface.io"> https://user-interface.io
Once a week, I send a newsletter covering different UI/UX topics. Everything related to user interfaces.
No ads, no spam.
Soon will start a blog there because it& #39;s not very convenient to post a lot of info in threads.