How to design almost any UI element.

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

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

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/ 

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/

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

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

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/

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/

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/

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/

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/

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/

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

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

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

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

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

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/

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

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/

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.