Best of UI Design — September 2024

  1. 1
    Video
    Avatar of fireshipFireship·2y

    Front-end web development is changing, quickly

    Front-end development is rapidly evolving with new tools like Shad CN, a powerful UI framework that simplifies the process of building custom components by allowing developers to copy and paste code snippets. Versell has integrated this into its ecosystem and introduced vzer, an AI chatbot that generates UI elements effortlessly. While AI tools can significantly speed up development, they come with their own set of challenges. Developers need to balance the benefits of rapid development with the potential drawbacks of using auto-generated code.

  2. 2
    Article
    Avatar of devtoDEV·2y

    Get Screen Size in Pure CSS

    Learn how to use pure CSS to get screen size measurements, define custom properties, and perform mathematical operations on those properties. This method updates in real-time without JavaScript, utilizing new CSS features like @property, atan2, and tan functions.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind CSS Page Creator

    Tails V2 is a design tool for TailwindCSS developers, enabling the creation of beautiful websites with a comprehensive site builder, design library, and built-in code editor. It features project organization, multiple page settings, and usage of Tailwind V3 with JIT mode. Users can sign up for a free account or upgrade to a Pro plan for additional features and unlimited projects.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    15 Useful CSS Properties You Should Know About 🎨

    Discover 15 often overlooked but incredibly useful CSS properties that can enhance the design, performance, and user experience of websites. These properties include caret-color for changing text cursor color, accent-color for form controls, pointer-events to manage mouse activity, backdrop-filter for background effects, and scroll-snap-type for smooth scrolling transitions, among others.

  5. 5
    Article
    Avatar of uxplanetUX Planet·2y

    Hover Effect in UI Design: Tips & Tricks

    Hover effects in UI design enhance interactivity and provide feedback to users. Use them to highlight interactive elements, offer contextual information, and reinforce brand identity. Opt for subtle animations, maintain uniform effects for similar elements, and ensure the timing is just right for smooth transitions.

  6. 6
    Article
    Avatar of devtoDEV·2y

    100+ React E-Commerce Components for Modern Stores

    TailGrids offers over 100 eCommerce UI components specifically designed for React and Tailwind CSS, enabling developers to create scalable, high-performance, and user-friendly online stores with ease. These components cover every aspect of an eCommerce platform, from checkout flows to product carousels, and are fully customizable and responsive across all devices. Additionally, TailGrids provides three pre-built eCommerce templates to kickstart your development.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Meraki UI Tailwind CSS Components

    Meraki UI offers a collection of responsive Tailwind CSS components designed to improve user experience, featuring RTL language support and dark mode. It provides a range of components for various needs such as alerts, heroes, features, sign-up forms, and more. The library also includes fully responsive templates built with Alpine.js, Laravel Blade, and Vue 3. Meraki UI aims to facilitate fast and elegant web development.

  8. 8
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Use CSS to Improve Web Accessibility

    CSS can significantly enhance web accessibility by updating focus styles, avoiding content shifts, reducing motion for users with vestibular disorders, and customizing contrast options. Techniques such as using the :focus pseudo-class, prefers-reduced-motion, prefers-contrast media queries, and enabling dark mode help create a more inclusive user experience. CSS animations can also enhance UX by visually guiding users and providing feedback. Ensure purposeful and user-friendly implementation to support assistive technologies and improve overall accessibility.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Creating 3D effects in CSS

    CSS can be used to create impressive 3D effects by leveraging properties like transform and perspective. This guide explains how to manipulate 3D dimensions and positions of elements with operations such as translateX(), translateY(), and translateZ(). Additionally, it covers creating visual illusions with shadows and light to enhance the 3D effect. The post includes practical examples like text reflections, shadows, 3D text animations, image tilts, interactive buttons, and how to create tilt effects using vanilla-tilt.js.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind Toolbox

    Explore a collection of open-source starter templates, components, and tools designed to kickstart your Tailwind CSS projects. Discover beautifully designed landing pages, dashboards, and dark mode layouts built with Tailwind CSS, React, and Vue.js. Enhance your development process with hundreds of customizable UI components, a comprehensive design system boilerplate, and visual builders like Windframe and Polypane.

  11. 11
    Video
    Avatar of kevinpowellKevin Powell·2y

    Improve your reset with these modern CSS additions

    Discover three modern CSS additions to enhance your CSS reset. Learn about the text-wrap balance to improve heading appearance, setting max width on text elements to ensure readability, and utilizing container queries for better responsive design. These tips aim to make your web typography and layout more visually appealing and easier to manage.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Why do all websites look the same?

    toddle aims to revolutionize software development with a focus on creating an engaging, interactive environment where developers can build without extensive sign-up processes. It emphasizes experiences over explanations, speed, and high performance, and encourages a collaborative and creative community. Users can clone and customize toddle's public packages, showcasing the platform's commitment to transparency and innovation.

  13. 13
    Article
    Avatar of uxplanetUX Planet·2y

    Practical Guide To Icon Design

    Icon design balances clarity, simplicity, and visual appeal. Key UX recommendations include using icons functionally, ensuring simplicity, maintaining a uniform style, avoiding ambiguity, and testing readability at small sizes. UI recommendations emphasize aligning objects to a pixel grid, designing in multiple sizes (16x16, 24x24, 32x32 px), maintaining consistent stroke widths, respecting border radius guidelines for different platforms, simplifying smaller icons, and matching icon style to typeface. Designlab offers courses to advance your UI/UX design skills.

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

    One Line Of Code By Master CSS

    The post discusses different layout techniques in web design, focusing on the limitations of Flex and Grid for creating masonry layouts. It introduces a solution using a single line of CSS code to create a responsive masonry layout with columns, maintaining the original proportions of images and adapting fluidly to different screen sizes. The method ensures the layout fills the entire space without empty areas, and the technique also applies to text columns in blog layouts.

  15. 15
    Article
    Avatar of hnHacker News·2y

    Sanding UI

    Effective UI development involves iterative testing and tweaking, similar to sanding wood. By continually interacting with the UI, developers can identify and eliminate issues. The author shares an experience with using flexbox in CSS for aligning radio inputs and labels, and solving interaction dead zones by replacing gap with padding.

  16. 16
    Article
    Avatar of rubylaRUBYLAND·2y

    Fix Any CSS Z-index Issue With This One Trick

    Z-index controls the stacking order of elements in a visual layout, creating depth in UI designs. Common z-index issues can be resolved using the `isolation: isolate;` property instead of arbitrarily changing z-index values. This approach is demonstrated using Tailwind CSS.

  17. 17
    Video
    Avatar of wdsWeb Dev Simplified·2y

    Must Have Tailwind Plugin For Responsive Design

    The Fluid Tailwind library simplifies responsive design by enabling smooth animations between breakpoints. By using a tilde symbol followed by the property you want to animate, you can specify starting and ending values for different screen sizes. This approach makes it easy to create fluid, responsive designs without writing extensive Tailwind code.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    ready-to-use background snippets for web developers

    Ready-to-use background snippets are available for web developers, crafted with Tailwind CSS and Vanilla CSS for easy integration. Simply copy and paste into your next project.

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    Bruno Simon

    Learn the techniques and tools to create visually appealing and functional websites.

  20. 20
    Article
    Avatar of thisdotThis Dot·2y

    How to Truncate Strings Easily with CSS

    Learn how to easily truncate strings in user interfaces using CSS. Techniques for both single-line and multi-line truncation are covered, highlighting key properties like overflow, white-space, and text-overflow. Discover why CSS-based truncation is preferable over JavaScript for performance, simplicity, and responsiveness.

  21. 21
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    ShadCLI: Rethinking UI Libraries

    ShadCLI offers a revolutionary way to install and manage UI components in your projects, ensuring you maintain code ownership. It supports various React frameworks, simplifies dependency management, and provides an easy CLI for code distribution. This new approach allows seamless integration, customization, and updates without compromising project integrity.

  22. 22
    Article
    Avatar of webdesignsquadWeb Design·2y

    Top 3 Best Websites for Web Design Inspiration and Ideas

    Finding inspiration is crucial for web designers and developers. This post highlights three top websites for web design inspiration: Webspirre, which offers a free and focused platform; Mobbin, which specializes in mobile app design with premium features; and Dribbble, known for its community-oriented, diverse design categories. Each platform has unique strengths, with Webspirre being the top choice for dedicated web design inspiration.

  23. 23
    Article
    Avatar of netguruNetguru·2y

    Mobile Web Development: Creating Mobile-Friendly Sites

    Over 55% of online traffic comes from mobile devices, making mobile-friendly websites essential. With Google switching to mobile-first indexing, evaluating mobile solutions like responsive design, dynamic serving, or separate mobile sites is crucial. Each approach has unique advantages and drawbacks. Key technical considerations include proper width properties, lazy loading, and SEO optimization. Depending on the complexity, website owners can choose between DIY tools or professional development to optimize for mobile.

  24. 24
    Article
    Avatar of lambdatestLambdaTest·2y

    How to Create CSS Gradient Shadows

    Learn how to create gradient shadows in CSS to add depth and a natural look to your web designs. This guide covers various methods such as linear-gradient, conic-gradient, filter, radial-gradient, and clip-path. It also includes best practices and tips for ensuring browser compatibility and performance.

  25. 25
    Article
    Avatar of devsquadDev Squad·2y

    10 CSS Tips You Must Know About in 2024

    CSS continues to offer new tools and techniques for creating visually stunning and functional websites. Staying updated with the latest trends and best practices is crucial. Discover 10 essential CSS tips for 2024 to enhance your web development skills and create cutting-edge designs.

See all UI Design archives