58 links on designing almost any UI element
Back in 2021, I posted a list of 58 links on Twitter — covering how to design various UI elements: buttons, inputs, modals, tables, navbars, and more.
That tweet got more attention than I expected, so I decided to save the collection here — in a cleaner, more readable format.
It’s not a comprehensive guide — just a personal list I’ve used while working on real products. I’m sharing it in case it helps you too.
No fluff, no affiliate links — just hand-picked, solid resources that explain what works and why.
Text fields
UI cheat sheet: text fields
Text fields & Forms design — UI components series
The Anatomy of Input Field
Checkboxes & Toggles
Checkbox vs Toggle Switch
Toggle-Switch Guidelines
Toggle switch design: the full run through
38 Checkbox Designs
Radio Buttons
Selection controls — UI component series
Radio Buttons UX Design
Radio button design: easy selection and decision-making
Tables
Design better data tables
The Ultimate Guide to Designing Data Tables
Designing better data tables for enterprise UX
Datepickers
How to Design a Perfect Date Picker Control?
Date Picker Design Best Practices
A hunt for the perfect date picker UI
Sliders
Designing The Perfect Slider
Slider design UI patterns and examples
Slider Design: Rules of Thumb
Dropdowns
UI cheat sheet: dropdown field
Dropdowns: Design Guidelines
Drop down list design: the complete guide
Pagination
Paging, Scrolling, and Infinite Scroll
UX: Infinite Scrolling vs. Pagination
Users' Pagination Preferences and "View All"
Breadcrumbs
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
Are breadcrumbs still fresh for UX?
Breadcrumb examples for inspiration
Carousels
Carousel/slider design best practices (with examples)
Carousel Usability: Designing an Effective UI for Websites with Content Overload
Designing a User-Friendly Homepage Carousel
Modals
Best Practices for Designing UI Overlays
Big, bold UX—using modal windows for in-app user engagement
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
Modal dialogs
Cards
Card UI design: fundamentals and examples
Simple Design Tips for Crafting Better UI Cards
Designing cards
Tooltips
Tooltip Guidelines
Designing Better Tooltips For Mobile User Interfaces
Tooltips: your secret weapon for improving feature discovery
Navigation
Navigation design: Almost everything you need to know
UX Design for Navigation Menu
The Fastest Navigation Layout for a Three-Level Menu
Loaders
Progress Indicators Make a Slow System Less Insufferable
Stop Using A Loading Spinner, There’s Something Better
Best Practices For Animated Progress Indicators
Forms
Design Better Forms
Form Design: 13 Empirically Backed Best Practices
The UX behind designing better forms
That's it. Hopefully, it was useful for you. If you wish, follow me on Twitter, I post a lot about UI/UX there.
By the way!
These guys helped me a lot while I've been collecting these links, check them out. Especially if you're interested in animations.