Best of UI Design — November 2024

  1. 1
    Video
    Avatar of fireshipFireship·2y

    CSS just changed forever… plus 7 new features you don't know about

    CSS has received a significant update, introducing a new logo in the color Rebecca purple and several game-changing features. Among these are the 'aligned content' property for easier centering without flexbox or grid, type-specific CSS variables via the 'property' at rule, and improved animations with the 'starting style' at rule. Additionally, new math functions have been added, alongside improvements for managing light/dark modes and form validation. The 'interpolate size' property also allows for the animation of elements with auto height.

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    UI Elements

    Buckets UI allows developers to build attractive and efficient products swiftly. It is widely used globally, with a significant presence in Australia.

  3. 3
    Video
    Avatar of lundeveloperLun Dev Code·2y

    Crazy Ink Animation Effect with CSS Only

    Learn how to create a stunning ink animation effect using just CSS. This tutorial walks you through using transparent ink images and GIFs to create visually impressive backgrounds without editing the original images. The guide includes detailed steps and tools needed to implement this effect smoothly.

  4. 4
    Article
    Avatar of communityCommunity Picks·1y

    CSS Grid Cheat Sheet

    A comprehensive cheat sheet for CSS Grid, providing detailed information to help web developers create complex and responsive layouts efficiently. It breaks down various properties and examples, making it easier to understand and implement CSS Grid in real-world projects.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    New CSS that can actually be used in 2024 #

    CSS has seen significant changes in recent years, introducing several new features now supported by modern browsers. These include logical properties that adapt to different reading directions, container queries for more flexible responsive designs, the powerful :has pseudo-class for conditionally styling elements based on their children, and cascade layers for better organization of styles. Additional advancements include subgrid for improved grid layouts and useful new functions like clamp and min/max for responsive design. These updates promise more control and flexibility for developers but may require polyfills for older browser support.

  6. 6
    Article
    Avatar of css_tricksCSS-Tricks·2y

    Fluid Everything Else

    The post discusses modern approaches to responsive design, focusing on the limitations of traditional methods like media queries. It introduces fluid typography and layout techniques using container queries and CSS's clamp() function to create more seamless and adaptive designs. Examples and code snippets are provided to illustrate these concepts.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Inspirational Tailwind Loading Page Animation Examples

    Loading animations enhance user experience by providing feedback while content loads. This guide explores Tailwind CSS animation utilities and offers various examples, such as full-screen GIFs, spinners, expanding circles, and bouncing dots. Tailwind CSS makes it easy to implement these animations, contributing to a more interactive, visually appealing, and user-friendly website.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    How To Create Responsive Tailwind Bento Grid?

    Learn how to create a responsive Tailwind Bento Grid using Tailwind CSS and FlyonUI. Discover the benefits of a Bento grid design, including a clear and organized layout, visually engaging elements, improved user experience, and its adaptability to responsive design. Understand how FlyonUI enhances Tailwind CSS with pre-styled components and interactive features, making web development faster and more efficient. The tutorial provides step-by-step instructions to set up your development environment and build a stunning Tailwind Bento grid with practical examples.

  9. 9
    Article
    Avatar of communityCommunity Picks·1y

    Piling.js

    Piling.js supports a variety of dynamic mouse interactions for managing groups of items in a visualization. Users can utilize drag and drop, multi-select, lasso, in-place browsing, preview browsing, dispersive browsing, hierarchical browsing, pile dispersion, and pile scaling to manipulate piles of data intuitively.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    🚀 Coming Soon: Eldora 2.0 – The Future of Page Design

    Eldora 2.0 introduces a suite of powerful components aimed at revolutionizing web page design. This update features enhanced layouts, game-changing components, interactive buttons, stunning text animations, and visually captivating backgrounds. With tools like the Testimonial Slider, 3D Cobe Globe, and Spotlight Button, developers and designers can create immersive user experiences and modern designs effortlessly.

  11. 11
    Article
    Avatar of asayerasayer·2y

    Top 4 AI-Powered UI Frameworks for 2024

    AI-powered UI frameworks are revolutionizing front-end development by automating repetitive tasks, optimizing workflows, and improving user experiences. These frameworks use machine learning to generate visual components and provide real-time design suggestions, allowing developers to focus on creative tasks. Four leading AI-driven UI frameworks—Vercel v0, Cursor AI, Galileo AI, and TeleportHQ—offer various features for faster, efficient, and scalable web application development. Each framework provides unique advantages in automation, customization, collaboration, and deployment, catering to different project requirements.

  12. 12
    Article
    Avatar of kodecoKodeco·2y

    Making Responsive UI in Godot

    Learn how to create responsive UIs in Godot Engine using settings and nodes like CanvasLayer, Anchor, NinePatchRect, and GridContainer. This tutorial covers the key principles of responsive UI design, including reference resolution, aspect ratio, and toggling between fullscreen and windowed modes. Basic knowledge of Godot Engine and GDScript is recommended.

  13. 13
    Article
    Avatar of csstipCSS Tip·2y

    Vertical rounded tabs using CSS mask

    Learn how to update rounded tab shapes to vertical versions using CSS masks. The method requires no extra or pseudo-elements, uses a single variable for curvature control, and supports gradient coloration.

  14. 14
    Article
    Avatar of uxplanetUX Planet·2y

    Why the 4-point grid system dominates UI design

    The 4-point grid system is widely adopted in UI design due to its proportional scaling, compatibility across devices, and avoidance of fractional pixels. It strikes a balance between micro and macro elements, making it a versatile choice for maintaining a clear visual hierarchy and consistent interfaces. While it has many benefits, other grid systems like the 2-point or 5-point grid might be better suited for specific use cases.

  15. 15
    Article
    Avatar of dribbbleDribbble·2y

    5 creative effects to upgrade your animated portfolio

    An engaging portfolio can set you apart in visual media professions like web design and motion graphics. This post explores five key animation effects—hover effects, animated carousels, on appear animations, animated transitions, and scroll-triggered effects—that can enhance user experience and attract more attention to your work. Tools like Framer make it easy to implement these animations, helping creative professionals showcase their talents effectively.

  16. 16
    Article
    Avatar of uxplanetUX Planet·2y

    SaaS Onboarding: How to Make It Functional and Easy-to-Use

    Effective SaaS onboarding is crucial for user retention and satisfaction. Key principles include minimalism, phased onboarding, interactive elements, and personalization. Successful onboarding helps lower barriers for new users, guides them through essential steps, and reduces support requests. Ensuring a pleasant user experience involves structuring content logically, maintaining a simple and consistent UI, providing feedback, and avoiding information overload and excessive steps.

  17. 17
    Article
    Avatar of graphitedevGraphite.dev·2y

    How we redesigned Graphite's landing page in-house

    A team redesigned Graphite's landing page in-house to create a compelling and memorable user experience. By experimenting with neon lighting and incorporating user feedback, they achieved a visually distinctive design that aligns with Graphite's brand. The process involved creative engineering to balance visual impact and performance across devices, with a focus on iterative improvement and close collaboration between design and engineering teams.

  18. 18
    Article
    Avatar of cssselectorCSS Selectors·1y

    Mastering :is() and :where() pseudo-class

    Discover the benefits of using the :is() and :where() pseudo-classes in CSS to simplify and manage longer selector groups. The :is() pseudo-class helps maintain cleaner and error-free code by grouping selectors efficiently, while :where() offers zero specificity, allowing styles to be easily overridden. Learn which one to use in different scenarios to optimize your CSS.

  19. 19
    Article
    Avatar of tech_hunterTechunter·2y

    15 responsive website project ideas for your portfolio, designed to showcase modern CSS skills

    Explore 15 responsive website project ideas that showcase modern CSS skills. These projects include features such as parallax scrolling, masonry grid galleries, sticky navigation, multi-step forms, and interactive product displays. Focus on using CSS Grid, Flexbox, animations, transitions, and media queries to create clean, responsive designs.

  20. 20
    Article
    Avatar of allaboutcodingRandom Thoughts about Building Software·1y

    Create a Simple Pulsating Animation

    Learn how to create a custom pulsating animation using Tailwind CSS and integrate it into a Rails app. The post explains the steps to define keyframes for the animation, extend Tailwind with this new animation, and apply it to a menu item. Additionally, it covers creating reusable menu item components in Rails using Phlex.

  21. 21
    Article
    Avatar of logrocketLogRocket·2y

    Creating adaptive and responsive UIs in React Native

    Creating user interfaces that adapt seamlessly across various devices is crucial for successful mobile app development. This guide explores tools, techniques, and best practices for building adaptive UIs in React Native, utilizing components like SafeAreaView, useWindowDimensions, and external libraries like react-native-size-matters. It covers responsive layouts, adaptive components, handling screen orientations, and scaling elements dynamically to ensure a consistent user experience on any device.

  22. 22
    Article
    Avatar of rich_tech123Tech Pioneers·1y

    CSS Has a New Logo (and a Story Worth Knowing)

    CSS has unveiled a new logo that reflects its evolution from simple web styling to a sophisticated tool for layouts, animations, and interactivity. The logo features a tribute to Rebecca Meyer, daughter of web developer Eric Meyer, through the color rebeccapurple. Rebecca's legacy and love for purple have been honored in the CSS community since 2014.

  23. 23
    Video
    Avatar of lundeveloperLun Dev Code·2y

    2 CSS Ways to Modify Website Design Based on Device Interface

    Dark and light mode are crucial for enhancing user experience on modern websites. Besides these, websites can also adapt to the system's theme setting, such as YouTube's interface adjustment. This can be easily implemented using CSS, specifically the prefers-color-scheme media query. Two methods are discussed here: the traditional approach using media queries and a new method using the color-scheme property in CSS, offering flexibility and efficiency. Despite some compatibility issues, this CSS function is poised to be supported by all browsers soon.

  24. 24
    Article
    Avatar of figmaFigma·2y

    Updating our web system for a new era

    Learn how the Figma team updated their web design system using new features to streamline components, improve workflows, and incorporate a refreshed visual identity. Highlights include auditing and simplifying component libraries, optimizing typography and color systems, leveraging prototyping for iterative design, and using branching and variables for consistency. Discover best practices and actionable approaches for evolving your own design system efficiently.

  25. 25
    Article
    Avatar of joshwcomeauJosh W Comeau·2y

    A Friendly Introduction to Container Queries • Josh W. Comeau

    Container queries, a long-sought CSS feature, allow the application of conditional CSS based on an element's container rather than the viewport. Despite being supported in all major browsers for nearly two years, adoption has been slow due to their complexity. This post explains the mechanics of container queries, their advantages, and how they can transform responsive design. It also introduces the Containment API as a solution to the core challenges posed by container queries.

See all UI Design archives