Best of UI Design — October 2025
- 1
- 2
The Miners·30w
The 5 UI fundamentals a developer must know
Five essential UI design principles that developers should understand: color theory and application, typography fundamentals including typeface selection and spacing, visual hierarchy through size and contrast, contrast for emphasis and accessibility, and proper alignment for order and readability. Each principle includes practical tips and guidelines for creating better user interfaces without formal design training.
- 3
Frontend Masters·31w
The Two Button Problem – Frontend Masters Blog
Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next. The problem is especially pronounced on devices without cursors (TVs, game consoles) where keyboard or remote navigation is required. Solutions include using consistent button styles with additive indicators for the active state, directional arrows, CSS media queries to detect input methods, and pressed/unpressed visual states for toggle buttons. The key principle is making the active state obviously distinct rather than relying on arbitrary style differences.
- 4
Ahmad Shadeed·30w
Solved By Modern CSS: Section Layout
A comprehensive guide to building adaptive section layouts using modern CSS features. Demonstrates how to create responsive card grids that automatically adjust based on content quantity using CSS Grid, container queries, the :has() selector, and quantity queries. Covers fluid typography with clamp() and container query units, conditional styling for cards with and without images, featured layout variations, and handling edge cases like orphaned items and long content. Includes practical solutions for common layout challenges and showcases experimental features like CSS random().
- 5
tonsky.me·32w
I am sorry, but everyone is getting syntax highlighting wrong
A critical examination of syntax highlighting design principles argues that most color themes fail by highlighting too many elements, making nothing stand out. The author advocates for minimalist approaches using only 3-4 memorable colors, highlighting sparse elements like constants and top-level definitions rather than ubiquitous ones like variables and keywords. Key recommendations include making comments prominent instead of grey, using background colors for light themes, and prioritizing readability over uniform color distribution. The piece demonstrates these principles through the author's Alabaster theme, showing step-by-step how reducing visual noise improves code navigation and comprehension.
- 6
Hacker News·30w
ShadCN Themes - Create Beautiful Themes for shadcn/ui
A theme gallery and customization tool for shadcn/ui that allows developers to browse, create, and export custom themes. Features include color customization with OKLCH color picker, font selection, design tokens, CSS variables, and one-click export functionality for React and Tailwind CSS projects.
- 7
80 LEVEL·34w
Juicy UI For Pixel Art-Style 4X Game Made With Godot
PLVS VLTRA is a turn-based 4X strategy game built with Godot featuring an economy dashboard that visualizes complex financial data through line graphs, pie charts, and detailed breakdowns. The game integrates UI design with gameplay mechanics, where the dashboard reflects player decisions made through a Laws & Policies system and Imperial Cabinet interactions. The project demonstrates how data visualization can serve as both an informational tool and strategic gameplay element in indie game development.
- 8
UX Planet·32w
Common UX mistakes everyone still makes 2.0
Explores six persistent UX mistakes developers make when building applications, particularly in low-code environments. Covers consistency in design systems, interaction patterns, whitespace management, widget selection, choosing between tables and layout grids, and understanding cards versus panels. Emphasizes following established design system guidelines over personal preferences and provides practical rules for making better UX decisions.
- 9
Liquid Glass Is Cracked, and Usability Suffers in iOS 26
iOS 26's new Liquid Glass visual language prioritizes aesthetics over usability, introducing translucent UI elements that obscure content, animated buttons that distract users, and smaller tap targets that violate established guidelines. The update breaks long-standing iOS conventions by moving search to the bottom, removing breadcrumbs from back buttons, and adopting Android-style design patterns. Controls now appear and disappear unpredictably, making the interface harder to learn. The emphasis on visual effects creates readability issues with text overlaying images and other text, while constant animations compete for attention instead of supporting content.
- 10
Linear·31w
A Linear spin on Liquid Glass
Linear rebuilt Apple's Liquid Glass design system from scratch for their mobile app redesign, creating custom SwiftUI shaders and visual effects to maintain design flexibility while supporting customizable navigation. The team implemented their own glass material using Gaussian blur, signed distance fields, and GPU-calculated lighting instead of adopting Apple's APIs, allowing them to support iOS 18 users and build expandable tab bars that adapt to different user roles. The custom implementation includes tactile feedback, variable blur effects, and accessibility features like Increase Contrast mode support.
- 11
Reid Burke·30w
claude-cookbooks/coding/prompting_for_frontend_aesthetics.ipynb at 293cde3d3fe1e29ce90b535ccfd311c289302d0c · anthropics/claude-cookbooks
A Jupyter notebook cookbook from Anthropic demonstrating techniques for prompting Claude to generate aesthetically pleasing frontend code. Part of a collection showcasing effective ways to use Claude for coding tasks, specifically focused on improving visual design outcomes through better prompting strategies.
- 12
Intuitive Interfaces: What Actually Makes Them Clear
Explores the core principles that make interfaces truly intuitive, emphasizing that clarity comes from systematic work rather than templates. Covers how visual quality, meeting user expectations, understanding audience cognitive load, and mapping user scenarios all contribute to reducing friction. Argues that designers must adapt interfaces to users rather than forcing users to adapt, and highlights how these principles will remain relevant as interfaces evolve toward voice, gesture, and AR/VR interactions.
- 13
LogRocket·30w
I think the next UX era will shock us: Here are my 3 big predictions
Explores the evolution of UI/UX design through five historical eras and makes three predictions for the future: hyperminimalism (extreme reduction of visual clutter), maximinimalism (combining minimalist simplicity with maximalist energy), and fictional futurism (sci-fi inspired interfaces). Examines how companies like Google, Medium, and Tesla are already experimenting with these concepts, and discusses how technological innovations, design trends from tech giants, and cross-industry influences will shape the next design era.
- 14
CSS Tip·32w
Conditional Border Radius with Modern CSS
Learn how to dynamically toggle border-radius values based on container or screen size using a single line of modern CSS. The technique uses container query units (100cqi) with a fallback to viewport width (100vw) to automatically set border-radius to 0 when an element reaches full width, otherwise maintaining a default radius of 2rem.
- 15
Qt·33w
Qt 6.10 Released!
Qt 6.10 introduces a flexbox layout system for responsive UIs, animated vector graphics support for SVG and Lottie formats, and a new SearchField control. The release simplifies C++ to QML data integration with QRangeModel for exposing C++ ranges to item views, delegateModelAccess for two-way bindings, and TreeModel for declarative tree structures. Accessibility improvements include automatic high-contrast mode support across platforms. Android developers get official support for Android 15/16, Qt Jenny 1.0 for JNI code generation, and improved splash screen handling. The release adds macOS 26 support, WebView2 backend for Qt WebView on Windows, and PipeWire support for Qt Multimedia on Linux.
- 16
UI Design with ChatGPT 5
Demonstrates how to use ChatGPT 5 to generate UI designs for a mobile food delivery app through structured prompts. Covers the complete workflow from writing detailed markdown prompts to generating visual mockups, exporting to Figma, and producing working code. Includes practical tips for effective prompt writing, such as using markdown formatting, describing layout and style explicitly, and maintaining clear hierarchy. Shows improvements over ChatGPT 4o in following design specifications and producing cleaner outputs.
- 17
Figma·30w
Schema 2025: Design systems for a new era
Figma announced major design system updates at Schema 2025, including Extended Collections for multi-brand management, Slots for flexible component instances, and Check Designs for automated design system compliance. The updates bridge design and code through Code Connect UI and Figma MCP server integration with agentic coding tools. New features enable design systems in Figma Make through Make kits and npm package imports, while quality-of-life improvements include native DTCG 1.0 variable import/export, expanded variable modes (up to 20), and enhanced authoring experience. These changes aim to maintain craft quality as AI tools democratize product development across teams.
- 18
Why Framer might just replace your entire web design stack
Framer is positioning itself as a comprehensive web design solution that consolidates multiple tools into one platform. The tool offers an integrated workflow from AI-powered wireframing through to instant website publishing, potentially eliminating the need for separate design, prototyping, and deployment tools in the web design process.
- 19
R-bloggers·30w
Tabler 0.1.0 is here!
Tabler 0.1.0 is a new dashboard framework for R Shiny built on the Tabler Dashboard design system. Released under Apache 2.0 license, it offers 13 different layout options including boxed, combo, fluid, vertical, and RTL modes, with customizable themes and colors. The package provides flexibility for creating modern dashboards with sidebar navigation, top navbars, and various styling options. Installation is available through R-Universe or GitHub, with comprehensive documentation and examples demonstrating integration with visualization libraries like d3po.
- 20
iOS 26: Beyond Liquid Glass
iOS 26 introduces the Liquid Glass design material, bringing significant interface changes including floating bottom navigation, repositioned search functionality, and enhanced motion design. The update moves primary actions to the bottom for better ergonomics, hides the home indicator to reduce clutter, and creates a more fluid, tactile user experience. While the aesthetic is visually striking, some inconsistencies exist across apps, and the material's effectiveness depends heavily on wallpaper choice. The changes represent a thoughtful evolution in Apple's design language, balancing visual innovation with usability improvements for larger screens.
- 21
- 22
Use Cases for Field Sizing
The CSS field-sizing property enables input fields and select menus to automatically resize based on their content, eliminating the need for JavaScript. Currently supported only in Chrome, it works by setting field-sizing: content on form elements. Use cases include conversational forms, pagination controls, URL inputs with prefixes/suffixes, and dynamic hero sections. The property respects placeholder text as minimum width and works well with max-width constraints for responsive layouts. It functions as a progressive enhancement, maintaining normal behavior in unsupported browsers.
- 23
Android Developers Blog·30w
Android Developers Blog: Material 3 Adaptive 1.2.0 is stable
Material 3 Adaptive 1.2.0 brings expanded window size class support with new Large and Extra-large breakpoints, plus two new layout strategies: reflow (automatically rearranges panes based on window dimensions) and levitate (docks or floats content with customizable features). Built on WindowManager 1.5.0, these additions help developers create adaptive layouts for ListDetailPaneScaffold and SupportingPaneScaffold with minimal effort across different screen sizes and aspect ratios.
- 24
Claude For Code: How to use Claude to Streamline Product Design Process
Claude can accelerate UI design workflows through three key capabilities: converting design mockups into HTML/TailwindCSS prototypes for quick demos, transforming Figma component specifications into React components and CSS variables for design systems, and generating animation code using Framer Motion for micro-interactions. The tool bridges the gap between design and code, enabling designers to create functional prototypes and maintain design system consistency without deep coding expertise.
