--- title: Best UI Design posts of 2023 | daily.dev description: The most upvoted UI Design posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best UI Design posts of 2023 | daily.dev og:description: The most upvoted UI Design posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of UI Design — 2023 1. 1 [](/posts/16-little-ui-design-rules-that-make-a-big-impact-9kvbp6poj "16 little UI design rules that make a big impact") Article Community Picks · 4y 16 little UI design rules that make a big impact Learn about 16 UI design rules and guidelines that can make a big impact on the usability and aesthetics of an interface. Explore topics such as using space to group related elements, being consistent in design, creating a clear visual hierarchy, and selecting the right typeface. 491 28 2. 2 [](/posts/html-can-do-this-part-1-bboctxbfd "HTML can do this? Part 1") Article DEV · 3y HTML can do this? Part 1 Discover some cool things that HTML can do, including creating open/close widgets, linking to email addresses and telephone numbers, using autocomplete in a list, and modifying text directly. 451 14 3. 3 [](/posts/ui-ux-design-trends-2023-yn1rrl208 "UI/UX Design Trends 2023") Article Community Picks · 4y UI/UX Design Trends 2023 Discover the latest UI/UX design trends for 2023, including motion design, scrollytelling, bolder minimalism, happy colors, and aurora gradients. Explore the UX trends of cross-device experience, emotional design, personalization, and micro-interactions. Plus, find out how sustainability is being integrated into the tech industry. 379 20 4. 4 [](/posts/web-design-trends-2023-ij7mepn9s "Web Design Trends 2023") Article Red Stapler · 4y Web Design Trends 2023 Bold Typography is being used more frequently to make a statement and grab the attention of users. 3D Transform, Filter and new CSS features are going to unlock lots of interesting web design purely on CSS. Dark mode/Dark Design is expected to be a popular trend in web design this year. 267 24 5. 5 [](/posts/linkedin-but-better-lxslplfgk "LinkedIn, But Better") Article Bootcamp · 3y LinkedIn, But Better The article discusses the need for a redesign of LinkedIn due to UX frustrations, such as a lack of a 'Saved' option and limited article discoverability. The redesign aims to make the platform more accessible, less cluttered, and personalized. It introduces features like a 'Saved' option, improved networking functions, a home screen for 'Stories,' and a separate tab for articles. The design also focuses on dark mode, consistent icons and components, and a standardized notification format. 246 8 6. 6 [](/posts/ui-ux-design-trends-for-2024-yn5idzfd6 "UI/UX Design Trends For 2024") Article UX Planet · 3y UI/UX Design Trends For 2024 The post discusses various UI/UX design trends for 2024, including generative design, bold typography, complex and animated gradients, glassmorphism, augmented reality, parallax effect, brutalism, and hyperrealism. 238 9 7. 7 [](/posts/stop-being-a-jr-software-engineer-prime-reacts-l5b7jh5yb "Stop Being A JR Software Engineer | Prime Reacts") Article Community Picks · 3y Stop Being A JR Software Engineer | Prime Reacts 233 16 8. 8 [](/posts/playcss---improve-your-css-skills-by-playing-daily-challenges--pccrfu1mu "playCSS - Improve your CSS skills by playing daily challenges 💪") Article Product Hunt · 3y playCSS - Improve your CSS skills by playing daily challenges 💪 PlayCSS was hunted by Frank Eno in Design Tools and Developer Tools. PlayCSS is not rated yet. The easiest way to translate a website Support is great. "Feel free to leave some feedback about this project, it will mean a lot to me," says the makers of playCSS. 223 11 9. 9 [](/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb "Tailwind CSS: 15 Component Libraries & UI Kits") Article Community Picks · 4y Tailwind CSS: 15 Component Libraries & UI Kits Tailwind CSS has surpassed Bulma, Semantic UI, Foundation, and other prominent CSS frameworks in just a few years. It is now the 2nd most popular framework in the world, with Bootstrap holding a sturdy number one position. With several hundred custom components, it's also one of the most complete libraries. 172 24 10. 10 [](/posts/ux-best-practices-for-developers-hqayfexed "UX: best practices for developers") Article asayer · 3y UX: best practices for developers User experience (UX) is a critical component of web development that can make or break the success of a website or application. UX refers to the user’s overall experience when interacting with a website, app, or product. A well-designed UX can increase user engagement, retention, and conversions, resulting in better commercial outcomes. 150 6 11. 11 [](/posts/what-is-glassmorphism-qz9giftbs "What is Glassmorphism") Article UX Planet · 3y What is Glassmorphism The goal of glassmorphism design is to create an interface that looks like an assortment of glassy panels hovering in the background space. All elements in this design style have a translucent/transparent look. When these elements are placed on colorful backgrounds, the glass effect is accentuated. It can also be used to design windows or widgets. 147 6 12. 12 [](/posts/godly-astronomically-good-web-design-inspiration-jxbodpauv "Godly — Astronomically good web design inspiration") Article Community Picks · 3y Godly — Astronomically good web design inspiration Discover a collection of web design inspiration that is out of this world! 145 11 13. 13 [](/posts/css-the-good-parts-2app2resp "CSS: The Good Parts") Article Builder.io · 3y CSS: The Good Parts CSS is like a Swiss army knife for web design. It's got the power to animate, transform, and adapt layouts with and. making it all responsive and cool. It's not just about simple styling anymore, it's about bringing your whole web game to life. Let's dive into how CSS got to where it is today. 145 1 14. 14 [](/posts/tabler-icons-over-4650-vector-icons-for-web-design-yd7q6mumo "Tabler Icons: over 4650 vector icons for web design") Article Community Picks · 3y Tabler Icons: over 4650 vector icons for web design Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful. Tabler Icons: over 4650 vector icons for web design Over 4650 pixel-perfect icons. Available packages: Free and open-source icons. 138 8 15. 15 [](/posts/ux-ui-design-trends-going-into-2024-qotsxi19e "UX/UI Design Trends Going Into 2024") Article Medium · 3y UX/UI Design Trends Going Into 2024 The article discusses various design trends that are expected to continue into 2024, including Bento boxes in UI design, spatial design and leaps in technology, the accessibility and personalization trends in UX design, and the rise of AI-powered design tools. 134 6 16. 16 [](/posts/web-ux-study-guide-6dfawnntv "Web UX: Study Guide") Article Community Picks · 3y Web UX: Study Guide The resources here are grouped under the following topics: General Consideration on Web Usage Viewing Behaviors on the Web Eyetracking Gaze Patterns Web Interaction Design Content. This section introduces fundamental theories and key research on information-seeking behaviors on the web. 129 6 17. 17 [](/posts/10-principles-of-good-website-design-in-2024-zairtcwmr "10 Principles of Good Website Design in 2024") Article UX Planet · 3y 10 Principles of Good Website Design in 2024 The principles of good website design in 2024 include responsive design for mobile users, improving load time metrics, using familiar web design conventions, creating an innovative visual language, designing hierarchical content structures, aligning design and content, aligning design and SEO, ensuring frictionless conversions, testing prototypes, and staying up-to-date with the latest web design trends. 128 2 18. 18 [](/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu "nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte") Article Pointer · 3y nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte Nue JS is a small JavaScript library for building web interfaces with cleaner code. It offers a minimalist approach and easy-to-understand code, making it easier to scale. Nue supports server-side rendering and can be used for UI library development, progressive enhancement, static website generators, and single-page applications. 123 6 19. 19 [](/posts/typography-trends-in-web-design-2023-shyebj5gg "Typography Trends in Web Design 2023") Article UX Planet · 3y Typography Trends in Web Design 2023 The importance of typography in web design keeps waxing and waning every few years. In 2023, the web typography world has enjoyed an explosion of creativity. Richer typefaces, 3D styles, bold fonts, and various other interesting typography trends have taken over the world of web design. 121 1 20. 20 [](/posts/learn-tailwind-css-smyrawzdj "Learn Tailwind CSS") Article freeCodeCamp · 4y Learn Tailwind CSS The freeCodeCamp.org course is divided into several sections, each of which covers a different aspect of using Tailwind CSS. Guillaume Duhan created the course and has created many courses on Udemy and his own YouTube channel. 120 2 21. 21 [](/posts/moving-backgrounds-css-tricks-v-dwwiery "Moving Backgrounds | CSS-Tricks") Article CSS-Tricks · 4y Moving Backgrounds | CSS-Tricks Learn how background images can provide more context or experience, how to change the position of a background image using JavaScript, and how to implement the Ken Burns effect using CSS. 108 4 22. 22 [](/posts/visual-studio-ui-refresh-hek4wk4zf "Visual Studio UI Refresh") Article Visual Studio Blog · 3y Visual Studio UI Refresh The Microsoft Fluent design language provides a unified framework to create and deliver more productive, consistent, and accessible applications. The current visual language (which hasn’t been updated since Visual Studio 2012) has limitations for many customers. The new UI updates focus on three main pillars: cohesiveness, accessibility, and productivity. 99 7 23. 23 [](/posts/figma-to-html-convert-designs-to-clean-html-code-in-a-click-3agdoeten "Figma to HTML: Convert designs to clean HTML code in a click") Article Builder.io · 3y Figma to HTML: Convert designs to clean HTML code in a click Learn how AI technology can streamline the process of converting Figma designs to HTML code with Visual Copilot. The tool generates clean and responsive HTML code, supports various frameworks, and allows for customization. 91 2 24. 24 [](/posts/animotion-a-visual-css-animation-app-jhe9p8ilk "Animotion — a visual CSS animation app") Article Hacker News · 3y Animotion — a visual CSS animation app Animotion is a visual CSS animation app that allows users to create CSS animations by dragging, resizing, rotating, clipping, and more. It includes a keyframes editor, ready-to-use animations, and 29 built-in easings. The app works best on larger screens and modern web browsers. 83 3 25. 25 [](/posts/best-15-css-trends-to-watch-for-ttqw40xbq "Best 15 CSS Trends To Watch For") Article DZone · 3y Best 15 CSS Trends To Watch For The days are long gone when a viewer’s attention is quickly captured by a simple and plain HTML website. Cascading Style Sheets, or CSS, is an ideal way to spice up your web design. According to W3Techs, as of January 2023, approximately 96.9% of websites use CSS. 83 [See all UI Design archives](/tags/ui-design/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/ui-design/best-of/2023#page","url":"https://daily.dev/tags/ui-design/best-of/2023","name":"Best UI Design Posts of 2023","description":"The most upvoted UI Design posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/16-little-ui-design-rules-that-make-a-big-impact-9kvbp6poj","name":"16 little UI design rules that make a big impact"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/html-can-do-this-part-1-bboctxbfd","name":"HTML can do this? Part 1"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/ui-ux-design-trends-2023-yn1rrl208","name":"UI/UX Design Trends 2023"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/web-design-trends-2023-ij7mepn9s","name":"Web Design Trends 2023"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/linkedin-but-better-lxslplfgk","name":"LinkedIn, But Better"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/ui-ux-design-trends-for-2024-yn5idzfd6","name":"UI/UX Design Trends For 2024"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/stop-being-a-jr-software-engineer-prime-reacts-l5b7jh5yb","name":"Stop Being A JR Software Engineer | Prime Reacts"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/playcss---improve-your-css-skills-by-playing-daily-challenges--pccrfu1mu","name":"playCSS - Improve your CSS skills by playing daily challenges 💪"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb","name":"Tailwind CSS: 15 Component Libraries & UI Kits"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/ux-best-practices-for-developers-hqayfexed","name":"UX: best practices for developers"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/what-is-glassmorphism-qz9giftbs","name":"What is Glassmorphism"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/godly-astronomically-good-web-design-inspiration-jxbodpauv","name":"Godly — Astronomically good web design inspiration"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/css-the-good-parts-2app2resp","name":"CSS: The Good Parts"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/tabler-icons-over-4650-vector-icons-for-web-design-yd7q6mumo","name":"Tabler Icons: over 4650 vector icons for web design"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/ux-ui-design-trends-going-into-2024-qotsxi19e","name":"UX/UI Design Trends Going Into 2024"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/web-ux-study-guide-6dfawnntv","name":"Web UX: Study Guide"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/10-principles-of-good-website-design-in-2024-zairtcwmr","name":"10 Principles of Good Website Design in 2024"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu","name":"nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/typography-trends-in-web-design-2023-shyebj5gg","name":"Typography Trends in Web Design 2023"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/learn-tailwind-css-smyrawzdj","name":"Learn Tailwind CSS"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/moving-backgrounds-css-tricks-v-dwwiery","name":"Moving Backgrounds | CSS-Tricks"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/visual-studio-ui-refresh-hek4wk4zf","name":"Visual Studio UI Refresh"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/figma-to-html-convert-designs-to-clean-html-code-in-a-click-3agdoeten","name":"Figma to HTML: Convert designs to clean HTML code in a click"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/animotion-a-visual-css-animation-app-jhe9p8ilk","name":"Animotion — a visual CSS animation app"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/best-15-css-trends-to-watch-for-ttqw40xbq","name":"Best 15 CSS Trends To Watch For"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"UI Design","item":"https://daily.dev/tags/ui-design"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-design/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```