How to design almost any UI element (list of ~58 articles of how to properly build elements in terms of UI and UX)
Tags: ui, ux, design, resources
Published: 2022-12-22 21:57:12

## Buttons.

- [7 Basic Rules for Button Design](https://t.co/m7g1MQ1d3m) by [@101babich](https://twitter.com/101babich)
- [Button Design](https://t.co/srbgqAOvyV)
- [Cheatsheet for buttons](https://t.co/4BXUNTEzIw) by [@tessgadd](https://twitter.com/tessgadd)

## Text fields.

- [UI cheat sheet: text fields (Awesome article!)](https://t.co/92eqmsxJz5)
- [Text fields & Forms design — UI components series](https://t.co/a5OAlsBYYz)
- [The Anatomy of Input Field](https://t.co/BzjdsNLbGp)

## Checkboxes & Toggles.

- [Checkbox vs Toggle Switch](https://t.co/2qwRITZ7xl) by [@uxplanet](https://twitter.com/uxplanet)
- [Toggle-Switch Guidelines](https://t.co/ftcHGs20zy) by [@NNgroup](https://twitter.com/NNgroup)
- [Toggle design patterns](https://t.co/jtc0K2esSa) from [@just_in_mind](https://twitter.com/just_in_mind)
- [38 Checkbox Designs](https://t.co/xuuGxX4wle)

## Radio Buttons.

- [Selection controls — UI component series (AWESOME)](https://t.co/iYM2TOwJJJ)
- [Radio Buttons UX Design](https://t.co/toIB4ATFsy)
- [Radio button design: easy selection and decision-making](https://t.co/ju5EKVnCCv)

## Tables.

- [Design better data tables](https://t.co/LkviePrdOS) by [@CoyleAndrew](https://twitter.com/CoyleAndrew)
- [The Ultimate Guide to Designing Data Tables](https://t.co/trFjRmCPsO)
- [Designing better data tables for enterprise UX](https://t.co/IjBCF2SB3P)

## Datepickers. (It's a pain)

- [How to Design a Perfect Date Picker Control?](https://t.co/DMoKDpJ6Ri)
- [Date Picker Design Best Practices](https://t.co/PXcZGQ66Zv)
- [A hunt for the perfect date picker UI](https://t.co/cF41bhB5dn)

## Sliders.

- [UNBELIEVABLE article](https://t.co/NoSRmlHN1A) [@smashingmag](https://twitter.com/smashingmag) is a golden resource really.
- [Slider design UI patterns and examples](https://t.co/G8ymVAlh6l) from [@just_in_mind](https://twitter.com/just_in_mind)
- [Slider Design: Rules of Thumb from NNGroup](https://t.co/0iXm3teB7F)

## Tabs.

- [Module Tabs in Web Design: Best Practices and Solutions](https://t.co/hLUpxfTUzf)
- [12 Tabs Design guidelines](https://t.co/HmPNXiNoLV)

## Dropdowns

- [UI cheat sheet: dropdown field (Like this one)](https://t.co/XMF5mE4jjc)
- [Dropdowns: Design Guidelines](https://t.co/wnqYIWvAxF)
- [Drop down list design: the complete guide](https://t.co/gRqNsCawTl)

## Pagination

- [Paging, Scrolling, and Infinite Scroll](https://t.co/M4qLpZHwxV) by [@uxmatters](https://twitter.com/uxmatters)
- [UX: Infinite Scrolling vs. Pagination](https://t.co/AZN4ttXUli) by [@101babich](https://twitter.com/101babich)
- [Users' Pagination Preferences and "View All"](https://t.co/h74qKS8emt)

## Search inputs

- [Best UX practices for search inputs](https://t.co/g3qOCcYJ5U)
- [Design a Perfect Search Box](https://t.co/O5tt2zIXKq)
- [Site Search Suggestions](https://t.co/ua5Mfvqnk7) by [@nngroup](https://twitter.com/nngroup)

## Breadcrumbs.

- [Breadcrumbs: 11 Design Guidelines for Desktop and Mobile](https://t.co/KQs8QvBJiS)
- [Are breadcrumbs still fresh for UX?](https://t.co/Zet4DHNEb6)
- [Breadcrumb examples for inspiration](https://t.co/huUIxvox55)

## Carousels.

- [Carousel/slider design best practices (with examples)](https://t.co/TQsCzXfb3S) by [@webflow](https://twitter.com/webflow)
- [Carousel Usability: Designing an Effective UI for Websites with Content Overload](https://t.co/rv2II2WhM9)
- [Designing a User-Friendly Homepage Carousel](https://t.co/XmNcvJL7jt)

## Modals.

- [Best Practices for Designing UI Overlays](https://t.co/WxYMZhG61p) by [@oliverlindberg](https://twitter.com/oliverlindberg)
- [Big, bold UX—using modal windows for in-app user engagement](https://t.co/uPVaJ1CLDk) from [@appcues](https://twitter.com/appcues)
- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://t.co/5GJw7sl3VL)
- [Modal dialogs](https://t.co/TXEnv10keD)

## Cards.

- [Card UI design: fundamentals and examples](https://t.co/22QfczOP7O)
- [Simple Design Tips for Crafting Better UI Cards](https://t.co/4oRf8kwvn8)
- [Designing cards](https://t.co/nW1BQamhng)

## Tooltips.

- [Tooltip Guidelines](https://t.co/Jct5q7ydeR)
- [Designing Better Tooltips For Mobile User Interfaces](https://t.co/QUwNvDM3NI)
- [Tooltips: your secret weapon for improving feature discovery](https://t.co/9XPdAFwR6s) by [@sofiaqt](https://twitter.com/sofiaqt)

## Navigation.

- [Navigation design: Almost everything you need to know](https://t.co/4NUG9KoLwN)
- [UX Design for Navigation Menu](https://t.co/d3otgDaTMh) from [@Prototypr](https://twitter.com/Prototypr)
- [The Fastest Navigation Layout for a Three-Level Menu](https://t.co/fNwZQzSFrb) from [@uxmovement](https://twitter.com/uxmovement)

## Loaders.

- [Progress Indicators Make a Slow System Less Insufferable](https://t.co/jOmtMPQ8nU)
- [Stop Using A Loading Spinner, There’s Something Better](https://t.co/0O0RBNyX0W)
- [Best Practices For Animated Progress Indicators](https://t.co/lgLY2zJaPm)

## Forms.

- [Design Better Forms](https://t.co/xJWs2vhuJQ) by [@CoyleAndrew](https://twitter.com/CoyleAndrew) (Really good read!)
- [Form Design: 13 Empirically Backed Best Practices](https://t.co/7ptPrcUQEq) by [@iamalexbirkett](https://twitter.com/iamalexbirkett)
- [The UX behind designing better forms](https://t.co/nIV8MfUGLY) by [@charmiekapoor](https://twitter.com/charmiekapoor)

Source: [https://twitter.com/vponamariov/status/1381584285300359169](https://twitter.com/vponamariov/status/1381584285300359169)