Best of UI Design — September 2025

1
Article
Hacker News·36w
Why our website looks like an operating system
PostHog redesigned their website to function like an operating system, featuring window management, keyboard shortcuts, and multitasking capabilities. The design addresses the common problem of managing multiple tabs on technical websites by allowing users to open and arrange multiple pages simultaneously within a single browser window. The implementation includes OS-inspired UI elements like file explorers, PowerPoint-style presentations, and spreadsheet layouts, built using TypeScript and Tailwind CSS with a JSON-driven content architecture.
857
73
2
Article
Flavio Copes·37w
The CSS Handbook, 2025 edition
Flavio Copes has released an updated 2025 edition of his CSS Handbook, covering modern CSS features like container queries, cascade layers, CSS nesting, and new color spaces. The comprehensive guide spans from fundamentals like selectors and the box model to advanced topics including CSS Grid, responsive design, animations, and best practices for maintainable code.
253
15
3
Article
UX Planet·35w
Hero Images are Dead. These Solutions are Replacing Them.
Traditional full-width hero images are becoming ineffective for modern websites. Three better alternatives are emerging: half-page heroes that balance imagery with actionable text, anti-hero designs that prioritize clear CTAs over visuals, and search-first approaches for high-intent users. These solutions improve conversion rates by reducing cognitive load, enhancing mobile performance, and providing clearer user pathways. The key is matching the hero style to user intent and business goals rather than following generic design trends.
194
5
4
Article
Hacker News·36w
“Your” vs “My” in user interfaces
Explores the choice between using "your" vs "my" pronouns in user interfaces when referring to user-owned content. Recommends using "your" when the system communicates to users (navigation, labels) and "my" when users communicate to the system (form inputs, radio buttons). Often, no pronoun is needed at all - simple labels like "Account" or "Orders" work best when context is clear.
91
3
5
Article
JetBrains·35w
Islands Theme: The New Look Coming to JetBrains IDEs
JetBrains is introducing the Islands theme, a new visual design for their IDEs starting with version 2025.2.3. Available in both dark and light modes, this theme provides a modern look with better separation between editor and tool windows, improved tab visibility, and enhanced navigation. The theme was selected based on user feedback from surveys, A/B tests, and interviews during the 2025.2 EAP. Users can enable it in Appearance settings and are encouraged to provide feedback through surveys, with participants eligible for prizes including Amazon gift cards or JetBrains subscriptions.
90
3
6
Article
WeProDev·37w
A powerful UI library to design e-commerce web sites
A specialized UI library and design system specifically created for building e-commerce websites. The kit provides pre-built components and design patterns to help developers create online shopping platforms similar to major marketplaces like Amazon, Alibaba, and eBay.
78
4
7
Article
DevBlogs·34w
Announcing WinUI Gallery 2.7
WinUI Gallery 2.7 introduces sample history and favorites functionality, new samples for TitleBar and ThemeShadow controls, upgraded StoragePicker APIs with Windows App SDK 1.8, fresh typography and button styles, and over 100 community-driven improvements including accessibility fixes and UI polish.
71
8
Article
Atlassian·37w
Behind the screens: Building Atlassian’s new icon system
Atlassian redesigned their entire icon system after six years, moving from 350+ inconsistent icons to a unified system with thinner strokes, consistent sizing, and better visual harmony. The project included building Icon Lab for team contributions, creating automated migration tools, and establishing clear naming conventions. Over 275 new icons have been contributed, with migration tools handling 16,000+ code changes across their products.
59
1
9
Article
Zubair Ahmed Rafi·37w
How to keep your users focus on the screen
Explores how natural human visual patterns influence digital interface design. Discusses the thumb-width focal range used by major platforms like LinkedIn and Facebook to maintain user focus, and explains F-shaped reading behavior in search interfaces where users read the first line fully, skim the second, then lose attention downward. Emphasizes that effective design guides attention rather than filling space.
39
2
10
Article
WeProDev·36w
Gradientscss: Beautiful gradients for your next project.
GradientCSS is an open-source tool that provides a curated collection of modern gradients for web projects. It offers one-click copying and exporting in multiple formats including CSS, Tailwind, SCSS, SVG, and images. The tool features live preview, animation controls, and supports various color formats without requiring user registration.
33
2
11
Article
Codrops·36w
The Journey Behind inspo.page: A Better Way to Collect Web Design Inspiration
A designer shares the story behind creating inspo.page, a curated platform for discovering specific web design elements like animations, micro-interactions, and component-level inspiration. The platform uses three filter systems (What, Where, Motion) to help designers find precise design elements rather than just full websites. Built with Astro and Sanity, it features an automated curation system and focuses on the human touch details that AI can't replicate in web design.
26
12
Article
CSS-Tricks·36w
What Can We Actually Do With corner-shape?
The corner-shape CSS property enables creating various UI effects beyond traditional rounded corners, including snipped corners, slanted sections, sale tags, tooltips, and squircles. Currently supported only in Chrome 139+, it works alongside border-radius to create beveled, scooped, notched, and squircle corner shapes. Examples demonstrate practical applications like arrow breadcrumbs, realistic text highlighting, and background clipping techniques.
25
1
13
Article
Lobsters·34w
Checkboxes that kill your product
Firefox ships with numerous settings that can completely break the browser experience for users, including options to disable images, JavaScript, SSL/TLS, and navigation toolbars. These dangerous checkboxes exist due to historical reasons and design-by-committee decisions. The author argues that features used by less than 2% of users should be moved to add-ons rather than exposed in main settings, as they can render the browser unusable and harm the product's reputation when accidentally triggered by regular users.
21
5
14
Article
80 LEVEL·35w
Check Out Reflections & Refractions in This Cool Liquid Glass UI
3D Artist Guulu created a mesmerizing liquid glass UI effect using Unity, showcasing realistic reflections and refractions with variations including glossy and frosted glass surfaces. The prototype demonstrates high-quality visual effects with different blur levels and captivating light interactions, though it's not tied to any specific game project.
14
15
Article
Codrops·35w
Motion Highlights #13
A curated collection of 21 motion design and animation examples from various creators, featuring typography animations, UI transitions, WebGL experiments, and interactive elements. Includes work from platforms like Instagram, LinkedIn, and Twitter, showcasing techniques ranging from simple smooth transitions to complex WebGL implementations with Three.js and GSAP.
13
16
Article
CodePen·37w
Chris’ Corner: Simple, Accessible Multi-Select UI – CodePen
Demonstrates how to create an accessible multi-select checkbox interface using vanilla HTML and CSS instead of React Native. Shows proper semantic markup with label elements, screen reader accessibility, focus management, and smooth animations using CSS transitions and the :has() selector. Emphasizes that complex UI interactions don't always require JavaScript frameworks.
11
1

See all UI Design archives