--- title: Best UI Design posts — February 2024 | daily.dev description: The most upvoted UI Design posts from February 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2024/02 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2024/02 og:type: website og:site_name: daily.dev og:title: Best UI Design posts — February 2024 | daily.dev og:description: The most upvoted UI Design posts from February 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 Design — February 2024 1. 1 [](https://daily.dev/posts/10-inspiration-websites-all-web-designers-must-know-in-2024-nw2lur2la "10 Inspiration Websites all Web Designers must know in 2024") Article Bootcamp · 3y 10 Inspiration Websites all Web Designers must know in 2024 Discover 10 essential websites for finding stellar web design ideas in 2024, including SaaSpo, Godly, and Dark Mode Design. 284 5 2. 2 [](https://daily.dev/posts/flexbox-vs-grid-in-css-which-should-you-use--icootolvp "Flexbox vs Grid in CSS – Which Should You Use?") Article freeCodeCamp · 3y Flexbox vs Grid in CSS – Which Should You Use? This post discusses the origin of CSS, the basic structure of CSS, and the differences between the flex and grid layouts. It explains how to use the flex and grid layouts in CSS and highlights the similarities between them. It also provides guidance on when to use flex and when to use grid in web design. 119 10 3. 3 [](https://daily.dev/posts/10-css-one-liners-to-transform-your-web-app-lbhwigjix "10 CSS One-Liners to Transform Your Web App") Article Medium · 3y 10 CSS One-Liners to Transform Your Web App Learn 10 CSS one-liners that can transform your web app in just a few minutes. Topics include centering divs, creating free flowing elements, positioning elements in the DOM, universal box sizing, responsive images, centering elements, creating custom checkbox styles, making text smoother, clearing floats, and resetting all styles. 87 4. 4 [](https://daily.dev/posts/how-to-set-up-swiper-element-in-a-react-application-xl0jf6jri "How to Set up Swiper Element in a React Application") Article freeCodeCamp · 3y How to Set up Swiper Element in a React Application Learn how to set up Swiper Element in a React application and create responsive, dynamic slides with pre-made effects. 45 3 5. 5 [](https://daily.dev/posts/web-design-trends-to-watch-in-2024-sitepoint-rreuafa2f "Web Design Trends to Watch in 2024 — SitePoint") Article SitePoint · 3y Web Design Trends to Watch in 2024 — SitePoint This post explores web design trends to watch in 2024, including artificial intelligence, futuristic minimalism, 3D immersion, dark mode, neumorphic design, artistic typography, and micro-interactions. 40 2 6. 6 [](https://daily.dev/posts/css-has-interactive-guide-80osgdvej "CSS :has() Interactive Guide") Article Collections · 3y CSS :has() Interactive Guide Guide on using the CSS :has() pseudo-class in web design and styling, showcasing its versatility and importance in real-world projects. 38 2 7. 7 [](https://daily.dev/posts/my-favorite-ux-ui-design-courses-5mqys7ipa "My favorite UX & UI design courses") Article UX Planet · 3y My favorite UX & UI design courses Discover a list of favorite UX and UI design courses, including courses on UI design patterns, development aspects for designers, and sketching. These courses are highly recommended for self-taught designers and those looking to improve their design skills. 34 8. 8 [](https://daily.dev/posts/information-architecture-design-step-by-step-1e2riqwjb "Information Architecture Design Step-by-Step") Article UX Planet · 3y Information Architecture Design Step-by-Step A step-by-step guide on designing information architecture, including defining goals and objectives, conducting user research, categorizing content, creating the information structure, labeling and taxonomy, wireframing and prototyping, usability testing, implementation, and evaluation and maintenance. 31 9. 9 [](https://daily.dev/posts/case-study-skincare-application-wvb21e2ee "Case study: Skincare application") Article Bootcamp · 3y Case study: Skincare application Discover an advanced AI skincare app that provides personalized product recommendations based on individual's unique skin types and concerns. The app aims to solve common skincare pain points by offering AI scans, personalized recommendations, dermatologist consultations, and more. 31 10. 10 [](https://daily.dev/posts/scroll-effects-on-videos-with-javascript-qf0zv3udb "Scroll Effects on Videos with JavaScript") Article asayer · 3y Scroll Effects on Videos with JavaScript The article explores how videos can be smoothly integrated with scrolling on websites, enhancing user engagement and visual appeal. 30 1 11. 11 [](https://daily.dev/posts/how-to-draw-with-javascript-on-an-html-canvas-element-beginner-s-guide-j6mao9mim "How to Draw with JavaScript on an HTML Canvas Element – Beginner's Guide") Article freeCodeCamp · 3y How to Draw with JavaScript on an HTML Canvas Element – Beginner's Guide Learn how to draw with JavaScript on an HTML canvas element. This tutorial covers the basics of drawing shapes, such as rectangles and paths, using the Canvas API. 30 3 12. 12 [](https://daily.dev/posts/glassmorphism-what-it-is-and-how-it-s-going-207tlbkaz "Glassmorphism: What it is and how it’s going") Article LogRocket · 3y Glassmorphism: What it is and how it’s going Glassmorphism is a UI trend that uses transparency, depth, and hierarchy to create a frosted glass aesthetic. It has gained popularity in the design community and can make interfaces look modern and trendy. This post explores the history of glassmorphism, its components, and the benefits and drawbacks of using it in designs. 30 3 13. 13 [](https://daily.dev/posts/going-beyond-pixels-and-r-ems-in-css-rexwuhkhb "Going beyond pixels and (r)ems in CSS") Article Community Picks · 3y Going beyond pixels and (r)ems in CSS Explore different relative length units in CSS for sizing and fonts, including 'cap' for scale-independent layouts and 'ch' for creating responsive grids. 29 14. 14 [](https://daily.dev/posts/complete-guide-to-css-units-types-and-examples-6zxh4acmo "Complete Guide to CSS Units: Types and Examples") Article TestMu AI (Formerly LambdaTest) · 3y Complete Guide to CSS Units: Types and Examples Learn about the different types of CSS units, including absolute and relative units, and when to use them in your web development projects. 27 1 15. 15 [](https://daily.dev/posts/themex---your-bridge-from-visual-design-to-fully-functional-code-szyz8hcda "themex - Your bridge from visual design to fully functional code") Article Product Hunt · 3y themex - Your bridge from visual design to fully functional code Themex is a tool that helps frontend developers bridge visual design and code. The post discusses the challenges of deciphering past projects and mentions the use of CSS frameworks like Bootstrap and Tailwind. 27 16. 16 [](https://daily.dev/posts/safetynet-a-case-study-on-how-i-designed-a-personal-safety-application-that-helps-users-keep-thems-b5bipznsb "SafetyNet : A case study on how I designed a personal safety application that helps users keep themselves safe.") Article Bootcamp · 3y SafetyNet : A case study on how I designed a personal safety application that helps users keep themselves safe. Case study on the design of a personal safety application called SafetyNet that addresses the growing concern of personal safety. 24 17. 17 [](https://daily.dev/posts/don-t-disable-form-controls-mombd0gqt "Don’t Disable Form Controls") Article Community Picks · 3y Don’t Disable Form Controls The post discusses the reasons why authors should not disable form controls, including buttons and form fields, in web design. It emphasizes the importance of considering context, user expectations, and alternative methods to indicate inactive features. Disabling form controls in the context of submitting a form is discouraged, as it can create confusion for users. The post provides resources supporting this viewpoint and offers suggestions for alternative strategies. 20 1 18. 18 [](https://daily.dev/posts/top-8-ai-tools-and-plugins-every-ui-ux-designer-should-try-in-2024-hctwdjrqr "Top 8 AI Tools and Plugins Every UI/UX Designer Should Try in 2024") Article UX Planet · 3y Top 8 AI Tools and Plugins Every UI/UX Designer Should Try in 2024 Discover the top AI tools and plugins for UI/UX designers in 2024 that can revolutionize your design workflow. 18 [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/2024/02#page","url":"https://daily.dev/tags/ui-design/best-of/2024/02","name":"Best UI Design Posts — February 2024","description":"The most upvoted UI Design posts from February 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2024/02#items","numberOfItems":18,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/10-inspiration-websites-all-web-designers-must-know-in-2024-nw2lur2la","name":"10 Inspiration Websites all Web Designers must know in 2024"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/flexbox-vs-grid-in-css-which-should-you-use--icootolvp","name":"Flexbox vs Grid in CSS – Which Should You Use?"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/10-css-one-liners-to-transform-your-web-app-lbhwigjix","name":"10 CSS One-Liners to Transform Your Web App"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-set-up-swiper-element-in-a-react-application-xl0jf6jri","name":"How to Set up Swiper Element in a React Application"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/web-design-trends-to-watch-in-2024-sitepoint-rreuafa2f","name":"Web Design Trends to Watch in 2024 — SitePoint"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/css-has-interactive-guide-80osgdvej","name":"CSS :has() Interactive Guide"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/my-favorite-ux-ui-design-courses-5mqys7ipa","name":"My favorite UX & UI design courses"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/information-architecture-design-step-by-step-1e2riqwjb","name":"Information Architecture Design Step-by-Step"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/case-study-skincare-application-wvb21e2ee","name":"Case study: Skincare application"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/scroll-effects-on-videos-with-javascript-qf0zv3udb","name":"Scroll Effects on Videos with JavaScript"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-draw-with-javascript-on-an-html-canvas-element-beginner-s-guide-j6mao9mim","name":"How to Draw with JavaScript on an HTML Canvas Element – Beginner's Guide"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/glassmorphism-what-it-is-and-how-it-s-going-207tlbkaz","name":"Glassmorphism: What it is and how it’s going"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/going-beyond-pixels-and-r-ems-in-css-rexwuhkhb","name":"Going beyond pixels and (r)ems in CSS"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/complete-guide-to-css-units-types-and-examples-6zxh4acmo","name":"Complete Guide to CSS Units: Types and Examples"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/themex---your-bridge-from-visual-design-to-fully-functional-code-szyz8hcda","name":"themex - Your bridge from visual design to fully functional code"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/safetynet-a-case-study-on-how-i-designed-a-personal-safety-application-that-helps-users-keep-thems-b5bipznsb","name":"SafetyNet : A case study on how I designed a personal safety application that helps users keep themselves safe."},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/don-t-disable-form-controls-mombd0gqt","name":"Don’t Disable Form Controls"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/top-8-ai-tools-and-plugins-every-ui-ux-designer-should-try-in-2024-hctwdjrqr","name":"Top 8 AI Tools and Plugins Every UI/UX Designer Should Try in 2024"}]},{"@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":"February 2024"}]}]} ```