How to design almost any UI element.

A curated list of 58 articles https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="RĂŒckhand Zeigefinger nach unten" aria-label="Emoji: RĂŒckhand Zeigefinger nach unten">
Buttons.

7 Basic Rules for Button Design by @101babich
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

Button">https://uxplanet.org/7-basic-r... Design
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

Cheatsheet">https://uxdesign.cc/button-de... for buttons by @tessgadd
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112">https://uxdesign.cc/ui-cheat-...
Text fields.

UI cheat sheet: text fields (Awesome article! https://abs.twimg.com/emoji/v2/... draggable="false" alt="đŸ€©" title="Vom Star geblendet" aria-label="Emoji: Vom Star geblendet">)
https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8

Text">https://uxdesign.cc/ui-cheat-... fields & Forms design — UI components series
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

The">https://uxdesign.cc/text-fiel... Anatomy of Input Field
https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7">https://uxplanet.org/the-anato...
Checkboxes & Toggles.

Checkbox vs Toggle Switch by @uxplanet
https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

Toggle-Switch">https://uxplanet.org/checkbox-... Guidelines by @NNgroup
https://www.nngroup.com/articles/toggle-switch-guidelines/

Toggle">https://www.nngroup.com/articles/... design patterns from @just_in_mind
https://www.justinmind.com/blog/toggle-design-patterns-examples/

38">https://www.justinmind.com/blog/togg... Checkbox Designs https://abs.twimg.com/emoji/v2/... draggable="false" alt="😳" title="Errötetes Gesicht" aria-label="Emoji: Errötetes Gesicht">
https://uicookies.com/css-checkbox/ ">https://uicookies.com/css-check...
Radio Buttons.

Selection controls — UI component series (AWESOME https://abs.twimg.com/emoji/v2/... draggable="false" alt="đŸ€©" title="Vom Star geblendet" aria-label="Emoji: Vom Star geblendet">)
https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546

Radio">https://uxdesign.cc/selection... Buttons UX Design
https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc

Radio">https://uxplanet.org/radio-but... button design: easy selection and decision-making
https://www.justinmind.com/blog/radio-button-design-examples/">https://www.justinmind.com/blog/radi...
Tables.

Design better data tables by @CoyleAndrew (https://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="LĂ€chelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: LĂ€chelndes Gesicht mit herzförmigen Augen">)
https://medium.com/nextux/design-better-data-tables-4ecc99d23356

The">https://medium.com/nextux/de... Ultimate Guide to Designing Data Tables
https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a

Designing">https://medium.com/design-wi... better data tables for enterprise UX
https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e">https://uxdesign.cc/data-tabl...
Datepickers. (It& #39;s a pain https://abs.twimg.com/emoji/v2/... draggable="false" alt="😣" title="Standhaftes Gesicht" aria-label="Emoji: Standhaftes Gesicht">)

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

Date">https://uxplanet.org/how-to-de... Picker Design Best Practices
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5

A">https://uxplanet.org/date-pick... hunt for the perfect date picker UI
https://uxdesign.cc/date-picker-design-5c5ef8f35286">https://uxdesign.cc/date-pick...
Sliders.

UNBELIEVABLE article. @smashingmag is a golden resource really.
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/

Slider">https://www.smashingmagazine.com/2017/07/d... design UI patterns and examples from @just_in_mind
https://www.justinmind.com/blog/slider-design-web/

Slider">https://www.justinmind.com/blog/slid... Design: Rules of Thumb from NNGroup
https://www.nngroup.com/articles/gui-slider-controls/">https://www.nngroup.com/articles/...
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">https://www.smashingmagazine.com/2009/06/m... Tabs Design guidelines
https://www.nngroup.com/articles/tabs-used-right/">https://www.nngroup.com/articles/...
Dropdowns

UI cheat sheet: dropdown field (Like this one https://abs.twimg.com/emoji/v2/... draggable="false" alt="đŸ„°" title="Smiling face with 3 hearts" aria-label="Emoji: Smiling face with 3 hearts">)
https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432

Dropdowns:">https://uxdesign.cc/ui-cheat-... Design Guidelines
https://www.nngroup.com/articles/drop-down-menus/

Drop">https://www.nngroup.com/articles/... down list design: the complete guide
https://www.justinmind.com/blog/drop-down-list-design/">https://www.justinmind.com/blog/drop...
Pagination

Paging, Scrolling, and Infinite Scroll by @uxmatters
https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php

UX:">https://www.uxmatters.com/mt/archiv... Infinite Scrolling vs. Pagination by @101babich
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

Users& #39;">https://uxplanet.org/ux-infini... Pagination Preferences and "View All"
https://www.nngroup.com/articles/item-list-view-all/">https://www.nngroup.com/articles/...
Search inputs

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

Design">https://uxdesign.cc/best-ux-p... a Perfect Search Box
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c

Site">https://uxplanet.org/design-a-... Search Suggestions by @nngroup
https://www.nngroup.com/articles/site-search-suggestions/">https://www.nngroup.com/articles/...
Breadcrumbs.

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

Are">https://www.nngroup.com/articles/... breadcrumbs still fresh for UX?
https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b

Breadcrumb">https://medium.com/madison-a... examples for inspiration
https://www.justinmind.com/blog/breadcrumb-examples/">https://www.justinmind.com/blog/brea...
Carousels.

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

Carousel">https://webflow.com/blog/caro... Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/

Designing">https://www.nngroup.com/articles/... a User-Friendly Homepage Carousel
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e">https://uxplanet.org/designing...
Modals.

Best Practices for Designing UI Overlays by @oliverlindberg
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/

https://xd.adobe.com/ideas/pro... href=" https://www.appcues.com/blog/modal-dialog-windows">https://www.appcues.com/blog/moda... from @appcues

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

Modal">https://www.nngroup.com/articles/... dialogs
https://medium.com/pulsar/modern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92">https://medium.com/pulsar/mo...
Cards.

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

Simple">https://www.justinmind.com/blog/card... Design Tips for Crafting Better UI Cards
https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e

Designing">https://uxplanet.org/simple-de... cards
https://uxdesign.cc/designing-cards-for-beginners-9ed9454d27f6">https://uxdesign.cc/designing...
Tooltips.

Tooltip Guidelines
https://www.nngroup.com/articles/tooltip-guidelines/

Designing">https://www.nngroup.com/articles/... Better Tooltips For Mobile User Interfaces
https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/

Tooltips:">https://www.smashingmagazine.com/2021/02/d... your secret weapon for improving feature discovery by @sofiaqt

https://uxdesign.cc/tooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e">https://uxdesign.cc/tooltips-...
Navigation.

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

UX">https://www.justinmind.com/blog/navi... Design for Navigation Menu from @Prototypr
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea

The">https://blog.prototypr.io/ux-design... Fastest Navigation Layout for a Three-Level Menu from @uxmovement
https://uxmovement.medium.com/the-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2">https://uxmovement.medium.com/the-faste...
Loaders.

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

Stop">https://www.nngroup.com/articles/... Using A Loading Spinner, There’s Something Better
https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e

Best">https://uxdesign.cc/stop-usin... Practices For Animated Progress Indicators
https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/">https://www.smashingmagazine.com/2016/12/b...
Forms.

Design Better Forms by @CoyleAndrew (Really good read! https://abs.twimg.com/emoji/v2/... draggable="false" alt="😍" title="LĂ€chelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: LĂ€chelndes Gesicht mit herzförmigen Augen">)
https://medium.com/nextux/design-better-forms-96fadca0f49c

Form">https://medium.com/nextux/de... Design: 13 Empirically Backed Best Practices by @iamalexbirkett
https://cxl.com/blog/form-design-best-practices/

The">https://cxl.com/blog/form... UX behind designing better forms by @charmiekapoor
https://uxdesign.cc/the-ux-behind-designing-better-forms-d6ebe7a817d2">https://uxdesign.cc/the-ux-be...
If you want to have it as a single list instead of a thread, check out Reddit& #39;s first comment:

https://www.reddit.com/r/webdev/comments/mpgc9g/how_to_design_almost_any_ui_element_list_of_58/">https://www.reddit.com/r/webdev/...
Let me add one more resource:

https://user-interface.io"> https://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& #39;s not very convenient to post a lot of info in threads.
Weekly UI/UX tips in your inbox for free

I'm sharing UI/UX insights I found interesting and helpful

https://user-interface.io
You can follow @vponamariov.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
There are a lot of misconceptions about the Turkish diaspora in Germany. Since i just finished writing an essay about this topic I thought it's time to give other people
Read more
Las mejores calculadoras online en 2020A thread http://totumat.com/2020/11/26/las-mejores-calculadoras-online-en-2020/ Cuando se estudian asignaturas que requieren de cålculos complicados, nada mejor que contar con una buena calculadora.
Read more
Mitigating #ClimateChange is as much about taking up new techs as about leaving others behindMost studies focus on #coal's global downfall but another #energy tech decline is loomingRead my new
Read more