Best of UI Design — March 2024

1. 1
   Video

   Community Picks·2y

   world's shortest UI/UX design course

   Learn the fundamentals of UI and UX design, including user flow, wireframing, design systems, and more. Discover popular UI/UX design tools and how to create a consistent design with reusable components.

   538

   28
2. 2
   Article

   DEV·2y

   How to build a Good Portfolio Website - My Approach.

   Learn how to create a good portfolio website, including the importance of uniqueness, the benefits of having a portfolio, and the workflow for building one. The post provides insights on planning, designing, feedback, development, deployment, and resources.

   357

   33
3. 3
   Article

   DEV·2y

   Best Practices for Frontend Web Development: A Comprehensive Guide

   A comprehensive guide to frontend web development, covering best practices, including semantic HTML markup, CSS methodologies, responsive design, progressive enhancement, performance optimization, cross-browser compatibility, accessibility standards, optimized images and multimedia, version control, and continuous learning.

   285

   9
4. 4
   Video

   Community Picks·2y

   4 UI Design Tools I Can't Live Without

   Discover four design resources that can help you create beautiful web applications. Learn about tools for creating SVGs, finding color palettes, and improving animations on your website.

   227

   6
5. 5
   Video

   Community Picks·2y

   UI Library cooler even than Shadcn

   Discover the coolest UI Library with gradient animations, lamp effects, and more!

   142

   33
6. 6
   Article

   Community Picks·2y

   Free SaaS Website UI Kit for Framer and Figma

   Build and publish a fully functional, responsive, no-code SaaS website design in minutes using the free components provided for Framer and Figma. Customize and personalize the elements, then publish your site with ease.

   68
7. 7
   Article

   Community Picks·2y

   uilabs

   The post explores various ways to reuse and transform components, including creating and managing webhooks, using a calendar widget with timezone differences information, and recreating iOS sliders in the web with Radix UI and Tailwind CSS.

   66
8. 8
   Video

   ThePrimeTime·2y

   Meet Devin - The End Of Programmers As We Know It

   66

   17
9. 9
   Article

   Community Picks·2y

   Going beyond pixels and (r)ems in CSS

   Learn about container query length units in CSS and how they can be used to create responsive designs based on the size of the containing element.

   63

   2
10. 10
    Article

    Medium·2y

    Optimising your design system with Figma’s variables

    Learn how to optimize your design system using Figma's variables. Explore the principles of consistency, scalability, maintainability, DRYness, and code-friendliness. Discover the benefits of primitive variables and how to set them up in a Codesign system. Understand the concept of semantic variables and their compatibility with different modes. Start building your own design system today!

    45

    5
11. 11
    Article

    asayer·2y

    CSS - Implementing Responsive Masonry Layouts

    Learn how to implement responsive Masonry layouts using CSS. Discover the principles of Masonry layouts and different techniques to achieve them.

    40
12. 12
    Article

    builder.io·2y

    Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More

    Visual Copilot 1.0 introduces Component Mapping, AI semantic matching, Component Set Generation, and Prompt-to-Design to eliminate bottlenecks in web and mobile development.

    37

    2
13. 13
    Article

    asayer·2y

    Three Modernized Navbar Design Layouts

    This post explores three modernized navbar design layouts: sticky navigation bar, hamburger menu, and tab navigation bar. It highlights the importance of navbars for user guidance, usability, brand cohesion, efficiency, SEO benefits, accessibility, and aesthetic appeal. The evolution of navigation in web design is discussed, along with key considerations for modern navbar design. The post then dives into the features, benefits, and drawbacks of each modernized navbar layout. It concludes by emphasizing the importance of choosing the right fit for a website's navigation and when to consider modernizing it.

    37
14. 14
    Article

    asayer·2y

    Transform your Website: Create 3D Magic with CSS Grid

    Learn how to use CSS Grid to create 3D effects on your website. Discover important properties for making grid layouts, creating overlays, adding 3D appearance to grid items, and creating a rotating cube. Understand how 3D improves user experience and get quick tips for common 3D challenges.

    29
15. 15
    Article

    freeCodeCamp·2y

    How to Use HTML Forms – HTML Form Basics

    Learn the basics of creating HTML forms, including the structure, form elements, and form validation. Discover how to use the HTML <input>, <label>, <textarea>, and <select> elements. Get insights on form submission methods and best practices for styling and accessibility.

    25
16. 16
    Article

    Codrops·2y

    On-Scroll 3D Stack Motion Effect

    A post sharing an experiment of creating a scroll-based 3D stack motion effect with rotations, translations, and responsiveness.

    24

    1
17. 17
    Video

    ThePrimeTime·2y

    WinterJS - A New Javascript Runtime

    22

    4
18. 18
    Article

    WordPress Beginner·2y

    How to Convert Figma to WordPress (Beginner’s Guide)

    Learn how to convert Figma designs into WordPress themes or pages easily using a step-by-step guide. Discover the benefits of converting Figma to WordPress, the tools and plugins available for the conversion, and the process involved.

    22

    2
19. 19
    Article

    CSS {IRL}·2y

    Creating Color Palettes with the CSS color-mix() Function

    Learn how the CSS color-mix() function can help create color palettes and improve design systems.

    21

    1