--- title: Best UI Design posts — June 2025 | daily.dev description: The most upvoted UI Design posts from June 2025, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2025/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2025/06 og:type: website og:site_name: daily.dev og:title: Best UI Design posts — June 2025 | daily.dev og:description: The most upvoted UI Design posts from June 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of UI Design — June 2025 1. 1 [](https://daily.dev/posts/clean-animation-on-glass-buttons-wsepw2tfq "Clean Animation on Glass Buttons") Article 80 LEVEL · 1y Clean 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. 378 19 2. 2 [](https://daily.dev/posts/14-logic-driven-ui-design-tips-to-improve-any-interface-zgcm5q85j "14 logic-driven UI design tips to improve any interface") Article Medium · 1y 14 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. 253 9 3. 3 [](https://daily.dev/posts/when-to-use-flexbox-and-when-to-use-css-grid-a0ordufku "When to use Flexbox and when to use CSS Grid") Article LogRocket · 1y When 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. 142 4 4. 4 [](https://daily.dev/posts/a-guide-to-creating-blurry-glass-effects-with-css-okey9efoo "A Guide to Creating Blurry Glass Effects with CSS") Article Collections · 1y A 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. 110 5 5. 5 [](https://daily.dev/posts/claude-designer-is-insane-ultimate-vibe-coding-ui-workflow-wj52i1qnq "Claude Designer is insane...Ultimate vibe coding UI workflow") Video YouTube · 1y Claude 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. 102 3 6. 6 [](https://daily.dev/posts/3-ways-to-build-beautiful-websites-using-cursor-ai-ksux6tyr8 "3 Ways to Build Beautiful Websites Using Cursor AI") Video YouTube · 1y 3 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. 100 2 7. 7 [](https://daily.dev/posts/top-ui-ux-design-trends-to-watch-in-2025-haur9qmpz "Top UI/UX design trends to watch in 2025") Article Medium · 1y Top 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. 87 3 8. 8 [](https://daily.dev/posts/css-tricks-csvwwco6p "CSS-Tricks") Article CSS-Tricks · 1y CSS-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. 78 7 9. 9 [](https://daily.dev/posts/liquid-glass-for-vuejs-odg5pl6rl "Liquid Glass for VueJS") Article Twitter X · 1y Liquid 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. 78 3 10. 10 [](https://daily.dev/posts/physicality-the-new-age-of-ui-jfmo43upm "Physicality: the new age of UI") Article Lobsters · 1y Physicality: 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. 73 5 11. 11 [](https://daily.dev/posts/obra-icons-nszy2vwir "Obra Icons") Article Community Picks · 1y Obra 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. 66 3 12. 12 [](https://daily.dev/posts/the-ux-designer-died-in-2025-ckqo6yui9 "The UX Designer Died in 2025") Video DesignCourse · 1y The 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. 58 4 13. 13 [](https://daily.dev/posts/xkcd-alert-sound-fm717dtj7 "xkcd: Alert Sound") Article xkcd · 1y xkcd: Alert Sound An xkcd comic exploring the concept of alert sounds, likely highlighting common issues or humorous observations about how notification sounds are designed or experienced in software applications and user interfaces. 52 1 14. 14 [](https://daily.dev/posts/chris-corner-liquid-ass-codepen-ntzte8g6r "Chris’ Corner: Liquid Ass – CodePen") Article CodePen · 1y Chris’ 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. 50 6 15. 15 [](https://daily.dev/posts/stitch-ai-google-s-new-free-ai-tool-creates-stunning-ui-in-a-single-click--itroatukq "Stitch AI: Google's New FREE AI Tool Creates Stunning UI In A Single Click!") Video YouTube · 1y Stitch 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. 48 16. 16 [](https://daily.dev/posts/the-decline-of-usability-sbmqlwz5o "The Decline Of Usability") Video ThePrimeTime · 1y The 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. 37 5 17. 17 [](https://daily.dev/posts/css-flexbox-vs-grid-complete-guide-when-to-use-each-jttl9gp17 "CSS Flexbox vs Grid: Complete Guide & When to Use Each") Article Prismic · 1y CSS 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. 33 3 18. 18 [](https://daily.dev/posts/testing-a-fresh-look-for-jetbrains-ides-sneqn1vqd "Testing a Fresh Look for JetBrains IDEs") Article JetBrains · 1y Testing 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. 31 1 19. 19 [](https://daily.dev/posts/man-joked-he-was-fired-for-apple-s-new-liquid-glass-design-cgvhwwzfh "Man Joked He Was Fired for Apple's New Liquid Glass Design") Article 80 LEVEL · 1y Man 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. 30 8 20. 20 [](https://daily.dev/posts/7-common-css-navigation-menu-mistakes-and-how-to-fix-them-ecdhmzlvf "7 common CSS navigation menu mistakes and how to fix them") Article LogRocket · 1y 7 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. 28 21. 21 [](https://daily.dev/posts/make-an-animated-glowing-border-effect-with-css-jb8vnjqaq "Make an animated glowing border effect with CSS") Video Kevin Powell · 1y Make 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. 25 1 22. 22 [](https://daily.dev/posts/apple-redefines-reality-again-at-wwdc25--yigwjpuqr "Apple redefines reality (again) at WWDC25…") Video Fireship · 1y Apple 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. 22 3 23. 23 [](https://daily.dev/posts/ui-design-tip-try-to-avoid-using-multiple-alignments-12y3r9tyd "UI design tip: Try to avoid using multiple alignments") Article UX Planet · 1y UI 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. 21 24. 24 [](https://daily.dev/posts/liquid-glass-with-refractions-in-css-2xh5qjhnr "Liquid Glass with refractions in CSS") Video Community Picks · 1y Liquid 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. 19 3 25. 25 [](https://daily.dev/posts/get-30-free-3d-fintech-wallet-illustrations-qxna73pz9 "Get 30+ FREE 3D Fintech wallet illustrations") Article Fullstack Empire · 1y Get 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. 17 [See all UI Design archives](/tags/ui-design/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/ui-design/best-of/2025/06#page","url":"https://daily.dev/tags/ui-design/best-of/2025/06","name":"Best UI Design Posts — June 2025","description":"The most upvoted UI Design posts from June 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2025/06#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/clean-animation-on-glass-buttons-wsepw2tfq","name":"Clean Animation on Glass Buttons"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/14-logic-driven-ui-design-tips-to-improve-any-interface-zgcm5q85j","name":"14 logic-driven UI design tips to improve any interface"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/when-to-use-flexbox-and-when-to-use-css-grid-a0ordufku","name":"When to use Flexbox and when to use CSS Grid"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/a-guide-to-creating-blurry-glass-effects-with-css-okey9efoo","name":"A Guide to Creating Blurry Glass Effects with CSS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/claude-designer-is-insane-ultimate-vibe-coding-ui-workflow-wj52i1qnq","name":"Claude Designer is insane...Ultimate vibe coding UI workflow"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/3-ways-to-build-beautiful-websites-using-cursor-ai-ksux6tyr8","name":"3 Ways to Build Beautiful Websites Using Cursor AI"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/top-ui-ux-design-trends-to-watch-in-2025-haur9qmpz","name":"Top UI/UX design trends to watch in 2025"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/css-tricks-csvwwco6p","name":"CSS-Tricks"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/liquid-glass-for-vuejs-odg5pl6rl","name":"Liquid Glass for VueJS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/physicality-the-new-age-of-ui-jfmo43upm","name":"Physicality: the new age of UI"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/obra-icons-nszy2vwir","name":"Obra Icons"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/the-ux-designer-died-in-2025-ckqo6yui9","name":"The UX Designer Died in 2025"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/xkcd-alert-sound-fm717dtj7","name":"xkcd: Alert Sound"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/chris-corner-liquid-ass-codepen-ntzte8g6r","name":"Chris’ Corner: Liquid Ass – CodePen"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/stitch-ai-google-s-new-free-ai-tool-creates-stunning-ui-in-a-single-click--itroatukq","name":"Stitch AI: Google's New FREE AI Tool Creates Stunning UI In A Single Click!"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/the-decline-of-usability-sbmqlwz5o","name":"The Decline Of Usability"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/css-flexbox-vs-grid-complete-guide-when-to-use-each-jttl9gp17","name":"CSS Flexbox vs Grid: Complete Guide & When to Use Each"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/testing-a-fresh-look-for-jetbrains-ides-sneqn1vqd","name":"Testing a Fresh Look for JetBrains IDEs"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/man-joked-he-was-fired-for-apple-s-new-liquid-glass-design-cgvhwwzfh","name":"Man Joked He Was Fired for Apple's New Liquid Glass Design"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/7-common-css-navigation-menu-mistakes-and-how-to-fix-them-ecdhmzlvf","name":"7 common CSS navigation menu mistakes and how to fix them"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/make-an-animated-glowing-border-effect-with-css-jb8vnjqaq","name":"Make an animated glowing border effect with CSS"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/apple-redefines-reality-again-at-wwdc25--yigwjpuqr","name":"Apple redefines reality (again) at WWDC25…"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/ui-design-tip-try-to-avoid-using-multiple-alignments-12y3r9tyd","name":"UI design tip: Try to avoid using multiple alignments"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/liquid-glass-with-refractions-in-css-2xh5qjhnr","name":"Liquid Glass with refractions in CSS"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/get-30-free-3d-fintech-wallet-illustrations-qxna73pz9","name":"Get 30+ FREE 3D Fintech wallet illustrations"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"UI Design","item":"https://daily.dev/tags/ui-design"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-design/best-of"},{"@type":"ListItem","position":5,"name":"June 2025"}]}]} ```