Best of UI Design — October 2024
- 1
- 2
- 3
daily.dev Changelog·2y
Comment Sorting
Users can now sort comments on post pages by either newest first or oldest first. The default sorting is oldest first, but this can be changed with a button click. The button updates dynamically to show the current sorting option, allowing users to control their interaction with conversations.
- 4
- 5
Community Picks·2y
How NOT to Design Modern UI
Rachel returns after a year to discuss best practices in UI/UX design, focusing on proper use of shadows, fonts, gradients, and visual elements. She advises against over-relying on UI kits and encourages designers to start with basic kits to maintain creative flexibility. Rachel also stresses the importance of A/B testing for effective imagery and the role of white space in creating balanced designs. Game-changing tips like avoiding generic visuals and understanding cultural design preferences are highlighted.
- 6
- 7
Lun Dev Code·2y
Multilayer Parallax Scroll Animation with HTML and GSAP
The post provides a detailed guide on creating a multilayer parallax scroll animation using HTML, GSAP, and SVG. It emphasizes the benefits of using SVG for maintaining fixed positions of images across different screen sizes and guides viewers through the steps of setting up the animation, integrating GSAP for animations, and triggering animations based on scroll events.
- 8
Top 50 Google Font Pairings [Handpicked by Pro Designers]
Selecting the right fonts can significantly impact website design. The post showcases 50 handpicked Google font pairings categorized by styles such as classic, elegant, modern, creative, and minimalist. These combinations are chosen for their legibility, design flexibility, and overall aesthetic. Suggestions are provided to inspire your next project, and readers are encouraged to experiment with Pagecloud's editor and site-wide color feature.
- 9
Prismic·2y
Website Hero Section Best Practices + Examples: A Complete Guide
The hero section of a website is crucial for making a strong first impression and driving conversions. It includes key elements such as a headline, subheading, call-to-action (CTA), and a hero visual. Best practices for crafting an effective hero section involve emphasizing benefits over features, limiting CTAs to a primary goal, optimizing load times, incorporating animations thoughtfully, and continuously testing and refining elements. Platforms like Prismic offer tools to easily create and optimize hero sections for better performance and conversions.
- 10
CSS-Tricks·2y
CSS Anchor Positioning Guide
CSS Anchor Positioning provides a simple way to attach and position elements adjacent to others directly in CSS, allowing for fallback positions to avoid overflow issues. It has gained rapid browser support, notably being released in Chrome 125, and offers a more efficient alternative to JavaScript-based positioning. The guide covers key concepts, such as defining anchors and targets, and explains properties like `position-area`, `position-visibility`, and `position-try-fallbacks` for fine-grained control. The spec includes handy functions like `anchor()` and `anchor-size()` for attaching and scaling elements relative to anchors. However, some bugs and spec changes exist, impacting implementation nuances.
- 11
Sentry Engineering·2y
Perfectly Fitting Text to Container in React
This post discusses the challenge of dynamically scaling text to fit within a container in React, specifically within the context of a Sentry dashboard. It reviews several approaches, including SVGs, CSS transforms, container queries, and JavaScript, before settling on a JavaScript-based solution. The final solution leverages React hooks, ResizeObserver, and a resizing algorithm to dynamically adjust text size efficiently, ensuring excellent performance and user experience. The post also includes code examples and performance insights derived from real-user telemetry.
- 12
Web Developer·2y
CSS Interaction Properties You Might Not Know About
Learn about various CSS interaction properties like Scroll Snap, overscroll-behavior, scrollbar-gutter, overflow-anchor, touch-action, and the new View Transition API. These properties allow for more intuitive scrolling, better control over touch interactions, space reservation for scrollbars, and dynamic animations based on user scroll behavior or view transitions. Practical examples for each property demonstrate how to enhance user experience on web pages.
- 13
Remove Image Backgrounds With One Line Of Code From Master CSS
The post introduces a method to remove image backgrounds using a single line of CSS code, specifically utilizing the mix-blend-mode property. This technique ensures that product images blend seamlessly with the website's design, addressing issues caused by non-transparent backgrounds. The approach is compatible with all major browsers and provides a powerful solution for consistent web design, especially in e-commerce.
- 14
Netguru·2y
Top 10 UI Web Design Best Practices
Effective UI design boosts user engagement, navigation, and satisfaction. Key practices include simplicity to reduce cognitive load, consistency to create familiarity, visual hierarchy to guide users, and accessibility for inclusivity. Designing for mobile responsiveness, providing instant feedback, minimizing and recovering from errors, incorporating usability testing, utilizing design systems, ensuring user control, and offering flexibility are crucial for achieving practical and user-friendly interfaces. These principles ensure a seamless and enjoyable user experience.
- 15
Top Web Design Trends in 2024
Web design trends in 2024 focus on creating more engaging, personalized, and sustainable user experiences. Key trends include AI-driven content personalization, microinteractions, kinetic typography, 3D elements, dark mode, minimalism with depth, and sustainable web design practices. These trends aim to enhance visual appeal, usability, and accessibility, ensuring that websites stand out in a competitive digital landscape.
- 16
The Startup·2y
Forget ChatGPT: Here Are 6 (New) AI Tools That Will Blow Your Mind — and They’re Free!
Explore six new, free AI tools that can enhance productivity, learning, and web interactions. Key tools include Raena AI for student support, Napkin AI for generating visuals, and NotebookLM for personal research assistance. Additionally, Lottielab helps create customizable Lottie animations, Chatsimple AI revolutionizes website navigation, and Thunderbit automates web-related tasks. Each tool offers unique features and is accessible at no cost.
- 17
DesignCourse·2y
How to avoid designing BORING layouts
Many UI/UX designers create uninspired marketing landing pages by simply arranging cards. To stand out, one should focus on unique and creative designs. The post demonstrates a reimagined layout for a pet rental service using MidJourney for asset generation and tools like RVE to create scroll-based animations. Designers are encouraged to show visuals of people interacting with pets instead of text, emphasizing unique approaches in portfolios. Today, tools like Webflow and Framer allow designers to implement interactive animations without extensive coding knowledge.
- 18
LogRocket·2y
Homepage design for ecommerce sites: Tips & best practices
The homepage design of an ecommerce site is crucial, serving as both an entry point and category page, especially for niche markets. Highlight key benefits, use hero sections wisely, and ensure quality visuals to build trust. Employ social proof and FOMO subtly to boost conversions. Always prioritize user experience (UX) and consider SEO impacts for better online performance. A/B testing is essential to tailor the homepage to your specific audience and market needs.
- 19
Build a Slider with One Line Of Javascript Code
A guide on creating a slider with a single line of JavaScript code by changing typical coding logic. The post explains how to make slider items swap positions using the append function rather than adding new elements, achieving an infinite loop effect. The approach highlights the importance of thinking differently to find innovative solutions in coding.
- 20
Kevin Powell·2y
Please, don’t use viewport units for font sizes
Using viewport units for font sizes might seem like a good idea for responsive text, but it can lead to significant issues such as excessively small or large text and failures in accessibility criteria. Instead, using the CSS clamp function offers a more effective solution, allowing text to grow and shrink appropriately within defined limits. Tools like utopia.fyi can help set appropriate font sizes and scales for flexible, responsive typography.
- 21
asayer·2y
High Contrast and Simple Layouts: How Neubrutalism Benefits Users with Disabilities
Neubrutalism is a web design trend focused on high contrast and simple layouts, making it easier for users with visual disabilities to access content. This design style, inspired by brutalist architecture, uses bold colors, clear typography, and minimalistic layouts to enhance readability and user navigation. Implementing these principles can broaden a site's reach, improve user experience, and ensure compliance with accessibility standards.
- 22
Svelte Blog·2y
The Omnisite
The launch of Svelte 5 and the new sv CLI comes with a redesigned, unified website under the svelte.dev domain. This consolidation resolves issues such as inconsistent navigation, broken links, and isolated preferences across different sites. The updated site features a calm, cohesive layout, with a simplified color palette, improved button styles, and a new typographic approach using serif fonts to enhance readability and distinctiveness. The site is now open source, inviting community contributions.
- 23
- 24
The King Of CSS Timing Functions | CSS Steps
Timing functions are crucial in creating smooth and natural animations in CSS. While cubic bezier can simulate many timing functions, the steps timing function stands out by creating discrete jumps rather than smooth transitions. This method is particularly useful for animations like game character actions, where each state like jumping, running, or standing is defined by distinct steps.
- 25
Codrops·2y
UI Interactions & Animations Roundup #47
A curated collection of standout UI interactions and animations, featuring contributions from various designers and studios. Highlights include innovative website interactions, motion design, ecommerce hero sections, investment apps, marketing agency landing pages, and unique 404 pages.
