DEV Community

Cover image for How to design almost any UI element. A curated list of 58 articles.
Victor
Victor

Posted on

How to design almost any UI element. A curated list of 58 articles.

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

UI cheat sheet: buttons

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

Tabs

Module Tabs in Web Design: Best Practices and Solutions

12 Tabs Design guidelines

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"

Search inputs

Best UX practices for search inputs

Design a Perfect Search Box

Site Search Suggestions

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'll be useful for web devs. If you wish, follow me on Twitter, I post a lot about UI/UX there.

Top comments (4)

Collapse
 
belhassen07 profile image
Belhassen Chelbi • Edited

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

Collapse
 
danspinola profile image
Dan Spinola

Thanks!

Collapse
 
vponamariov profile image
Victor

You're welcome!

Collapse
 
cearacrawshaw profile image
Ceara C

This is an amazing list - I'd also add a resource for enterprise filtering: pencilandpaper.io/articles/user-ex... - could be helpful to folks