[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fhow-to-design-almost-any-ui-element":3},{"id":4,"title":5,"body":6,"date":614,"description":615,"extension":616,"head":617,"imageUrl":618,"meta":619,"navigation":620,"ogImage":617,"path":621,"robots":617,"schemaOrg":617,"seo":622,"sitemap":623,"stem":624,"__hash__":625},"articles\u002Farticles\u002F01.How-to-design-almost-any-ui-element.md","58 links on designing almost any UI element",{"type":7,"value":8,"toc":591},"minimark",[9,13,25,28,31,34,66,94,129,157,185,213,241,262,290,318,346,374,402,437,465,493,521,549,577,580,583],[10,11,5],"h1",{"id":12},"_58-links-on-designing-almost-any-ui-element",[14,15,16,17,24],"p",{},"Back in 2021, I posted a ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fx.com\u002Fvponamariov\u002Fstatus\u002F1381584285300359169",[22],"nofollow","list of 58 links on Twitter"," — covering\nhow to design various UI elements: buttons, inputs, modals, tables, navbars, and more.",[14,26,27],{},"That tweet got more attention than I expected, so I decided to save the collection here —\nin a cleaner, more readable format.",[14,29,30],{},"It’s not a comprehensive guide — just a personal list I’ve used while working on real products.\nI’m sharing it in case it helps you too.",[14,32,33],{},"No fluff, no affiliate links — just hand-picked, solid resources that explain what works and why.",[35,36,39,44],"div",{"className":37},[38],"mb-8",[40,41,43],"h2",{"id":42},"buttons","Buttons",[14,45,46,51,54,59,61],{},[18,47,50],{"href":48,"rel":49},"https:\u002F\u002Fuxplanet.org\u002F7-basic-rules-for-button-design-63dcdf5676b4",[22],"7 Basic Rules for Button Design",[52,53],"br",{},[18,55,58],{"href":56,"rel":57},"https:\u002F\u002Fuxdesign.cc\u002Fbutton-design-user-interface-components-series-85243b6736c7",[22],"Button Design — UI component series",[52,60],{},[18,62,65],{"href":63,"rel":64},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheets-buttons-7329ed9d6112",[22],"UI cheat sheet: buttons",[35,67,69,73],{"className":68},[38],[40,70,72],{"id":71},"text-fields","Text fields",[14,74,75,80,82,87,89],{},[18,76,79],{"href":77,"rel":78},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheet-text-fields-2152112615f8",[22],"UI cheat sheet: text fields",[52,81],{},[18,83,86],{"href":84,"rel":85},"https:\u002F\u002Fuxdesign.cc\u002Ftext-fields-forms-design-ui-components-series-2b32b2beebd0",[22],"Text fields & Forms design — UI components series",[52,88],{},[18,90,93],{"href":91,"rel":92},"https:\u002F\u002Fuxplanet.org\u002Fthe-anatomy-of-input-field-c3ef863e01d7",[22],"The Anatomy of Input Field",[35,95,97,101],{"className":96},[38],[40,98,100],{"id":99},"checkboxes-toggles","Checkboxes & Toggles",[14,102,103,108,110,115,117,122,124],{},[18,104,107],{"href":105,"rel":106},"https:\u002F\u002Fuxplanet.org\u002Fcheckbox-vs-toggle-switch-7fc6e83f10b8",[22],"Checkbox vs Toggle Switch",[52,109],{},[18,111,114],{"href":112,"rel":113},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftoggle-switch-guidelines\u002F",[22],"Toggle-Switch Guidelines",[52,116],{},[18,118,121],{"href":119,"rel":120},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Ftoggle-design-patterns-examples\u002F",[22],"Toggle switch design: the full run through",[52,123],{},[18,125,128],{"href":126,"rel":127},"https:\u002F\u002Fuicookies.com\u002Fcss-checkbox\u002F",[22],"38 Checkbox Designs",[35,130,132,136],{"className":131},[38],[40,133,135],{"id":134},"radio-buttons","Radio Buttons",[14,137,138,143,145,150,152],{},[18,139,142],{"href":140,"rel":141},"https:\u002F\u002Fuxdesign.cc\u002Fselection-controls-ui-component-series-3badc0bdb546",[22],"Selection controls — UI component series",[52,144],{},[18,146,149],{"href":147,"rel":148},"https:\u002F\u002Fuxplanet.org\u002Fradio-buttons-ux-design-588e5c0a50dc",[22],"Radio Buttons UX Design",[52,151],{},[18,153,156],{"href":154,"rel":155},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fradio-button-design-examples\u002F",[22],"Radio button design: easy selection and decision-making",[35,158,160,164],{"className":159},[38],[40,161,163],{"id":162},"tables","Tables",[14,165,166,171,173,178,180],{},[18,167,170],{"href":168,"rel":169},"https:\u002F\u002Fmedium.com\u002Fnextux\u002Fdesign-better-data-tables-4ecc99d23356",[22],"Design better data tables",[52,172],{},[18,174,177],{"href":175,"rel":176},"https:\u002F\u002Fmedium.com\u002Fdesign-with-figma\u002Fthe-ultimate-guide-to-designing-data-tables-7db29713a85a",[22],"The Ultimate Guide to Designing Data Tables",[52,179],{},[18,181,184],{"href":182,"rel":183},"https:\u002F\u002Fuxdesign.cc\u002Fdata-table-for-enterprise-ux-cb48fb9fdf1e",[22],"Designing better data tables for enterprise UX",[35,186,188,192],{"className":187},[38],[40,189,191],{"id":190},"datepickers","Datepickers",[14,193,194,199,201,206,208],{},[18,195,198],{"href":196,"rel":197},"https:\u002F\u002Fuxplanet.org\u002Fhow-to-design-a-perfect-date-picker-control-7f47d1290c3a",[22],"How to Design a Perfect Date Picker Control?",[52,200],{},[18,202,205],{"href":203,"rel":204},"https:\u002F\u002Fuxplanet.org\u002Fdate-picker-design-best-practices-41bd522f10a5",[22],"Date Picker Design Best Practices",[52,207],{},[18,209,212],{"href":210,"rel":211},"https:\u002F\u002Fuxdesign.cc\u002Fdate-picker-design-5c5ef8f35286",[22],"A hunt for the perfect date picker UI",[35,214,216,220],{"className":215},[38],[40,217,219],{"id":218},"sliders","Sliders",[14,221,222,227,229,234,236],{},[18,223,226],{"href":224,"rel":225},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2017\u002F07\u002Fdesigning-perfect-slider\u002F",[22],"Designing The Perfect Slider",[52,228],{},[18,230,233],{"href":231,"rel":232},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fslider-design-web\u002F",[22],"Slider design UI patterns and examples",[52,235],{},[18,237,240],{"href":238,"rel":239},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fgui-slider-controls\u002F",[22],"Slider Design: Rules of Thumb",[35,242,244,248],{"className":243},[38],[40,245,247],{"id":246},"tabs","Tabs",[14,249,250,255,257],{},[18,251,254],{"href":252,"rel":253},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2009\u002F06\u002Fmodule-tabs-in-web-design-best-practices-and-solutions\u002F",[22],"Module Tabs in Web Design: Best Practices and Solutions",[52,256],{},[18,258,261],{"href":259,"rel":260},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftabs-used-right\u002F",[22],"12 Tabs Design guidelines",[35,263,265,269],{"className":264},[38],[40,266,268],{"id":267},"dropdowns","Dropdowns",[14,270,271,276,278,283,285],{},[18,272,275],{"href":273,"rel":274},"https:\u002F\u002Fuxdesign.cc\u002Fui-cheat-sheet-dropdown-field-a30025c0f432",[22],"UI cheat sheet: dropdown field",[52,277],{},[18,279,282],{"href":280,"rel":281},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdrop-down-menus\u002F",[22],"Dropdowns: Design Guidelines",[52,284],{},[18,286,289],{"href":287,"rel":288},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fdrop-down-list-design\u002F",[22],"Drop down list design: the complete guide",[35,291,293,297],{"className":292},[38],[40,294,296],{"id":295},"pagination","Pagination",[14,298,299,304,306,311,313],{},[18,300,303],{"href":301,"rel":302},"https:\u002F\u002Fwww.uxmatters.com\u002Fmt\u002Farchives\u002F2018\u002F11\u002Fpaging-scrolling-and-infinite-scroll.php",[22],"Paging, Scrolling, and Infinite Scroll",[52,305],{},[18,307,310],{"href":308,"rel":309},"https:\u002F\u002Fuxplanet.org\u002Fux-infinite-scrolling-vs-pagination-1030d29376f1",[22],"UX: Infinite Scrolling vs. Pagination",[52,312],{},[18,314,317],{"href":315,"rel":316},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fitem-list-view-all\u002F",[22],"Users' Pagination Preferences and \"View All\"",[35,319,321,325],{"className":320},[38],[40,322,324],{"id":323},"search-inputs","Search inputs",[14,326,327,332,334,339,341],{},[18,328,331],{"href":329,"rel":330},"https:\u002F\u002Fuxdesign.cc\u002Fbest-ux-practices-for-search-inputs-c44dba565448",[22],"Best UX practices for search inputs",[52,333],{},[18,335,338],{"href":336,"rel":337},"https:\u002F\u002Fuxplanet.org\u002Fdesign-a-perfect-search-box-b6baaf9599c",[22],"Design a Perfect Search Box",[52,340],{},[18,342,345],{"href":343,"rel":344},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fsite-search-suggestions\u002F",[22],"Site Search Suggestions",[35,347,349,353],{"className":348},[38],[40,350,352],{"id":351},"breadcrumbs","Breadcrumbs",[14,354,355,360,362,367,369],{},[18,356,359],{"href":357,"rel":358},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fbreadcrumbs\u002F",[22],"Breadcrumbs: 11 Design Guidelines for Desktop and Mobile",[52,361],{},[18,363,366],{"href":364,"rel":365},"https:\u002F\u002Fmedium.com\u002Fmadison-ave-collective\u002Fare-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b",[22],"Are breadcrumbs still fresh for UX?",[52,368],{},[18,370,373],{"href":371,"rel":372},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fbreadcrumb-examples\u002F",[22],"Breadcrumb examples for inspiration",[35,375,377,381],{"className":376},[38],[40,378,380],{"id":379},"carousels","Carousels",[14,382,383,388,390,395,397],{},[18,384,387],{"href":385,"rel":386},"https:\u002F\u002Fwebflow.com\u002Fblog\u002Fcarousel-slider-design-best-practices",[22],"Carousel\u002Fslider design best practices (with examples)",[52,389],{},[18,391,394],{"href":392,"rel":393},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdesigning-effective-carousels\u002F",[22],"Carousel Usability: Designing an Effective UI for Websites with Content Overload",[52,396],{},[18,398,401],{"href":399,"rel":400},"https:\u002F\u002Fuxplanet.org\u002Fdesigning-a-user-friendly-homepage-carousel-f664c9f2b50e",[22],"Designing a User-Friendly Homepage Carousel",[35,403,405,409],{"className":404},[38],[40,406,408],{"id":407},"modals","Modals",[14,410,411,416,418,423,425,430,432],{},[18,412,415],{"href":413,"rel":414},"https:\u002F\u002Fxd.adobe.com\u002Fideas\u002Fprocess\u002Fui-design\u002Fbest-practices-for-designing-overlays\u002F",[22],"Best Practices for Designing UI Overlays",[52,417],{},[18,419,422],{"href":420,"rel":421},"https:\u002F\u002Fwww.appcues.com\u002Fblog\u002Fmodal-dialog-windows",[22],"Big, bold UX—using modal windows for in-app user engagement",[52,424],{},[18,426,429],{"href":427,"rel":428},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmodal-nonmodal-dialog\u002F",[22],"Modal & Nonmodal Dialogs: When (& When Not) to Use Them",[52,431],{},[18,433,436],{"href":434,"rel":435},"https:\u002F\u002Fmedium.com\u002Fpulsar\u002Fmodern-enterprise-ui-design-part-2-modal-dialogs-2ccd3cc33c92",[22],"Modal dialogs",[35,438,440,444],{"className":439},[38],[40,441,443],{"id":442},"cards","Cards",[14,445,446,451,453,458,460],{},[18,447,450],{"href":448,"rel":449},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fcards-ui-design\u002F",[22],"Card UI design: fundamentals and examples",[52,452],{},[18,454,457],{"href":455,"rel":456},"https:\u002F\u002Fuxplanet.org\u002Fsimple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e",[22],"Simple Design Tips for Crafting Better UI Cards",[52,459],{},[18,461,464],{"href":462,"rel":463},"https:\u002F\u002Fuxdesign.cc\u002Fdesigning-cards-for-beginners-9ed9454d27f6",[22],"Designing cards",[35,466,468,472],{"className":467},[38],[40,469,471],{"id":470},"tooltips","Tooltips",[14,473,474,479,481,486,488],{},[18,475,478],{"href":476,"rel":477},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ftooltip-guidelines\u002F",[22],"Tooltip Guidelines",[52,480],{},[18,482,485],{"href":483,"rel":484},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2021\u002F02\u002Fdesigning-tooltips-mobile-user-interfaces\u002F",[22],"Designing Better Tooltips For Mobile User Interfaces",[52,487],{},[18,489,492],{"href":490,"rel":491},"https:\u002F\u002Fuxdesign.cc\u002Ftooltips-your-secret-weapon-for-improving-deature-discovery-e1c380562f2e",[22],"Tooltips: your secret weapon for improving feature discovery",[35,494,496,500],{"className":495},[38],[40,497,499],{"id":498},"navigation","Navigation",[14,501,502,507,509,514,516],{},[18,503,506],{"href":504,"rel":505},"https:\u002F\u002Fwww.justinmind.com\u002Fblog\u002Fnavigation-design-almost-everything-you-need-to-know\u002F",[22],"Navigation design: Almost everything you need to know",[52,508],{},[18,510,513],{"href":511,"rel":512},"https:\u002F\u002Fblog.prototypr.io\u002Fux-design-for-navigation-menus-d9875c91a7ea",[22],"UX Design for Navigation Menu",[52,515],{},[18,517,520],{"href":518,"rel":519},"https:\u002F\u002Fuxmovement.medium.com\u002Fthe-fastest-navigation-layout-for-a-three-level-menu-b0480e2f11a2",[22],"The Fastest Navigation Layout for a Three-Level Menu",[35,522,524,528],{"className":523},[38],[40,525,527],{"id":526},"loaders","Loaders",[14,529,530,535,537,542,544],{},[18,531,534],{"href":532,"rel":533},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fprogress-indicators\u002F",[22],"Progress Indicators Make a Slow System Less Insufferable",[52,536],{},[18,538,541],{"href":539,"rel":540},"https:\u002F\u002Fuxdesign.cc\u002Fstop-using-a-loading-spinner-theres-something-better-d186194f771e",[22],"Stop Using A Loading Spinner, There’s Something Better",[52,543],{},[18,545,548],{"href":546,"rel":547},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2016\u002F12\u002Fbest-practices-for-animated-progress-indicators\u002F",[22],"Best Practices For Animated Progress Indicators",[35,550,552,556],{"className":551},[38],[40,553,555],{"id":554},"forms","Forms",[14,557,558,563,565,570,572],{},[18,559,562],{"href":560,"rel":561},"https:\u002F\u002Fmedium.com\u002Fnextux\u002Fdesign-better-forms-96fadca0f49c",[22],"Design Better Forms",[52,564],{},[18,566,569],{"href":567,"rel":568},"https:\u002F\u002Fcxl.com\u002Fblog\u002Fform-design-best-practices\u002F",[22],"Form Design: 13 Empirically Backed Best Practices",[52,571],{},[18,573,576],{"href":574,"rel":575},"https:\u002F\u002Fuxdesign.cc\u002Fthe-ux-behind-designing-better-forms-d6ebe7a817d2",[22],"The UX behind designing better forms",[14,578,579],{},"That's it. Hopefully, it was useful for you. If you wish, follow me on Twitter, I post a lot about UI\u002FUX there.",[14,581,582],{},"By the way!",[14,584,585,590],{},[18,586,589],{"href":587,"rel":588},"https:\u002F\u002Fwww.svgator.com\u002F",[22],"These guys"," helped me a lot while I've been collecting these links, check them out.\nEspecially if you're interested in animations.",{"title":592,"searchDepth":593,"depth":593,"links":594},"",2,[595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613],{"id":42,"depth":593,"text":43},{"id":71,"depth":593,"text":72},{"id":99,"depth":593,"text":100},{"id":134,"depth":593,"text":135},{"id":162,"depth":593,"text":163},{"id":190,"depth":593,"text":191},{"id":218,"depth":593,"text":219},{"id":246,"depth":593,"text":247},{"id":267,"depth":593,"text":268},{"id":295,"depth":593,"text":296},{"id":323,"depth":593,"text":324},{"id":351,"depth":593,"text":352},{"id":379,"depth":593,"text":380},{"id":407,"depth":593,"text":408},{"id":442,"depth":593,"text":443},{"id":470,"depth":593,"text":471},{"id":498,"depth":593,"text":499},{"id":526,"depth":593,"text":527},{"id":554,"depth":593,"text":555},"2023-01-28T17:19:11+04:00","Recently I posted on Twitter a list of 58 links about designing different UI elements. It turned out that the tweet was very helpful. So I decided to drop the link collection here as well.  Here is the list in a readable format\n","md",null,"\u002Fimg\u002Fsocial.png",{},true,"\u002Farticles\u002Fhow-to-design-almost-any-ui-element",{"title":5,"description":615},{"loc":621},"articles\u002F01.How-to-design-almost-any-ui-element","EyYKzqe74OA50c9he72JuNu9sqQZnHxo0L0FWA95A7E"]