Best of UI Design — December 2024
- 1
- 2
Prismic·1y
CSS Hover Effects: 40 Engaging Animations To Try
Interactive websites are key to a good user experience, and CSS hover animations can help achieve this. This post provides 40 engaging CSS hover animations, including custom ones and examples from other developers. Techniques range from simple button scaling to complex 3D effects. It also highlights tools and libraries like Hover.css, Mocassin.css, and iHover for creating these animations easily, enhancing the visual appeal and interactivity of your website.
- 3
UX Planet·1y
Best UX Practices for Designing a Sidebar
Sidebars are crucial for navigation in modern web applications, organizing and presenting content in a structured way. Following best practices in designing sidebars enhances usability, efficiency, space optimization, accessibility, and flexibility, which significantly improve user satisfaction and productivity. Key elements include optimal sidebar width, dynamic navigation, easy account switching, expandable sub-items, space for updates, dark/light mode toggle, highlighting active sections, prioritizing essential information, adjustable widths, quick search features, targeted actions, and secondary sidebars for quick access. Testing with real users ensures continuous improvement.
- 4
Dev Squad·1y
39+ Premium Shadcn UI Blocks | Just Copy & Paste
Discover a collection of over 30 premium Shadcn UI blocks that are fully responsive and optimized for any device. You can easily preview and copy the code for free, streamlining your development workflow with ready-to-use sections for your website.
- 5
Web Dev Simplified·1y
The CSS Display Property is Changing Forever
The CSS display property now accepts two values, enhancing flexibility in layout design. Initially, the display property could only define the element's own layout, but advancements allow specifying how child elements behave with values like flex, grid, and more. New properties like 'contents' and 'flow-root' offer additional control, such as preventing margin collapsing. This new approach provides greater flexibility and precision in web design layouts.
- 6
Customized Shadcn UI Components | Just Copy & Paste
Shadcn UI Customized components provide a collection of ready-made, customizable components that retain the flexibility of Shadcn UI's design system. These components are designed to simplify the customization process by allowing users to preview, copy, and implement them directly into their applications.
- 7
Ahmad Shadeed·1y
Solved By Modern CSS: Feature Image
Learn how to design a responsive feature image with a caption using modern CSS techniques including container queries, the :has() selector, and CSS grid. The guide explores different layout options and demonstrates how to achieve fluid design that adjusts to various container sizes, ensuring the caption appears in a classic or circular style depending on the viewport.
- 8
Progress Bar Design Best Practices
Learn essential tips for designing effective progress bars including appropriate use cases, simplicity in design, avoiding misleading indicators, proper types of progress indicators, engaging users during long wait times, and creating smooth transitions upon task completion.
- 9
Juxtopposed·1y
I Redesigned the ENTIRE YouTube UI from Scratch
The post details a comprehensive redesign of the YouTube UI, addressing various issues such as inconsistent icons, inefficient layout, and poor subscription management. The author suggests using unified icon styles, improving the explore and settings accessibility, and integrating better search and sorting options for a more user-centric experience. It also proposes features like a more intuitive video player, better comment section interactions, and enhanced subscription organization.
- 10
Kevin Powell·1y
No more extra scrollbars when using overflow-x
Learn how to prevent unwanted horizontal scrolling by using the CSS 'clip' property instead of 'overflow: hidden'. This solution allows you to manage overflow in one direction while maintaining visibility in the other, solving common issues with double scroll bars. Additionally, get tips on removing elements from the DOM for better user navigation.
- 11
Carousel Design Best Practices
Carousels help display multiple pieces of content within limited space. To create effective carousels, ensure the first slide holds the most important content, avoid auto-rotation, limit the number of slides, and maintain visible navigation controls. Optimize for mobile, minimize content load times, and prevent motion sickness with subtle animations. Evaluate content needs to determine if a carousel is the best option, as other content presentation methods may perform better.
- 12
A Simple Fix for Your CSS Overflow Problems
Learn how to effectively manage CSS overflow issues using the overflow-clip property. This method prevents unwanted horizontal scrolling without causing additional problems associated with overflow hidden. Overflow clip allows for more precise control over content visibility, especially in scenarios where content moves horizontally.
- 13
- 14
- 15
Tailwind Templates·1y
Skeleton Generate Using Tailwind CSS
Skeleton Generator is a tool that assists developers in creating skeleton or placeholder UIs, enhancing user experience during loading times. By inputting HTML or component code, the generator produces a skeleton version of the component, which can be copied and used in projects, streamlining the development process and enabling sophisticated loading animations.
- 16
- 17
RUBYLAND·1y
Always use flex-wrap: wrap on flex containers
Tips on improving mobile responsiveness of UI using flex containers are shared, specifically focusing on handling wrapping issues. Key changes include adding 'flex-wrap gap-y-2' to the header, using 'whitespace-nowrap' for the website title/logo, and applying 'ml-auto' to user info. These adjustments enhance the overall mobile experience.
- 18
- 19
Codrops·1y
UI Interactions & Animations Roundup #48
The post features a collection of impressive UI interactions and animations, showcasing various projects like healthcare dashboards, website designs for satellite control, AI input animations, and branded metaverse experiences. It highlights works by several designers and studios, presenting creative visuals and innovative design concepts.
- 20
- 21
- 22
Payment Button Design Best Practices
An effective payment button is crucial for eCommerce and SaaS websites. It should have clear labels, be visually distinct, and provide visual feedback during processing. Disabling the button while processing and keeping wait times short are important to enhance user experience. Handling errors gracefully and prioritizing accessibility, especially for keyboard and mobile users, are also key practices.
- 23
Frontend Masters·1y
Multi-State Buttons – Frontend Masters Boost
Discover an innovative method for creating multi-state user interface controls using stacked HTML radio buttons and CSS. This technique leverages the CSS pointer-events property to cycle through different states on each click, providing a dynamic and practical UI for tasks such as tagging search results. The guide includes coding examples and key considerations for usability and accessibility.
- 24
LogRocket·1y
Using retro designs from 90s websites to inspire modern UX
The 90s were a time when personal websites became a form of self-expression, utilizing bold and eye-catching designs despite technological limitations. Elements like vibrant colors, playful animations, and pixelated icons characterized the era, creating a unique digital aesthetic that remains influential today. Retro design principles from the 90s can offer valuable insights and inspiration for modern UX, emphasizing the importance of balancing visual appeal with user-friendly functionality.
- 25
Bram.us·1y
CSS Wrapped 2024
The Chrome DevRel team has published CSS Wrapped 2024, an end-of-year overview detailing 17 new CSS and Web UI features in Chrome and The Web Platform. These features are categorized into Components, Interactions, and Developer Experience. The project was a collaborative effort with contributions from several team members.
