Smashing Magazine

🌈 Go behind the scenes with Björn Ottosson, the Swedish engineer who created Oklab color space, and discover how he developed a simple yet effective model with good hue uniformity while also handling lightness and saturation well — and is “okay” to use: https://www.smashingmagazine.com/2024/10/interview-bjorn-ottosson-creator-oklab-color-space/

🌐 Success in modern UX isn’t about having the most content. It’s about having the most findable content. Yet even with more data and better tools than ever, internal search often fails, leaving users to rely on global search engines to find a single page on a site. Why does the “Big Box” still win, and how can we bring users back? https://www.smashingmagazine.com/2026/03/site-search-paradox-why-big-box-always-wins/

✨ You’ve probably been there before. How do you choose between showing a modal to users and navigating them to a separate, new page? And does it even matter?

Here’s when to use modals, when to avoid them, and how to get the level of interruption or navigation just right: https://www.smashingmagazine.com/2026/03/modal-separate-page-ux-decision-tree/

For years, developers have been hacking around the limitations of border-radius, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new corner-shape property finally changes that, opening the door to beveled, scooped, and squircle corners: https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/

✨ CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work: https://www.smashingmagazine.com/2025/12/masonry-things-you-wont-need-library-anymore/

✨ CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript.

↬ Here’s an unpacking of the highlights and how they connect to the broader evolution of modern CSS: https://www.smashingmagazine.com/2025/12/state-logic-native-power-css-wrapped-2025/

🚀 It’s 2026. The web is faster, more fluid, and more powerful than ever. Yet we’re still chasing “pixel perfect.”

↬ Amit Sheen questions this legacy concept that no longer fits how we design and build today, explaining why it’s failing us and redefining what “perfection” actually looks like: https://www.smashingmagazine.com/2026/01/rethinking-pixel-perfect-web-design/

🎯 We often see design principles as rigid guidelines that dictate design decisions. In reality, they are an incredible tool for rallying teams around a shared purpose and capturing the values an organization embodies. But how do we choose the right ones? https://www.smashingmagazine.com/2026/04/practical-guide-design-principles/

With component variants, design systems become more flexible, allowing you to reuse components while easily adapting their appearance or state.

↬ Daniel Schwarz on how to manage them with design tokens in Penpot, the open-source tool for scalable, consistent design: https://www.smashingmagazine.com/2025/11/how-leverage-component-variants-penpot/

(This article is supported by Penpot 💖 )

♻️ Every high-resolution hero image, autoplay video, and complex JS animation carries a cost. Sustainable UX challenges the era of “unlimited pixels” and reframes performance as responsibility: https://www.smashingmagazine.com/2026/02/designer-guide-eco-friendly-interfaces/

🚀 Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new @Scope@mastodon.social rule finally give developers the confidence to write CSS that can keep up with modern front ends? https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/

🧩 In CSS, stacking contexts are incredibly useful, but they’re also widely misunderstood and cause layout headaches.

↬ Learn how elements are “stacked” on a webpage, what controls the stacking order, and how to “unstack” them when needed: https://www.smashingmagazine.com/2026/01/unstacking-css-stacking-contexts/

🎨 Relative colour doesn’t just make theming easier. It encourages a way of thinking where colour, like motion, is intentional — and where changing one value can transform an entire scene without rewriting the work beneath it.

↬ Andy Clarke shares practical techniques for using CSS relative colour values to theme and animate SVG graphics: https://www.smashingmagazine.com/2026/01/smashing-animations-part-8-css-relative-colour/

🎬 Design isn’t only pixels and patterns. It’s pacing and feelings, too. Alan Cohen explores Emotion in Flow vs. Emotion in Conflict, showing how anime and Marvel/DC films manage emotional shifts and what product design can learn from them: https://www.smashingmagazine.com/2026/03/anime-marvel-dc-designing-digital-products-emotion-flow/

⏱️ Almost any kind of application written in JavaScript works with dates or times in some capacity. Initially, this was limited to the built-in Date API, then Moment.js, and now the new Temporal standard has landed.

↬ Here are practical “recipes” for migrating Moment-based code to the new Temporal API: https://deploy-preview-10644--smashing-prod.netlify.app/2026/03/moving-from-moment-to-temporal-api/

Some forms stay UI. Others quietly become rule engines. 🎨⚙️

Why do these two approaches exist? And how do you choose between them? https://www.smashingmagazine.com/2026/03/building-dynamic-forms-react-next-js/

🧩 Many product teams still lean on usability improvements and isolated behavioral tweaks to address weak activation, drop-offs, and low retention – only to see results plateau or slip into shallow gamification.

↬ A decade later, Anders Toxboe revisits persuasive design, clarifying what still holds up and how modern frameworks can guide both discovery and ideation: https://www.smashingmagazine.com/2026/03/persuasive-design-ten-years-later/

🎯 Developing effective agentic AI requires a new research playbook. When systems plan, decide, and act on our behalf, UX moves beyond usability testing into the realm of trust, consent, and accountability. Victor Yocco explains how to design these systems responsibly: https://www.smashingmagazine.com/2026/01/beyond-generative-rise-agentic-ai-user-centric-design/

✨ How to shape your career path for 2026, with decision trees for designers and a UX skills self-assessment matrix.

↬ The only limits for tomorrow are the doubts we have today: https://www.smashingmagazine.com/2026/01/ux-product-designer-career-paths/

Penpot is experimenting with MCP (Model Context Protocol) servers 🤖🎨
What if AI could understand and interact directly with your Penpot design files?

↬ Here’s how Penpot MCP servers work, what they could mean for creating and managing designs, and how you can help shape their future: https://www.smashingmagazine.com/2026/01/penpot-experimenting-mcp-servers-ai-powered-design-workflows/

🔍 Explainable AI isn’t just a challenge for data scientists. It’s also a design challenge and a core pillar of trustworthy, effective AI products.

↬ Victor Yocco offers practical guidance and design patterns for building explainability into real products: https://www.smashingmagazine.com/2025/12/beyond-black-box-practical-xai-ux-practitioners/

Would you like to get featured in our upcoming wallpapers post? We’re still taking submissions for December, so don’t hesitate to join in. We’d love to see your story come to life!

📷 Join in: https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/

🤖 Server chaos doesn’t have to be the norm. Explore how AI-ready infrastructure and automation can bring clarity, performance, and focus back to your web work: https://www.smashingmagazine.com/2025/11/simplifying-server-management-ai-automation/

There are lots of tips for improving your website performance. But even if you follow all the advice, can you maintain an optimized site? And are you targeting the right pages?

↬ Matt Zeunert outlines an effective strategy for web performance optimization and explains the roles that different types of data play in it: https://www.smashingmagazine.com/2025/11/effectively-monitoring-web-performance/

(This article is supported by DebugBear 💖)

✨ Accessibility works best when it blends into everyday design workflows. The goal isn’t a big transformation, but simple work processes that fit naturally into a team’s routine. With Figma variables, testing font size increases becomes part of the design flow itself, making accessibility feel almost inevitable rather than optional: https://www.smashingmagazine.com/2026/03/testing-font-scaling-accessibility-figma-variables/

🧩 Dropdowns often work perfectly until they’re placed inside a scrollable panel, where they can get clipped, and half the menu disappears behind the container’s edge.

↬ Godstime Aburu explains why this happens and offers practical solutions to fix it: https://www.smashingmagazine.com/2026/03/dropdowns-scrollable-containers-why-break-how-fix/