Best of UI Design — May 2025

  1. 1
    Article
    Avatar of rubylaRUBYLAND·52w

    10 Modern CSS Features You Want to Use

    Modern CSS has evolved significantly with new features that reduce the need for preprocessors and frameworks. Key additions include mathematical functions (min, max, clamp) for responsive sizing, container queries for component-based responsive design, text-wrap properties for better typography, @starting-style for animating from display:none, :has() selector for parent styling based on children, simplified media query ranges, light-dark() function for theme switching, color-scheme property for system UI theming, native nesting support, new viewport units (dvh, svh, lvh) for mobile browsers, and @layer for managing CSS specificity conflicts.

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    Just Use React

    Using React or similar modern frameworks is recommended for complex projects due to their capabilities in handling dynamic applications, effective state management, and reusable component structure. These tools simplify managing intricate user interactions and enhance developer experience, enabling creation of maintainable, scalable, and high-performance applications.

  3. 3
    Article
    Avatar of communityCommunity Picks·1y

    Glaze

    Glaze is a utility-based animation framework for the web, built on GSAP. It emphasizes an HTML- and utility-first approach similar to Tailwind. The framework supports responsive design, timelines for sequencing animations, and uses a dot notation for nested properties. While currently tailored for GSAP, its syntax may accommodate other libraries in the future.

  4. 4
    Article
    Avatar of hnHacker News·52w

    My website is ugly because I made it

    A developer shares their philosophy on creating personal websites, emphasizing authenticity over perfection. They detail specific CSS techniques used to make their site unique, including rotating navigation links with different fonts, adding texture with CSS-generated dots, and creating hover effects. The piece advocates for embracing imperfection and personal expression in web design rather than following conventional design standards.

  5. 5
    Video
    Avatar of kevinpowellKevin Powell·1y

    5 CSS tips every developer should know

    Discover five CSS features that can enhance your code by reducing JavaScript reliance and solving common design problems efficiently. Learn to utilize single color gradients for borders, effective use of user select, mastering the 'all' property for style resets, innovating with CSS masks, and employing anchor positioning for consistent element placement.

  6. 6
    Article
    Avatar of communityCommunity Picks·1y

    Design websites

    Learn how to create custom, fully-editable websites directly in your browser. The post discusses using cookies for site traffic analysis and provides a privacy policy link.

  7. 7
    Article
    Avatar of neontechNeon·1y

    Using V0 for UI Design Exploration

    Design teams at Neon are using AI-powered code generation tools like V0 to create interactive and production-quality prototypes quickly. By generating React components and UI flows from text prompts, designers can validate concepts with real, working experiences. This approach improves iteration speed and design quality, moving beyond static mockups to deliver impactful user interactions. The process has allowed for more hands-on collaboration with engineers and better product development.

  8. 8
    Article
    Avatar of pandProAndroidDev·1y

    Material 3 Expressive Design: A New Era

    Material 3's Expressive Design offers a new approach to Android UI, featuring elements like richer color palettes, fluid animations, and varied shapes for a better user experience. Developers can leverage new components such as LoadingIndicator, SplitButtonLayout, and ButtonGroup to create more engaging and responsive interfaces. Updating projects with the latest Material 3 dependencies provides practical tools to enhance application usability and aesthetics.

  9. 9
    Article
    Avatar of thevergeThe Verge·1y

    Microsoft reveals its rejected Start menu redesigns

    Microsoft has revealed several concept designs for the Windows 11 Start menu, showcasing alternative layouts that were considered before finalizing the new design. Key features include greater customizability and the option to disable the recommended feed, enhancing user accessibility and personalization. The redesign process involved testing with more than 300 users, using eye-tracking and feedback to refine the design, which is currently being tested with Windows Insiders.

  10. 10
    Article
    Avatar of communityCommunity Picks·1y

    Wave UI

    Wave UI is a flexible and customizable framework that offers improved control over CSS, especially when using Sass. It provides modern design features, is fully responsive, and ensures accessibility.

  11. 11
    Article
    Avatar of csstipCSS Tip·1y

    SVG to CSS Shape Converter

    This post introduces an online tool that converts SVG shapes into CSS using the clip-path property. The generator is responsive and simplifies the coding process by fitting the shape into the smallest rectangle without manual viewBox adjustments.

  12. 12
    Article
    Avatar of frontenddesignideasFrontend Design Ideas·1y

    47 Header designs for your website to improve navigation and boost brand identity

    The header is a crucial element of a website, enhancing user experience and brand identity while organizing content. A responsive header facilitates navigation and improves search engine understanding of the site structure.

  13. 13
    Article
    Avatar of itnextITNEXT·1y

    Toast Notifications In OutSystems

    Toast notifications are unobtrusive, self-closing messages that provide quick feedback to users, enhancing the user experience. Unlike feedback messages, they are often used for less critical alerts and can be implemented using various libraries. This guide provides a step-by-step process to integrate toast notifications in OutSystems, including creating necessary modules, adding JavaScript and CSS files, and setting up client actions for activating the notifications.

  14. 14
    Article
    Avatar of communityCommunity Picks·52w

    Figma Design System Generator

    Kigen is a Figma plugin that accelerates design system creation by providing pre-built color palettes from popular design systems, predefined variables, semantic aliases, typography tokens, and standardized spacing scales. It includes documentation features for token handoff and supports best practices for consistent UI design across products.

  15. 15
    Article
    Avatar of alltailwindcssAll Tailwind CSS·1y

    🧑‍💻 How Tailwind CSS Helped Me Build Responsive UIs Faster

    Tailwind CSS is a utility-first CSS framework that simplifies building responsive user interfaces. By using predefined classes, developers can style elements directly in their HTML, reducing the need for custom CSS and separate files. This framework makes responsive design easier with breakpoints and eliminates the complexity of media queries. Tailwind is especially beneficial for beginners, making the learning process smoother and more enjoyable.

  16. 16
    Article
    Avatar of acfACF·1y

    ACF 6.4.1

    Advanced Custom Fields (ACF) version 6.4.1 introduces several new features including the option to create new entries in Select fields and enhancements to the Icon Picker field. There are also fixes ensuring compatibility with plugins like Classic Widgets and resolving issues with bbPress.

  17. 17
    Article
    Avatar of codropsCodrops·1y

    On-Scroll 3D Carousel

    Explore the inspiration and process behind creating an interactive on-scroll 3D carousel using GSAP plugins. Learn about effective animation techniques and how GSAP's free availability enhances web animation possibilities. A proof-of-concept project demonstrates the use of SplitText and SmoothScroller for dynamic page transitions.

  18. 18
    Article
    Avatar of collectionsCollections·1y

    Introducing Stitch: Google's AI-Powered Tool for Seamless UI Design

    Google has introduced Stitch, an AI-powered tool, designed to enhance UI design and frontend development. It uses AI to generate UI layouts from text or image inputs, facilitating collaboration between designers and developers. While Stitch streamlines design processes, it's meant for initial drafts that need refinement by professional designers. It integrates with platforms like Figma and IDEs but doesn't aim to replace comprehensive design tools. Stitch, alongside Google's AI agent Jules, underscores the evolving role of AI in enhancing the software development lifecycle.

  19. 19
    Article
    Avatar of codropsCodrops·1y

    Motion Highlights #6

    Discover a curated collection of recent motion design works by various creatives, showcasing innovations in typographic animations, web experiences, 3D effects, and more. This roundup aims to inspire designers with fresh ideas and techniques in motion design.

See all UI Design archives