How to design almost any UI element.
A curated list of 58 articles 👇
Buttons.
7 Basic Rules for Button Design by @101babich
uxplanet.org/7-basic-rules-…
Button Design
uxdesign.cc/button-design-…
Cheatsheet for buttons by @TessGadd
uxdesign.cc/ui-cheat-sheet…
Text fields.
UI cheat sheet: text fields (Awesome article! 🤩)
uxdesign.cc/ui-cheat-sheet…
Text fields & Forms design — UI components series
uxdesign.cc/text-fields-fo…
The Anatomy of Input Field
uxplanet.org/the-anatomy-of…
Checkboxes & Toggles.
Checkbox vs Toggle Switch by @uxplanet
uxplanet.org/checkbox-vs-to…
Toggle-Switch Guidelines by @NNgroup
nngroup.com/articles/toggl…
Toggle design patterns from @just_in_mind
justinmind.com/blog/toggle-de…
38 Checkbox Designs 😳
uicookies.com/css-checkbox/
Radio Buttons.
Selection controls — UI component series (AWESOME 🤩)
uxdesign.cc/selection-cont…
Radio Buttons UX Design
uxplanet.org/radio-buttons-…
Radio button design: easy selection and decision-making
justinmind.com/blog/radio-but…
Tables.
Design better data tables by @CoyleAndrew (😍)
medium.com/nextux/design-…
The Ultimate Guide to Designing Data Tables
medium.com/design-with-fi…
Designing better data tables for enterprise UX
uxdesign.cc/data-table-for…
Datepickers. (It's a pain 😣)
How to Design a Perfect Date Picker Control?
uxplanet.org/how-to-design-…
Date Picker Design Best Practices
uxplanet.org/date-picker-de…
A hunt for the perfect date picker UI
uxdesign.cc/date-picker-de…
Sliders.
UNBELIEVABLE article. @smashingmag is a golden resource really.
smashingmagazine.com/2017/07/design…
Slider design UI patterns and examples from @just_in_mind
justinmind.com/blog/slider-de…
Slider Design: Rules of Thumb from NNGroup
nngroup.com/articles/gui-s…
Tabs.
Module Tabs in Web Design: Best Practices and Solutions
smashingmagazine.com/2009/06/module…
12 Tabs Design guidelines
nngroup.com/articles/tabs-…
Dropdowns
UI cheat sheet: dropdown field (Like this one 🥰)
uxdesign.cc/ui-cheat-sheet…
Dropdowns: Design Guidelines
nngroup.com/articles/drop-…
Drop down list design: the complete guide
justinmind.com/blog/drop-down…
Pagination
Paging, Scrolling, and Infinite Scroll by @uxmatters
uxmatters.com/mt/archives/20…
UX: Infinite Scrolling vs. Pagination by @101babich
uxplanet.org/ux-infinite-sc…
Users' Pagination Preferences and "View All"
nngroup.com/articles/item-…
Search inputs
Best UX practices for search inputs
uxdesign.cc/best-ux-practi…
Design a Perfect Search Box
uxplanet.org/design-a-perfe…
Site Search Suggestions by @NNgroup
nngroup.com/articles/site-…
Breadcrumbs.
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
nngroup.com/articles/bread…
Are breadcrumbs still fresh for UX?
medium.com/madison-ave-co…
Breadcrumb examples for inspiration
justinmind.com/blog/breadcrum…
Carousels.
Carousel/slider design best practices (with examples) by @webflow
webflow.com/blog/carousel-…
Carousel Usability: Designing an Effective UI for Websites with Content Overload
nngroup.com/articles/desig…
Designing a User-Friendly Homepage Carousel
uxplanet.org/designing-a-us…
Modals.
Best Practices for Designing UI Overlays by @oliverlindberg
xd.adobe.com/ideas/process/…
appcues.com/blog/modal-dia… from @Appcues
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
nngroup.com/articles/modal…
Modal dialogs
medium.com/pulsar/modern-…
Cards.
Card UI design: fundamentals and examples
justinmind.com/blog/cards-ui-…
Simple Design Tips for Crafting Better UI Cards
uxplanet.org/simple-design-…
Designing cards
uxdesign.cc/designing-card…
Tooltips.
Tooltip Guidelines
nngroup.com/articles/toolt…
Designing Better Tooltips For Mobile User Interfaces
smashingmagazine.com/2021/02/design…
Tooltips: your secret weapon for improving feature discovery by @Sofiaqt
uxdesign.cc/tooltips-your-…
Navigation.
Navigation design: Almost everything you need to know
justinmind.com/blog/navigatio…
UX Design for Navigation Menu from @Prototypr
blog.prototypr.io/ux-design-for-…
The Fastest Navigation Layout for a Three-Level Menu from @uxmovement
uxmovement.medium.com/the-fastest-na…
Loaders.
Progress Indicators Make a Slow System Less Insufferable
nngroup.com/articles/progr…
Stop Using A Loading Spinner, There’s Something Better
uxdesign.cc/stop-using-a-l…
Best Practices For Animated Progress Indicators
smashingmagazine.com/2016/12/best-p…
Forms.
Design Better Forms by @CoyleAndrew (Really good read! 😍)
medium.com/nextux/design-…
Form Design: 13 Empirically Backed Best Practices by @iamalexbirkett
cxl.com/blog/form-desi…
The UX behind designing better forms by @CharmieKapoor
uxdesign.cc/the-ux-behind-…
If you want to have it as a single list instead of a thread, check out Reddit's first comment:
reddit.com/r/webdev/comme…
Let me add one more resource:
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.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.