Hi there!
Recently I posted on Twitter a list of 58 links related to different UI elements. It turned out that the tweet was very helpful, but it's not very convenient to read the links as a thread.
So I wanted to share them here, on dev.to, in a single list.
Buttons
7 Basic Rules for Button Design
Button Design — UI component series
Text fields
Text fields & Forms design — UI components series
Checkboxes & Toggles
Toggle switch design: the full run through
Radio Buttons
Selection controls — UI component series
Radio button design: easy selection and decision-making
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
Slider design UI patterns and examples
Tabs
Module Tabs in Web Design: Best Practices and Solutions
Dropdowns
UI cheat sheet: dropdown field
Drop down list design: the complete guide
Pagination
Paging, Scrolling, and Infinite Scroll
UX: Infinite Scrolling vs. Pagination
Users' Pagination Preferences and "View All"
Search inputs
Best UX practices for search inputs
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
Cards
Card UI design: fundamentals and examples
Simple Design Tips for Crafting Better UI Cards
Tooltips
Designing Better Tooltips For Mobile User Interfaces
Tooltips: your secret weapon for improving feature discovery
Navigation
Navigation design: Almost everything you need to know
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
Form Design: 13 Empirically Backed Best Practices
The UX behind designing better forms
That's it. Hopefully, it'll be useful for web devs. If you wish, follow me on Twitter, I post a lot about UI/UX there.
Oldest comments (4)
Thanks!
You're welcome!
This is an amazing list - I'd also add a resource for enterprise filtering: pencilandpaper.io/articles/user-ex... - could be helpful to folks
Can I add some stuff I curated? with a spin on focusing on optimizing these elements for conversion:
Conversion Focused forms
Product Page elements
Testimonials/social proof