80 LEVEL·49wClean Animation on Glass Buttons
Reijo creates stunning glass-like button animations using Blender, featuring smooth flipping motions and candy-like visual effects. The artist's 3D work includes interactive UI elements like yes/no options and login forms, showcasing advanced motion design techniques for creating realistic glass materials and smooth button interactions.
Medium·48w14 logic-driven UI design tips to improve any interface
A comprehensive guide presenting 14 practical UI design principles based on logic rather than intuition. Covers essential topics including proper spacing using 8-point grids, WCAG accessibility contrast ratios (3:1 for UI elements, 4.5:1 for text), button hierarchy and target sizes, typography best practices, and visual consistency. Demonstrates these principles by transforming a poorly designed profile page interface, addressing issues like inadequate contrast, confusing navigation, poor spacing, and accessibility problems. Emphasizes that good UI design follows structured guidelines rather than artistic instinct.
LogRocket·51wWhen to use Flexbox and when to use CSS Grid
CSS Flexbox excels at one-dimensional layouts for aligning items in rows or columns, making it perfect for UI components and simple alignment tasks. CSS Grid handles two-dimensional layouts with both rows and columns simultaneously, ideal for complex page structures. The key principle is using Grid for overall layout architecture and Flexbox for component-level alignment. Both systems can be combined effectively - Grid for the main page structure and Flexbox within individual sections for precise element positioning. Modern web development benefits from understanding when each tool serves its purpose best rather than trying to force one solution for all layout needs.
Collections·50wA Guide to Creating Blurry Glass Effects with CSS
Glassmorphism creates modern frosted glass effects in web design using CSS techniques like backdrop-filter, radial gradients, and pseudo-elements. Basic approaches use gradient backgrounds and borders for solid backgrounds, while advanced methods employ CSS masks and backdrop filters for true transparency. A Glassmorphism CSS Generator tool based on Glass UI library provides ready-to-use code snippets with MIT licensing, offering backdrop-filter blur effects and browser compatibility information for streamlined implementation.
YouTube·47wClaude Designer is insane...Ultimate vibe coding UI workflow
A developer demonstrates how to customize Claude Code into a UI design tool using parallel agents, custom commands, and Git worktrees. The workflow involves creating multiple sub-agents that simultaneously generate different UI variations, allowing 10x faster iteration. Key features include claude.md for custom rules, command templates for reusable workflows, and Git worktree for managing multiple development sandboxes. The author also introduces a Cursor extension called SuperDesign that integrates these capabilities into a visual interface for UI experimentation and iteration.
YouTube·48w3 Ways to Build Beautiful Websites Using Cursor AI
Three methods to create professional-looking websites using Cursor AI: cloning existing designs by creating JSON design systems, using customizable component libraries like Shad CN UI through Tweak CN, and integrating premium React components from libraries like React Bits. The guide emphasizes being specific with AI prompts, choosing appropriate fonts and animations, and implementing responsive layouts to achieve professional results instead of generic AI-generated designs.
Medium·47wTop UI/UX design trends to watch in 2025
UI/UX design in 2025 focuses on intelligent design systems with AI-assisted components, meaningful microinteractions, and subtle personalization. Key trends include voice UI integration, accessibility as a foundation rather than afterthought, smarter Figma workflows, motion design integration, trust-building interfaces, and adaptive UI that responds to user environment. The emphasis shifts from following trends blindly to understanding user needs and creating purposeful, accessible experiences.
CSS-Tricks·47wCSS-Tricks
KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts.
Twitter X·49wLiquid Glass for VueJS
A Vue.js library that provides glassmorphism UI components with translucent, frosted glass visual effects. The library offers pre-built components that implement the popular glass design trend using CSS backdrop filters and transparency effects, making it easy for developers to add modern glass-like interfaces to their Vue applications.
Lobsters·51wPhysicality: the new age of UI
A comprehensive exploration of iOS design evolution from skeuomorphic to flat design, leading to a prediction of the next era focused on 'physicality' and dynamic glass-like interfaces. The author analyzes how VisionOS design principles might influence future iOS redesigns, proposing a 'Living Glass' concept where UI elements behave like real materials with dynamic lighting, reflections, and spatial depth. The piece examines the technical and design challenges of implementing such interfaces across Apple's ecosystem.
Community Picks·49wObra Icons
Obra Icons is a comprehensive icon library featuring over 1,000 simple and consistent icons designed specifically for user interfaces. The collection includes a wide variety of categories from basic UI elements (arrows, buttons, navigation) to specialized icons for business, technology, entertainment, and everyday objects. Each icon follows a consistent design language making them suitable for cohesive interface design across web and mobile applications.
DesignCourse·50wThe UX Designer Died in 2025
Shopify has eliminated UX designer titles, simplifying roles to just 'designer' and 'writer'. The author argues that UX design became unnecessarily complex with jargon when it's fundamentally about creating usable interfaces. They contend that good UI designers inherently understand UX through experience, and that the best way to learn UX is by building real products using modern AI tools like Cursor and Bolt, then measuring results with analytics.
CodePen·49wChris’ Corner: Liquid Ass – CodePen
The liquid glass design trend is gaining popularity among developers, with CSS implementations using backdrop-filter blur effects to create frosted glass appearances. While visually appealing and demonstrated by Apple in their recent designs, this trend raises accessibility concerns due to poor text contrast ratios. The effect has been around for years but is experiencing renewed interest, with developers creating various implementations and tutorials.
YouTube·51wStitch AI: Google's New FREE AI Tool Creates Stunning UI In A Single Click!
Google launched Stitch AI, a free beta tool that generates UI designs for mobile and web apps from text prompts. Users can describe their desired interface, and the AI creates multiple screens within seconds. The tool supports theme customization, direct Figma integration, and experimental image-based design generation. Stitch allows iterative editing through conversational prompts and exports designs directly to Figma for further development.
ThePrimeTime·48wThe Decline Of Usability
A critique of modern user interface design trends, arguing that contemporary UIs have become less usable despite claims of improvement. The discussion covers fundamental usability principles like affordances and consistency, examines how industry standards evolved from early computing systems, and critiques modern design paradigms that prioritize aesthetics over functionality. The author argues that experienced users are being alienated by interfaces that remove time-tested UI elements in favor of minimalist designs that lack clear visual cues and intuitive operation.
Prismic·47wCSS Flexbox vs Grid: Complete Guide & When to Use Each
CSS Flexbox and Grid are powerful layout systems that revolutionized web design. Flexbox excels at one-dimensional layouts (rows or columns) and is ideal for component-level layouts like navigation bars and cards. Grid handles two-dimensional layouts (rows and columns simultaneously) and works best for page-level layouts and complex designs. Key differences include Flexbox being content-first and flow-driven, while Grid is container-first with precise element placement. The guide covers essential properties like flex-direction, justify-content, align-items for Flexbox, and grid-template-areas, subgrid for Grid. Best practice is using Grid for macro-layouts and Flexbox for micro-layouts within components.
JetBrains·49wTesting a Fresh Look for JetBrains IDEs
JetBrains introduces two new UI styles called One Island and Many Islands in their 2025.2 EAP release, available in both dark and light modes. The visual update aims to modernize the interface, improve clarity between editor and tool windows, and align with JetBrains' broader design language across products like Toolbox and Fleet. Users can test both styles and provide feedback through surveys to help determine which becomes the new default theme.
80 LEVEL·49wMan Joked He Was Fired for Apple's New Liquid Glass Design
Apple introduced Liquid Glass, a semi-transparent design at WWDC25 that drew comparisons to Windows Vista's Aero interface. A developer named Jon Yongfook successfully trolled the internet by falsely claiming Apple fired him for the design, leading some outlets to report it as real news. The design sparked various recreation attempts by artists using CSS, SVG, and Blender, with notable contributions from Blender creator Jesse Miettinen who created a glass-like interface parody.
LogRocket·49w7 common CSS navigation menu mistakes and how to fix them
Navigation menus commonly suffer from seven key issues: dropdowns that disappear too quickly when users move their cursor, over-reliance on absolute positioning without proper constraints, using only hover states which breaks mobile functionality, inadequate touch target sizes below WCAG guidelines, hiding elements with display:none which breaks screen reader access, poor stacking context management causing z-index conflicts, and non-responsive layouts that break on smaller screens. Each problem can be solved with specific CSS techniques like transition delays, proper positioning contexts, focus-within selectors, minimum 44px touch targets, opacity/visibility combinations, intentional z-index usage, and flexible layouts.
Kevin Powell·51wMake an animated glowing border effect with CSS
A comprehensive tutorial demonstrating how to create an animated glowing border effect using pure CSS, inspired by Google's AI search interface. The technique uses conic gradients, pseudo-elements, and CSS custom properties to achieve a dynamic glow that works with any background color and supports both light and dark themes. The implementation includes positioning tricks with z-index and stacking contexts, blur filters for the glow effect, and registered custom properties for smooth animations. The tutorial also covers creating variants for different border positions and making the effect easily customizable through CSS variables.
Fireship·50wApple redefines reality (again) at WWDC25…
Apple announced native Linux containerization for macOS at WWDC 2025, allowing developers to run containers without Docker Desktop through optimized VMs on Apple Silicon. The company introduced 'liquid glass' as their new design language for iOS 26, emphasizing transparency effects. Swift received updates including Java interoperability and C/C++ mixing capabilities. Apple downplayed AI features this year after previous struggles, while simultaneously releasing research questioning the intelligence of large language models.
UX Planet·49wUI design tip: Try to avoid using multiple alignments
Using multiple text alignments (left, right, center) within a single interface component creates visual complexity and increases cognitive load for users. Sticking to one primary alignment, preferably left-aligned text, creates cleaner, more readable interfaces. The principle is demonstrated through examples showing how mixed alignments force users' eyes to zigzag across content, while consistent alignment creates a tidier appearance and improves usability.
Community Picks·48wLiquid Glass with refractions in CSS
Demonstrates how to create Apple-inspired liquid glass effects with refraction using SVG filters combined with CSS. The technique involves using SVG filter elements like turbulence, Gaussian blur, displacement mapping, and specular lighting to achieve realistic glass distortion effects that bend and refract background content. While the effect requires SVG filters rather than pure CSS, it can be implemented by copying the provided filter code and applying it via CSS filter property.
Fullstack Empire·47wGet 30+ FREE 3D Fintech wallet illustrations
A collection of 30+ free 3D fintech wallet illustrations is available for download, featuring wallets, coins, QR codes, and payment scenes without faces. The assets are designed for mobile app UI, mockups, and fintech presentations, accessible through a Figma design file.
