How to design almost any UI element. A curated list of 58 articles.
Tags: webdev, tutorial, ux, frontend
Published: 2021-04-15 11:55:01

Hi there!

Recently I posted [on Twitter](https://twitter.com/vponamariov/status/1381584285300359169) 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](https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4)

[Button Design — UI component series](https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7)

[UI cheat sheet: buttons](https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112)


## Text fields
[UI cheat sheet: text fields](https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8)

[Text fields & Forms design — UI components series](https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0)

[The Anatomy of Input Field](https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7)

## Checkboxes & Toggles

[Checkbox vs Toggle Switch](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)

[Toggle-Switch Guidelines](https://www.nngroup.com/articles/toggle-switch-guidelines/)

[Toggle switch design: the full run through](https://www.justinmind.com/blog/toggle-design-patterns-examples/)

[38 Checkbox Designs](https://uicookies.com/css-checkbox/)

## Radio Buttons

[Selection controls — UI component series](https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546)

[Radio Buttons UX Design](https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc)

[Radio button design: easy selection and decision-making](https://www.justinmind.com/blog/radio-button-design-examples/)

## Tables

[Design better data tables](https://medium.com/nextux/design-better-data-tables-4ecc99d23356)

[The Ultimate Guide to Designing Data Tables](https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a)

[Designing better data tables for enterprise UX](https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e)

## Datepickers

[How to Design a Perfect Date Picker Control?](https://uxplanet.org/how-to-design-a-perfect-date-picker-control-7f47d1290c3a)

[Date Picker Design Best Practices](https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5)

[A hunt for the perfect date picker UI](https://uxdesign.cc/date-picker-design-5c5ef8f35286)

## Sliders

[Designing The Perfect Slider](https://www.smashingmagazine.com/2017/07/designing-perfect-slider/)

[Slider design UI patterns and examples](https://www.justinmind.com/blog/slider-design-web/)

[Slider Design: Rules of Thumb](https://www.nngroup.com/articles/gui-slider-controls/)

## Tabs

[Module Tabs in Web Design: Best Practices and Solutions](https://www.smashingmagazine.com/2009/06/module-tabs-in-web-design-best-practices-and-solutions/)

[12 Tabs Design guidelines](https://www.nngroup.com/articles/tabs-used-right/)

## Dropdowns

[UI cheat sheet: dropdown field](https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432)

[Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/)

[Drop down list design: the complete guide](https://www.justinmind.com/blog/drop-down-list-design/)

## Pagination

[Paging, Scrolling, and Infinite Scroll](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php)

[UX: Infinite Scrolling vs. Pagination](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)

[Users' Pagination Preferences and "View All"](https://www.nngroup.com/articles/item-list-view-all/)

## Search inputs

[Best UX practices for search inputs](https://uxdesign.cc/best-ux-practices-for-search-inputs-c44dba565448)

[Design a Perfect Search Box](https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c)

[Site Search Suggestions](https://www.nngroup.com/articles/site-search-suggestions/)

## Breadcrumbs

[Breadcrumbs: 11 Design Guidelines for Desktop and Mobile](https://www.nngroup.com/articles/breadcrumbs/)

[Are breadcrumbs still fresh for UX?](https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b)

[Breadcrumb examples for inspiration](https://www.justinmind.com/blog/breadcrumb-examples/)

## Carousels

[Carousel/slider design best practices (with examples)](https://webflow.com/blog/carousel-slider-design-best-practices)

[Carousel Usability: Designing an Effective UI for Websites with Content Overload](https://www.nngroup.com/articles/designing-effective-carousels/)

[Designing a User-Friendly Homepage Carousel](https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e)

## Modals

[Best Practices for Designing UI Overlays](https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/)

[Big, bold UX—using modal windows for in-app user engagement](https://www.appcues.com/blog/modal-dialog-windows)

[Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/)

[Modal dialogs](https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92)

## Cards

[Card UI design: fundamentals and examples](https://www.justinmind.com/blog/cards-ui-design/)

[Simple Design Tips for Crafting Better UI Cards](https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e)

[Designing cards](https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6)

## Tooltips

[Tooltip Guidelines](https://www.nngroup.com/articles/tooltip-guidelines/)

[Designing Better Tooltips For Mobile User Interfaces](https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/)

[Tooltips: your secret weapon for improving feature discovery](https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e)

## Navigation

[Navigation design: Almost everything you need to know](https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/)

[UX Design for Navigation Menu](https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea)

[The Fastest Navigation Layout for a Three-Level Menu](https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2)

## Loaders

[Progress Indicators Make a Slow System Less Insufferable](https://www.nngroup.com/articles/progress-indicators/)

[Stop Using A Loading Spinner, There’s Something Better](https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e)

[Best Practices For Animated Progress Indicators](https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/)

## Forms

[Design Better Forms](https://medium.com/nextux/design-better-forms-96fadca0f49c)

[Form Design: 13 Empirically Backed Best Practices](https://cxl.com/blog/form-design-best-practices/)

[The UX behind designing better forms](https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2)

---

That's it. Hopefully, it'll be useful for web devs. If you wish, [follow me on Twitter](https://twitter.com/vponamariov), I post a lot about UI/UX there.