Read on Twitter
How to design almost any UI element.
A curated list of 58 articles
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 Design
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
Cheatsheet for buttons by @tessgadd
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
7 Basic Rules for Button Design by @101babich
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
Button Design
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
Cheatsheet for buttons by @tessgadd
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
Text fields.
UI cheat sheet: text fields (Awesome article!
)
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
UI cheat sheet: text fields (Awesome article!
)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
Checkboxes & Toggles.
Checkbox vs Toggle Switch by @uxplanet
https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Toggle-Switch Guidelines by @NNgroup
https://www.nngroup.com/articles/toggle-switch-guidelines/
Toggle design patterns from @just_in_mind
https://www.justinmind.com/blog/toggle-design-patterns-examples/
38 Checkbox Designs
https://uicookies.com/css-checkbox/
Checkbox vs Toggle Switch by @uxplanet
https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Toggle-Switch Guidelines by @NNgroup
https://www.nngroup.com/articles/toggle-switch-guidelines/
Toggle design patterns from @just_in_mind
https://www.justinmind.com/blog/toggle-design-patterns-examples/
38 Checkbox Designs
https://uicookies.com/css-checkbox/
Radio Buttons.
Selection controls â UI component series (AWESOME)
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/blog/radio-button-design-examples/
Selection controls â UI component series (AWESOME
)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/blog/radio-button-design-examples/
Tables.
Design better data tables by @CoyleAndrew (
)
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
Design better data tables by @CoyleAndrew (
)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
Datepickers. (It's a pain 
)
How to Design a Perfect Date Picker Control?
https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a
Date Picker Design Best Practices
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5
A hunt for the perfect date picker UI
https://uxdesign.cc/date-picker-design-5c5ef8f35286
)How to Design a Perfect Date Picker Control?
https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a
Date Picker Design Best Practices
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5
A hunt for the perfect date picker UI
https://uxdesign.cc/date-picker-design-5c5ef8f35286
Sliders.
UNBELIEVABLE article. @smashingmag is a golden resource really.
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
Slider design UI patterns and examples from @just_in_mind
https://www.justinmind.com/blog/slider-design-web/
Slider Design: Rules of Thumb from NNGroup
https://www.nngroup.com/articles/gui-slider-controls/
UNBELIEVABLE article. @smashingmag is a golden resource really.
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
Slider design UI patterns and examples from @just_in_mind
https://www.justinmind.com/blog/slider-design-web/
Slider Design: Rules of Thumb from NNGroup
https://www.nngroup.com/articles/gui-slider-controls/
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/
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/
Dropdowns
UI cheat sheet: dropdown field (Like this one
)
https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
Dropdowns: Design Guidelines
https://www.nngroup.com/articles/drop-down-menus/
Drop down list design: the complete guide
https://www.justinmind.com/blog/drop-down-list-design/
UI cheat sheet: dropdown field (Like this one
)https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
Dropdowns: Design Guidelines
https://www.nngroup.com/articles/drop-down-menus/
Drop down list design: the complete guide
https://www.justinmind.com/blog/drop-down-list-design/
Pagination
Paging, Scrolling, and Infinite Scroll by @uxmatters
https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php
UX: Infinite Scrolling vs. Pagination by @101babich
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
Users' Pagination Preferences and "View All"
https://www.nngroup.com/articles/item-list-view-all/
Paging, Scrolling, and Infinite Scroll by @uxmatters
https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php
UX: Infinite Scrolling vs. Pagination by @101babich
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
Users' Pagination Preferences and "View All"
https://www.nngroup.com/articles/item-list-view-all/
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 by @nngroup
https://www.nngroup.com/articles/site-search-suggestions/
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 by @nngroup
https://www.nngroup.com/articles/site-search-suggestions/
Breadcrumbs.
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
https://www.nngroup.com/articles/breadcrumbs/
Are breadcrumbs still fresh for UX?
https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b
Breadcrumb examples for inspiration
https://www.justinmind.com/blog/breadcrumb-examples/
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
https://www.nngroup.com/articles/breadcrumbs/
Are breadcrumbs still fresh for UX?
https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b
Breadcrumb examples for inspiration
https://www.justinmind.com/blog/breadcrumb-examples/
Carousels.
Carousel/slider design best practices (with examples) by @webflow
https://webflow.com/blog/carousel-slider-design-best-practices
Carousel Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/
Designing a User-Friendly Homepage Carousel
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e
Carousel/slider design best practices (with examples) by @webflow
https://webflow.com/blog/carousel-slider-design-best-practices
Carousel Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/
Designing a User-Friendly Homepage Carousel
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e
Modals.
Best Practices for Designing UI Overlays by @oliverlindberg
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://www.appcues.com/blog/modal-dialog-windows from @appcues
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
https://www.nngroup.com/articles/modal-nonmodal-dialog/
Modal dialogs
https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92
Best Practices for Designing UI Overlays by @oliverlindberg
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://www.appcues.com/blog/modal-dialog-windows from @appcues
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
https://www.nngroup.com/articles/modal-nonmodal-dialog/
Modal dialogs
https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92
Cards.
Card UI design: fundamentals and examples
https://www.justinmind.com/blog/cards-ui-design/
Simple Design Tips for Crafting Better UI Cards
https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e
Designing cards
https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6
Card UI design: fundamentals and examples
https://www.justinmind.com/blog/cards-ui-design/
Simple Design Tips for Crafting Better UI Cards
https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e
Designing cards
https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6
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 by @sofiaqt
https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e
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 by @sofiaqt
https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e
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 Menu from @Prototypr
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea
The Fastest Navigation Layout for a Three-Level Menu from @uxmovement
https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2
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 Menu from @Prototypr
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea
The Fastest Navigation Layout for a Three-Level Menu from @uxmovement
https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2
Loaders.
Progress Indicators Make a Slow System Less Insufferable
https://www.nngroup.com/articles/progress-indicators/
Stop Using A Loading Spinner, Thereâs Something Better
https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e
Best Practices For Animated Progress Indicators
https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
Progress Indicators Make a Slow System Less Insufferable
https://www.nngroup.com/articles/progress-indicators/
Stop Using A Loading Spinner, Thereâs Something Better
https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e
Best Practices For Animated Progress Indicators
https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
Forms.
Design Better Forms by @CoyleAndrew (Really good read!)
https://medium.com/nextux/design-better-forms-96fadca0f49c
Form Design: 13 Empirically Backed Best Practices by @iamalexbirkett
https://cxl.com/blog/form-design-best-practices/
The UX behind designing better forms by @charmiekapoor
https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2
Design Better Forms by @CoyleAndrew (Really good read!
)https://medium.com/nextux/design-better-forms-96fadca0f49c
Form Design: 13 Empirically Backed Best Practices by @iamalexbirkett
https://cxl.com/blog/form-design-best-practices/
The UX behind designing better forms by @charmiekapoor
https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2
If you want to have it as a single list instead of a thread, check out Reddit'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/comments/mpgc9g/how_to_design_almost_any_ui_element_list_of_58/
Let me add one more resource:
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's not very convenient to post a lot of info in threads.
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's not very convenient to post a lot of info in threads.
