Best of UI Design — December 2025

  1. 1
    Article
    Avatar of hnHacker News·24w

    The f*** off contact page

    A 'fuck off contact page' is a deliberately friction-filled contact page used by large SaaS companies to discourage support inquiries and push users toward self-service options. This design pattern is fundamentally inappropriate for service-based agencies that need to cultivate leads and demonstrate helpfulness. The author shares a client story where misaligned goals, discounted pricing, and lack of trust led to implementing this anti-pattern despite knowing better. Success in client work requires educating clients on the design process, establishing proper value perception through pricing, and building trust through clear communication of expertise and values.

  2. 2
    Article
    Avatar of bradfrostBrad Frost·23w

    Size of Life

    Neal Agarwal's "Size of Life" is highlighted as an exceptional example of web design, praised for its beauty, interactivity, and educational value. The project serves as inspiration for developers and designers looking to create engaging, informative web experiences.

  3. 3
    Article
    Avatar of cassidooCassidy's blog·24w

    CSS Clamp

    The CSS clamp() function enables responsive sizing by setting a value between minimum and maximum bounds with a preferred middle value. It accepts three parameters (minimum, preferred, maximum) and can replace verbose media queries with a single line of code. Common use cases include fluid typography and flexible column widths that adapt smoothly across viewport sizes while maintaining readability constraints.

  4. 4
    Article
    Avatar of zedZed·23w

    How We Rebuilt Settings in Zed — Zed's Blog

    The Zed team rebuilt their settings editor from scratch, moving from a distributed, macro-based architecture to a centralized, strongly-typed model. The refactoring consolidated scattered settings definitions into UserSettings and ProjectSettings types, treating configuration files as the organizing principle rather than implementation details. They enhanced their GPUI framework with automated focus handling through tab groups and local state management similar to React's useState. The project revealed architectural weaknesses (including an auto-update bug) but resulted in a cleaner foundation for future features.

  5. 5
    Article
    Avatar of atomicobjectAtomic Spin·22w

    Maybe It’s Not the User Who is Stupid

    Users don't fail because they're stupid—they fail because interfaces aren't clear enough. Common dismissals like "user error" or "they should figure it out" ignore how fragile UI communication really is. Bright modals get closed because the web trained users to dismiss intrusive elements. Banners get ignored because they look like ads. Buttons go unseen due to screen size differences. Good design means making systems clearer, not expecting users to be smarter. This empathy should extend to teammates too—they weren't hired to think like designers, and dismissing their perspective repeats the same mistake we criticize when applied to users.

  6. 6
    Video
    Avatar of t3dotggTheo - t3․gg·23w

    Shadcn just changed forever

    Shadcn UI introduced a major update called Shadcn Create that puts customization front and center. Instead of websites looking identical with default components, developers can now configure presets, colors, fonts, icon sets, and styles before generating a project. The system supports multiple component libraries (Radix UI and Base UI), offers various design presets (Vega, Nova, Maya, Lyra, Mirror), and allows extensive theming options. Testing shows that providing AI coding assistants with a well-structured component library significantly improves UI generation quality, even for models typically weak at design. The update maintains Shadcn's philosophy of code ownership while making it easier to start with a unique design system.

  7. 7
    Article
    Avatar of uxplanetUX Planet·23w

    Why Your “Out of Stock” State is Losing You Users

    Most e-commerce apps lose customers when products are out of stock by forcing users into passive waiting mode with "Notify Me" buttons. The On Running app demonstrates a better approach by showing contextually relevant alternatives immediately below the size selector when inventory is unavailable. This pattern works by preserving buying momentum, adapting the UI based on stock status, and recommending similar in-stock products. The key insight is treating out-of-stock states as design challenges rather than dead ends, keeping users in active shopping mode instead of ending their journey.

  8. 8
    Article
    Avatar of css_tricksCSS-Tricks·23w

    What Else Could Container Queries… Query?

    Container queries have evolved beyond simple size queries to include scroll-state queries, anchored container queries, and potentially many more types. The article explores current container query capabilities including detecting scrollability, sticky positioning, and anchor position fallbacks. It discusses future possibilities like querying any CSS property value, detecting element wrapping or ellipsing, counting child nodes, and determining flex/grid positions. The author predicts container queries will become increasingly versatile, potentially offering dozens of query types similar to how media queries have expanded.

  9. 9
    Article
    Avatar of omgubomg! ubuntu!·24w

    Ubuntu 26.04 Will Look More Like Vanilla GNOME Shell

    Ubuntu 26.04 LTS will adopt a new approach to theming GNOME Shell by using symlinks to point directly at default GNOME style files and applying overrides, rather than maintaining a separate custom stylesheet. This reduces maintenance burden for the Yaru theme team while keeping Ubuntu-specific elements like the Ubuntu font, panel sizing, and orange accent color. The change means Ubuntu will present GNOME Shell closer to upstream design intentions, with some visual elements like rounded corners and button spacing matching vanilla GNOME defaults.

  10. 10
    Article
    Avatar of codropsCodrops·23w

    Spain Collection: Evolving a Luxury Website into a Digital Ecosystem

    A detailed case study of redesigning Spain Collection's luxury travel website into a comprehensive digital ecosystem. The project evolved from a single-purpose site into a platform managing 100+ experiences across trips, stays, weddings, and VIP services. The design approach emphasized editorial aesthetics inspired by high-end fashion, implemented through a modular WordPress system with 50+ flexible components. Technical implementation included ACF Flexible Content for content management, GSAP and TaxiJS for animations and transitions, and a custom WebGL/Three.js petal rain effect for the weddings section. The architecture solved complex UX challenges through smart filtering, modal-based navigation, and content correlation across multiple service categories while maintaining visual consistency and scalability.

  11. 11
    Article
    Avatar of androiddevAndroid Developers Blog·22w

    Goodbye Mobile Only, Hello Adaptive: Three essential updates from 2025 for building adaptive apps

    Android 16 introduces mandatory changes forcing apps to support multiple orientations and screen sizes on displays 600dp and larger, eliminating orientation locks. Three key updates enable adaptive development: mandatory resizability in Android 16/17, new Large and Extra-large window size classes in WindowManager 1.5.0 for screens beyond 1200dp, and Navigation 3 with decoupled architecture for managing multi-pane layouts. These changes target the expanding Android ecosystem of 500+ million devices including foldables, tablets, and Chromebooks, where users spend 9-14x more than phone-only users.

  12. 12
    Article
    Avatar of jetbrainsJetBrains·24w

    Meet the Islands Theme – The New Default Look for JetBrains IDEs

    JetBrains introduces the Islands theme as the new default UI across all their IDEs starting with version 2025.3. The theme features rounded corners, balanced spacing, improved tab recognition, and clearer separation between working areas. It includes distinct tool window borders for easier resizing and an optional setting for different tool window backgrounds to emphasize the editor. The design was shaped by user feedback and testing, aiming to create a softer, more comfortable environment that supports focus and productivity while aligning with modern design trends from macOS and Windows 11.

  13. 13
    Video
    Avatar of youtubeYouTube·23w

    4-Step Gemini 3.0 Pro System For Beautiful UI Designs

    A four-step workflow for generating UI designs using Gemini 3.0 Pro before building functionality. The process starts with creating a product requirements document (PRD), extracting core features and UX considerations, building a design system based on visual inspiration, and finally generating screen-by-screen designs with all states. The approach emphasizes designing upfront rather than treating UI as an afterthought, using structured prompts to guide the AI through creating a complete design system with colors, typography, and component specifications that can be implemented in React with Tailwind CSS.

  14. 14
    Article
    Avatar of sketchSketch·23w

    Sketch in 2025: Stacks, Glass & a macOS Tahoe Redesign

    Sketch shipped three major releases in 2025: Athens introduced Stacks (auto layout system) and Frames/Graphics (new container types replacing Artboards); Barcelona added glass effects, progressive blurs, and fade effects for iOS/macOS 26 design; Copenhagen brought a complete UI redesign for macOS Tahoe with focus mode, rewritten Inspector, stack wrapping, and one-click background removal. Additional updates include infinite folder nesting in Workspaces, a local-only MCP server for AI integration, enhanced Command Bar with component insertion, and a new Private Cloud offering for enterprise teams.

  15. 15
    Article
    Avatar of bradfrostBrad Frost·21w

    I’m live-streaming a redesign of my website

    Brad Frost is live-streaming the process of redesigning his personal website, offering viewers a chance to watch the development work in real-time on YouTube.

  16. 16
    Video
    Avatar of galaxies_devSimon Grimm·22w

    I Reviewed 3 REAL React Native Apps (Here's what I thought)

    A video review of three React Native applications (District walking game, Zyotes note-taking app, and Rail Ruckus dice game) analyzing their UI/UX design, user onboarding flows, and implementation quality. The reviewer provides specific feedback on improving native feel, visual consistency, animation patterns, paywall design, and emotional engagement in game interfaces. Key takeaways include the importance of native UI components, proper haptic feedback, smooth transitions with reanimated, and making games feel alive with animations and visual effects.

  17. 17
    Video
    Avatar of wdsWeb Dev Simplified·21w

    I Love the NEW CSS Functions

    CSS now supports custom functions using the @function syntax, enabling developers to create reusable logic like responsive sizing and color manipulation. Functions follow CSS cascade rules, use the 'result' property instead of return statements, support default parameters and type annotations, and can be overridden using CSS layers. Practical examples include building a transparency function and a responsive value switcher that adapts based on media queries.

  18. 18
    Article
    Avatar of syncfusionSyncfusion·21w

    Introducing Liquid Glass UI in .NET MAUI: Elevate Your App Design

    Syncfusion introduces Liquid Glass UI for .NET MAUI, bringing glassmorphism effects to cross-platform applications. The feature leverages Apple's UIVisualEffectView to create blurred backgrounds, adaptive color tinting, and light refraction effects on iOS and macOS. Implementation involves wrapping controls with SfGlassEffectView, enabling the effect property, and customizing blur styles, corner radius, and shadows. The effect works across Syncfusion's .NET MAUI controls including DataGrid, Charts, and Image Editor, providing native performance while maintaining accessibility.

  19. 19
    Article
    Avatar of rubylaRUBYLAND·24w

    De-emphasize scrollbars in small containers

    CSS provides scrollbar-color and scrollbar-width properties to customize scrollbar appearance in small containers like popovers. Setting scrollbar-color to lightgray transparent and scrollbar-width to thin creates a more subtle, de-emphasized scrollbar that doesn't dominate the UI.

  20. 20
    Article
    Avatar of collectionsCollections·24w

    New CSS Properties for Responsive Text Sizing: text-grow and text-shrink

    Chrome Canary 145 introduces experimental CSS properties `text-grow` and `text-shrink` that enable automatic text resizing to fit container widths. These properties support multiple scaling methods including font-size adjustments, letter-spacing, and inline scaling, with options for per-line or consistent fitting. While promising for responsive typography without JavaScript, accessibility concerns remain around font enlargement and interactions with line-heights, paragraph endings, and inline images. The feature is in early discussion at the CSS Working Group.

  21. 21
    Article
    Avatar of rubylaRUBYLAND·24w

    Avoid layout shift with scrollbar-gutter: stable

    The scrollbar-gutter: stable CSS property prevents layout shift when hiding scrollbars. When opening popovers or dialogs with overflow: hidden, content typically shifts horizontally to fill the scrollbar's space. This property reserves space for the scrollbar even when hidden, eliminating the jarring horizontal movement and maintaining consistent layout.

See all UI Design archives