--- title: Best UI/UX posts of 2024 | daily.dev description: The most upvoted UI/UX posts of 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-ux/best-of/2024 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-ux/best-of/2024 og:type: website og:site_name: daily.dev og:title: Best UI/UX posts of 2024 | daily.dev og:description: The most upvoted UI/UX posts of 2024, 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/UX — 2024 1. 1 [](/posts/best-icon-libraries-qleway3u2 "Best Icon Libraries") Article DEV · 2y Best Icon Libraries The landscape of icon libraries has significantly evolved in 2024, offering designers and developers more options, better integration, and enhanced customization. Notable mentions include Lineicons V5 with over 30,000 icons and advanced features like a free CDN and icon editor. Heroicons, Uicons, Iconify, Streamline Icons, and others are also highlighted for their unique offerings and ease of use. Many of these libraries are free or open-source, making them accessible for various project needs. 842 19 2. 2 [](/posts/best-design-system-examples-jtmfkdylo "Best design system examples") Article Community Picks · 2y Best design system examples Exploring top design system examples to help build or improve your own, this post covers the essentials like consistency, efficiency, scalability, collaboration, and quality control. Featuring IBM's Carbon, Atlassian's, and Adobe's Spectrum design systems, it offers insights into unique approaches and best practices in design systems. 330 6 3. 3 [](/posts/6-tips-why-front-end-developers-should-be-entrepreneurs-wizv5w0az "6 Tips: Why Front-End Developers should be Entrepreneurs") Article asayer · 2y 6 Tips: Why Front-End Developers should be Entrepreneurs An entrepreneurial mindset significantly enhances front-end developers' impact and career success. It facilitates a user-centered approach, innovation, and creativity, aligning their work with broader company goals. Key benefits include leveraging unique technical skills, gaining creative freedom, achieving financial independence, building a personal brand, and driving innovation. While this approach offers extensive growth potential and market differentiation, common challenges include balancing technical and business skills, financial management, market competition, and maintaining a healthy work-life balance. 325 16 4. 4 [](/posts/atomic-design-pattern-structuring-your-react-application-zpep7ljm2 "Atomic Design Pattern: Structuring Your React Application") Article Community Picks · 2y Atomic Design Pattern: Structuring Your React Application The Atomic Design Pattern is a methodology for structuring React applications by breaking down interfaces into fundamental building blocks called atoms, molecules, organisms, templates, and pages. This approach enhances modularity, readability, maintainability, and flexibility. By organizing components into distinct levels, managing state appropriately, and thoroughly documenting components, developers can create scalable and consistent user interfaces. The methodology has been successfully adopted by companies like Shopify and IBM for their design systems. 322 7 5. 5 [](/posts/figma-fiasco--gkxitthty "Figma fiasco.") Article Medium · 2y Figma fiasco. Figma's latest updates, featuring new AI capabilities and a revamped user interface, have generated significant dissatisfaction among users. Critics argue that the changes prioritize profit over user experience, complicate simple tasks, and cater to non-designers. The restructured UI and AI functionalities are considered not only unnecessary but also detrimental to the workflow of professional designers. Many are considering alternatives like Penpot and Sketch due to these frustrations. 266 24 6. 6 [](/posts/new-professional-portfolio--uqkje37kf "🚀 New Professional Portfolio!") Article Dev Squad · 2y 🚀 New Professional Portfolio! Exciting news! A new portfolio website is now live, showcasing a journey and skillset, insights on adding value to teams, and highlighted projects demonstrating expertise. Feedback and interactions are welcomed. 213 68 7. 7 [](/posts/a-creative-site-worth-exploring-5sgxhncgf "A Creative Site Worth Exploring") Article Fullstack Developer · 2y A Creative Site Worth Exploring The site exhibits an impressive UI and superb interactions, showcasing the excellent work of the front-end developers. 198 42 8. 8 [](/posts/7-ideas-to-make-ui-ux-on-e-learning-platforms-more-creative-and-user-friendly--qsq7jaerk "7 Ideas to make UI/UX on E-Learning platforms more creative and user-friendly.") Article Bootcamp · 2y 7 Ideas to make UI/UX on E-Learning platforms more creative and user-friendly. Ideas to improve UI/UX on E-Learning platforms: gamification elements, interactive quizzes and assessments, personalized learning paths, social learning features, rich multimedia content, mobile-friendly design, progress tracking and analytics. 163 1 9. 9 [](/posts/design-first-vs-logic-first-approach-how-should-you-start-your-front-end-projects--qwj8tedu6 "Design-first VS Logic-first Approach – How Should You Start Your Front-end Projects?") Article freeCodeCamp · 2y Design-first VS Logic-first Approach – How Should You Start Your Front-end Projects? Front-end development involves building user-friendly interfaces, and developers often face the dilemma of choosing between a design-first or a logic-first approach. The design-first approach prioritizes visual elements and user experience, while the logic-first approach focuses on core functionalities and data architecture. A hybrid approach combines the strengths of both methods, promoting parallel development and enhancing communication between design and logic teams. The best approach depends on the project type, target market, and team preference. 152 6 10. 10 [](/posts/exploring-21-unique-custom-cursors-for-your-site-codepen-idynghuyf "Exploring 21 Unique Custom Cursors for Your Site – CodePen") Article CodePen · 2y Exploring 21 Unique Custom Cursors for Your Site – CodePen Microinteractions, such as custom cursors, can enhance user experiences by adding uniqueness and interactivity to a site. The post explores various types of custom cursors, including trailing, revealing, and interactive game cursors, along with their implementation techniques using CSS and JavaScript. Performance and accessibility considerations are also discussed. Real-life application examples and relevant CodePen demos provide practical insights for web design and development. 140 3 11. 11 [](/posts/choosing-the-perfect-font-qkpst6fxk "Choosing the Perfect Font") Article Povio · 2y Choosing the Perfect Font Success in mobile app development is often found in the details, and fonts are a key aspect that can make a significant difference. This post provides 8 essential questions to guide you in choosing the perfect font for your app, focusing on factors like readability, accessibility, and design flexibility. Also, it offers a list of 13 recommended fonts to enhance both the aesthetic appeal and functionality of your mobile project. 136 2 12. 12 [](/posts/animate-svgs-without-code-meet-svgator-your-new-animation-toolkit--wl6nkzij0 "Animate SVGs Without Code! 🚀 Meet SVGator – Your New Animation Toolkit 🖌️✨") Article Dev Squad · 2y Animate SVGs Without Code! 🚀 Meet SVGator – Your New Animation Toolkit 🖌️✨ SVGator allows you to animate SVG designs without any coding through a drag-and-drop interface. You can create interactive animations triggered by clicks and scrolls, and export them in various formats like SVG, Lottie, GIF, or video. It's ideal for enhancing UI/UX on both web and mobile platforms. 128 7 13. 13 [](/posts/top-50-google-font-pairings-handpicked-by-pro-designers--fcpfmvysq "Top 50 Google Font Pairings [Handpicked by Pro Designers]") Article Community Picks · 2y Top 50 Google Font Pairings \[Handpicked by Pro Designers\] Selecting the right fonts can significantly impact website design. The post showcases 50 handpicked Google font pairings categorized by styles such as classic, elegant, modern, creative, and minimalist. These combinations are chosen for their legibility, design flexibility, and overall aesthetic. Suggestions are provided to inspire your next project, and readers are encouraged to experiment with Pagecloud's editor and site-wide color feature. 117 2 14. 14 [](/posts/the-list-of-public-design-systems-knrxzamut "The List of Public Design Systems") Article Community Picks · 2y The List of Public Design Systems Weekly updated list of public design systems and resources. Subscribe to receive weekly tips on design systems and strategy. 109 2 15. 15 [](/posts/why-toggle-switches-suck-and-what-to-do-instead--83wzyrmrr "Why toggle switches suck (and what to do instead)") Article Community Picks · 2y Why toggle switches suck (and what to do instead) Toggle switches, although popular for their perceived simplicity and immediate action, often lead to user confusion and accessibility issues. Reasons include difficulty in understanding toggle states, potential inconsistencies, reliance on JavaScript, and concerns about saving settings. Alternative approaches like radio buttons and checkboxes offer more clarity and better user experience in many cases. 104 37 16. 16 [](/posts/design-engineering-101-9qmdfb8su "Design Engineering 101") Article Community Picks · 2y Design Engineering 101 Design engineering in tech is a fusion of visual design and software development, distinct from its traditional industrial and mechanical roots. The role demands extensive skills in both fields, as design engineers handle tasks from marketing websites to product polish and R&D prototypes. With few dedicated educational resources, aspiring design engineers typically dual-class by learning design and engineering separately. Future resources are expected to emerge, making the discipline more accessible. 95 17. 17 [](/posts/streamlit-mini-course---make-websites-with-only-python-gutyv1rtx "Streamlit Mini Course - Make Websites With ONLY Python") Video Tech With Tim · 2y Streamlit Mini Course - Make Websites With ONLY Python This post introduces Streamlit, a powerful Python UI library for quickly building web interfaces using only Python code. It covers the basic and advanced features of Streamlit, including support for data visualization tools like pandas, matplotlib, and numpy. The post also offers a hands-on tutorial for setting up a Streamlit project, installing necessary dependencies, and building simple applications. Additionally, it highlights a free resource guide on landing a developer role in the AI field, sponsored by HubSpot. 87 5 18. 18 [](/posts/stop-writing-extra-code-html-inputs-are-more-powerful-than-you-think-sjnzseou1 "Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think") Video Kevin Powell · 2y Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think Developers often overlook the capabilities of HTML inputs and CSS. For example, number inputs can be limited using min and max attributes. CSS pseudo-classes like 'in-range' can enhance user feedback. The color picker input allows users to choose colors from any open window. There's an array of native input features and pseudo-classes that can enrich user interfaces. 86 5 19. 19 [](/posts/design-systems-simplifying-documentation-writing-tmvp2ow90 "Design systems: simplifying documentation writing") Article Medium · 2y Design systems: simplifying documentation writing Creating a design system documentation can be daunting but essential for effective usage. Documentation is split into intangible parts (principles) and tangible parts (patterns, components). Using a Work Breakdown Structure (WBS) can simplify this task by breaking it into manageable pieces, prioritizing tasks, and tracking progress. Helpful techniques include using templates and examples from other design systems. Always consider the audience, steal useful ideas, aim for functionality over perfection, and maintain documentation through continuous feedback and alignment across teams. Existing systems like Tailwind or Material UI can also be beneficial, especially for smaller teams. 86 1 20. 20 [](/posts/bloo-low-fidelity-wireframe-kit-8pdrvqqkk "Bloo Low Fidelity Wireframe Kit") Article Community Picks · 2y Bloo Low Fidelity Wireframe Kit An open-source wireframe kit designed for quick design and prototyping, featuring over 250 components, support for dark mode, and 150 ready-to-use mobile screens. It's free for commercial and personal use under the CC0 License. 86 4 21. 21 [](/posts/contra-wireframe-kit-8uibit7xn "Contra Wireframe Kit") Article Community Picks · 2y Contra Wireframe Kit Contra Wireframe Kit is an open-source resource for rapid design and prototyping. It offers over 150 components and 50 ready-to-use mobile screens. Users can also easily create new components and screens with the help of an included style guide. The kit is free for both commercial and personal use under a CC0 License. 81 3 22. 22 [](/posts/understanding-optimistic-ui-and-react-s-useoptimistic-hook-zz0ro5nkz "Understanding optimistic UI and React’s useOptimistic Hook") Article LogRocket · 2y Understanding optimistic UI and React’s useOptimistic Hook Optimistic UI updates enhance user experience by immediately reflecting UI changes based on user's actions, assuming background operations will succeed. React’s \`useOptimistic\` Hook facilitates these updates by showing a different state while an asynchronous operation is underway. This approach ensures faster and more responsive interactions, reducing perceived wait times. The Hook assumes the API response will be successful and reverts changes if an error occurs, maintaining a balance between perceived speed and data integrity. 81 1 23. 23 [](/posts/splash-screen-design-best-practices-js82m1wuv "Splash Screen Design Best Practices") Article UX Planet · 2y Splash Screen Design Best Practices Splash screens, the first screen users see when launching a mobile app, instantly form first impressions about the product. Key practices for effective splash screen design include keeping it simple with minimal text and visuals, using subtle animations to enhance visual appeal, and avoiding prolonged loading states to prevent creating impressions of a slow app. 76 24. 24 [](/posts/design-system-from-scratch-in-flutter-t3estotnz "Design System from scratch in Flutter") Article Medium · 2y Design System from scratch in Flutter This post provides a detailed guide on creating a design system from scratch in Flutter to share design code across mobile, web, and desktop apps. It covers the steps from defining atomic parts like colors and shadows to developing themes and components such as buttons and text fields. The post also explains how to manage theme modes and assets independently, and ends by emphasizing the importance of testing the design system. 71 25. 25 [](/posts/case-study-chaingpt-labs-hi9lzwxr0 "Case Study: ChainGPT Labs") Article Codrops · 2y Case Study: ChainGPT Labs Explore the creative journey behind ChainGPT Labs, developed by Sigma Software Design, showcasing the development of a visually cohesive and functionally advanced platform for Web3 startups. Highlights include branding, 3D design, and interactive web development using tools like Webflow, GSAP, and FFmpeg. The cohesive visual identity, incorporation of 3D elements, and experimental layout designs demonstrate innovative solutions tailored for the Web3 ecosystem. 69 1 [See all UI/UX archives](/tags/ui-ux/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-ux/best-of/2024#page","url":"https://daily.dev/tags/ui-ux/best-of/2024","name":"Best UI/UX Posts of 2024","description":"The most upvoted UI/UX posts of 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-ux/best-of/2024#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/best-icon-libraries-qleway3u2","name":"Best Icon Libraries"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/best-design-system-examples-jtmfkdylo","name":"Best design system examples"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/6-tips-why-front-end-developers-should-be-entrepreneurs-wizv5w0az","name":"6 Tips: Why Front-End Developers should be Entrepreneurs"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/atomic-design-pattern-structuring-your-react-application-zpep7ljm2","name":"Atomic Design Pattern: Structuring Your React Application"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/figma-fiasco--gkxitthty","name":"Figma fiasco."},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/new-professional-portfolio--uqkje37kf","name":"🚀 New Professional Portfolio!"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/a-creative-site-worth-exploring-5sgxhncgf","name":"A Creative Site Worth Exploring"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/7-ideas-to-make-ui-ux-on-e-learning-platforms-more-creative-and-user-friendly--qsq7jaerk","name":"7 Ideas to make UI/UX on E-Learning platforms more creative and user-friendly."},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/design-first-vs-logic-first-approach-how-should-you-start-your-front-end-projects--qwj8tedu6","name":"Design-first VS Logic-first Approach – How Should You Start Your Front-end Projects?"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/exploring-21-unique-custom-cursors-for-your-site-codepen-idynghuyf","name":"Exploring 21 Unique Custom Cursors for Your Site – CodePen"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/choosing-the-perfect-font-qkpst6fxk","name":"Choosing the Perfect Font"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/animate-svgs-without-code-meet-svgator-your-new-animation-toolkit--wl6nkzij0","name":"Animate SVGs Without Code! 🚀 Meet SVGator – Your New Animation Toolkit 🖌️✨"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/top-50-google-font-pairings-handpicked-by-pro-designers--fcpfmvysq","name":"Top 50 Google Font Pairings [Handpicked by Pro Designers]"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/the-list-of-public-design-systems-knrxzamut","name":"The List of Public Design Systems"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/why-toggle-switches-suck-and-what-to-do-instead--83wzyrmrr","name":"Why toggle switches suck (and what to do instead)"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/design-engineering-101-9qmdfb8su","name":"Design Engineering 101"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/streamlit-mini-course---make-websites-with-only-python-gutyv1rtx","name":"Streamlit Mini Course - Make Websites With ONLY Python"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/stop-writing-extra-code-html-inputs-are-more-powerful-than-you-think-sjnzseou1","name":"Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/design-systems-simplifying-documentation-writing-tmvp2ow90","name":"Design systems: simplifying documentation writing"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/bloo-low-fidelity-wireframe-kit-8pdrvqqkk","name":"Bloo Low Fidelity Wireframe Kit"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/contra-wireframe-kit-8uibit7xn","name":"Contra Wireframe Kit"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/understanding-optimistic-ui-and-react-s-useoptimistic-hook-zz0ro5nkz","name":"Understanding optimistic UI and React’s useOptimistic Hook"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/splash-screen-design-best-practices-js82m1wuv","name":"Splash Screen Design Best Practices"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/design-system-from-scratch-in-flutter-t3estotnz","name":"Design System from scratch in Flutter"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/case-study-chaingpt-labs-hi9lzwxr0","name":"Case Study: ChainGPT Labs"}]},{"@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/UX","item":"https://daily.dev/tags/ui-ux"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-ux/best-of"},{"@type":"ListItem","position":5,"name":"2024"}]}]} ```