Best of UI Design — February 2024

1. 1
   Article

   Bootcamp·2y

   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.

   286

   5
2. 2
   Article

   freeCodeCamp·2y

   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
   Article

   Medium·2y

   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
   Article

   freeCodeCamp·2y

   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
   Article

   SitePoint·2y

   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
   Article

   Collections·2y

   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
   Article

   UX Planet·2y

   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.

   33
8. 8
   Article

   UX Planet·2y

   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
   Article

   Bootcamp·2y

   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
    Article

    asayer·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    LogRocket·2y

    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
    Article

    Community Picks·2y

    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
    Article

    LambdaTest·2y

    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
    Article

    Product Hunt·2y

    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
    Article

    Bootcamp·2y

    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
    Article

    Community Picks·2y

    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.

    21

    1
18. 18
    Article

    UX Planet·2y

    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