\\n <!-- TITLE GRAPHIC --\x3e\\n <g>\\n <path … />\\n <!-- ... --\x3e \\n </g>\\n</svg>\\nTrail with Gaussian Blur. (Large preview)
Next, I add the blurred trail from Yogi’s airborne broom. This includes defining a Gaussian Blur filter and placing its path between the background and title layers:
Yogi Bear title card design by Lawrence Goble (1958). Toon Titles recreation. (Large preview)
Since I export each layer from the same-sized artboard, I don’t need to worry about alignment or positioning issues later on — they’ll all slot into place automatically. I keep my code clean, readable, and ordered logically by layering elements this way. It also makes animating smoother, as each component is easier to identify.
Reusing Elements With <use>
When duplicate shapes get reused repeatedly, SVG files can get bulky fast. My recreation of the “Bewitched Bear” title card contains 80 stars in three sizes. Combining all those shapes into one optimised path would bring the file size down to 3KB. But I want to animate individual stars, which would almost double that to 5KB:
But a more efficient and manageable option is to define each star size as a reusable template:
With this setup, changing a star’s design only means updating its template once, and every instance updates automatically. Then, I reference each one using <use> and position them with x and y attributes:
This approach makes the SVG easier to manage, lighter to load, and faster to iterate on, especially when working with dozens of repeating elements. Best of all, it keeps the markup clean without compromising on flexibility or performance.
Adding Animations
The stars trailing behind Yogi’s stolen broom bring so much personality to the animation. I wanted them to sparkle in a seemingly random pattern against the dark blue background, so I started by defining a keyframe animation that cycles through different opacity levels:
Next, I applied this looping animation to every use element inside my stars group:
#stars use {\\n animation: sparkle 10s ease-in-out infinite;\\n}\\n
The secret to creating a convincing twinkle lies in variation. I staggered animation delays and durations across the stars using nth-child selectors, starting with the quickest and most frequent sparkle effects:
From there, I layered in additional timings to mix things up. Some stars sparkle slowly and dramatically, others more randomly, with a variety of rhythms and pauses:
By thoughtfully structuring the SVG and reusing elements, I can build complex-looking animations without bloated code, making even a simple effect like changing opacity sparkle.
Subtle movements bring Yogi Bear to life. (Large preview)
Then, for added realism, I make Yogi’s head wobble:
His tie waves:
His broom swings:
And, finally, Yogi himself gently rotates as he flies on his magical broom:
All these subtle movements bring Yogi to life. By developing structured SVGs, I can create animations that feel full of character without writing a single line of JavaScript.
Try this yourself:
See the Pen [Bewitched Bear CSS/SVG animation [forked]](https://codepen.io/smashingmag/pen/bNdwJBN) by Andy Clarke.
Whether you’re recreating a classic title card or animating icons for an interface, the principles are the same:
Start clean,
Optimise early, and
Structure everything with animation in mind.
SVGs offer incredible creative freedom, but only if kept lean and manageable. When you plan your process like a production cell — layer by layer, element by element — you’ll spend less time untangling code and more time bringing your work to life.
","description":"What’s the best way to make your SVGs faster, simpler, and more manageable? In this article, pioneering author and web designer Andy Clarke explains the process he relies on to prepare, optimise, and structure SVGs for animation and beyond. 10 min read\\nSVG, Animation, Design, CSS\\nSh…","guid":"https://www.smashingmagazine.com/2025/06/smashing-animations-part-4-optimising-svgs/","author":"Andy Clarke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-06-03T16:00:00.525Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/1-toon-titles.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/2-yogi-bear-bewitched-bear.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/3-outlines-anchor-points.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/4-separate-outlines.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/5-simple-background-shapes.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/6-adobe-illustrator-simplify-paths.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/7-vector-artwork-ready-optimisation.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/8-jake-archibald-svgomg-online-optimisation-tool.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/9-yogi-bear-title-card-toon-titles-recreation.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/10-gradient-background-title-graphic.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/11-trail-gaussian-blur.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/12-yogi-bear-magical-stars.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/13-yogi-bear-component-parts.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/14-yogi-bear-title-card-toon-titles-recreation.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/15-yogi-bear-sparkling-stars.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/16-subtle-movements-yogi-bear.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["SVG","Animation","Design","CSS"],"attachments":null,"extra":null,"language":null},{"title":"Why Designers Get Stuck In The Details And How To Stop","url":"https://www.smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/","content":"
Why Designers Get Stuck In The Details And How To Stop
Designers love to craft, but polishing pixels before the problem is solved is a time-sink. This article pinpoints the five traps that lure us into premature detail — being afraid to show rough work, fixing symptoms instead of causes, solving the wrong problem, drowning in unactionable feedback, and plain fatigue — then hands you a four-step rescue plan to refocus on goals, ship faster, and keep your craft where it counts.
You’ve drawn fifty versions of the same screen — and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: “Looks cool, but the idea doesn’t work.” Sound familiar?
In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap.
Reason #1 You’re Afraid To Show Rough Work
We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed.
I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them.
The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief.
The real problem here is the habit: we open Figma and start perfecting the UI before we’ve even solved the problem.
So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid psychological reasons behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychology (like the research by Hewitt and Flett) shows there are a couple of flavors driving this:
Socially prescribed perfectionism It’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den.
Self-oriented perfectionism Where you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off.
Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback.
Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way — artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift:
Treat early sketches as disposable tools for thinking and actively share them to get feedback faster.
A rough mockup shared with the product manager. Is it pretty? Not really. Does it solve the problem? Absolutely. (Large preview)
Reason #2: You Fix The Symptom, Not The Cause
Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, “What data suggests they aren’t noticing it?” Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data.
From my experience, here are several reasons why users might not be clicking that coveted button:
Users don’t understand that this step is for payment.
They understand it’s about payment but expect order confirmation first.
Due to incorrect translation, users don’t understand what the button means.
Lack of trust signals (no security icons, unclear seller information).
Unexpected additional costs (hidden fees, shipping) that appear at this stage.
Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly.
Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button.
Psychologically, taking on this bigger role isn’t easy. It means overcoming the fear of making mistakes and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as partners who create value — even if it means fighting a hesitation to question product managers (which might come from a fear of speaking up or a desire to avoid challenging authority) — and understanding that using our product logic expertise proactively is crucial for modern designers.
There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers.
Reason #3: You’re Solving The Wrong Problem
Before solving anything, ask whether the problem even deserves your attention.
During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis — making service buttons bigger and brighter might help returning users — seemed reasonable enough to test. However, even when A/B tests (a method of comparing two versions of a design to determine which performs better) showed minimal impact, we continued to tweak those buttons.
Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned:
Without the right context, any visual tweak is lipstick on a pig.
Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old sunk cost fallacy kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising.
It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself when results stalled was: “Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?” That alone might have saved hours.
Reason #4: You’re Drowning In Unactionable Feedback
We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything — fonts, button colors, even when you desperately need to discuss a user flow.
What matters here are two things:
The question you ask,
The context you give.
That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it.
For instance:
“The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?”
Here, you’ve stated the problem (conversion drop), shared your insight (user confusion), explained your solution (cost breakdown), and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?”
Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside.
I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, “Have you considered other ways to organize this section?” or “Perhaps explore a different structure for this part?” can instantly morph in our minds into “You completely messed up the structure. You’re a bad designer.”Imposter syndrome, in all its glory.
So, to wrap up this point, here are two recommendations:
Prepare for every design discussion. A couple of focused questions will yield far more valuable input than a vague “So, what do you think?”.
Actively work on separating feedback on your design from your self-worth. If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it.
Reason #5 You’re Just Tired
Sometimes, the issue isn’t strategic at all — it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: decision fatigue. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing.
A striking example comes from a New York Times article titled “Do You Suffer From Decision Fatigue?.” It described how judges deciding on release requests were far more likely to grant release early in the day (about 70% of cases) compared to late in the day (less than 10%) simply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity.
What helps here:
Swap tasks. Trade tickets with another designer; novelty resets your focus.
Talk to another designer. If NDA permits, ask peers outside the team for a sanity check.
Step away. Even a ten‑minute walk can do more than a double‑shot espresso.
By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit.
Not quite magical, but this spot helped me reset. (Large preview)
And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks — changing font weight, color, border radius — I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, “Wait, weren’t we working?” Funny how that kind of nudge saves a ton of time.
Four Steps I Use to Avoid Drowning In Detail
Knowing these potential traps, here’s the practical process I use to stay on track:
1. Define the Core Problem & Business Goal
Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: “What metric am I moving, and do we have data to prove this is the right lever?” If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream.
2. Choose the Mechanic (Solution Principle)
Once the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels.
3. Wireframe the Flow & Get Focused Feedback
Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear context (as discussed in ‘Reason #4’) to get actionable feedback, not just vague opinions.
4. Polish the Visuals (Mindfully)
I only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique — again using targeted questions and clear context — instead of hiding in version 47. This ensures detailing serves the now-validated solution.
Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering.
Wrapping Up
Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, pause and ask what you might be avoiding. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding — maybe the fuzzy core problem, or just asking for tough feedback — gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution.
","description":"Designers love to craft, but polishing pixels before the problem is solved is a time-sink. This article pinpoints the five traps that lure us into premature detail — being afraid to show rough work, fixing symptoms instead of causes, solving the wrong problem, drowning in…","guid":"https://www.smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/","author":"Nikita Samutin","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-06-02T16:00:00.207Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Workflow","Design","Best Practices","Inspiration"],"attachments":null,"extra":null,"language":null},{"title":"Designing For Neurodiversity","url":"https://www.smashingmagazine.com/2025/06/designing-for-neurodiversity/","content":"
Designing For Neurodiversity
Designing for neurodiversity means recognizing that people aren’t edge cases but individuals with varied ways of thinking and navigating the web. So, how can we create more inclusive experiences that work better for everyone?
Neurodivergent needs are often considered as an edge case that doesn’t fit into common user journeys or flows. Neurodiversity tends to get overlooked in the design process. Or it is tackled late in the process, and only if there is enough time.
But people aren’t edge cases. Every person is just a different person, performing tasks and navigating the web in a different way. So how can we design better, more inclusive experiences that cater to different needs and, ultimately, benefit everyone? Let’s take a closer look.
By considering neurodiversity early in the design process, we can create better experiences for everyone. (Image source: Neurodiversity Design System) (Large preview)
Neurodiversity Or Neurodivergent?
There is quite a bit of confusion about both terms on the web. Different people think and experience the world differently, and neurodiversity sees differences as natural variations, not deficits. It distinguishes between neurotypical and neurodivergent people.
Neurotypical people see the world in a “typical” and widely perceived as expected way.
Neurodivergent people experience the world differently, for example, people with ADHD, dyslexia, dyscalculia, synesthesia, and hyperlexia.
According to various sources, around 15–40% of the population has neurodivergent traits. These traits can be innate (e.g., autism) or acquired (e.g., trauma). But they are always on a spectrum, and vary a lot. A person with autism is not neurodiverse — they are neurodivergent.
One of the main strengths of neurodivergent people is how imaginative and creative they are, coming up with out-of-the-box ideas quickly. With exceptional levels of attention, strong long-term memory, a unique perspective, unbeatable accuracy, and a strong sense of justice and fairness.
Being different in a world that, to some degree, still doesn’t accept these differences is exhausting. So unsurprisingly, neurodivergent people often bring along determination, resilience, and high levels of empathy.
Design With People, Not For Them
As a designer, I often see myself as a path-maker. I’m designing reliable paths for people to navigate to their goals comfortably. Without being blocked. Or confused. Or locked out.
That means respecting the simple fact that people’s needs, tasks, and user journeys are all different, and that they evolve over time. And: most importantly, it means considering them very early in the process.
Better accessibility is better for everyone. Instead of making decisions that need to be reverted or refined to be compliant, we can bring a diverse group of people — with accessibility needs, with neurodiversity, frequent and infrequent users, experts, newcomers — in the process, and design with them, rather than for them.
Neurodiversity & Inclusive Design Resources
A wonderful resource that helps us design for cognitive accessibility is Stéphanie Walter’s Neurodiversity and UX toolkit. It includes practical guidelines, tools, and resources to better understand and design for dyslexia, dyscalculia, autism, and ADHD.
Another fantastic resource is Will Soward’s Neurodiversity Design System. It combines neurodiversity and user experience design into a set of design standards and principles that you can use to design accessible learning interfaces.
Last but not least, I’ve been putting together a few summaries about neurodiversity and inclusive design over the last few years, so you might find them helpful, too:
A huge thank-you to everyone who has been writing, speaking, and sharing articles, resources, and toolkits on designing for diversity. The topic is often forgotten and overlooked, but it has an incredible impact. 👏🏼👏🏽👏🏾
","description":"Designing for neurodiversity means recognizing that people aren’t edge cases but individuals with varied ways of thinking and navigating the web. So, how can we create more inclusive experiences that work better for everyone? 3 min read\\nAccessibility, UX, Design\\nShare on Twitter, Li…","guid":"https://www.smashingmagazine.com/2025/06/designing-for-neurodiversity/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-06-01T16:00:00.174Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-for-neurodiversity/1-neurodiversity-practical-guides.jpeg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-for-neurodiversity/2-neurodiversity-and-ux-essential-resources-for-cognitive-accessibility.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Accessibility","UX","Design"],"attachments":null,"extra":null,"language":null},{"title":"Prelude To Summer (June 2025 Wallpapers Edition)","url":"https://www.smashingmagazine.com/2025/05/desktop-wallpaper-calendars-june-2025/","content":"
Prelude To Summer (June 2025 Wallpapers Edition)
Let’s kick off June — and the beginning of summer — with some fresh inspiration! Artists and designers from across the globe once again tickled their creativity to welcome the new month with a new collection of desktop wallpapers. Enjoy!
There’s an artist in everyone. Some bring their ideas to life with digital tools, others capture the perfect moment with a camera or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think you’re far from being an artist, well, why not explore it? It might just be hidden somewhere deep inside of you.
For more than 14 years already our monthly wallpapers series has been the perfect opportunity to do just that: to break out of your daily routine and get fully immersed in a creative little project. This month is no exception, of course.
For this post, artists and designers from across the globe once again put their creative skills to the test and designed beautiful, unique, and inspiring desktop wallpapers to accompany you through the new month. You’ll find their artworks compiled below, along with a selection of June favorites from our wallpapers archives that are just too good to be forgotten. A huge thank-you to everyone who shared their designs with us this time around — you’re smashing!
If you, too, would like to get featured in one of our next wallpapers posts, please don’t hesitate to submit your design. We can’t wait to see what you’ll come up with!
You can click on every image to see a larger preview.
We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.
June Is For Nature
“In this illustration, Earth is planting a little tree — taking care, smiling, doing its part. It’s a reminder that even small acts make a difference. Since World Environment Day falls in June, there’s no better time to give back to the planet.” — Designed by Ginger IT Solutions from Serbia.
“A vibrant June wallpaper featuring strawberries and fresh oranges, capturing the essence of early summer with bright colors and seasonal charm.” — Designed by Libra Fire from Serbia.
“Some of my favorite things to do are reading and listening to music. I know that there are a lot of people that also enjoy these hobbies, so I thought it would be a perfect thing to represent in my wallpaper.” — Designed by Cecelia Otis from the United States.
“To me, ice cream is one of the most iconic symbols of summer. So, what better way to represent the first month of summer than through an iconic summer snack.” — Designed by Danielle May from Pennsylvania, United States.
“I really loved the fun content aware effect and wanted to play around with it for this wallpaper with some cute cats.” — Designed by Italia Storey from the United States.
“With long-lasting days, it is pleasant to spend hours walking at dusk. This photo was taken in an illuminated garden.” — Designed by Philippe Brouard from France.
“Recently I have been indulging in fishing as a means of a hobby, and the combined peace and thrill of the activity inspires me. I also love cats, so I thought combining the two subjects would make a stellar wallpaper, especially considering that these two topics already fall hand in hand with each other!” — Designed by Lilianna Damian from Scranton, PA, United States.
“Today’s all about celebrating the ones who laugh with us, cry with us, and always have our backs — our best friends. Whether it’s been years or just a few months, every moment with them means something special. Tag your ride-or-die, your soul sibling, your partner in crime - and let them know just how much they mean to you.” — Designed by PopArt Studio from Serbia.
“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — Designed by PopArt Studio from Serbia.
“I’ve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors.” — Designed by Kate Jameson from the United States.
“Summer rains, sunny days, and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by Ana Masnikosa from Belgrade, Serbia.
“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — Designed by PopArt Studio from Serbia.
“Nice weather has arrived! Clean the dust off your bike and explore your hometown from a different angle! Invite a friend or loved one and share the joy of cycling. Whether you decide to go for a city ride or a ride in nature, the time spent on a bicycle will make you feel free and happy. So don’t wait, take your bike and call your loved one because happiness is greater only when it is shared. Happy World Bike Day!” — Designed by PopArt Studio from Serbia.
“You cannot always control what goes on outside. You can always control what goes on inside. Breathe free, live and let your body feel the vibrations and positiveness that you possess inside you. Yoga can rejuvenate and refresh you and ensure that you are on the journey from self to the self. Happy International Yoga Day!” — Designed by Acodez IT Solutions from India.
“We’ve all grown to know the month of June through different life stages. From toddlers to adults with children, we’ve enjoyed the weather with rides on our bikes. As we evolve, so do our wheels!” — Designed by Jason Keist from the United States.
“June brings the start of summer full of bright colors, happy memories, and traveling. What better way to portray the goodness of summer than through an ocean folk art themed wallpaper. This statement wallpaper gives me feelings of summer and I hope to share that same feeling with others.” — Designed by Taylor Davidson from Kentucky.
“June 21 marks the longest day of the year for the Northern Hemisphere — and sunsets like these will be getting earlier and earlier after that!” — Designed by James Mitchell from the United Kingdom.
“This planet is the home that we share with all other forms of life and it is our obligation and sacred duty to protect it.” — Designed by LibraFire from Serbia.
“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.
“This piece was inspired by the My Little Pony cartoon series. Because those ponies irritated me so much as a kid, I always wanted to create a bad-ass pony.” — Designed by Zaheed Manuel from South Africa.
","description":"Let’s kick off June — and the beginning of summer — with some fresh inspiration! Artists and designers from across the globe once again tickled their creativity to welcome the new month with a new collection of desktop wallpapers. Enjoy! 15 min read\\nWallpapers\\nShare on Twitter, Link…","guid":"https://www.smashingmagazine.com/2025/05/desktop-wallpaper-calendars-june-2025/","author":"Cosima Mielke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-30T16:00:00.670Z","media":[{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-june-is-for-nature-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-tastes-of-june-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-a-bibliophiles-shelf-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-solana-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-here-comes-the-sun-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-natures-melody-preview.png","type":"photo","width":800,"height":450,"blurhash":"LgKe0^t7t,xt~oRkV@az%za|oJoL"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silent-glimmer-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L55XlOE3IWEN$yS4azNH0i%0%0%0"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-ice-cream-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silly-cats-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-in-case-of-nothing-to-do-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-pink-hours-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LkH+kZoL0|jGODNte.s:0|n%=yba"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-whats-the-best-that-could-happen-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-purrsuit-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-happy-best-friends-day-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1235cf-2e90-4379-9126-fb1afcc0338c/june-14-oh-the-places-you-will-go-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c087db08-a5f6-414f-a827-e2be4acb421d/june-15-gravity-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-17-yoga-is-a-light-which-once-lit-will-never-dim-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c35f3b3-fa61-4192-8b14-3fc8ad37eea9/june-14-hand-made-pony-gone-wild-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cf7e3de-ab36-4ce9-92f0-5d2535e74db1/june-17-window-of-opportunity-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-preview-opt.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Wallpapers"],"attachments":null,"extra":null,"language":null},{"title":"Reliably Detecting Third-Party Cookie Blocking In 2025","url":"https://www.smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/","content":"
Reliably Detecting Third-Party Cookie Blocking In 2025
The web is mired in a struggle to eliminate third-party cookies, with the World Wide Web Consortium Technical Architecture Group leading the charge. But there are obstacles preventing this from happening, and, as a result, many essential web features continue to rely on cookies to function properly. That’s why detecting third-party cookie blocking isn’t just good technical hygiene but a frontline defense for user experience.
The web is beginning to part ways with third-party cookies, a technology it once heavily relied on. Introduced in 1994 by Netscape to support features like virtual shopping carts, cookies have long been a staple of web functionality. However, concerns over privacy and security have led to a concerted effort to eliminate them. The World Wide Web Consortium Technical Architecture Group (W3C TAG) has been vocal in advocating for the complete removal of third-party cookies from the web platform.
Major browsers (Chrome, Safari, Firefox, and Edge) are responding by phasing them out, though the transition is gradual. While this shift enhances user privacy, it also disrupts legitimate functionalities that rely on third-party cookies, such as single sign-on (SSO), fraud prevention, and embedded services. And because there is still no universal ban in place and many essential web features continue to depend on these cookies, developers must detect when third-party cookies are blocked so that applications can respond gracefully.
Don’t Let Silent Failures Win: Why Cookie Detection Still Matters
Yes, the ideal solution is to move away from third-party cookies altogether and redesign our integrations using privacy-first, purpose-built alternatives as soon as possible. But in reality, that migration can take months or even years, especially for legacy systems or third-party vendors. Meanwhile, users are already browsing with third-party cookies disabled and often have no idea that anything is missing.
Imagine a travel booking platform that embeds an iframe from a third-party partner to display live train or flight schedules. This embedded service uses a cookie on its own domain to authenticate the user and personalize content, like showing saved trips or loyalty rewards. But when the browser blocks third-party cookies, the iframe cannot access that data. Instead of a seamless experience, the user sees an error, a blank screen, or a login prompt that doesn’t work.
And while your team is still planning a long-term integration overhaul, this is already happening to real users. They don’t see a cookie policy; they just see a broken booking flow.
Why It’s Hard To Tell If Third-Party Cookies Are Blocked
Detecting whether third-party cookies are supported isn’t as simple as calling navigator.cookieEnabled. Even a well-intentioned check like this one may look safe, but it still won’t tell you what you actually need to know:
This function only confirms that cookies work in the current (first-party) context. It says nothing about third-party scenarios, like an iframe on another domain. Worse, it’s misleading: in some browsers, navigator.cookieEnabled may still return true inside a third-party iframe even when cookies are blocked. Others might behave differently, leading to inconsistent and unreliable detection.
These cross-browser inconsistencies — combined with the limitations of document.cookie — make it clear that there is no shortcut for detection. To truly detect third-party cookie blocking, we need to understand how different browsers actually behave in embedded third-party contexts.
How Modern Browsers Handle Third-Party Cookies
The behavior of modern browsers directly affects which detection methods will work and which ones silently fail.
Safari: Full Third-Party Cookie Blocking
Since version 13.1, Safari blocks all third-party cookies by default, with no exceptions, even if the user previously interacted with the embedded domain. This policy is part of Intelligent Tracking Prevention (ITP).
For embedded content (such as an SSO iframe) that requires cookie access, Safari exposes the Storage Access API, which requires a user gesture to grant storage permission. As a result, a test for third-party cookie support will nearly always fail in Safari unless the iframe explicitly requests access via this API.
Firefox: Cookie Partitioning By Design
Firefox’s Total Cookie Protection isolates cookies on a per-site basis. Third-party cookies can still be set and read, but they are partitioned by the top-level site, meaning a cookie set by the same third-party on siteA.com and siteB.com is stored separately and cannot be shared.
As of Firefox 102, this behavior is enabled by default in the Standard (default) mode of Enhanced Tracking Protection. Unlike the Strict mode — which blocks third-party cookies entirely, similar to Safari — the Standard mode does not block them outright. Instead, it neutralizes their tracking capability by isolating them per site.
As a result, even if a test shows that a third-party cookie was successfully set, it may be useless for cross-site logins or shared sessions due to this partitioning. Detection logic needs to account for that.
Chrome: From Deprecation Plans To Privacy Sandbox (And Industry Pushback)
Chromium-based browsers still allow third-party cookies by default — but the story is changing. Starting with Chrome 80, third-party cookies must be explicitly marked with SameSite=None; Secure, or they will be rejected.
In January 2020, Google announced their intention to phase out third-party cookies by 2022. However, the timeline was updated multiple times, first in June 2021 when the company pushed the rollout to begin in mid-2023 and conclude by the end of that year. Additional postponements followed in July 2022, December 2023, and April 2024.
In July 2024, Google has clarified that there is no plan to unilaterally deprecate third-party cookies or force users into a new model without consent. Instead, Chrome is shifting to a user-choice interface that will allow individuals to decide whether to block or allow third-party cookies globally.
As for now, third-party cookies remain enabled by default in Chrome. The new user-facing controls and the broader Privacy Sandbox ecosystem are still in various stages of experimentation and limited rollout.
Edge (Chromium-Based): Tracker-Focused Blocking With User Configurability
Edge (which is a Chromium-based browser) shares Chrome’s handling of third-party cookies, including the SameSite=None; Secure requirement. Additionally, Edge introduces Tracking Prevention modes: Basic, Balanced (default), and Strict. In Balanced mode, it blocks known third-party trackers using Microsoft’s maintained list but allows many third-party cookies that are not classified as trackers. Strict mode blocks more resource loads than Balanced, which may result in some websites not behaving as expected.
Older versions of Safari had partial third-party cookie restrictions (such as “Allow from websites I visit”), but, as mentioned before, this was replaced with full blocking via ITP.
As of 2025, all major browsers either block or isolate third-party cookies by default, with the exception of Chrome, which still allows them in standard browsing mode pending the rollout of its new user-choice model.
To account for these variations, your detection strategy must be grounded in real-world testing — specifically by reproducing a genuine third-party context such as loading your script within an iframe on a cross-origin domain — rather than relying on browser names or versions.
Overview Of Detection Techniques
Over the years, many techniques have been used to detect third-party cookie blocking. Most are unreliable or obsolete. Here’s a quick walkthrough of what doesn’t work (and why) and what does.
Basic JavaScript API Checks (Misleading)
As mentioned earlier, the navigator.cookieEnabled or setting document.cookie on the main page doesn’t reflect cross-site cookie status:
In third-party iframes, navigator.cookieEnabled often returns true even when cookies are blocked.
Setting document.cookie in the parent doesn’t test the third-party context.
These checks are first-party only. Avoid using them for detection.
Storage Hacks Via localStorage (Obsolete)
Previously, some developers inferred cookie support by checking if window.localStorage worked inside a third-party iframe — which is especially useful against older Safari versions that blocked all third-party storage.
Modern browsers often allow localStorage even when cookies are blocked. This leads to false positives and is no longer reliable.
Server-Assisted Cookie Probe (Heavyweight)
One classic method involves setting a cookie from a third-party domain via HTTP and then checking if it comes back:
Load a script/image from a third-party server that sets a cookie.
Immediately load another resource, and the server checks whether the cookie was sent.
This works, but it:
Requires custom server-side logic,
Depends on HTTP caching, response headers, and cookie attributes (SameSite=None; Secure), and
Adds development and infrastructure complexity.
While this is technically valid, it is not suitable for a front-end-only approach, which is our focus here.
Storage Access API (Supplemental Signal)
The document.hasStorageAccess() method allows embedded third-party content to check if it has access to unpartitioned cookies:
Chrome Supports hasStorageAccess() and requestStorageAccess() starting from version 119. Additionally, hasUnpartitionedCookieAccess() is available as an alias for hasStorageAccess() from version 125 onwards.
Firefox Supports both hasStorageAccess() and requestStorageAccess() methods.
Safari Supports the Storage Access API. However, access must always be triggered by a user interaction. For example, even calling requestStorageAccess() without a direct user gesture (like a click) is ignored.
Chrome and Firefox also support the API, and in those browsers, it may work automatically or based on browser heuristics or site engagement.
This API is particularly useful for detecting scenarios where cookies are present but partitioned (e.g., Firefox’s Total Cookie Protection), as it helps determine if the iframe has unrestricted cookie access. But for now, it’s still best used as a supplemental signal, rather than a standalone check.
iFrame + postMessage (Best Practice)
Despite the existence of the Storage Access API, at the time of writing, this remains the most reliable and browser-compatible method:
Embed a hidden iframe from a third-party domain.
Inside the iframe, attempt to set a test cookie.
Use window.postMessage to report success or failure to the parent.
This approach works across all major browsers (when properly configured), requires no server (kind of, more on that next), and simulates a real-world third-party scenario.
We’ll implement this step-by-step next.
Bonus: Sec-Fetch-Storage-Access
Chrome (starting in version 133) is introducing Sec-Fetch-Storage-Access, an HTTP request header sent with cross-site requests to indicate whether the iframe has access to unpartitioned cookies. This header is only visible to servers and cannot be accessed via JavaScript. It’s useful for back-end analytics but not applicable for client-side cookie detection.
As of May 2025, this feature is only implemented in Chrome and is not supported by other browsers. However, it’s still good to know that it’s part of the evolving ecosystem.
Step-by-Step: Detecting Third-Party Cookies Via iFrame
So, what did I mean when I said that the last method we looked at “requires no server”? While this method doesn’t require any back-end logic (like server-set cookies or response inspection), it does require access to a separate domain — or at least a cross-site subdomain — to simulate a third-party environment. This means the following:
You must serve the test page from a different domain or public subdomain, e.g., example.com and cookietest.example.com,
The domain needs HTTPS (for SameSite=None; Secure cookies to work), and
You’ll need to host a simple static file (the test page), even if no server code is involved.
Once that’s set up, the rest of the logic is fully client-side.
Step 1: Create A Cookie Test Page (On A Third-Party Domain)
Minimal version (e.g., https://cookietest.example.com/cookie-check.html):
Make sure the page is served over HTTPS, and the cookie uses SameSite=None; Secure. Without these attributes, modern browsers will silently reject it.
Step 2: Embed The iFrame And Listen For The Result
On your main page:
Example usage:
Step 3: Enhance Detection With The Storage Access API
In Safari, even when third-party cookies are blocked, users can manually grant access through the Storage Access API — but only in response to a user gesture.
Here’s how you could implement that in your iframe test page:
Then, on the parent page, you can listen for this message and retry detection if needed:
(Bonus) A Purely Client-Side Fallback (Not Perfect, But Sometimes Necessary)
In some situations, you might not have access to a second domain or can’t host third-party content under your control. That makes the iframe method unfeasible.
When that’s the case, your best option is to combine multiple signals — basic cookie checks, hasStorageAccess(), localStorage fallbacks, and maybe even passive indicators like load failures or timeouts — to infer whether third-party cookies are likely blocked.
The important caveat: This will never be 100% accurate. But, in constrained environments, “better something than nothing” may still improve the UX.
Here’s a basic example:
Example usage:
Use this fallback when:
You’re building a JavaScript-only widget embedded on unknown sites,
You don’t control a second domain (or the team refuses to add one), or
You just need some visibility into user-side behavior (e.g., debugging UX issues).
Don’t rely on it for security-critical logic (e.g., auth gating)! But it may help tailor the user experience, surface warnings, or decide whether to attempt a fallback SSO flow. Again, it’s better to have something rather than nothing.
Fallback Strategies When Third-Party Cookies Are Blocked
Detecting blocked cookies is only half the battle. Once you know they’re unavailable, what can you do? Here are some practical options that might be useful for you:
Redirect-Based Flows
For auth-related flows, switch from embedded iframes to top-level redirects. Let the user authenticate directly on the identity provider’s site, then redirect back. It works in all browsers, but the UX might be less seamless.
Request Storage Access
Prompt the user using requestStorageAccess() after a clear UI gesture (Safari requires this). Use this to re-enable cookies without leaving the page.
Token-Based Communication
Pass session info directly from parent to iframe via:
This avoids reliance on cookies entirely but requires coordination between both sides:
Partitioned Cookies (CHIPS)
Chrome (since version 114) and other Chromium-based browsers now support cookies with the Partitioned attribute (known as CHIPS), allowing per-top-site cookie isolation. This is useful for widgets like chat or embedded forms where cross-site identity isn’t needed.
Note: Firefox and Safari don’t support the Partitioned cookie attribute. Firefox enforces cookie partitioning by default using a different mechanism (Total Cookie Protection), while Safari blocks third-party cookies entirely.
But be careful, as they are treated as “blocked” by basic detection. Refine your logic if needed.
Final Thought: Transparency, Transition, And The Path Forward
Third-party cookies are disappearing, albeit gradually and unevenly. Until the transition is complete, your job as a developer is to bridge the gap between technical limitations and real-world user experience. That means:
Keep an eye on the standards. APIs like FedCM and Privacy Sandbox features (Topics, Attribution Reporting, Fenced Frames) are reshaping how we handle identity and analytics without relying on cross-site cookies.
Combine detection with graceful fallback. Whether it’s offering a redirect flow, using requestStorageAccess(), or falling back to token-based messaging — every small UX improvement adds up.
Inform your users. Users shouldn’t be left wondering why something worked in one browser but silently broke in another. Don’t let them feel like they did something wrong — just help them move forward. A clear, friendly message can prevent this confusion.
The good news? You don’t need a perfect solution today, just a resilient one. By detecting issues early and handling them thoughtfully, you protect both your users and your future architecture, one cookie-less browser at a time.
And as seen with Chrome’s pivot away from automatic deprecation, the transition is not always linear. Industry feedback, regulatory oversight, and evolving technical realities continue to shape the time and the solutions.
And don’t forget: having something is better than nothing.
","description":"The web is mired in a struggle to eliminate third-party cookies, with the World Wide Web Consortium Technical Architecture Group leading the charge. But there are obstacles preventing this from happening, and, as a result, many essential web features continue to rely on cookies…","guid":"https://www.smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/","author":"Mikhail Prosmitskiy","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-27T16:00:00.486Z","media":null,"categories":["Optimization","Techniques","UX","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"Data Vs. Findings Vs. Insights In UX","url":"https://www.smashingmagazine.com/2025/05/data-vs-findings-vs-insights-ux/","content":"
Data Vs. Findings Vs. Insights In UX
What’s the difference between data, findings, and UX insights? And how do you argue for statistical significance in your UX research? Let’s unpack it. Kindly powered by How To Measure UX and Design Impact, a friendly course on how to show the impact of your incredible UX work on business.
In many companies, data, findings, and insights are all used interchangeably. Slack conversations circle around convincing data points, statistically significant findings, reliable insights, and emerging trends. Unsurprisingly, conversations often mistake sporadic observations for consistent patterns.
But how impactful is the weight that each of them carries? And how do we turn raw data into meaningful insights to make better decisions? Well, let’s find out.
At first, it may seem that the differences are very nuanced and merely technical. But when we review inputs and communicate the outcomes of our UX work, we need to be careful not to conflate terminology — to avoid wrong assumptions, wrong conclusions, and early dismissals.
Raw data points is random and inconclusive. For it to be valuable, it must be turned into insights. Cartoon by Hugh MacLeod. (Large preview)
When strong recommendations and bold statements emerge in a big meeting, inevitably, there will be people questioning the decision-making process. More often than not, they will be the loudest voices in the room, often with their own agenda and priorities that they are trying to protect.
As UX designers, we need to be prepared for it. The last thing we want is to have a weak line of thinking, easily dismantled under the premise of “weak research”, “unreliable findings”, “poor choice of users” — and hence dismissed straight away.
Data ≠ Findings ≠ Insights
People with different roles — analysts, data scientists, researchers, strategists — often rely on fine distinctions to make their decisions. The general difference is easy to put together:
Data is raw observations (logs, notes, survey answers) (what was recorded).
Findings describe emerging patterns in data but aren’t actionable (what happened).
Insights are business opportunities (what happened + why + so what).
Hindsights are reflections of past actions and outcomes (what we learned in previous work).
Foresights are informed projections, insights with extrapolation (what could happen next).
Data ↓ Six users were looking for ”Money transfer” in “Payments”, and 4 users discovered the feature in their personal dashboard.
Finding ↓ 60% of users struggled to find the “Money transfer” feature on a dashboard, often confusing it with the “Payments” section.
Insight ↓ Navigation doesn’t match users’ mental models for money transfers, causing confusion and delays. We recommend renaming sections or reorganizing the dashboard to prioritize “Transfer Money”. It could make task completion more intuitive and efficient.
Hindsight ↓ After renaming the section to “Transfer Money” and moving it to the main dashboard, task success increased by 12%. User confusion dropped in follow-up tests. It proved to be an effective solution.
Foresight ↓ As our financial products become more complex, users will expect simpler task-oriented navigation (e.g., “Send Money”, “Pay Bills“) instead of categories like “Payments”. We should evolve the dashboard towards action-driven IA to meet user expectations.
Only insights create understanding and drive strategy. Foresights shape strategy, too, but are always shaped by bets and assumptions. So, unsurprisingly, stakeholders are interested in insights, not findings. They rarely need to dive into raw data points. But often, they do want to make sure that findings are reliable.
That’s when, eventually, the big question about statistical significance comes along. And that’s when ideas and recommendations often get dismissed without a chance to be explored or explained.
But Is It Statistically Significant?
Now, for UX designers, that’s an incredibly difficult question to answer. As Nikki Anderson pointed out, statistical significance was never designed for qualitative research. And with UX work, we’re not trying to publish academic research or prove universal truths.
What we are trying to do is reach theoretical saturation, the point where additional research doesn’t give us new insights. Research isn’t about proving something is true. It’s about preventing costly mistakes before they happen.
Here are some useful talking points to handle the question:
Five users per segment often surface major issues, and 10–15 users per segment usually reach saturation. If we’re still getting new insights after that, our scope is too broad.
“If five people hit the same pothole and wreck their car, how many more do you need before fixing the road?”
“If three enterprise customers say onboarding is confusing, that’s a churn risk.”
“If two usability tests expose a checkout issue, that’s abandoned revenue.”
“If one customer interview reveals a security concern, that’s a crisis waiting to happen.”
“How many user complaints exactly do we need to take this seriously?”
“How much revenue exactly are we willing to lose before fixing this issue?”
And: it might not be necessary to focus on the number of participants, but instead, argue about users consistently struggling with a feature, mismatch of expectations, and a clear pattern emerging around a particular pain point.
How To Turn Findings Into Insights
Once we notice patterns emerging, we need to turn them into actionable recommendations. Surprisingly, this isn’t always easy — we need to avoid easy guesses and assumptions as far as possible, as they will invite wrong conclusions.
To do that, you can rely on a very simple but effective framework to turn findings into insights: What Happened + Why + So What:
“What happened” covers observed behavior and patterns.
“Why” includes beliefs, expectations, or triggers.
“So What” addresses impact, risk, and business opportunity.
To better assess the “so what” part, we should pay close attention to the impact of what we have noticed on desired business outcomes. It can be anything from high-impact blockers and confusion to hesitation and inaction.
I can wholeheartedly recommend exploring Findings → Insights Cheatsheet in Nikki Anderson’s wonderful slide deck, which has examples and prompts to use to turn findings into insights.
Stop Sharing Findings — Deliver Insights
When presenting the outcomes of your UX work, focus on actionable recommendations and business opportunities rather than patterns that emerged during testing.
To me, it’s all about telling a good damn story. Memorable, impactful, feasible, and convincing. Paint the picture of what the future could look like and the difference it would produce. That’s where the biggest impact of UX work emerges.
How To Measure UX And Design Impact
Meet Measure UX & Design Impact (8h), a practical guide for designers and UX leads to shape, measure, and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 IMPACT to save 20% off today. Jump to the details.
","description":"What’s the difference between data, findings, and UX insights? And how do you argue for statistical significance in your UX research? Let’s unpack it. Kindly powered by How To Measure UX and Design Impact, a friendly course on how to show the impact of your incredible UX work on…","guid":"https://www.smashingmagazine.com/2025/05/data-vs-findings-vs-insights-ux/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-26T16:00:00.133Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-94-data-findings-insights/1-mailing-94-data-findings-insights.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-94-data-findings-insights/2-mailing-94-data-findings-insights.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-94-data-findings-insights/3-mailing-94-data-findings-insights.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-94-data-findings-insights/4-mailing-94-data-findings-insights.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png","type":"photo","width":900,"height":466}],"categories":["UX","Design","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"What Zen And The Art Of Motorcycle Maintenance Can Teach Us About Web Design","url":"https://www.smashingmagazine.com/2025/05/what-zen-art-motorcycle-maintenance-teach-web-design/","content":"
What Zen And The Art Of Motorcycle Maintenance Can Teach Us About Web Design
Road-tripping along the line between engineering and spirituality, Robert M. Pirsig’s musings on the arts, sciences, and Quality ring as true now as they ever have.
I think we, as engineers and designers, have a lot to gain by stepping outside of our worlds. That’s why in previous pieces I’ve been drawn towards architecture, newspapers, and the occasional polymath. Today, we stumble blindly into the world of philosophy. Bear with me. I think there’s something to it.
In 1974, the American philosopher Robert M. Pirsig published a book called Zen and the Art of Motorcycle Maintenance. A flowing blend of autobiography, road trip diary, and philosophical musings, the book’s ‘chautauqua’ is an interplay between art, science, and self. Its outlook on life has stuck with me since I read it.
The book often feels prescient, at times surreal to read given it’s now 50 years old. Pirsig’s reflections on arts vs. sciences, subjective vs. objective, and systems vs. people translate seamlessly to the digital age. There are lessons there that I think are useful when trying to navigate — and build — the web. Those lessons are what this piece is about.
I feel obliged at this point to echo Pirsig and say that what follows should in no way be associated with the great body of factual information about Zen Buddhist practice. It’s not very factual in terms of web development, either.
Buddha In The Machine
Zen is written in stages. It sets a scene before making its central case. That backdrop is important, so I will mirror it here. The book opens with the start of a motorcycle road trip undertaken by Pirsig and his son. It’s a winding journey that takes them most of the way across the United States.
Despite the trip being in part characterized as a flight from the machine, from the industrial ‘death force’, Pirsig takes great pains to emphasize that technology is not inherently bad or destructive. Treating it as such actually prevents us from finding ways in which machinery and nature can be harmonious.
Granted, at its worst, the technological world does feel like a death force. In the book’s 1970s backdrop, it manifests as things like efficiency, profit, optimization, automation, growth — the kinds of words that, when we read them listed together, a part of our soul wants to curl up in the fetal position.
In modern tech, those same forces apply. We might add things like engagement and tracking to them. Taken to the extreme, these forces contribute to the web feeling like a deeply inhuman place. Something cold, calculating, and relentless, yet without a fire in its belly. Impersonal, mechanical, inhuman.
Faced with these forces, the impulse is often to recoil. To shut our laptops and wander into the woods. However, there is a big difference between clearing one’s head and burying it in the sand. Pirsig argues that “Flight from and hatred of technology is self-defeating.” To throw our hands up and step away from tech is to concede to the power of its more sinister forces.
“The Buddha, the Godhead, resides quite as comfortably in the circuits of a digital computer or the gears of a cycle transmission as he does at the top of a mountain or in the petals of a flower. To think otherwise is to demean the Buddha — which is to demean oneself.”
— Robert M. Pirsig
Before we can concern ourselves with questions about what we might do, we must try our best to marshal how we might be. We take our heads and hearts with us wherever we go. If we characterize ourselves as powerless pawns, then that is what we will be.
Where design and development are concerned, that means residing in the technology without losing our sense of self — or power. Technology is only as good or evil, as useful or as futile, as the people shaping it. Be it the internet or artificial intelligence, to direct blame or ire at the technology itself is to absolve ourselves of the responsibility to use it better. It is better not to demean oneself, I think.
So, with the Godhead in mind, to business.
Classical And Romantic
A core concern of Zen and the Art of Motorcycle Maintenance is the tension between the arts and sciences. The two worlds have a long, rich history of squabbling and dysfunction. There is often mutual distrust, suspicion, and even hostility. This, again, is self-defeating. Hatred of technology is a symptom of it.
“A classical understanding sees the world primarily as the underlying form itself. A romantic understanding sees it primarily in terms of immediate appearance.”
— Robert M. Pirsig
If we were to characterize the two as bickering siblings, familiar adjectives might start to appear:
Classical
Romantic
Dull
Frivolous
Awkward
Irrational
Ugly
Erratic
Mechanical
Untrustworthy
Cold
Fleeting
Anyone in the world of web design and development will have come up against these kinds of standoffs. Tensions arise between testing and intuition, best practices and innovation, structure and fluidity. Is design about following rules or breaking them?
Treating such questions as binary is a fallacy. In doing so, we place ourselves in adversarial positions, whatever we consider ourselves to be. The best work comes from these worlds working together — from recognising they are bound.
Steve Jobs was a famous advocate of this.
“Technology alone is not enough — it’s technology married with liberal arts, married with the humanities, that yields us the result that makes our heart sing.”
Whatever you may feel about Jobs himself, I think this sentiment is watertight. No one field holds all the keys. Leonardo da Vinci was a shining example of doing away with this needless siloing of worlds. He was a student of light, anatomy, art, architecture, everything and anything that interested him. And they complemented each other. Excellence is a question of harmony.
Is a motorcycle a romantic or classical artifact? Is it a machine or a symbol? A series of parts or a whole? It’s all these things and more. To say otherwise does a disservice to the motorcycle and deprives us of its full beauty.
Just by reframing the relationship in this way, the kinds of adjectives that come to mind naturally shift toward more harmonious territory.
Classical
Romantic
Organized
Vibrant
Scaleable
Evocative
Reliable
Playful
Efficient
Fun
Replicable
Expressive
And, of course, when we try thinking this way, the distinction itself starts feeling fuzzier. There is so much that they share.
Pirsig posits that the division between the subjective and objective is one of the great missteps of the Greeks, one that has been embraced wholeheartedly by the West in the millennia since. That doesn’t have to be the lens, though. Perhaps monism, not dualism, is the way.
In a sense, technology marks the ultimate interplay between the arts and the sciences, the classical and the romantic. It is the human condition brought to you with ones and zeros. To separate those parts of it is to tear apart the thing itself.
The same is true of the web. Is it romantic or classical? Art or science? Structured or anarchic? It is all those things and more. Engineering at its best is where all these apparent contradictions meet and become one.
What is this place? Well, that brings us to a core concept of Pirsig’s book: Quality.
Quality
The central concern of Zen and the Art of Motorcycle Maintenance is the ‘Metaphysics of Quality’. Pirsig argues that ‘Quality’ is where subjective and objective experience meet. Quality is at the knife edge of experience.
“Quality is the continuing stimulus which our environment puts upon us to create the world in which we live. All of it. Every last bit of it.”
— Robert M. Pirsig
Pirsig’s writings overlap a lot with Taoism and Eastern philosophy, to the extent that he likens Quality to the Tao. Quality is similarly undefinable, with Pirsig himself making a point of not defining it. Like the Tao, Plato’s Form of the Good, or the ‘good taste’ to which GitHub cofounder Scott Chacon recently attributed the platform’s success, it simply is.
Despite its nebulous nature, Quality is something we recognise when we see it. Any given problem or question has an infinite number of potential solutions, but we are drawn to the best ones as water flows toward the sea. When in a hostile environment, we withdraw from it, responding to a lack of Quality around us.
We are drawn to Quality, to the point at which subjective and objective, romantic and classical, meet. There is no map, there isn’t a bullet point list of instructions for finding it, but we know it when we’re there.
A Quality Web
So, what does all this look like in a web context? How can we recognize and pursue Quality for its own sake and resist the forces that pull us away from it?
There are a lot of ways in which the web is not what we’d call a Quality environment. When we use social media sites with algorithms designed around provocation rather than communication, when we’re assailed with ads to such an extent that content feels (and often is) secondary, and when AI-generated slop replaces artisanal craft, something feels off. We feel the absence of Quality.
Here are a few habits that I think work in the service of more Quality on the web.
Seek To Understand How Things Work
I’m more guilty than anyone of diving into projects without taking time to step back and assess what I’m actually dealing with. As you can probably guess from the title, a decent amount of time in Zen and the Art of Motorcycle Maintenance is spent with the author as he tinkers with his motorcycle. Keeping it tuned up and in good repair makes it work better, of course, but the practice has deeper, more understated value, too. It lends itself to understanding.
To maintain a motorcycle, one must have some idea of how it works. To take an engine apart and put it back together, one must know what each piece does and how it connects. For Pirsig, this process becomes almost meditative, offering perspective and clarity. The same is true of code. Rushing to the quick fix, be it due to deadlines or lethargy, will, at best, lead to a shoddy result and, in all likelihood, make things worse.
“Black boxes” are as much a choice not to learn as they are something innately mysterious or unknowable. One of the reasons the web feels so ominous at times is that we don’t know how it works. Why am I being recommended this? Why are ads about ivory backscratchers following me everywhere? The inner workings of web tracking or AI models may not always be available, but just about any concept can be understood in principle.
So, in concrete terms:
Read the documentation, for the love of god. Sometimes we don’t understand how things work because the manual’s bad; more often, it’s because we haven’t looked at it.
Follow pipelines from their start to their finish. How does data get from point A to point Z? What functions does it pass through, and how do they work?
Do health work. Changing the oil in a motorcycle and bumping project dependencies amount to the same thing: a caring and long-term outlook. Shiny new gizmos are cool, but old ones that still run like a dream are beautiful.
Always be studying. We are all works in progress, and clinging on to the way things were won’t make the brave new world go away. Be open to things you don’t know, and try not to treat those areas with suspicion.
Bound up with this is nurturing a love for what might easily be mischaracterized as the ‘boring’ bits. Motorcycles are for road trips, and code powers products and services, but understanding how they work and tending to their inner workings will bring greater benefits in the long run.
Reframe The Questions
Much of the time, our work is understandably organized in terms of goals. OKRs, metrics, milestones, and the like help keep things organized and stuff happening. We shouldn’t get too hung up on them, though. Looking at the things we do in terms of Quality helps us reframe the process.
The highest Quality solution isn’t always the same as the solution that performed best in A/B tests. The Dark Side of the Moon doesn’t exist because of focus groups. The test screenings for Se7en were dreadful. Reducing any given task to a single metric — or even a handful of metrics — hamstrings the entire process.
Rory Sutherland suggests much the same thing in Are We Too Impatient to Be Intelligent? when he talks about looking at things as open-ended questions rather than reducing them to binary metrics to be optimized. Instead of fixating on making trains faster, wouldn’t it be more useful to ask, How do we improve their Quality?
Challenge metrics. Good ones — which is to say, Quality ones — can handle the scrutiny. The bad ones deserve to crumble. Either way, you’re doing the world a service. With any given action you take on a website — from button design to database choices — ask yourself, Does this improve the Quality of what I’m working on? Not the bottom line. Not the conversion rate. Not egos. The Quality. Quality pulls us away from dark patterns and towards the delightful.
The will to Quality is itself a paradigm shift. Aspiring to Quality removes a lot of noise from what is often a deafening environment. It may make things that once seemed big appear small.
Seek To Wed Art With Science (And Whatever Else Fits The Bill)
None of the above is to say that rules, best practices, conventions, and the like don’t have their place or are antithetical to Quality. They aren’t. To think otherwise is to slip into the kind of dualities Pirsig rails against in Zen.
In a lot of ways, the main underlying theme in my What X Can Teach Us About Web Design pieces over the years has been how connected seemingly disparate worlds are. Yes, Vitruvius’s 1st-century tenets about architecture are useful to web design. Yes, newspapers can teach us much about grid systems and organising content. And yes, a piece of philosophical fiction from the 1970s holds many lessons about how to meet the challenges of artificial intelligence.
Do not close your work off from atypical companions. Stuck on a highly technical problem? Perhaps a piece of children’s literature will help you to make the complicated simple. Designing a new homepage for your website? Look at some architecture.
Here’s the rub. Just as Quality itself cannot be defined, the way to attain it is also not reducible to a neat bullet point list. Neither waterfall, agile or any other management framework holds the keys.
If we are serious about putting Buddha in the machine, then we must allow ourselves time and space to not do things. Distancing ourselves from the myriad distractions of modern life puts us in states where the drift toward Quality is almost inevitable. In the absence of distracting forces, that’s where we head.
Get away from the screen. We all have those moments where the solution to a problem appears as if out of nowhere. We may be on a walk or doing chores, then pop!
Work on side projects. I’m not naive. I know some work environments are hostile to anything that doesn’t look like relentless delivery. Pet projects are ideal spaces for you to breathe. They’re yours, and you don’t have to justify them to anyone.
As I go into more detail in “An Ode to Side Project Time,” there is immense good in non-doing, in letting the water clear. There is so much urgency, so much of the time. Stepping away from that is vital not just for well-being, but actually leads to better quality work too.
From time to time, let go of your sense of urgency.
Spirit Of Play
Despite appearances, the web remains a deeply human experiment. The very best and very worst of our souls spill out into this place. It only makes sense, therefore, to think of the web — and how we shape it — in spiritual terms. We can’t leave those questions at the door.
Zen and the Art of Motorcycle Maintenance has a lot to offer the modern web. It’s not a manifesto or a way of life, but it articulates an outlook on technology, art, and the self that many of us recognise on a deep, fundamental level. For anyone even vaguely intrigued by what’s been written here, I suggest reading the book. It’s much better than this article.
Be inspired. So much of the web is beautiful. The highest-rated Awwwards profiles are just a fraction of the amazing things being made every day. Allow yourself to be delighted. Aspire to be delightful. Find things you care about and make them the highest form of themselves you can. And always do so in a spirit of play.
We can carry those sentiments to the web. Do away with artificial divides between arts and science and bring out the best in both. Nurture a taste for Quality and let it guide the things you design and engineer. Allow yourself space for the water to clear in defiance of the myriad forces that would have you do otherwise.
The Buddha, the Godhead, resides quite as comfortably in a social media feed or the inner machinations of cloud computing as at the top of a mountain or in the petals of a flower. To think otherwise is to demean the Buddha, which is to demean oneself.
","description":"Road-tripping along the line between engineering and spirituality, Robert M. Pirsig’s musings on the arts, sciences, and Quality ring as true now as they ever have. 15 min read\\nBest Practices, Inspiration, Mental Health, Web Design\\nShare on Twitter, LinkedIn\\n\\nI think we, as engineers…","guid":"https://www.smashingmagazine.com/2025/05/what-zen-art-motorcycle-maintenance-teach-web-design/","author":"Frederick O’Brien","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-22T16:00:00.906Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/2-zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/4-motorcycle.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/5-zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/6-metaphysics-quality.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Best Practices","Inspiration","Mental Health","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead","url":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/","content":"
Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead
While there are plenty of ways that CSS animations can bring designs to life, adding simple SMIL (Synchronized Multimedia Integration Language) animations in SVG can help them do much more. Andy Clarke explains where SMIL animations in SVG take over where CSS leaves off.
The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into SVG 1.1, which is why we can still use it there today.
Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.
Tip: There’s now a website where you can see all my Toon Titles.
Introducing Mike Worth
I’ve recently been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a bold, retro-style design that showcases his work. I used animations throughout to delight and surprise his audience as they move through his website.
Mike loves ’90s animation — especially Disney’sDuck Tales. Unsurprisingly, my taste in cartoons stretches back a little further to Hanna-Barbera shows like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, The Yogi Bear Show. So, to explain how this era of animation relates to SVG, I’ll be adding SMIL animations in SVG to title cards from some classic Yogi Bear cartoons.
Fundamentally, animation changes how an element looks and where it appears over time using a few basic techniques. That might be simply shifting an element up or down, left or right, to create the appearance of motion, like Yogi Bear moving across the screen.
Yogi Bear title card design by Lawrence Goble (1958). Author’s recreation. (Large preview)
Rotating objects around a fixed point can create everything, from simple spinning effects to natural-looking movements of totally normal things, like a bear under a parachute falling from the sky.
Yogi Bear title card design by Lawrence Goble (1958). Author’s recreation. (Large preview)
Scaling makes an element grow, shrink, or stretch, which can add drama, create perspective, or simulate depth.
Yogi Bear title card design by Lawrence Goble (1958). Author’s recreation. (Large preview)
Changing colour and transitioning opacity can add atmosphere, create a mood, and enhance visual storytelling. Just these basic principles can create animations that attract attention and improve someone’s experience using a design.
These results are all achievable using CSS animations, but some SVG properties can’t be animated using CSS. Luckily, we can do more — and have much more fun — using SMIL animations in SVG. We can combine complex animations, move objects along paths, and control when they start, stop, and everything in between.
Animations can be embedded within any SVG element, including primitive shapes like circles, ellipses, and rectangles. They can also be encapsulated into groups, paths, and polygons:
<animate> is just one of several animation elements in SVG. Together with an attributeName value, it enables animations based on one or more of an element’s attributes.
Most animation explanations start by moving a primitive shape, like this exciting circle:
Using this attributeName property, I can define which of this circle’s attributes I want to animate, which, in this example, is its cx (x-axis center point) position:
On its own, this does precisely nothing until I define three more values. The from keyword specifies the circle’s initial position, to, its final position, and the dur-ation between those two positions:
Most SVG elements have attributes that can be animated. This title card from 1959’s “Brainy Bear” episode shows Yogi in a crazy scientist‘s brain experiment. Yogi’s head is under the dome, and energy radiates around him.
To create the buzz around Yogi, my SVG includes three path elements, each with opacity, stroke, and stroke-width attributes, which can all be animated:
To make animations appear more natural, I can apply more than one animate element and give each one a different attributename value. Those paths also contain a stroke-width attribute, which I can also animate by changing the stroke widths between 5 and 7:
Finally, I can animate the dome over Yogi’s head, changing its fill colour between two values over five seconds to create the impression that the crazy scientist’s machine is heating up:
Implement that code, and you’ll soon notice that the dome returns to its original state after the animation is complete. To retain its colour at the end of the animation, I can add the — confusingly named — fill property and a value of freeze. This stops the animation in its final state and prevents it from returning to the original colour:
Animating attributes brings these title card designs to life, whether by adjusting the position of a primitive shape, its opacity, and stroke width or by creating complex sequences with staggered timing. But there’s still more I can do, starting with the next animation element, animateTransform.
animateTransform
If <animate> controls attributes, then animateTransform animates transformations, including rotations, scaling, skewing, and translations. It works by changing the values of a transform property, like this translate:
<path transform=\\"translate(0,0)\\"/>\\n
Then, the animation works the same way as <animate>, adding an attributename and specifying the type of transform, in this example, rotate:
I can use either from and to or the values attribute to define how an element is transformed.
Scale uses x and y values (.5, 1).
Rotate uses degrees (0–360) plus optional x and y (360, 0, 0).
Translate also uses x and y values (50, 100).
Skew uses x and y values, too (50, 100).
What’s interesting about those values is that they can be added to an element’s existing values instead of replacing them. For example, when an attribute contains a translate value of 100, 0:
<path transform=\\"translate(100, 0)\\"/>\\n
And then I animate that translation horizontally by 100:
Using the additive property with a value of sum, the animation values are relative to the original, starting the animation at 100 and ending at 200 by adding 100 to 100.
Similarly, if I give the accumulate property a value of sum, each instance of animation will build on the last. So, in an animation where an element is translated by 100 and repeats five times, each movement will be cumulative, moving the element by 500:
I needed two types of transform animations to generate the effect of Yogi drifting gently downwards: translate, and rotate. I first added an animatetransform element to the group, which contains Yogi and his chute. I defined his initial vertical position — 1200 off the top of the viewBox — then translated his descent to 1000 over a 15-second duration:
Yogi appears to fall from the sky, but the movement looks unrealistic. So, I added a second animatetransform element, this time with an indefinitely repeating +/- 5-degree rotation to swing Yogi from side to side during his descent:
So far, every animation begins as soon as the page has loaded. But there are ways to not only delay the start of animation but define precisely where it begins, using the begin property:
In this title card from 1959’s “Robin Hood Yogi”, Yogi shoots an arrow into an apple on Boo-Boo’s head.
By default, the arrow is set loose when the page loads. Blink, and you might miss it. To build some anticipation, I can begin the animation two seconds later:
In his 1958 “Pie-Pirates” episode, Yogi Bear tries to steal a pie and has to outwit a bulldog. The title card — designed by Lawrence Goble — shows the chase but, alas, (spoiler alert) no stolen pie.
To bring this title card to life, I needed two groups of paths: one for Yogi and the other for the dog. I translated them both off the left edge of the viewBox:
Animations can begin when a page loads, after a specified time, or when clicked. And by naming them, they can also synchronise with other animations.
I wanted Yogi to enter the frame first to build anticipation, with a short pause before other animations begin, synchronising to the moment he’s arrived. First, I added an ID to Yogi’s translate animation:
Watch out: For a reason, I can’t, for the life of me, explain why Firefox won’t begin animations with an ID when the ID contains a hyphen. This isn’t smarter than the average browser, but replacing hyphens with underscores fixes the problem.
Then, I applied a begin to his rotate animation, which starts playing a half-second after the #yogi animation ends:
I can build sophisticated sets of synchronised animations using the begin property and whether a named animation begins or ends. The bulldog chasing Yogi enters the frame two seconds after Yogi begins his entrance:
The timing of this background movement is synchronised with the dog arriving, which, in turn, is relative to Yogi’s arrival, building a sequence of animations that all feel connected.
Animating Along Motion Paths
Until now, all the animations in these title cards have been up, down, left, right, or one combination or another. But there’s one more aspect of SMIL in SVG, which can add an extra dimension to animations: animating along motion paths using the animatemotion element.
animatemotion accepts all the same properties and values as animate and animateTransform, but adds a few more for finer control over direction and timing. animatemotion uses the path property to enable elements to move along a motion path. It also uses the d value for coordinate data in the same way as any conventional path.
In “The Runaway Bear” from 1959, Yogi must avoid a hunter turning his head into a trophy. I wanted Yogi to leap in and out of the screen by making him follow a path. I also wanted to vary the speed of his dash: speeding up as he enters and exits, and slowing down as he passes the title text.
I first added a path property, using its coordinate data to give Yogi a route to follow, and specified a two-second duration for my animation:
I experimented with several paths before settling on the one that delivered the movement shape I was looking for:
Yogi Bear title card design by Lawrence Goble (1959.) Author’s recreation. (Large preview)
One was too bouncy, one was too flat, but the third motion path was just right. Almost, as I also wanted to vary the speed of Yogi’s dash: speeding him up as he enters and exits and slowing him down as he passes the title text.
The keyPoints property enabled me to specify points along the motion path and then adjust the duration Yogi spends between them. To keep things simple, I defined five points between 0 and 1:
With their ability to control transformations, animate complex motion paths, and synchronise multiple animations, SMIL animations in SVG are still powerful tools. They can bring design to life without needing a framework or relying on JavaScript. It’s compact, which makes it great for small SVG effects.
SMIL includes the begin attribute, which makes chaining animations far more intuitive than with CSS. Plus, SMIL lives inside the SVG file, making it perfect for animations that travel with an asset. So, while SMIL is not modern by today’s standards and may be a little bit niche, it can still be magical.
Google reversed its decision to deprecate SMIL almost a decade ago, so it remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.
","description":"While there are plenty of ways that CSS animations can bring designs to life, adding simple SMIL (Synchronized Multimedia Integration Language) animations in SVG can help them do much more. Andy Clarke explains where SMIL animations in SVG take over where CSS leaves off. 14 min…","guid":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/","author":"Andy Clarke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-20T16:00:00.629Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/1-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/2-mike-worth-website.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/3-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/4-yogi-bear-title-card.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/5-yogi-bear-title-card-design.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/6-yogi-bear-title-card.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/7-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/8-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/9-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/10-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/11-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/12-yogi-bear-title-card-recreations.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["SVG","Animation","Design"],"attachments":null,"extra":null,"language":null},{"title":"Design System In 90 Days","url":"https://www.smashingmagazine.com/2025/05/design-system-in-90-days/","content":"
Design System In 90 Days
Helpful PDF worksheets and tools to get the design system effort up and running — and adopted! Kindly powered by How To Measure UX and Design Impact, a friendly course on how to show the impact of your incredible UX work on business.
So we want to set up a new design system for your product. How do we get it up and running from scratch? Do we start with key stakeholders, UI audits, or naming conventions? And what are some of the critical conversations we need to have early to avoid problems down the line?
Fortunately, there are a few useful little helpers to get started — and they are the ones I tend to rely on quite a bit when initiating any design system projects.
Design System In 90 Days Canvas
Design System in 90 Days Canvas (FigJam template) is a handy set of useful questions to start a design system effort. Essentially, it’s a roadmap to discuss everything from the value of a design system to stakeholders, teams involved, and components to start with.
A neat little helper to get a design system up and running — and adopted! — in 90 days. Created for small and large companies that are building a design system or plan to set up one. Kindly shared by Dan Mall.
Practical Design System Tactics
Design System Tactics is a practical overview of tactics to help designers make progress with a design system at every stage — from crafting system principles to component discovery to design system office hours to cross-brand consolidation. Wonderful work by the one-and-only Ness Grixti.
Design System Checklist by Nathan Curtis (download the PDF) is a practical 2-page worksheet for a 60-minute team activity, designed to choose the right parts, products, and people for your design system.
Of course, the point of a design system is not to be fully comprehensive or cover every possible component you might ever need. It’s all about being useful enough to help designers produce quality work faster and being flexible enough to help designers make decisions rather than make decisions for them.
Useful Questions To Get Started With
The value of a design system lies in it being useful and applicable — for a large group of people in the organization. And according to Dan, a good start is to identify where exactly that value would be most helpful to tackle the company’s critical challenges and goals:
What is important to our organization at the highest level?
Who is important to our design system effort?
What unofficial systems already exist in design and code?
Which teams have upcoming needs that a system could solve?
Which teams have immediate needs that can grow our system?
Which teams should we and have we talked to?
Which stakeholders should we and have we talked to?
What needs, desires, and concerns do our stakeholders have?
What components do product or feature teams need now or soon?
What end-user problems/opportunities could a system address?
What did we learn about using other design systems?
What is our repeatable process for working on products?
What components will we start with?
What needs, desires, and concerns do our stakeholders share?
Where are our components currently being used or planned for?
Useful Resources
Here are a few other useful little helpers that might help you in your design system efforts:
A canvas often acts as a great conversation starter. It’s rarely complete, but it brings up topics and issues that one wouldn’t have discovered on the spot. We won’t have answers to all questions right away, but we can start moving in the right direction to turn a design system effort into a success.
Happy crossing off the right tick boxes!
How To Measure UX And Design Impact
Meet Measure UX & Design Impact (8h), a practical guide for designers and UX leads to shape, measure, and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 IMPACT to save 20% off today. Jump to the details.
","description":"Helpful PDF worksheets and tools to get the design system effort up and running — and adopted! Kindly powered by How To Measure UX and Design Impact, a friendly course on how to show the impact of your incredible UX work on business. 4 min read\\nDesign Systems, Tools, UX\\nShare on Twi…","guid":"https://www.smashingmagazine.com/2025/05/design-system-in-90-days/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-18T16:00:00.082Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-91-design-system-90-days/1-mailing-91-design-system-90-days.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-91-design-system-90-days/2-mailing-91-design-system-90-days.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/mailing-91-design-system-90-days/3-mailing-91-design-system-90-days.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png","type":"photo","width":900,"height":466}],"categories":["Design Systems","Tools","UX"],"attachments":null,"extra":null,"language":null},{"title":"Building A Practical UX Strategy Framework","url":"https://www.smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/","content":"
Building A Practical UX Strategy Framework
Learn how to create and implement a UX strategy framework that shapes work and drives real business value.
In my experience, most UX teams find themselves primarily implementing other people’s ideas rather than leading the conversation about user experience. This happens because stakeholders and decision-makers often lack a deep understanding of UX’s capabilities and potential. Without a clear UX strategy framework, professionals get relegated to a purely tactical role — wireframing and testing solutions conceived by others.
A well-crafted UX strategy framework changes this dynamic. It helps UX teams take control of their role and demonstrate real leadership in improving the user experience. Rather than just responding to requests, you can proactively identify opportunities that deliver genuine business value. A strategic approach also helps educate stakeholders about UX’s full potential while building credibility through measurable results.
Finally, we outline actions to get us where we want to go.
Let me walk you through each part so you can shape a UX strategy that feels both practical and powerful.
Diagnosis: Know Your Starting Point
Before we outline any plan, we need to assess our current situation. A clear diagnosis shows where you can make the biggest impact. It also highlights the gaps you must fill.
Identify Status Quo Failures
Start by naming what isn’t working. You might find that your organization lacks a UX team. Or the team has a budget that is too small. Sometimes you uncover that user satisfaction scores are slipping. Frame these challenges in business terms. For example, a slow sign‑up flow may be costing you 20 percent of new registrations each month. That ties UX to revenue and grabs attention.
Once you have a list of failures, ask yourself:
What outcome does each failure hurt?
A slow checkout might reduce e‑commerce sales. Complicated navigation may dent customer retention. Linking UX issues to business metrics makes the case for change.
Map The Aspirational Experience
Next, visualize what an improved journey would look like. A quick way is to create two simple journey maps. One shows the current experience. The other shows an ideal path. Highlight key steps like discovery, sign‑up, onboarding, and support. Then ask:
How will this new journey help meet our business goals?
Maybe faster onboarding can cut support costs. Or a streamlined checkout can boost average order value.
Let me share a real-world example. When working with the Samaritans, a UK mental health charity, we first mapped their current support process. While their telephone support was excellent, they struggled with email and text support, and had no presence on social media platforms. This was largely because volunteers found it difficult to manage multiple communication systems.
By mapping the current experience of the Samaritan users, we identified weaknesses that we could address in our UX strategy. (Large preview)
We then created an aspirational journey map showing a unified system where volunteers could manage all communication channels through a single interface. This clear vision gave the organization a concrete goal that would improve the experience for both users seeking help and the volunteers providing support.
Mapping an aspirational experience provided a clear vision everybody could work towards. (Large preview)
This vision gives everyone something to rally around. It also guides your later actions by showing the target state.
Audit Resources And Influence
Next, turn your attention to what you have to work with. List your UX team members and their skills. Note any budget set aside for research tools or software licenses. Then identify where you have influence across the organization. Which teams already seek your advice? Who trusts your guidance? That might be the product group or marketing. You’ll lean on these allies to spread UX best practices.
Finally, consider who else matters. Are there policy owners, process leads, or executives you need on board? Jot down names and roles so you can loop them in later.
Spot Your Constraints
Every strategy must live within real‑world limits. Maybe there’s a headcount freeze. Or IT systems won’t support a major overhaul. List any technical, budget, or policy limits you face. Then accept them. You’ll design your strategy to deliver value without asking for impossible changes. Working within constraints boosts your credibility. It also forces creativity.
With the diagnosis complete, we know where we stand. Next, let’s look at how to steer our efforts.
Guiding Policies: Set the North Star
Guiding policies give you guardrails. They help you decide which opportunities to chase and which to skip. These policies reflect your priorities and the best path forward.
Choose A Tactical Or Strategic Approach
Early on, you must pick how your UX team will operate. You have two broad options:
Tactical You embed UX people on specific projects. They run tests and design interfaces hands‑on. This needs a bigger team. I like a ratio of one UX pro for every two developers.
Strategic You act as a center of excellence. You advise other teams. You build guidelines, run workshops, and offer tools. This needs fewer hands but a broader influence.
Weigh your resources against your goals. If you need to move fast on many projects, go tactical. If you want to shift mindsets, work strategically. Choose the approach with the best chance of success.
Define A Prioritization Method
You’ll face many requests for UX work. A clear way to sort them saves headaches. Over the years, I’ve used a simple digital triage. You score each request based on impact, effort, and risk. Then, you work on the highest‑scoring items first. You can adapt this model however you like. The point is to have a repeatable, fair way to say yes or no.
Create A Playbook Of Principles
A playbook holds your core design principles, standard operating procedures, and templates. It might include:
A design system for UI patterns;
Standards around accessibility or user research;
Guides for key tasks such as writing for the web;
Templates for common activities like user interviews.
This playbook becomes your team’s shared reference. It helps others repeat your process. It also captures the know‑how you need as your team grows.
A playbook helps you document your strategies, policies, principles, and standard operating procedures. (Large preview)
Plan Your Communication
Strategy fails when people don’t know about it. You need a plan to engage stakeholders. I find it helpful to use a RACI chart — who is Responsible, Accountable, Consulted, and Informed. Then decide:
How often will you send updates?
Which channels should you use (email, Slack, weekly demos)?
Who leads each conversation?
Clear, regular communication keeps everyone looped in. It also surfaces concerns early so you can address them.
With guiding policies in place, you have a clear way to decide what to work on. Now, let’s turn to making things happen.
Action Plan: Bring Strategy To Life
Actions are the concrete steps you take to deliver on your guiding policies. They cover the projects you run, the support you give, and the risks you manage.
Outline Key Projects And Services
Start by listing the projects you’ll tackle. These might be:
Running a discovery phase for a new product.
Building a design system for your marketing team.
Conducting user tests on your main flow.
For each project, note what you will deliver and when. You can use your digital triage scores to pick the highest priorities. Keep each project scope small enough to finish in a few sprints. That way, you prove value quickly.
Offer Training And Tools
If you choose a strategic approach, you need to empower others. Plan workshops on core UX topics. Record short videos on testing best practices. Build quick reference guides. Curate a list of tools:
Prototyping apps,
Research platforms,
Analytics dashboards.
Make these resources easy to find in your playbook.
Assign Stakeholder Roles
Your strategy needs executive backing. Identify a senior sponsor who can break through roadblocks. Outline what you need them to do. Maybe it’s championing a new budget line or approving key hires. Also, pin down other collaborators. Who on the product side will help you scope new features? Who on the IT team will support user research tooling? Getting clear roles avoids confusion.
Manage Risks and Barriers
No plan goes off without a hitch. List your biggest risks, such as:
A hiring freeze delays tactical hires;
Key stakeholders lose interest;
Technical debt slows down new releases.
For each risk, jot down how you’ll handle it. Maybe you should shift to a fully strategic approach if hiring stalls. Or you can send a weekly one‑page update to reengage sponsors. Having a fallback keeps you calm when things go sideways.
Before we wrap up, let’s talk about making strategy stick.
Embedding UX Into The Culture
A strategy shines only if you deeply embed it into your organization’s culture. Here’s how to make that happen:
Build awareness and enthusiasm
Run regular “lunch and learn” sessions to showcase UX wins.
Host an annual UX day or mini-conference to boost visibility.
Create a monthly UX salon where teams share challenges and victories.
Make UX visible and tangible
Display personas and journey maps in office spaces.
Add design principles to everyday items like mousepads and mugs.
Share success metrics and improvements in company communications.
Embed UX into processes
Establish clear UX policies and best practices.
Review and update procedures that might hinder a good user experience.
Create a healthy competition between teams through UX metrics.
These tactics transform your strategy from a document into an organizational movement. They foster a culture where everyone thinks about user experience, not just the UX team. Remember, cultural change takes time — but consistent, visible efforts will gradually shift mindsets across the organization.
Implementing Your UX Strategy: From Plan To Practice
We started by diagnosing your current state. Then we set policies to guide your efforts. Finally, we laid out an action plan to deliver results. This three-part framework keeps your UX work tied to real business needs. It also gives you clarity, focus, and credibility.
However, creating a strategy is the easy part — implementing it is where the real challenge lies. This is precisely why the book Strategy and the Fat Smoker carries its distinctive title. Just as someone who is overweight or smokes knows exactly what they need to do, we often know what our UX strategy should be. The difficult part is following through and making it a reality.
Success requires consistent engagement and persistence in the face of setbacks. As Winston Churchill wisely noted,
“Success is going from failure to failure with no loss of enthusiasm.”
This perfectly captures the mindset needed to implement a successful UX strategy — staying committed to your vision even when faced with obstacles and setbacks.
","description":"Learn how to create and implement a UX strategy framework that shapes work and drives real business value. 9 min read\\nUX, Frameworks, Business, Workflow\\nShare on Twitter, LinkedIn\\n\\nIn my experience, most UX teams find themselves primarily implementing other people’s ideas rather than…","guid":"https://www.smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/","author":"Paul Boag","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-15T16:00:00.372Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["UX","Frameworks","Business","Workflow"],"attachments":null,"extra":null,"language":null},{"title":"Fewer Ideas: An Unconventional Approach To Creativity","url":"https://www.smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/","content":"
Fewer Ideas: An Unconventional Approach To Creativity
Remember that last team brainstorming session where you were supposed to generate a long list of brilliant ideas? How many of those ideas actually stuck? Did leadership act on any of those ideas? In this article, Eric Olive challenges the value of exercises like brainstorming and explores more effective methods for sparking creativity to improve design and enhance the user’s experience.
What do the Suez Canal, the Roman Goddess Libertas, and ancient Egyptian sculptures have in common? The Statue of Liberty.
Surprising? Sure, but the connections make sense when you know the story as recounted by Columbia University psychologist Sheena Iyengar on a recent episode of Hidden Brain.
The French artist Frédéric Bartholdi drew inspiration from Egyptian sculptures when he submitted a design for a sculpture that was going to be built at the Suez Canal.
That plan for the Suez Canal sculpture fell through, leading Bartholdi and a friend to raise money to create a sculpture as a gift to the United States. Bartholdi designed the sculpture after studying the intricacies of the Roman Goddess Libertas, a significant female icon in the late 1800s. He also modeled the statue on Isabelle Boyer, who was 36 years old in 1878. Finally, Bartholdi incorporated his mother’s face into the proposed design. The result? The Statue of Liberty.
Bartholdi’s unorthodox yet methodical approach yielded one of the most famous sculptures in the world.
How did he do it? Did he let his mind run wild? Did he generate endless lists or draw hundreds of plans for each sculpture? Was he a 19th-century brainstorming advocate?
The Problem
“Yes,” would be the answer of many innovation experts today. From stand-ups to workshops and templates to whiteboards, getting the creative juices flowing often involves brainstorming along with the reminder that “there are no bad ideas” and “more ideas are better.” Practiced and repeated so often, this approach to creativity must work, right?
Wrong, says Iyengar. Too many ideas hinder creativity because the human brain can only manage a few ideas at once.
“Creativity requires you to have a bunch of pieces and to not only be able to have them in your memory bank in a way that you can kind of say what they are, but to be able to keep manipulating them in lots of different ways. And that means, you know, in order for your mind to be able to be facile enough to do that, it is going to need fewer pieces.”
Evidence for this view includes a study published by Anne-Laure Sellier of HEC Paris and Darren W. Dahl of British Columbia. The authors compared knitting and crafting in two experimental studies. The results suggested that restricting the number of materials and other creative inputs enhanced the creativity of study participants. The reason was the participants’ ability to enjoy the creative process more, which enhanced their creative output.
A few years ago, I had a similar experience while planning a series of studies. As with any initiative, identifying the scope was key. The problem? Rather than choose from two or three well-defined options, the team discussed several themes at once and then piled on a series of ideas about the best format for presenting these themes: Lists, tables, graphs, images, and flowcharts. The results looked something like this.
Traditional brainstorming leads to a messy whiteboard. (Large preview)
A messy whiteboard is not inherently bad. The question is whether brainstorming results like these block or enhance creativity. If the board above seems overwhelming, it’s worth considering a more structured process for creativity and idea generation.
The Solution: Three Ways To Enhance Creativity
Just as Bartholdi approached his designs methodically, designers today can benefit from limits and structure.
In this article, I’ll shed light on three techniques that enhance creativity:
In today’s world, it’s easy to fall into the trap of believing that creativity comes from simply exposing yourself to a flood of information — scrolling endlessly, consuming random facts, and filling your mind with disconnected data points. It’s a trap because mindless absorption of information without understanding the purpose or deeper context won’t make you more creative.
True creativity is fueled by curiosity, the drive to know more. Curiosity is powerful because it acts as an internal compass, guiding our search for knowledge with intention.
When you’re curious, you don’t just passively take in information; you actively seek it with a purpose.
You have a question in mind, a direction, a reason that shapes the way you explore. This sense of purpose transforms information from a chaotic influx of data into structured, meaningful insights that the brain can organize, categorize, and retrieve when needed.
In my role as a user experience (UX) researcher, I recently needed to review 100+ internal and industry research papers to establish and understand what was already known about a specific subject. The challenge was how to sort, organize, and absorb this information without feeling overwhelmed. Was it better to leverage AI tools like Gemini or ChatGPT to summarize this body of knowledge? How reliable would these summaries be? Was it better to read the executive summaries and copy a few themes to include in a synopsis of all of these papers? What was the best way to organize this information? Which tool should I use to summarize and organize?
Faced with a tight deadline and mounting stress, I paused to reassess. To avoid spiraling, I asked: What are the core objectives of this research review? I then defined three key goals:
Extract three to five themes to present to several internal teams.
Craft a research plan pegged to these themes.
Leverage these themes to inform a series of screens that the design team would create to test with real users.
With clearly defined objectives, I had a purpose. This purpose allowed me to channel my innate curiosity because I knew why I was wading through so much material and who would read and review the synthesis. Curiosity drove me to explore this large body of research, but purpose kept me focused.
Curiosity is the drive to learn more. Creativity requires curiosity because, without this drive, designers and researchers are less likely to explore new ideas or new approaches to problem-solving. The good news is that research and design attract the naturally curious.
Purposeful curiosity is the difference between drowning in a sea of knowledge and navigating it with mastery.
Tip 2: Imposing Constraints And Making A Plan
Just as purpose makes it easier to focus, constraint also contributes to creativity. Brainstorming 50 ideas might seem creative but can actually prove more distracting than energizing. Limiting the number of ideas is more productive.
“Some people think that having constraints means they can’t be creative. The research shows that people are more creative when there are constraints.”
The point is not to limit creativity and innovation but to nurture it with structure. Establishing constraints enhances creativity by focusing idea generation around a few key themes.
Here are two ways to focus on idea generation:
During meetings and workshops, how might we (HMW) statements help concentrate discussion while still leaving room for a variety of ideas? For example, “How might we condense this 15-step workflow without omitting essential information?”
Identify the problem and conduct two exercises to test solutions. For example, three customer surveys conducted over the past six months show a consistent pattern: 30% of customers are dissatisfied with their call center experience, and time-on-call has increased over the same six-month period. Divide the team into two groups.
Group 1 writes two new versions of the greeting customer service representatives (CSRs) use when a customer calls. The next step is an A/B test.
Group 2 identifies two steps to remove from the current CSR script. The next step is a trial run with CSRs to record time-on-call and customer satisfaction with the call.
“Constraint” can be negative, such as a restriction or limitation, but it can also refer to exhibiting control and restraint.
By exercising restraint, you and your team can cultivate higher-quality ideas and concentrate on solutions. Rather than generate 50 ideas about how to reconfigure an entire call center setup, it is more productive to focus on two metrics: time-on-task and the customer’s self-rated satisfaction when contacting the call center.
By channeling this concentrated energy towards well-defined challenges, your team can then effectively pursue innovative solutions for two closely related issues.
Tip 3: Look To Other Domains
Other domains or subject areas can be a valuable source of innovative solutions. When facing a challenging design problem, limiting ideas but reaching beyond the immediate domain is a powerful combination.
The high-stakes domain of airplane design provides a useful case study of how to simultaneously limit ideas and look to other domains to solve a design problem. Did you know that Otto Lilienthal, a 19th-century design engineer, was the first person to make repeated, successful flights with gliders?
Maybe not, but you’ve likely heard of the Wright brothers, whose work launched modern aviation. Why? Lilienthal’s work, while essential, relied on a design based on a bird’s wings, requiring the person flying the glider to move their entire body to change direction. This design ultimately proved fatal when Lilienthal was unable to steer out of a nosedive and crashed.
The Wright brothers were bike mechanics who leveraged their knowledge of balance to create a steering mechanism for pilots. By looking outside the “flight domain,” the Wright brothers found a way to balance and steer planes and ultimately transformed aviation.
In a similar fashion, Bartholdi, the French artist who sculpted the Statue of Liberty, did not limit himself to looking at statues in Paris. He traveled to Egypt, studied coins and paintings, and drew inspiration from his mother’s face.
Designers seeking inspiration should step away from the screen to paint, write a poem, or build a sculpture with popsicle sticks. In other words, paint with oils, not pixels; write with ink, not a keyboard; sculpt with sticks, not white space.
On its face, seeking inspiration from other disciplines would seem to contradict Tip 2 above — impose constraints. Examined from another angle, however, imposing constraints and exploring domains are complementary techniques.
Rather than list ten random ideas on a whiteboard, it’s more productive to focus on a few solutions and think about these solutions from a variety of angles. For example, recently, I found myself facing a high volume of ideas, source material, and flow charts. While organizing this information was manageable, distilling it into a form others could absorb proved challenging.
Rather than generate a list of ten ways to condense this information, I took the dog for a walk and let my eyes wander while strolling through the park. What did I see when my eyes lit upon barren trees? Branches. And what do flow charts do? They branch into different directions.
Upon finishing the walk, I jumped back online and began organizing my source material into a series of branched flows. Was this wildly innovative? No. Was this the first time I had drawn flowcharts with branches? Also no. The difference in this case was the application of the branching solution for all of my source material, not only the flow charts. In short, a walk and a nudge from nature’s design helped me escape the constraints imposed by a two-dimensional screen.
Stepping away from the screen is, of course, good for our mental and physical health. The occasional light bulb moment is a bonus and one I’m happy to accept.
Conclusion
Yet these moments alone are not enough. You must channel inspiration by applying practical techniques to move forward with design and analysis lest you become overwhelmed by so many ideas that you become paralyzed and unable to make a decision.
To avoid paralysis and reduce the chances of wasting time, I’ve argued against brainstorming, endless lists, and wall-to-wall post-its. Instead, I’ve proposed three practical techniques to boost creativity.
Controlled curiosity.
From brainstorming to endless scrolling, exposing yourself to high volumes of information is a trap because absorbing information without understanding the purpose or deeper context won’t make you more creative.
The solution lies in transforming curiosity into focused exploration. Purposeful curiosity allows you to explore, think, and identify solutions without drowning in a sea of information.
Imposing constraints.
Brainstorming long lists of ideas might seem creative, but can actually prove more distracting than energizing.
The solution is to nurture creativity with structure by limiting the number of ideas under consideration.
This structure enhances creativity by focusing idea generation around a few key themes.
Look beyond your immediate domain.
Otto Lilienthal’s fatal glider crash shows what can happen when solutions are examined through the single lens of one subject area.
The solution is to concentrate on innovative solutions for a single issue while reflecting on the problem from various perspectives, such as two-dimensional design, three-dimensional design, or design in nature.
","description":"Remember that last team brainstorming session where you were supposed to generate a long list of brilliant ideas? How many of those ideas actually stuck? Did leadership act on any of those ideas? In this article, Eric Olive challenges the value of exercises like brainstorming and…","guid":"https://www.smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/","author":"Eric Olive","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-14T16:00:00.173Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["UX","Design","Inspiration","Workflow"],"attachments":null,"extra":null,"language":null},{"title":"Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension","url":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/","content":"
Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension
What if you could take your CSS animations beyond simple fades and slides — adding an extra dimension and a bit of old-school animation magic? In this article, pioneering author and web designer Andy Clarke will show you how masking can unlock new creative possibilities for CSS animations, making them feel more fluid, layered, and cinematic.
Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in Part 1, they remind me of the 1960s Hanna-Barbera animated series I grew up watching on TV. Shows like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, Yogi Bear.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
Mike loves ’90s animation — especially Disney’s Duck Tales. So, that is the aesthetic applied throughout the design.
I used animations throughout and have recently added an extra dimension to them using masking. So, to explain how this era of animation relates to masking in CSS, I’ve chosen an episode of The Yogi Bear Show, “Disguise and Gals,” first broadcast in May 1961. In this story, two bank robbers, disguised as little old ladies, hide their loot in a “pic-a-nic” basket in Yogi and Boo-Boo’s cave!
What could possibly go wrong?
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
What’s A Mask?
One simple masking example comes at the end of “Disguise and Gals” and countless other cartoons. Here, an animated vignette gradually hides more of Yogi’s face. The content behind the mask isn’t erased; it’s hidden.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
In CSS, masking controls visibility using a bitmap, vector, or gradient mask image. When a mask’s filled pixels cover an element, its content will be visible. When they are transparent, it will be hidden, which makes sense. Filled pixels can be any colour, but I always make mine hot pink so that it’s clear to me which areas will be visible.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Author’s recreation. (Large preview)
A clip-path functions similarly to a mask but uses paths to create hard-edged clipping areas. If you want to be picky, masks and clipping paths are technically different, but the goal for using them is usually the same. So, for this article, I’ll refer to them as two entrances to the same cave and call using either “masking.”
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
In this sequence from “Disguise and Gals,” one of the robbers rushes the picnic basket containing their loot into Yogi’s cave. Masking defines the visible area, creating the illusion that the robber is entering the cave.
How do I choose when to use clip path and when to choose mask?
I’ll explain my reasons in each example.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Author’s recreation. (Large preview)
When Mike Worth and I discussed working together, we knew we would neither have the budget nor the time to create a short animated cartoon for his website. However, we were keen to explore how animations could bring to life what would’ve otherwise been static images.
Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen. (Large preview)
Masking Using A Clipping Path
On Mike’s biography page, his character also enters a cave. The SVG illustration I created contains two groups, one for the background and the other for the orangutan in the foreground:
I defined a keyframe animation that moves the character from 2000px on the right to its natural position in the center of the frame by altering its translate value:
While the 50px bounce does add a touch of realism to his movement, I wasn’t happy with how the character’s entrance started at the edge of the viewport.
I wanted him to become visible at the edge of the illustration instead. As the edges of the cave walls are hard, I chose a clip-path.
There are several ways to define a clip-path in CSS. I could use a primitive shape like a rectangle, where each of the first four values specifies its corner positions. The round keyword and the value that follows define any rounded corners:
Or xywh (x, y, width, height) values, which I find easier to read:
clip-path: xywh(0 0 150px 150px round 5px);\\n
I could use a circle:
clip-path: circle(60px at center);\\n
Or an ellipse:
clip-path: ellipse(50% 40% at 50% 50%);\\n
I could use a polygon shape:
clip-path: polygon(...);\\n
Or even the points from a path I created in a graphics app like Sketch:
clip-path: path(\\"M ...\\");\\n
Finally — and my choice for this example — I might use a mask that I defined using paths from an SVG file:
clip-path: url(#mask-cave);\\n
To make the character visible from the edge of the illustration, I added a second SVG. To prevent a browser from displaying it, set both its dimensions to zero:
This contains a single SVG clipPath. By placing this inside the defs element, this path isn’t rendered, but it will be available to create my CSS clip-path:
Tip: Implement that code, and you’ll notice there’s a problem when resizing a browser window. While my cave illustration is flexible, the clipPath remains a fixed width.
To make clipPath responsive, add clipPathUnits=\\"objectBoundingBox\\" to the opening tag, then apply two scale values to the transform property. To calculate these values, divide 1 first by the SVG’s width and then by its height. My SVG’s width is 1400px, which produces the first scale value, 0.0007142857143.
While a clipPath will give me the result I’m looking for, the complexity and size of these paths can sometimes negatively affect performance. That’s when I choose a CSS mask as its properties have been baseline and highly usable since 2023.
The mask property is a shorthand and can include values for mask-clip, mask-mode, mask-origin, mask-position, mask-repeat, mask-size, and mask-type. I find it’s best to learn these properties individually to grasp the concept of masks more easily.
Masks control visibility using bitmap, vector, or gradient mask images. Again, when a mask’s filled pixels cover an element, its content will be visible. When they‘re transparent, the content will be hidden. And when parts of a mask are semi-transparent, some of the content will show through. I can use a bitmap format that includes an alpha channel, such as PNG or WebP:
mask-image: url(mask.webp);\\n
I could apply a mask using a vector graphic:
mask-image: url(mask.svg);\\n
Or generate an image using a conical, linear, or radial gradient:
mask shares the same syntax as CSS backgrounds, which makes remembering its properties much easier. To apply a background-image, add its URL value:
background-image: url(\\"background.webp\\");\\n
To apply a mask, swap the background-image property for mask-image:
mask-image: url(\\"mask.webp\\");\\n
The mask property also shares the same browser styles as CSS backgrounds, so by default, a mask will repeat horizontally and vertically unless I specify otherwise:
It will be placed at the top-left corner unless I alter its position:
Mike’s FAQs page includes an animated illustration of his hero standing at a crossroads. My goal was to separate the shape from its content, allowing me to change the illustration throughout the hero’s journey. So, I created a scalable mask-image which defines the visible area and applied it to the figure element:
figure {\\n mask-image: url(mask.svg);\\n}\\n
To ensure the mask matched the illustration’s dimensions, I also set the mask-size to always cover its content:
Although “X“ never, ever marks the spot, Mike Worth’s review page illustration sees his orangutan mascot studying his treasure map. I wanted to focus someone’s attention on the center part of the image by using an elliptical shape.
I experimented by combining a Gaussian blur filter with a mask defined in SVG, first by creating the filter, and then applying it to the mask’s ellipse:
And, while this achieved the result I was looking for, the implementation felt over-engineered for what was, after all, a simple effect. By far, the most efficient, elegant, and responsive implementation used a radial-gradient, achieving the effect I was hoping for with no bitmap or vector image and just a single CSS property:
Try this yourself:
See the Pen [Mike Worth’s review page (radial gradient mask) [forked]](https://codepen.io/smashingmag/pen/MYYLwjj) by Andy Clarke.
This approach enables me to fine-tune my mask-image size and even animate its colour stops, position, and size when someone interacts with its content.
Layering Multiple Masks
Lighting is especially important on Mike Worth’s review page, where his orangutan hero needs it to study his treasure map. Like background images, I can apply multiple mask images to create the lighting I need.
I could combine two mask images: a circular, semi-transparent radial-gradient to provide the ambiance, plus a linear-gradient at a 45-degree angle for the light rays. I applied them both to the figure element:
I positioned the masks individually, set the radial-gradient size to 80%, and the linear-gradient light rays to cover the entire image:
But, I needed more precise control over the position of the light rays to create the effect that they’re coming from the desk lamp. So, I replaced the linear-gradient with a soft-edged bitmap image:
Finally, to add an extra touch of realism, I added a keyframe animation — which changes the mask-size and creates the effect that the lamp light is flickering — and applied it to the figure:
Animating CSS masks creates exciting reveals and transitions between scenes and helps someone focus on critical content. It can also bring stories to life, making a person’s experience more engaging and immersive.
In this deleted scene from my design for his website, the orangutan adventurer mascot I created for Mike Worth can be seen driving across the landscape. To help tell the story that he’s being watched from afar by his archnemesis, I wanted to add a binocular-shaped mask.
However, despite the infinitely scrolling background and the motion of the hero’s bumpy ride, the animation still felt static. So I added a subtle animation that shifts the mask-position, first by creating the keyframes:
Then, I applied it, along with the scrolling background animation, to the figure element:
/* Run both animations simultaneously */\\nfigure {\\n animation:\\n background-scroll 5s linear infinite,\\n pan-mask 6s ease-in-out infinite alternate;\\n}\\n
After seeing these results, I wondered whether I could connect someone to the story by linking the mask-position to the movement of their cursor. I added a script that selects the figure element, gets the cursor position relative to the viewport, and dynamically changes the mask-position:
<script>\\n // Select the figure element.\\n const figure = document.querySelector(\'figure\');\\n document.addEventListener(\'mousemove\', (event) => {\\n \\n // Get the cursor position.\\n const mouseX = event.clientX;\\n const mouseY = event.clientY;\\n \\n // Normalise the mask-position.\\n const maskX = (mouseX / window.innerWidth) * 100;\\n const maskY = (mouseY / window.innerHeight) * 100;`\\n \\n // Dynamically set the mask-position.\\n figure.style.maskPosition =${maskX}% ${maskY}%;\\n });\\n</script>\\n
Try this yourself:
See the Pen [Mike Worth’s journey animation with binoculars following the cursor [forked]](https://codepen.io/smashingmag/pen/oggmXeM) by Andy Clarke.
With that, there was only one challenge left to complete the effect. Focusing binoculars on a distant target is rarely easy, and when the hero’s archnemesis has hands the size of a silverback gorilla, the task is even more challenging. I extended my script to blur the visible content seen through the binocular-shaped mask and then removed the filter when someone presses their keyboard’s spacebar or presses a mouse button:
To let someone know they might’ve reached the end of their adventure, I wanted to ape the zooming-in effect I started this article with:
<figure>\\n <svg>…</svg>\\n</figure>\\n
I created a circular clip-path and set its default size to 75%. Then, I defined the animation keyframes to resize the circle from 75% to 15% before attaching it to my figure with a one-second duration and a three-second delay:
Masking adds an extra dimension to web animation and makes stories more engaging and someone’s experience more compelling — all while keeping animations efficiently lightweight. Whether you’re revealing content, guiding focus, or adding more depth to a design, masks offer endless creative possibilities. So why not experiment with them in your next project? You might uncover a whole new way to bring your animations to life.
","description":"What if you could take your CSS animations beyond simple fades and slides — adding an extra dimension and a bit of old-school animation magic? In this article, pioneering author and web designer Andy Clarke will show you how masking can unlock new creative possibilities for CSS…","guid":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/","author":"Andy Clarke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-13T16:00:00.860Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/1-yogi-bear-show.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/2-yogi-bear-design-andy-clarke.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/3-yogi-bear-disguise-gals.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/4-yogi-bear-masking-example.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/5-yogi-bear-andy-clarke-recreation.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/6-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/7-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/8-mike-worth-website.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/9-masking-using-clipping-path.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/10-svg-clippath.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/11-altered-illustrations.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/12-mask-image.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/13-mike-worth-review-page-illustration.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/14-layering-multiple-masks.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/15-binocular-shaped-mask.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/16-binocular-shape.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/17-masking-animation.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["CSS","Animation","Design"],"attachments":null,"extra":null,"language":null},{"title":"Integrating Localization Into Design Systems","url":"https://www.smashingmagazine.com/2025/05/integrating-localization-into-design-systems/","content":"
Integrating Localization Into Design Systems
Learn how two designers tackled the challenges of building a localization-ready design system for a global audience. This case study dives into how Rebecca and Mark combined Figma Variables and design tokens to address multilingual design issues, such as text overflow, RTL layouts, and font inconsistencies. They share key lessons learned and the hurdles they faced — including Figma’s limitations — along with the solutions they developed to create dynamic, scalable designs that adapt seamlessly across languages, themes, and densities. If you’re navigating the complexities of internationalization in design systems, this article is for you.
Mark and I work as product designers for SAS, a leader in analytics and artificial intelligence recognized globally for turning data into valuable insights. Our primary role is to support the token packages and component libraries for the SAS Filament Design System. SAS’ customer base is global, meaning people from diverse countries, cultures, and languages interact with products built with the Filament Design System.
SAS designers use Figma libraries developed by the Filament Design System team to create UX specifications. These high-fidelity designs are typically crafted in English, unknowingly overlooking multilingual principles, which can result in layout issues, text overflow, and challenges with right-to-left (RTL) languages. These issues cascade into the application, ultimately creating usability issues for SAS customers. This highlights the need to prioritize localization from the start of the design process.
This would allow us to design and test multilingual capabilities more effectively, ensuring our design system was both flexible and adaptable.
While researching localization integration for design systems, we realized a significant gap in existing documentation on supporting localization and internationalization in design tokens and Figma Variables. Many of the challenges we faced, such as managing typography across locales or adapting layouts dynamically, were undocumented or only partially addressed in available resources.
Our story demonstrates how combining foundational principles of multilingual design with design tokens can help tackle the complexities of language switching in design systems. We are not arguing that our approach is the best, but given the lack of documentation available on the subject, we hope it will get the conversation started.
But before we start, it’s essential to understand the distinction between Localization (L10n) and Internationalization (I18n).
Localization (L10n) refers to the process of adapting designs for specific languages, regions, or cultures and involves the following:
Translating text;
Adjusting layouts to accommodate language-specific requirements, such as longer or shorter text strings or right-to-left (RTL) text for languages like Arabic;
Ensuring visual elements are culturally appropriate and resonate with the target audience.
Internationalization (I18n) is the preparation phase, ensuring designs are flexible and adaptable to different languages and regions. Key considerations in Figma include:
Using placeholder text to represent dynamic content;
Setting up constraints for dynamic resizing to handle text expansion or contraction;
Supporting bi-directional text for languages that require RTL layouts.
These concepts are not only foundational to multilingual design but also integral to delivering inclusive and accessible experiences to global users.
Pre-Figma Setup: Building A Framework
Understanding Our Design Token System
Before diving deeper, it’s crucial to understand that our design tokens are stored in JSON files. These JSON files are managed in an application we call “Token Depot,” hosted on our corporate GitHub.
We utilize the Tokens Studio plugin (pro plan) to transform these JSON files into Figma libraries. For us, design tokens are synonymous with variables — we don’t create additional variables that only exist in Figma. However, we do create styles in Figma that serve as “recipe cards” for specific HTML elements. For instance, an H2 might include a combination of font-family, font-size, and font-weight.
It’s important to note that our design token values are directly tied to CSS-based values.
Initial Setup: Theme Switching And Localization
In 2022, we took on the massive task of refactoring all our token names to be more semantic. At that time, we were only concerned with theme switching in our products.
Our tokens were re-categorized into the following groups:
Color
Brand colors (SAS brand colors)
Base colors (references to Brand colors)
Typography (e.g., fonts, spacing, styles)
Space (e.g., padding, margins)
Size (e.g., icons, borders)
Style (e.g., focus styles)
Motion (e.g., animations)
Shadow.
Our first iteration of token groupings by type. (Large preview)
In our early setup:
A core folder contained JSON files for values unaffected by theme or brand.
Brand folders included three JSON files (one for each theme). These were considered “English” by default.
A separate languages folder contained overrides for other locales, stacked on top of brand files to replace specific token values.
Our JSON files were configured with English as the default. Other locales were managed with a set of JSON files that included overrides for English. These overrides were minimal, focusing mainly on font and typography adjustments. For example, bold typefaces often create issues because many languages like Chinese, Japanese, or Korean (CJK languages) fonts lack distinct bold versions. Thus, we replaced the font-weight token value from 700 to 400 in our CJK locales.
We also update the values for font-family, letter spacing, font-style, and font-variant tokens. In Figma, our application screens were originally designed in English, and in 2023, we only implemented theme-switching modes, not language options. Additionally, we created detailed lists to document which design tokens could be converted to Figma variables and which could not, as the initial release of variables supported only a limited set.
Introducing Density Switching
The introduction of density switching in our products marked a significant turning point. This change allowed us to revisit and improve how we handled localization and token management. The first thing we had to figure out was the necessary token sorting. We ended up with the following list:
With density, we expanded locale-specific value changes beyond font-family, letter spacing, font-style, and font-variant tokens to additionally include:
Font sizes
Icon sizes
Line height
Spacing
Border radius.
Revisiting our type scale and performing numerous calculations, we documented the required token value changes for all the locales across the density. This groundwork enabled us to tackle the restructuring of our JSON files effectively.
Our updated JSON files were grouped by core, theme, and density modes. (Large preview)
JSON File Restructuring
In our token repository, we:
Updated the tokens in the core folder.
Added a density folder and a language folder in each brand.
After collaborating with our front-end development team, we decided to minimize the number of JSON files. Too many files introduce complexity and bugs and hinder performance. Instead of creating a JSON file for each language-density combination, we defined the following language categories:
Language Categories
Western European and Slavic Languages
Polish, English, French, German, and Spanish
Chinese Languages
Simplified and traditional scripts
Middle Eastern and East Asian Languages
Arabic, Hebrew, Japanese, Korean, Thai, and Vietnamese
Global Diverse
Africa, South Asia, Pacific, and Indigenous languages, Uralic, and Turkic groups.
These categories became our JSON files, with one file per density level. Each file contained tokens for font size, icon size, line height, spacing, and border-radius values. For example, all Chinese locales shared consistent values regardless of font-family.
To minimize performance burden, we divided languages into regions. (Large preview)
In addition, we added a folder containing JSON files per locale, overriding core values and theme folders, such as font-family.
Figma Setup: Bridging Tokens And Design
Token Studio Challenges
After restructuring our JSON files, we anticipated gaining support for typography variables in the Tokens Studio plugin. Instead, Tokens Studio released version 2.0, introducing a major shift in workflow. Previously, we imported JSON files directly into Figma and avoided pushing changes back through the plugin. Adjusting to the new version required us to relearn how to use the plugin effectively.
Our first challenge was navigating the complexity of the import process. The $metadata.json and $themes.json files failed to overwrite correctly during imports, resulting in duplicate collections in Figma when exporting variables. Despite recreating the required theme structure within the plugin, the issue persisted. To resolve this, we deleted the existing $metadata.json and $themes.json files from the repository before pulling the updated GitHub repo into the plugin. However, even with this solution, we had to manually remove redundant collections that appeared during the export process.
Once we successfully migrated our tokens from JSON files into Figma using the Tokens Studio plugin, we encountered our next challenge.
Initially, we used only “English” and theme modes in Figma, relying primarily on styles since Figma’s early variable releases lacked support for typography variables. Now, with the goal of implementing theme, density, and language switching, we needed to leverage variables — including typography variables. While the token migration successfully brought in the token names as variable names and the necessary modes, some values were missing.
Typography variables, though promising in concept, were underwhelming in practice. For example, Figma’s default line-height multiplier for “auto” was 1.2, below the WCAG minimum of 1.5. Additionally, our token values used line-height multipliers, which weren’t valid as Figma variable values. While a percentage-based line-height value is valid in CSS, Figma variables don’t support percentages.
Our solution involved manually calculating pixel values for line heights across all typography sizes, locale categories, and densities. These values were entered as local variables in Figma, independent of the design token system. This allowed us to implement correct line-height changes for density and locale switches. The process, however, was labor-intensive, requiring the manual creation of hundreds of local variables. Furthermore, grouping font sizes and line heights into Figma styles required additional manual effort due to the lack of support for line-height multipliers or percentage-based variables.
Examples:
For CJK locales, medium and low density use a base font size of 16px, while high density uses 18px.
Western European and Slavic languages use 14px for medium density, 16px for high, and 12px for low density.
Additional Challenges
Figma vs. Web Rendering In Figma, line height centers text visually within the text box. In CSS, it affects spacing differently depending on the box model. This mismatch required manual adjustments, especially in light of upcoming CSS properties like leading-trim.
Letter-Spacing Issues While CSS defaults to “normal” for letter-spacing, Figma requires numeric values. Locale-specific resets to “normal” couldn’t utilize variables, complicating implementation.
Font-Family Stacks
Example stack for Chinese: font-family-primary: \'AnovaUI\', \'微软雅黑体\', \'Microsoft YaHei New\', \'微软雅黑\', \'Microsoft Yahei\', \'宋体\', \'SimSun\', \'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif.
Starting with a Western font ensured proper rendering of Latin characters and symbols while maintaining brand consistency. However, Figma’s designs using only AnovaUI (SAS Brand Custom font) couldn’t preview locale-based substitutions via system fonts, complicating evaluations of mixed-content designs.
Finally, as we prepared to publish our new library, we encountered yet another challenge: Figma Ghosts.
What Are Figma Ghost Variables?
Figma “ghost variables” refer to variables that remain in a Figma project even after they are no longer linked to any design tokens, themes, or components.
These variables often arise due to incomplete deletions, improper imports, or outdated metadata files. Ghost variables may appear in Figma’s variable management panel but are effectively “orphaned,” as they are disconnected from any meaningful use or reference.
Ghost variables found in Figma when importing json files. (Large preview)
Why They Cause Issues for Designers:
Clutter and Confusion Ghost variables make the variable list longer and harder to navigate. Designers might struggle to identify which variables are actively in use and which are obsolete.
Redundant Work Designers might accidentally try to use these variables, leading to inefficiencies or design inconsistencies when the ghost variables don’t function as expected.
Export and Sync Problems When exporting or syncing variables with a design system or repository, ghost variables can introduce errors, duplicates, or conflicts. This complicates maintaining alignment between the design system and Figma.
Increased Maintenance Overhead Detecting and manually deleting ghost variables can be time-consuming, particularly in large-scale projects with extensive variable sets.
Thematic Inconsistencies Ghost variables can create inconsistencies across themes, as they might reference outdated or irrelevant styles, making it harder to ensure a unified look and feel.
Addressing ghost variables requires careful management of design tokens and variables, often involving clean-up processes to ensure only relevant variables remain in the system.
Cleaning Up Ghost Variables
To avoid the issues in our Figma libraries, we first had to isolate ghost variables component by component. By selecting a symbol in Figma and navigating the applied variable modes, we had a good sense of which older versions of variables the symbol was still connected to. We found disconnected variables in the component library and our icon library, which resulted in compounded ghost variables across the system. We found that by traversing the layer panel, along with a fantastic plug-in called “Swap Variables,” we were able to remap all the ghost variables in our symbols.
If we had not completed the clean-up step, designers would not be able to access the overrides for theme, density, and locale.
Designing Symbols For Localization
To ensure Figma symbols support language swapping, we linked all text layers to our new variables, including font-family, font-size, and line height.
We do not use Figma’s variable feature to define text strings for each locale (e.g., English, Spanish, French) because, given the sheer breadth and depth of our Products and solutions, it would simply be too daunting a task to undertake. For us, using an existing plug-in, such as “Translator,” gives us what we need.
After ensuring all text layers were remapped to variables, along with the “Translator” plug-in, we were able to swap entire screens to a new language. This allowed us to start testing our symbols for unforeseen layout issues.
We use the Translator plugin to test out translating our product mockups. (Large preview)
We discovered that some symbols were not supporting text wrapping when needed (e.g., accommodating longer words in German or shorter ones in Japanese). We isolated those issues and updated them to auto-layout for flexible resizing. This approach ensured all our Figma symbols were scalable and adaptable for multilingual support.
Delivering The System
With our component libraries set up to support localization, we were ready to deliver our component libraries to product designers. As a part of this step, we crafted a “Multilingual Design Cheat Sheet” to help designers understand how to set up their application mockups with Localization and Internationalization in mind.
Multilingual Design Cheat Sheet:
General Principles
Design flexible layouts that can handle text wrapping and language-specific requirements such as right-to-left orientations.
Use real content during design and development to identify localization issues such as spacing and wrapping.
Research the cultural expectations of your target audience to avoid faux pas.
Text & Typography
Use Filament Design Systems fonts to ensure support of all languages.
Avoid custom fonts that lack bold or italic styles for non-Latin scripts like CJK languages.
Reserve additional space for languages like German or Finnish.
Avoid hardcoded widths for text containers and use auto-layout to ensure long text strings are readable.
The Filament Design System tokens adjust line height per language; make sure you are using variables for line-height.
Use bold sparingly, as Filament tokens override bold styling in some languages. Instead, opt for alternative emphasis methods (e.g., color or size).
Layout & Design
Mirror layouts for RTL languages (e.g., Arabic, Hebrew). Align text, icons, and navigation appropriately for the flow of the language.
Use auto-layout to accommodate varying text lengths.
Avoid embedding text in images to simplify localization.
Allow ample spacing around text elements to prevent crowding.
Language-Specific Adjustments
Adapt formats based on locale (e.g., YYYY/MM/DD vs. MM/DD/YYYY).
Use metric or imperial units based on the region.
Test alignments and flows for LTR and RTL languages.
Localization Readiness
Avoid idioms, cultural references, or metaphors that may not translate well.
Provide space for localized images, if necessary.
Use Figma translation plug-ins to test designs for localization readiness and use real translations rather than Lorem Ipsum.
Test with native speakers for language-specific usability issues.
Check mirrored layouts and interactions for usability in RTL languages.
Lessons Learned And Future Directions
Lessons Learned
In summary, building a localization-ready design system was a complex yet rewarding process that taught Mark and me several critical lessons:
Localization and internationalization must be prioritized early. Ignoring multilingual principles in the early stages of design creates cascading issues that are costly to fix later.
Semantic tokens are key. Refactoring our tokens to be more semantic streamlined the localization process, reducing complexity and improving maintainability.
Figma variables are promising but limited. While Figma Variables introduced new possibilities, their current limitations — such as lack of percentage-based line-height values and manual setup requirements — highlight areas for improvement.
Automation is essential. Manual efforts, such as recalculating and inputting values for typography and density-specific tokens, are time-intensive and prone to error. Plugins like “Translator” and “Swap Variables” proved invaluable in streamlining this work.
Collaboration is crucial. Close coordination with front-end developers ensured that our JSON restructuring efforts aligned with performance and usability goals.
Testing with real content is non-negotiable. Design issues like text wrapping, RTL mirroring, and font compatibility only became apparent when testing with real translations and flexible layouts.
Future Directions
As we look ahead, our focus is on enhancing the Filament Design System to better support global audiences and simplify the localization process for designers:
Automatic mirrored layouts for RTL languages. We plan to develop tools and workflows that enable seamless mirroring of layouts for right-to-left languages, ensuring usability for languages like Arabic and Hebrew.
Improved figma integration. Advocacy for Figma enhancements, such as percentage-based line-height support and better handling of variable imports, will remain a priority.
Advanced automation tools. Investing in more robust plugins and custom tools to automate the calculation and management of tokens across themes, densities, and locales will reduce manual overhead.
Scalable localization testing framework. Establishing a framework for native speaker testing and real-world content validation will help us identify localization issues earlier in the design process.
Expanding the multilingual design cheat sheet. We will continue to refine and expand the cheat sheet, incorporating feedback from designers to ensure it remains a valuable resource.
Community engagement. By sharing our findings and lessons, we aim to contribute to the broader design community, fostering discussions around integrating localization and internationalization in design systems.
Through these efforts, Mark and I hope to create a more inclusive, scalable, and efficient design system that meets the diverse needs of our global audience while empowering SAS designers to think beyond English-first designs.
","description":"Learn how two designers tackled the challenges of building a localization-ready design system for a global audience. This case study dives into how Rebecca and Mark combined Figma Variables and design tokens to address multilingual design issues, such as text overflow, RTL…","guid":"https://www.smashingmagazine.com/2025/05/integrating-localization-into-design-systems/","author":"Rebecca Hemstad & Mark Malek","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-11T16:00:00.188Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-localization-into-design-systems/token-categories.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-localization-into-design-systems/tokens-impacted.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-localization-into-design-systems/language-groups.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-localization-into-design-systems/ghost-variables.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-localization-into-design-systems/translator-plugin.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Design Systems","Figma","Case Studies","Localization"],"attachments":null,"extra":null,"language":null},{"title":"Integrating Design And Code With Native Design Tokens In Penpot","url":"https://www.smashingmagazine.com/2025/05/integrating-design-code-native-design-tokens-penpot/","content":"
Integrating Design And Code With Native Design Tokens In Penpot
The Penpot team is not slowing down on its mission to build a free design tool that not only offers powerful design features but is also well-integrated with code and modern development practices. In its latest release, Penpot, as the first design tool ever, introduces support for native design tokens. Let’s take a closer look at this concept and how you can employ it in your process.
It’s already the fifth time I’m writing to you about Penpot — and what a journey it continues to be! During this time, Penpot’s presence in the design tools scene has grown strong. In a market that recently felt more turbulent than ever, I’ve always appreciated Penpot for their clear mission and values. They’ve built a design tool that not only delivers great features but is also open-source and developed in active dialogue with the community. Rather than relying on closed formats and gated solutions, Penpot embraces open web standards and commonly used technologies — ensuring it works seamlessly across platforms and integrates naturally with code.
Their latest release is another great example of that approach. It’s also one of the most impactful. Let me introduce you to design tokens in Penpot.
Design tokens are an essential building block of modern user interface design and engineering. But so far, designers and engineers have been stuck with third-party plugins and cumbersome APIs to collaborate effectively on design tokens and keep them in sync. It’s high time we had tools and processes that handle this better, and Penpot just made it happen.
About Design Tokens
Design tokens can be understood as a framework to document and organize your design decisions. They act as a single source of truth for both designers and engineers and include all the design variables, such as colors, typography, spacing, fills, borders, and shadows.
The concept of design tokens has grown in popularity alongside the rise of design systems and the increasing demand for broader standards and guidelines in user interface design. Design tokens emerged as a solution for managing increasingly complex systems while keeping them structured, scalable, and extensible.
The goal of using design tokens is not only to make design decisions more intentional and maintainable but also to make it easier to keep them in sync with code. In the case of larger systems, it is often a one-to-many relationship. Design tokens allow you to keep the values agnostic of their application and scale them across various products and environments.
On top of maintainability benefits, a common reason to use design tokens is theming. Keeping your design decisions decoupled means that you can easily swap the values across multiple sets. This allows you to change the appearance of the entire interface with applications ranging from simple light and dark mode implementations to more advanced use cases, such as handling multiple brands or creating fully customizable and adjustable UIs.
Implementation Challenges
Until recently, there was no standardized format for maintaining design tokens — it remained a largely theoretical concept, implemented differently across teams and tools. Every design tool or frontend framework has its own approach. Syncing code with design tools was also a major pain point, often requiring third-party plugins and unreliable synchronization solutions.
However, in recent years, W3C, the international organization responsible for developing open standards and protocols for the web, brought to life a dedicated Design Tokens Community Group with the goal of creating an open standard for products and design tools to handle design tokens. Once this standard gets more widely adopted, it will give us hope for a more predictable and standardized approach to design tokens across the industry.
To make that happen, work has to be done on two ends, both design and development. Penpot is the very first design tool to implement design tokens in adherence to the standard that the W3C is working on. It also solves the problem of third-party dependencies by offering a native API with all the values served in the official, standardized format.
Design Tokens In Practice
To better understand design tokens and how to use them in practice, let’s take a look at an example together. Let’s consider the following user interface of a login screen:
Imagine we want this design to work in light and dark mode, but also to be themable with several accent colors. It could be that we’re using the same authentication system for websites of several associated brands or several products. We could also want to allow the user to customize the interface to their needs.
If we want to build a design that works for three accent colors, each with light and dark themes, it gives us six variants in total:
Six variants of a login screen design with three accent colors and light and dark mode options. (Large preview)
Designing all of them by hand would not only be tedious but also difficult to maintain. Every change you make would have to be repeated in six places. In the case of six variants, that’s not ideal, but it’s still doable. But what if you also want to support multiple layout options or more brands? It could easily scale into hundreds of combinations, at which point designing them manually would easily get out of hand.
This is where design tokens come to the rescue. They allow you to effectively maintain all the variants and test all the possible combinations, even hundreds of them, while still building a single design without repetitive work.
You can start by creating a design in one of the variants before starting to think about the tokens. Having a design already in place might make it easier to plan your tokens’ hierarchy and structure accordingly.
In this case, I created three components: 2 types of buttons and input, and combined them with text layers into several Flex layouts to build out this screen. If you’d like to first learn more about building components and layouts in Penpot, I would recommend you revisit some of my previous articles:
Now that we have the design ready, we can start creating tokens. You can create your first token by heading to the tokens tab of the left sidebar and clicking the plus button in one of the token categories. Let’s start by creating a color.
Creating your first design token in Penpot
To use design tokens effectively, it’s critical to plan their naming and structure well. You might have noticed that when I created a token, Penpot automatically created for me a new set, called Global. All design tokens have to be organized within sets.
I called my first set “primitives,” so I can store literal values such as “blue,” “purple,” or “grey.” To support multiple shades of color, I used numbers, so the final token names I used are, for example, “slate.1” or “slate.10”.
At this point, we can start thinking about handling multiple colors for various themes. To make it easy to switch between tokens, all you have to do is create multiple sets with tokens of the same names. To do that, I split the primitives into two sets, “light” and “dark.” You can nest your token sets by adding slashes into their names.
Creating design token sets in Penpot
In the video above, you can see that I have two sets, light and dark, each with tokens of the same names but different values. At this point, you could already reference your primitive tokens to switch between light and dark values. However, in the future, you might use the same shade of grey for multiple purposes, like border, background, or text. It would be a more maintainable approach to keep these definitions independent.
To achieve that, we need to introduce a second abstraction layer. In this case, I created a new tokens set called “globals” that references the primitives set. All values in “globals” reference other already existing tokens, such as “primitives.”
For globals, I used semantic naming such as “text.muted” or “background.primary” to stress that the token names are agnostic from their literal values. In other words, the “text.muted” name works well for both light and dark modes, the same as “background.primary” works as a token name no matter what brand color is currently in use. For comparison, “text.dark” or “background.blue” would not make sense if we wanted to make them dynamic and be able to switch between different modes and brand colors.
In Penpot, you can reference other tokens in token values by wrapping them in curly brackets. So, if you select “slate.1” as your text color, it will reference the “slate.1” value from any other set that is currently active. With the light set active, the text will be black. And with the dark set active, the text will be white.
Creating alias tokens in Penpot
You can apply your global tokens to any layer you want. To do that, select a layer and then right-click a token of your choice. In the context menu, you can select among the values that are compatible with a token. In the case of a color, it will be either fill or stroke.
Applying design tokens to layers in Penpot
Now, if you switch on and off the sets, you can see the design responding to the change. With the light set active, the text appears black, and with the dark set active, the text appears white.
Changing token sets in Penpot
As you probably noticed, more than one set can be active at the same time, even if they contain values of the same names, like light and dark sets. In such a case, a set lowest on the list will override the already defined values. You can think of it as defining variables in any programming language or properties in CSS. The last value of equal specificity is the one that counts.
However, you don’t need to switch the sets on and off manually to test your design’s appearance. To make that easier, Penpot also offers another concept called Themes. Themes are the best way to manage your sets and combine them into functional design choices.
In the case of light and dark mode, I created two themes: “light” and “dark,” under a group called “Mode.” This makes it much clearer how the sets should be used and makes it easier to switch between the predefined options.
Creating themes in Penpot
For each theme, I selected two sets. One that defines the values (“light” or “dark”) and one that is actually used to style the designs (“globals”). Now, you can use the Themes dropdown to quickly switch themes.
At this point, we have two layers of abstraction: primitives (such as basic color shades) and a semantic layer (background, text, and so on). Sometimes, you might need more than that. With this setup, you can easily switch between light and dark mode, but what if you also want to switch between the several brand colors I showed earlier, while still being able to change the mode? For that, we need another theme (let’s call it “Brand”) and another couple of sets under a parent set that would also be called “Brand.” For the latter, I made three options: “Slate,” “Indigo,” and “Purple.” In real-life scenarios, these could be names of brands, products, and so on.
To bring it all together, the brand sets need to reference primitives, while the “globals” set needs to reference “brand” sets. This way, we are creating three different brands, each with its own separate values for light and dark mode.
This allows us to switch between brands and modes and test all the possible combinations.
Switching between themes in Penpot
What’s Next?
I hope you enjoyed following this example. If you’d like to check out the file presented above before creating your own, you can duplicate it here.
Colors are only one of many types of tokens available in Penpot. You can also use design tokens to maintain values such as spacing, sizing, layout, and so on. The Penpot team is working on gradually expanding the choice of tokens you can use. All are in accordance with the upcoming design tokens standard.
The benefits of the native approach to design tokens implemented by Penpot go beyond ease of use and standardization. It also makes the tokens more powerful. For example, they already support math operations using the calc() function you might recognize from CSS. It means you can use math to add, multiply, subtract, etc., token values.
Once you have the design token in Penpot ready, the next step is to bring it over to your code. Already today, you can export the tokens in JSON format, and soon, an API will be available that connects and imports the tokens directly into your codebase. You can follow Penpot on LinkedIn, BlueSky, and other social media to be the first to hear about the next updates. The team behind Penpot is also planning to make its design tokens implementation even more powerful in the near future with support for gradients, composite tokens (tokens that store multiple values), and more.
To learn more about design tokens and how to use them, check out the following links:
By adding support for native design tokens, Penpot is making real progress on connecting design and code in meaningful ways. Having all your design variables well documented and organized is one thing. Doing that in a scalable and maintainable way that is based on open standards and is easy to connect with code &mdahs; that’s yet another level.
The practical benefits are huge: better maintainability, less friction, and easier communication across the whole team. If you’re looking to bring more structure to your design system while keeping designers and engineers in sync, Penpot’s design tokens implementation is definitely worth exploring.
Tried it already? Share your thoughts! The Penpot team is active on social media, or just share your feedback in the comments section below.
","description":"The Penpot team is not slowing down on its mission to build a free design tool that not only offers powerful design features but is also well-integrated with code and modern development practices. In its latest release, Penpot, as the first design tool ever, introduces support…","guid":"https://www.smashingmagazine.com/2025/05/integrating-design-code-native-design-tokens-penpot/","author":"Mikołaj Dobrucki","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-07T16:00:00.287Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/1-schema-design-system.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/2-login-screen-acme.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/3-login-screen-design-grid.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/4-layers-penpot.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/5-tokens-structure.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/6-tokens-structure.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Design Systems","Design","UI"],"attachments":null,"extra":null,"language":null},{"title":"Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS","url":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/","content":"
Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS
Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS. In this article, pioneering author and web designer Andy Clarke shows how he applied these principles to Emmy-winning composer Mike Worth’s new website, using CSS to craft engaging and fun animations that bring his world to life.
Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability to change states across a set of @keyframes and, most recently, scroll-driven animations that link keyframes to the scroll position.
Even with these added capabilities, CSS animations have remained relatively rudimentary. They remind me of the Hanna-Barbera animated series I grew up watching on TV.
These animated shorts lacked the budgets given to live-action or animated movies. They were also far lower than those available when William Hanna and Joseph Barbera made Tom and Jerry shorts while working for MGM Cartoons. This meant the animators needed to develop techniques to work around their cost restrictions and the technical limitations of the time.
They used fewer frames per second and far fewer cells. Instead of using a different image for each frame, they repeated each one several times. They reused cells as frequently as possible by zooming and overlaying additional elements to construct a new scene. They kept bodies mainly static and overlayed eyes, mouths, and legs to create the illusion of talking and walking. Instead of reducing the quality of these cartoons, these constraints created a charm often lacking in more recent, bigger-budget, and technically advanced productions.
The simple and efficient techniques developed by Hanna-Barbera’s animators can be implemented using CSS. Modern layout tools allow web developers to layer elements. Scaleable Vector Graphics (SVG) can contain several frames, and developers needn’t resort to JavaScript; they can use CSS to change an element’s opacity, position, and visibility. But what are some reasons for doing this?
Animations bring static experiences to life. They can improve usability by guiding people’s actions and delighting or surprising them when interacting with a design. When carefully considered, animations can reinforce branding and help tell stories about a brand.
Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen. (Large preview)
Introducing Mike Worth
I’ve recently been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a bold, retro-style design that showcases his work. I used CSS animations throughout to delight and surprise his audience as they move through his website.
Mike loves ’80s and ’90s animation — especially Disney’s Duck Tales. Unsurprisingly, my taste in cartoons stretches back a little further to the 1960s Hanna-Barbera shows like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, Yogi Bear.
So, to explain how this era of animation relates to CSS, I’ve chosen an episode of The Yogi Bear Show, “Home Sweet Jellystone,” first broadcast in 1961. In this story, Ranger Smith inherits a mansion and (spoiler alert) leaves Jellystone.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
Dissecting Movement
In this episode, Hanna-Barbera’s techniques become apparent as soon as a postman arrives with a telegram for Ranger Smith. The camera pans sideways across a landscape painting by background artist Robert Gentle to create the illusion that the postman is moving.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Author’s recreation) (Large preview)
The background loops when a scene lasts longer than a single pan of Robert Gentle’s landscape painting, with bushes and trees appearing repeatedly.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
This can be recreated using a single element and an animation that changes the position of its background image:
Although beautifully executed, Robert Gentle’s background paintings were often remarkably simple. The mansion’s interior background rushes past to create the illusion of Ranger Smith dashing across it, so it needed very few details.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
The economy of movement was essential for producing these animated shorts cheaply and efficiently. The postman’s motorcycle bounces, and only his head position and facial expressions change, which adds a subtle hint of realism.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Sequence shortened. (Large preview)
Likewise, only Ranger Smith’s facial expression and leg positions change throughout his walk cycle as he dashes through his mansion. The rest of his body stays static.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Sequence shortened. (Large preview)
In a discarded scene from my design for his website, the orangutan adventurer mascot I created for Mike Worth can be seen driving across the landscape.
Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen. (Large preview)
I drew directly from Hanna-Barbera’s bouncing and scrolling technique for this scene by using two keyframe animations: background-scroll and bumpy-ride. The infinitely scrolling background works just like before:
“When working with motion on the web, it’s important to consider that not everyone experiences it the same way. What might feel smooth and slick to some might be annoying or distracting to others — or worse, induce feelings of sickness or even cause seizures.”
— Michelle Barker
You can prevent that from happening by turning off animations when someone has chosen reduced motion in their browser by using the prefers-reduced-motion media query:
Since each episode’s budget and production time were limited, William Hanna and Joseph Barbera created a streamlined process for producing their animations. They used as few as 2,000 individual drawings and just a few background paintings per episode, often reusing them on several episodes.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
Watch the episode and you’ll see these trees appear over and over again throughout “Home Sweet Jellystone.” Behind Yogi and Boo-Boo on the track, in the bushes, and scaled up in this close-up of Boo-Boo:
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
The animators also frequently layered foreground elements onto these background paintings to create a variety of new scenes:
On the left: The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. On the right: Author’s edit.(Large preview)
In my deleted scene from Mike Worth’s website, I introduced these rocks into the foreground to add depth to the animation:
Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen. (Large preview)
If I were using bitmap images, this would require just one additional image:
Had I continued developing this scene, I might’ve added a slower scrolling animation to those rocks to introduce a parallax effect for even greater realism.
Looping Frames Create Movement
To meet their limited budget and production schedules, Hanna Barbera’s animators carefully planned their animations and cleverly only animated specific elements. While heads and facial expressions make characters talk and their legs change to make them walk, most characters’ bodies remain relatively static. So, throughout this entire scene of Ranger Smith walking and talking his way across his cabin, only his face and legs are animated:
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
Likewise, when the ranger reads his telegram, only his eyes and mouth move:
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
If you’ve wondered why both Ranger Smith and Yogi Bear wear collars and neckties, it’s so the line between their animated heads and faces and static bodies is obscured:
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Author’s recreation. (Large preview)
I replicated how Hanna-Barbera made Ranger Smith and other characters’ mouths move by first including a group that contains the ranger’s body and head, which remain static throughout. Then, I added six more groups, each containing one frame of his mouth moving:
When Mike Worth and I sat down to discuss working together, we both understood that there would be neither the budget nor the time to create a short animated cartoon for his website. We also knew that video would be the correct format for a fully animated production, but we were keen to explore how CSS could bring what would’ve otherwise been static images to life. So, this begs the question of why and when to use CSS animations.
Ambient Animations
Subtle ambient animations contribute to a website’s atmosphere and help with storytelling without distracting from its content or functionality.
For Mike Worth’s about-page illustration, I shone shafts of light onto a stone tablet to add depth to an otherwise flat image. Inside my SVG, I added a path for the light and reduced its opacity to .25:
I then defined an SVG filter to blur the edges of my light shafts and linked it to my path:
Finally, I added a subtle ambient animation that rotates the light shafts and creates a more natural feel:
In the same way that a :hover pseudo-class provides valuable visual feedback when someone interacts with an element, CSS animations can create a deeper connection between people and a design.
I included an Easter egg interaction on Mike Worth’s review page illustration. The big red button turns the desk lamp on and off, much to the consternation of Mike’s orangutan mascot, who’s trying to study his map. To implement this, I applied a data- attribute to the SVG illustration:
And added a red button for any curious visitor to press:
When someone presses that red button, the light goes out, which is made possible by changing the value of the SVG’s data- attribute from lights-on to lights-off.
Several elements within the illustration light up when the desk lamp is on. To make this happen, I applied a class value to those specific items:
<path class=\\"lamp-glow\\" />\\n
And used the data-attribute value to toggle the glow on and off when someone presses the lamp’s button:
Finally, I created a keyframe animation that flickers the lamp light’s opacity at seemingly random intervals:
Animations can also tempt people to venture deeper into a design, so I made the crystal skull on the desk vibrate to hint at something more to discover:
When carefully considered, animations can reflect a brand’s identity and help tell its story.
Mike Worth’s brand is high-energy — just like his personality — and the story he tells about his work as a video game composer is engaging and playful. Mike wanted every interaction with his website to bring his personality to the screen.
Should someone get lost along their journey, they’ll end up on Mike’s 404 page, where his hero has a sinking feeling. While Mike’s orangutan adventurer slips deeper and deeper into the quicksand, animated bubbles rise:
Just as the animators at Hanna-Barbera turned technical limitations into their signature style, CSS animations enable web professionals to craft characterful experiences. By layering elements, looping frames, and applying subtle movement, you can inject personality into a design while improving someone’s experience.
The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)
In my design for Mike Worth’s website, animation isn’t just for decoration; it tells a compelling story about him and his work. Every movement reflects his brand identity and makes his website an extension of his creative world.
","description":"Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS. In this article, pioneering author and web…","guid":"https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/","author":"Andy Clarke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-06T16:00:00.589Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/3-yogi-bear-show.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/4-andy-clarke-design.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/5-yogi-bear-show-home-sweet-jellystone.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/6-yogi-bear-show-author-recreation.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/7-yogi-bear-dissecting-movement.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/8-robert-gentle-background-painting.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/9-yogi-bear-sequence-shortened.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/10-yogi-bear-sequence-shortened.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/11-mike-worth-website.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/12-yogi-bear-background-painting.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/1-yogi-bear-show-reusing-elements.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/2-layered-foreground-elements.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/13-layered-foreground-elements.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/14-looping-frames.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/15-looping-frames-movement.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/16-yogi-bear.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/17-yogi-bear.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/18-the-end-painting.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["CSS","Animation","Design"],"attachments":null,"extra":null,"language":null},{"title":"Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?","url":"https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/","content":"
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
There were duelling proposals floating around for adding support for masonry-style layouts in CSS. In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone module. Well, not until recently. Now, there are three proposals with Apple WebKit’s “Item Flow” as the third option. The first two sides make strong points, and the third one merges them into one, all of which you will learn about in this article.
You’ve got a Pinterest-style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you might be convinced that the CSS grid layout is enough, but not until you begin to build do you realise display: grid with additional tweaks is less than enough. In fact, Pinterest built its layout with JavaScript, but how cool would it be if it were just CSS? If there were a CSS display property that gave such a layout without any additional JavaScript, how awesome would that be?
Maybe there is. The CSS grid layout has an experimental masonry value for grid-template-rows. The masonry layout is an irregular, flowing grid. Irregular in the sense that, instead of following a rigid grid pattern with spaces left after shorter pieces, the items in the next row of a masonry layout rise to fill the spaces on the masonry axis. It’s the dream for portfolios, image galleries, and social feeds — designs that thrive on organic flow. But here’s the catch: while this experimental feature exists (think Firefox Nightly with a flag enabled), it’s not the seamless solution you might expect, thanks to limited browser support and some rough edges in its current form.
Maybe there isn’t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like Masonry.js. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with Rachel highlighting that masonry’s organic flow contrasts with Grid’s strict two-dimensional structure, potentially confusing developers expecting Grid-like behaviour or Ahmad Shadeed fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid’s clarity for structured layouts. Geoff also echoes Rachel Andrew’s concern that “teaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,” complicating education for designers and developers who rely on clear mental models.
Perhaps there might be hope. The Apple WebKit team just sprung up a new contender, which claims not only to merge the pros of grid and masonry into a unified system shorthand but also includes flexbox concepts. Imagine the best of three CSS layout systems in one.
Given these complaints and criticisms — and a new guy in the game — the question is:
Should CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should item-flow just take the reins?
The State Of Masonry In CSS Today
Several developers have attempted to create workarounds to achieve a masonry layout in their web applications using CSS Grid with manual row-span hacks, CSS Columns, and JavaScript libraries. Without native masonry, developers often turn to Grid hacks like this: a grid-auto-rows trick paired with JavaScript to fake the flow. It works — sort of — but the cracks show fast.
For instance, the example below relies on JavaScript to measure each item’s height after rendering, calculate the number of 10px rows (plus gaps) the item should span while setting grid-row-end dynamically, and use event listeners to adjust the layout upon page load and window resize.
This Grid hack gets us close to a masonry layout — items stack, gaps fill, and it looks decent enough. But let’s be real: it’s not there yet. The code sample above, unlike native grid-template-rows: masonry (which is experimental and only exists on Firefox Nightly), relies on JavaScript to calculate spans, defeating the “no JavaScript” dream. The JavaScript logic works by recalculating spans on resize or content change. As Chris Coyier noted in his critique of similar hacks, this can lead to lag on complex pages.
Also, the logical DOM order might not match the visual flow, a concern Rachel Andrew raised about masonry layouts generally. Finally, if images load slowly or content shifts (e.g., lazy-loaded media), the spans need recalculation, risking layout jumps. It’s not really the ideal hack; I’m sure you’d agree.
That’s why this debate matters — our daily grind demands it.
Option 1: Extending CSS Grid For Masonry
One way forward is to strengthen the CSS Grid with masonry powers. As of this writing, CSS grids have been extended to accommodate masonry. grid-template-rows: masonry is a draft of CSS Grid Level 3 that is currently experimental in Firefox Nightly. The columns of this layout will remain as a grid axis while the row takes on masonry. The child elements are then laid out item by item along the rows, as with the grid layout’s automatic placement. With this layout, items flow vertically, respecting column tracks but not row constraints.
This option leaves Grid as your go-to layout system but allows it to handle the flowing, gap-filling stacks we crave.
First off, the grid-masonry style builds on CSS Grid’s familiarity and robust tooling (e.g., DevTools support). As a front-end developer, there’s a chance you’ve played with grid-template-columns or grid-area, so you’re halfway up the learning matrix. Masonry only extends the existing capabilities, eliminating the need to learn a whole new syntax from scratch. Also, Grid’s robust tooling comes along with Chrome DevTools’ grid overlay or Firefox’s layout inspector, removing the need for JavaScript hacks.
Not so fast: there are limitations. Grid’s specifications already include properties like align-content and grid-auto-flow. Stacking masonry on the list risks turning it into a labyrinth.
Then there are the edge cases. What happens when you want an item to span multiple columns and flow masonry-style? Or when gaps between items don’t align across columns? The specs are still foggy here, and early tests hint at bugs like items jumping unpredictably if content loads dynamically. This issue could break layouts, especially on responsive designs. The browser compatibility issue also exists. It’s still experimental, and even with polyfills, it does not work on other browsers except Firefox Nightly. Not something you’d want to try in your next client’s project, right?
Option 2: A Standalone Masonry Module
What if we had a display: masonry approach instead? Indulge me for a few minutes. This isn’t just wishful thinking. Early CSS Working Group chats have floated the idea, and it’s worth picturing how it could improve layouts. Let’s dive into the vision, how it might work, and what it gains or loses in the process.
Imagine a layout system that doesn’t lean on Grid’s rigid tracks or Flexbox’s linear flow but instead thrives on vertical stacking with a horizontal twist. The goal? A clean slate for masonry’s signature look: items cascading down columns, filling gaps naturally, no hacks required. Inspired by murmurs in CSSWG discussions and the Chrome team’s alternative proposal, this module would prioritise fluidity over structure, giving designers a tool that feels as intuitive as the layouts they’re chasing. Think Pinterest but without JavaScript scaffolding.
Here’s the pitch: a display value named masonry kicks off a flow-based system where items stack vertically by default, adjusting horizontally to fit the container. You’d control the direction and spacing with simple properties like the following:
Want more control? Hypothetical extras like masonry-columns: auto could mimic Grid’s repeat(auto-fill, minmax()), while masonry-align: balance might even out column lengths for a polished look. It’s less about precise placement (Grid’s strength) and more about letting content breathe and flow, adapting to whatever screen size is thrown at it. The big win here is a clean break from Grid’s rigid order. A standalone module keeps them distinct: Grid for order, Masonry for flow. No more wrestling with Grid properties that don’t quite fit; you get a system tailored to the job.
Of course, it’s not all smooth sailing. A brand-new spec means starting from zero. Browser vendors would need to rally behind it, which can be slow. Also, it might lead to confusion of choice, with developers asking questions like: “Do I use Grid or Masonry for this gallery?” But hear me out: This proposed module might muddy the waters before it clears them, but after the water is clear, it’s safe for use by all and sundry.
Item Flow: A Unified Layout Resolution
In March 2025, Apple’s WebKit team proposed Item Flow, a new system that unifies concepts from Flexbox, Grid, and masonry into a single set of properties. Rather than choosing between enhancing Grid or creating a new masonry module, Item Flow merges their strengths, replacing flex-flow and grid-auto-flow with a shorthand called item-flow. This system introduces four longhand properties:
item-direction Controls flow direction (e.g., row, column, row-reverse).
item-pack Determines packing density (e.g., sparse, dense, balance).
item-slack Adjusts tolerance for layout adjustments, allowing items to shrink or shift to fit.
Item Flow aims to make masonry a natural outcome of these properties, not a separate feature. For example, a masonry layout could be achieved with:
.container {\\n display: grid; /* or flex */\\n item-flow: column wrap dense;\\n\\n /* long hand version */\\n item-direction: column;\\n item-wrap: wrap;\\n item-pack: dense;\\n\\n gap: 1rem;\\n}\\n
This setup allows items to flow vertically, wrap into columns, and pack tightly, mimicking masonry’s organic arrangement. The dense packing option, inspired by Grid’s auto-flow: dense, reorders items to minimise gaps, while item-slack could fine-tune spacing for visual balance.
The downside? Item Flow is a future-facing concept, and it has not yet been implemented in browsers as of April 2025. Developers must wait for standardisation and adoption, and the CSS Working Group is still gathering feedback.
What’s The Right Path?
While there is no direct answer to that question, the masonry debate hinges on balancing simplicity, performance, and flexibility. Extending the Grid with masonry is tempting but risks overcomplicating an already robust system. A standalone display: masonry module offers clarity but adds to CSS’s learning curve. Item Flow, the newest contender, proposes a unified system that could make masonry a natural extension of Grid and Flexbox, potentially putting the debate to rest at last.
Each approach has trade-offs:
Grid with Masonry: Familiar but potentially clunky, with accessibility and spec concerns.
New Module: Clean and purpose-built, but requires learning new syntax.
Item Flow: Elegant and versatile but not yet available, with ongoing debates over naming and implementation.
Item Flow’s ability to enhance existing layouts while supporting masonry makes it a compelling option, but its success depends on browser adoption and community support.
Conclusion
So, where do we land after all this? The masonry showdown boils down to three paths: the extension of masonry into CSS Grid, a standalone module for masonry, or Item Flow. Now, the question is, will CSS finally free us from JavaScript for masonry, or are we still dreaming?
Grid’s teasing us with a taste, and a standalone module’s whispering promises — but the finish line’s unclear, and WebKit swoops in with a killer merge shorthand, Item Flow. Browser buy-in, community push, and a few more spec revisions might tell us. For now, it’s your move — test, tweak, and weigh in. The answer’s coming, one layout at a time.
","description":"There were duelling proposals floating around for adding support for masonry-style layouts in CSS. In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone module. Well, not until…","guid":"https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/","author":"Gabriel Shoyombo","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-05T16:00:00.266Z","media":null,"categories":["CSS","CSS Grid","Design","Techniques"],"attachments":null,"extra":null,"language":null},{"title":"How To Launch Big Complex Projects","url":"https://www.smashingmagazine.com/2025/05/how-launch-big-complex-projects/","content":"
How To Launch Big Complex Projects
When was the last time your project wrapped up smoothly — no delays, no surprises, no last-minute compromises? In reality, most UX projects drift as timelines slip, budgets stretch, and features morph. How do we get better at navigating the chaos? An upcoming part of How To Measure UX and Design Impact by yours truly.
Think about your past projects. Did they finish on time and on budget? Did they end up getting delivered without cutting corners? Did they get disrupted along the way with a changed scope, conflicted interests, unexpected delays, and surprising blockers?
Chances are high that your recent project was over schedule and over budget — just like a vast majority of other complex UX projects. Especially if it entailed at least some sort of complexity, be it a large group of stakeholders, a specialized domain, internal software, or expert users. It might have been delayed, moved, canceled, “refined,” or postponed. As it turns out, in many teams, shipping on time is an exception rather than the rule.
In fact, things almost never go according to plan — and on complex projects, they don’t even come close. So, how can we prevent it from happening? Well, let’s find out.
Many of the insights in this article are from “How Big Things Get Done”, a wonderful book not just for designers, but anyone who works on large, complex products. (Large preview)
99.5% Of Big Projects Overrun Budgets And Schedules
As people, we are inherently over-optimistic and over-confident. It’s hard to study and process everything that can go wrong, so we tend to focus on the bright side. However, unchecked optimism leads to unrealistic forecasts, poorly defined goals, better options ignored, problems not spotted, and no contingencies to counteract the inevitable surprises.
The blue line follows a normal distribution, the red line follows “fat tails” — sometimes big outliers are quite common. Illustration by Scott Young. (Large preview)
Hofstadter’s Law states that the time needed to complete a project will always expand to fill the available time &- even if you take into account Hofstadter’s Law. Put differently, it always takes longer than you expect, however cautious you might be.
As a result, only 0.5% of big projects make the budget and the schedule — e.g., big relaunches, legacy re-dos, big initiatives. We might try to mitigate risk by adding 15–20% buffer — but it rarely helps. Many of these projects don’t follow “normal” (Bell curve) distribution, but are rather “fat-tailed”.
And there, overruns of 60–500% are typical and turn big projects into big disasters.
Reference-Class Forecasting (RCF)
We often assume that if we just thoroughly collect all the costs needed and estimate complexity or efforts, we should get a decent estimate of where we will eventually land. Nothing could be further from the truth.
Complex projects have plenty of unknown unknowns. No matter how many risks, dependencies, and upstream challenges we identify, there are many more we can’t even imagine. The best way to be more accurate is to define a realistic anchor — for time, costs, and benefits — from similar projects done in the past.
IT projects are more likely to have a fat-tailed distribution, with extreme outliers. (Large preview)
Reference-class forecasting follows a very simple process:
First, we find the reference projects that have the most similarities to our project.
If the distribution follows the Bell curve, use the mean value + 10–15% contingency.
If the distribution is fat-tailed, invest in profound risk management to prevent big challenges down the line.
Tweak the mean value only if you have very good reasons to do so.
Set up a database to track past projects in your company (for cost, time, benefits).
Mapping Out Users’ Success Moments
Over the last few years, I’ve been using the technique called “Event Storming,” suggested by Matteo Cavucci many years back. The idea is to capture users’ experience moments through the lens of business needs. With it, we focus on the desired business outcome and then use research insights to project events that users will be going through to achieve that outcome.
Event storming: we are exploring users’ events through the lens of the desired business outcome. (Large preview)
The image above shows the process in action — with different lanes representing different points of interest, and prioritized user events themed into groups, along with risks, bottlenecks, stakeholders, and users to be involved — as well as UX metrics. From there, we can identify common themes that emerge and create a shared understanding of risks, constraints, and people to be involved.
Throughout that journey, we identify key milestones and break users’ events into two main buckets:
User’s success moments (which we want to dial up ↑);
User’s pain points or frustrations (which we want to dial down ↓).
We then break out into groups of 3–4 people to separately prioritize these events and estimate their impact and effort on Effort vs. Value curves by John Cutler.
The next step is identifying key stakeholders to engage with, risks to consider (e.g., legacy systems, 3rd-party dependency, etc.), resources, and tooling. We reserve special time to identify key blockers and constraints that endanger a successful outcome or slow us down. If possible, we also set up UX metrics to track how successful we actually are in improving the current state of UX.
It might seem like a bit too much planning for just a UX project, but it has been helping quite significantly to reduce failures and delays and also maximize business impact.
When speaking to businesses, I usually speak about better discovery and scoping as the best way to mitigate risk. We can, of course, throw ideas into the market and run endless experiments. But not for critical projects that get a lot of visibility, e.g., replacing legacy systems or launching a new product. They require thorough planning to prevent big disasters, urgent rollbacks, and… black swans.
Black Swan Management
Every other project encounters what’s called a Black Swan — a low probability, high-consequence event that is more likely to occur when projects stretch over longer periods of time. It could be anything from restructuring teams to a change of priorities, which then leads to cancellations and rescheduling.
Little problems have an incredible capacity to compound large, disastrous problems — ruining big projects and sinking big ambitions at a phenomenal scale. The more little problems we can design around early, the more chances we have to get the project out the door successfully.
So we make projects smaller and shorter. We mitigate risks by involving stakeholders early. We provide less surface for Black Swans to emerge. One good way to get there is to always start every project with a simple question: “Why are we actually doing this project?” The answers often reveal not just motivations and ambitions, but also the challenges and dependencies hidden between the lines of the brief.
And as we plan, we could follow a “right-to-left thinking”. We don’t start with where we are, but rather where we want to be. And as we plan and design, we move from the future state towards the current state, studying what’s missing or what’s blocking us from getting there. The trick is: we always keep our end goal in mind, and our decisions and milestones are always shaped by that goal.
Manage Deficit Of Experience
Complex projects start with a deep deficit of experience. To increase the chances of success, we need to minimize the chance of mistakes even happening. That means trying to make the process as repetitive as possible — with smaller “work modules” repeated by teams over and over again.
In the end, we are all in the same boat. The earlier we prevent leaks and troubles from happening, the better off we will be on the other side. Thanks to José Torre for the wonderful illustration. (Large preview)
🚫 Beware of unchecked optimism → unrealistic forecasts. 🚫 Beware of “cutting-edge” → untested technology spirals risk. 🚫 Beware of “unique” → high chance of exploding costs. 🚫 Beware of “brand new” → rely on tested and reliable. 🚫 Beware of “the biggest” → build small things, then compose.
It also means relying on reliable: from well-tested tools to stable teams that have worked well together in the past. Complex projects aren’t a good place to innovate processes, mix-n-match teams, and try out more affordable vendors.
Typically, these are extreme costs in disguise, skyrocketing delivery delays, and unexpected expenses.
Think Slow, Act Fast
In the spirit of looming deadlines, many projects rush into delivery mode before the scope of the project is well-defined. It might work for fast experiments and minor changes, but that’s a red flag for larger projects. The best strategy is to spend more time in planning before designing a single pixel on the screen.
But planning isn’t an exercise in abstract imaginative work. Good planning should include experiments, tests, simulations, and refinements. It must include the steps of how we reduce risks and how we mitigate risks when something unexpected (but frequent in other similar projects) happens.
Tracking a history of successful launches gives us insight into how well our estimates and plans are. (Large preview)
Good Design Is Good Risk Management
When speaking about design and research to senior management, position it as a powerful risk management tool. Good design that involves concept testing, experimentation, user feedback, iterations, and refinement of the plan is cheap and safe.
Eventually it might need more time than expected, but it’s much — MUCH! — cheaper than delivery. Delivery is extremely cost-intensive, and if it relies on wrong assumptions and poor planning, then that’s when the project becomes vulnerable and difficult to move or re-route.
Wrapping Up
The insights above come from a wonderful book on How Big Things Get Done by Prof. Bent Flyvbjerg and Dan Gardner. It goes in all the fine details of how big projects fail and when they succeed. It’s not a book about design, but a fantastic book for designers who want to plan and estimate better.
Not every team will work on a large, complex project, but sometimes these projects become inevitable — when dealing with legacy, projects with high visibility, layers of politics, or an entirely new domain where the company moves.
Good projects that succeed have one thing in common: they dedicate a majority of time to planning and managing risks and unknown unknowns. They avoid big-bang revelations, but instead test continuously and repeatedly. That’s your best chance to succeed — work around these unknowns, as you won’t be able to prevent them from emerging entirely anyway.
New: How To Measure UX And Design Impact
Meet Measure UX & Design Impact (8h), a practical guide for designers and UX leads to shape, measure and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 IMPACT to save 20% off today. Jump to the details.
","description":"When was the last time your project wrapped up smoothly — no delays, no surprises, no last-minute compromises? In reality, most UX projects drift as timelines slip, budgets stretch, and features morph. How do we get better at navigating the chaos? An upcoming part of How To…","guid":"https://www.smashingmagazine.com/2025/05/how-launch-big-complex-projects/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-04T16:00:00.740Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png","type":"photo","width":900,"height":466}],"categories":["UX","Design","Workflow"],"attachments":null,"extra":null,"language":null},{"title":"WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation","url":"https://www.smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/","content":"
WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation
WCAG is evolving. Since 1999, the Web Content Accessibility Guidelines have defined accessibility in binary terms: either a success criterion is met or not. But real user experience is rarely that simple. WCAG 3.0 rethinks the model — prioritizing usability over compliance and shifting the focus toward the quality of access rather than the mere presence of features. Could this be the start of a new era in accessibility?
Since their introduction in 1999, the Web Content Accessibility Guidelines (WCAG) have shaped how we design and develop inclusive digital products. The WCAG 2.x series, released in 2008, introduced clear technical criteria judged in a binary way: either a success criterion is met or not. While this model has supported regulatory clarity and auditability, its “all-or-nothing” nature often fails to reflect the nuance of actual user experience (UX).
Over time, that disconnect between technical conformance and lived usability has become harder to ignore. People engage with digital systems in complex, often nonlinear ways: navigating multistep flows, dynamic content, and interactive states. In these scenarios, checking whether an element passes a rule doesn’t always answer the main question: can someone actually use it?
WCAG 3.0 is still in draft, but is evolving — and it represents a fundamental rethinking of how we evaluate accessibility. Rather than asking whether a requirement is technically met, it asks how well users with disabilities can complete meaningful tasks. Its new outcome-based model introduces a flexible scoring system that prioritizes usability over compliance, shifting focus toward the quality of access rather than the mere presence of features.
WCAG 3.0 isn’t just an update — it’s a paradigm shift.
Unlike WCAG 2.x, which focused primarily on web pages, WCAG 3.0 aims to cover a much broader ecosystem, including applications, tools, connected devices, and emerging interfaces like voice interaction and extended reality. It also rebrands itself as the W3C Accessibility Guidelines (while the WCAG acronym remains the same), signaling that accessibility is no longer a niche concern — it’s a baseline expectation across the digital world.
Importantly, WCAG 3.0 will not immediately replace 2.x. Both standards will coexist, and conformance to WCAG 2.2 will continue to be valid and necessary for some time, especially in legal and policy contexts.
Rules alone can’t capture whether a system truly works for someone. That’s why WCAG 3.0 leans into flexibility and future-proofing, aiming to support evolving technologies and real-world use over time. It formalizes a principle long understood by practitioners:
Inclusive design isn’t about passing a test; it’s about enabling people.
A New Structure: From Success Criteria To Outcomes And Methods
WCAG 2.x is structured around four foundational principles — Perceivable, Operable, Understandable, and Robust (aka POUR) — and testable success criteria organized into three conformance levels (A, AA, AAA). While technically precise, these criteria often emphasize implementation over impact.
WCAG 3.0 reorients this structure toward user needs and real outcomes. Its hierarchy is built on:
Guidelines: High-level accessibility goals tied to specific user needs.
Outcomes: Testable, user-centered statements (e.g., “Users have alternatives for time-based media”).
Methods: Technology-specific or agnostic techniques that help achieve the outcomes, including code examples and test instructions.
How-To Guides: Narrative documentation that provides practical advice, user context, and design considerations.
This shift is more than organizational. It reflects a deeper commitment to aligning technical implementation with UX. Outcomes speak the language of capability, which is about what users should be able to do (rather than just technical presence).
Crucially, outcomes are also where conformance scoring begins to take shape. For example, imagine a checkout flow on an e-commerce website. Under WCAG 2.x, if even one field in the checkout form lacks a label, the process may fail AA conformance entirely. However, under WCAG 3.0, that same flow might be evaluated across multiple outcomes (such as keyboard navigation, form labeling, focus management, and error handling), with each outcome receiving a separate score. If most areas score well but the error messaging is poor, the overall rating might be “Good” instead of “Excellent”, prompting targeted improvements without negating the entire flow’s accessibility.
From Binary Checks To Graded Scores
Rather than relying on pass or fail outcomes, WCAG 3.0 introduces a scoring model that reflects how well accessibility is supported. This shift allows teams to recognize partial successes and prioritize real improvements.
How Scoring Works
Each outcome in WCAG 3.0 is evaluated through one or more atomic tests. These can include the following:
Binary tests: “Yes” and “no” outcomes (e.g., does every image have alternative text?)
Percentage-based tests: Coverage-based scoring (e.g., what percentage of form fields have labels?)
Qualitative tests: Rated judgments based on criteria (e.g., how descriptive is the alternative text?)
The result of these tests produces a score for each outcome, often normalized on a 0-4 or 0-5 scale, with labels like Poor, Fair, Good, and Excellent. These scores are then aggregated across functional categories (vision, mobility, cognition, etc.) and user flows.
This allows teams to measure progress, not just compliance. A product that improves from “Fair” to “Good” over time shows real evolution — a concept that doesn’t exist in WCAG 2.x.
Critical Errors: A Balancing Mechanism
To ensure that severity still matters, WCAG 3.0 introduces critical errors, which are high-impact accessibility failures that can override an otherwise positive score.
For example, consider a checkout flow. Under WCAG 2.x, a single missing label might cause the entire flow to fail conformance. WCAG 3.0, however, evaluates multiple outcomes — like form labeling, keyboard access, and error handling — each with its own score. Minor issues, such as unclear error messages or a missing label on an optional field, might lower the rating from “Excellent” to “Good”, without invalidating the entire experience.
But if a user cannot complete a core action, like submitting the form, making a purchase, or logging in, that constitutes a critical error. These failures directly block task completion and significantly reduce the overall score, regardless of how polished the rest of the experience is.
On the other hand, problems with non-essential features — like uploading a profile picture or changing a theme color — are considered lower-impact and won’t weigh as heavily in the evaluation.
Conformance Levels: Bronze, Silver, Gold
In place of categorizing conformance in tiers of Level A, Level AA, and Level AAA, WCAG 3.0 proposes three different conformance tiers:
Bronze: The new minimum. It is comparable to WCAG 2.2 Level AA, but based on scoring and foundational outcomes. The requirements are considered achievable via automated and guided manual testing.
Gold: The highest tier. Represents exemplary accessibility, likely requiring inclusive design processes, innovation, and extensive user involvement.
Unlike in WCAG 2.2, where Level AAA is often seen as aspirational and inconsistent, these levels are intended to incentivize progression. They can also be scoped in the sense that teams can claim conformance for a checkout flow, mobile app, or specific feature, allowing iterative improvement.
What You Should Do Now
While WCAG 3.0 is still being developed, its direction is clear. That said, it’s important to acknowledge that the guidelines are not expected to be finalized in a few years. Here’s how teams can prepare:
Continue pursuing WCAG 2.2 Level AA.It remains the most robust, recognized standard.
Familiarize yourselfwith WCAG 3.0 drafts, especially the outcomes and scoring model.
Embed accessibility into workflows. Shift left. Don’t test at the end — design and build with access in mind.
Involveusers with disabilities early and regularly.
These practices won’t just make your product more inclusive; they’ll position your team to excel under WCAG 3.0.
Potential Downsides
Even though WCAG 3.0 presents a bold step toward more holistic accessibility, several structural risks deserve early attention, especially for organizations navigating regulation, scaling design systems, or building sustainable accessibility practices. Importantly, many of these risks are interconnected: challenges in one area may amplify issues in others.
Subjective Scoring
The move from binary pass or fail criteria to scored evaluations introduces room for subjective interpretation. Without standardized calibration, the same user flow might receive different scores depending on the evaluator. This makes comparability and repeatability harder, particularly in procurement or multi-vendor environments. A simple alternative text might be rated as “adequate” by one team and “unclear” by another.
Reduced Compliance Clarity
That same subjectivity leads to a second concern: the erosion of clear compliance thresholds. Scored evaluations replace the binary clarity of “compliant” or “not” with a more flexible, but less definitive, outcome. This could complicate legal enforcement, contractual definitions, and audit reporting. In practice, a product might earn a “Good” rating while still presenting critical usability gaps for certain users, creating a disconnect between score and actual access.
Until WCAG 3.0 is formally mapped to those standards, its use in regulated contexts may introduce risk. Teams operating in healthcare, finance, or public sectors will likely need to maintain dual conformance strategies in the interim, increasing cost and complexity.
Risk Of Minimum Viable Accessibility
Perhaps most concerning, this ambiguity can set the stage for a “minimum viable accessibility” mindset. Scored models risk encouraging “Bronze is good enough” thinking, particularly in deadline-driven environments. A team might deprioritize improvements once they reach a passing grade, even if essential barriers remain.
For example, a mobile app with strong keyboard support but missing audio transcripts could still achieve a passing tier, leaving some users excluded.
Conclusion
WCAG 3.0 marks a new era in accessibility — one that better reflects the diversity and complexity of real users. By shifting from checklists to scored evaluations and from rigid technical compliance to practical usability, it encourages teams to prioritize real-world impact over theoretical perfection.
As one might say, “It’s not about the score. It’s about who can use the product.” In my own experience, I’ve seen teams pour hours into fixing minor color contrast issues while overlooking broken keyboard navigation, leaving screen reader users unable to complete essential tasks. WCAG 3.0’s focus on outcomes reminds us that accessibility is fundamentally about functionality and inclusion.
For teams across design, development, and product leadership, this shift is a chance to rethink what success means. Accessibility isn’t about ticking boxes — it’s about enabling people.
By preparing now, being mindful of the risks, and focusing on user outcomes, we don’t just get ahead of WCAG 3.0 — we build digital experiences that are truly usable, sustainable, and inclusive.
","description":"WCAG is evolving. Since 1999, the Web Content Accessibility Guidelines have defined accessibility in binary terms: either a success criterion is met or not. But real user experience is rarely that simple. WCAG 3.0 rethinks the model — prioritizing usability over compliance and…","guid":"https://www.smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/","author":"Mikhail Prosmitskiy","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-05-01T16:00:00.323Z","media":null,"categories":["Accessibility","Design","User Experience","Usability"],"attachments":null,"extra":null,"language":null},{"title":"Make Every Day Count (May 2025 Wallpapers Edition)","url":"https://www.smashingmagazine.com/2025/04/desktop-wallpaper-calendars-may-2025/","content":"
Make Every Day Count (May 2025 Wallpapers Edition)
The new month is just around the corner, and that means: It’s time for some new desktop wallpapers! All of them are designed with love by the community for the community and can be downloaded for free. Enjoy!
Sometimes, it doesn’t take a lot to get inspired. A short bike ride to soak in the sun, a coffee break with a friend, or listening to your favorite song might be just what you need to spark some fresh ideas on a busy day. And if that doesn’t do the trick, we have a little extra inspiration boost for you: desktop wallpapers!
For this post, artists and designers from across the globe once again challenged their creative skills and designed desktop wallpapers to cater for some fresh inspiration this May — just like it has been a monthly tradition here at Smashing Magazine for more than 14 years already. You’ll find their artworks compiled below, along with a selection of May favorites from our wallpapers archives that are just too good to be forgotten. A big thank-you to everyone who shared their designs with us this month — this post wouldn’t be possible without your wonderful support!
If you too would like to get featured in one of our upcoming wallpapers posts, please don’t hesitate to submit your design. We can’t wait to see what you’ll come up with! Happy May!
You can click on every image to see a larger preview.
We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.
Squeeze The Day
“Happy National Lemonade Day! Whether you like it sweet, tart, sparkling, or spiked — today’s the perfect excuse to pour yourself a glass of sunshine. Support a local lemonade stand, whip up your own zesty creation, or just soak in the summer vibes. However you sip it, make it refreshing, bold, and bright. Cheers to lemons and all the lemonade moments life brings!” — Designed by PopArt Studio from Serbia.
“In this illustration, I want to express myself, just as I am, with all my upside-down, crazy thoughts. There are little things that make me happy: I love sitting quietly by the window and watching the rain. I enjoy watching the changes in the sky, the colors, and the clouds. It feels like every cloud says something to me, reminding me how important it is to give myself time. Nature always speaks to us through colors, shapes, and space. But nowadays, people are too busy — buying time, spending hours on movies and OTT platforms — always trying to prove themselves to others.\u2028 We have forgotten how to simply be with ourselves, to connect with nature.” — Designed by Design Studio from India.
“In May, a very particular flower blooms, adorning the fields with little white bells. Associated with the first of May in France (‘la fête du travail’), the Lily of the Valley (‘muguet’ in French) is a very recognizable plant, and this one is entirely made of paper in the traditional papercraft art, without any glue, respecting nature in every way.” — Designed by Caroline Boire from France.
“I love Star Wars and spring! I chose to combine those aesthetics to create a minimal wallpaper design for those who wanted a sweet memory of C3PO and R2D2. Culturally, I believe Star Wars is huge both nationally and internationally and teaches loads of good lessons, so what better theme to pull from! I also enjoy hand-drawn elements, so I drew this image with charcoal brushes in Procreate and then dropped it in as a jpeg.” — Designed by Chloe Mills from Texas, United States.
“Through a crumbling castle window, nature weaves its way back — framing a white house, green trees, and soft skies. A peaceful glimpse of history and new life intertwined.” — Designed by LibraFire from Serbia.
“Two ladybugs sat quietly on a flower, watching the Flower Moon rise high above. It was May, the time when blossoms wake and the moon whispers of new beginnings. Together, they listened.” — Designed by Ginger IT Solutions from Serbia.
“International Labour Day on May 1 celebrates the contributions and achievements of workers worldwide. Originating from 19th-century labor movements advocating for an eight-hour workday, it highlights the importance of fair wages, safe workplaces, and workers’ rights. Many countries hold events, parades, and rallies to honor this important day.” — Designed by Design Studio from India.
“The longing for warmth, flowers in bloom, and new beginnings is finally over as we welcome the month of May. From celebrating nature on the days of turtles and birds to marking the days of our favorite wine and macarons, the historical celebrations of the International Workers’ Day, Cinco de Mayo, and Victory Day, to the unforgettable ‘May the Fourth be with you’. May is a time of celebration — so make every May day count!” — Designed by PopArt Studio from Serbia.
“April and May are usually when everything starts to bloom, especially the magnolia trees. I live in an area where there are many and when the wind blows, the petals make it look like snow is falling.” — Designed by Sarah Masucci from the United States.
“This month is dedicated to flowers, to join us and brighten our days giving a little more color to our daily life.” — Designed by Verónica Valenzuela from Spain.
“In my part of the world, May marks the start of seasonal produce, starting with asparagus. I know spring is finally here and summer is around the corner when locally-grown asparagus shows up at the grocery store.” — Designed by Elaine Chen from Toronto, Canada.
“We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by Ana Masnikosa from Belgrade, Serbia.
“Springtime, especially May, is my favorite time of the year. And I like popsicles — so it’s obvious isn’t it?” — Designed by Steffen Weiß from Germany.
“May is National Bike Month! So, instead of hopping in your car, grab your bike and go. Our whole family loves that we live in our bike-friendly community. So, bike to work, to school, to the store, or to the park — sometimes it is faster. Not only is it good for the environment, but it is great exercise!” — Designed by Karen Frolo from the United States.
“We recently changed our workplace and now we’re in a windy place, so we like the idea of flying in the air, somehow.” — Designed by Monk Software from Italy.
“Spring has sprung, and what better metaphor than toast popping up and out of a fun-colored toaster!” — Designed by Stephanie Klemick from Emmaus Pennsylvania, USA.
“Inspired by a little-known ‘holiday’ on May 4th known as ‘Bird Day’. It is the first holiday in the United States celebrating birds. Hurray for birds!” — Designed by Clarity Creative Group from Orlando, FL.
","description":"The new month is just around the corner, and that means: It’s time for some new desktop wallpapers! All of them are designed with love by the community for the community and can be downloaded for free. Enjoy! 15 min read\\nWallpapers\\nShare on Twitter, LinkedIn\\n\\nSometimes, it doesn’t…","guid":"https://www.smashingmagazine.com/2025/04/desktop-wallpaper-calendars-may-2025/","author":"Cosima Mielke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-29T16:00:00.987Z","media":[{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-squeeze-the-day-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LIJ,7OlS3Y%4tQogkSR*7Owf;KNs"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-my-crazy-thoughts-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"Ld9+yoPCY6bwLNrqoen$i_i^WXXT"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-lily-of-the-valley-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LYM;:SIu{e#l-4$%XTEg:jofJTxZ"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-may-the-fourth-be-with-you-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LWM*f_%L?a%M?vjsV[of~pa}M{ax"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-ladies-and-gentlemen-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LDRnh0^y?A?C?Cj@azj@~NRm9god"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-through-the-castles-eye-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LRP}h~-U{_%2-ojsaxWW{_W;GGjF"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-crayfish-party-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L4El,G}YNHNHsVS2oLw{5lEgs:=e"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-under-the-flower-moon-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L97-KDIV0Lxt?at74:ofRkofayWB"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-international-labour-day-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LOO3g^Mx_M-;%Mt6j[Rj_Lt68{ax"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LKRx0I]_?5%M?Gn#RiSi^CK8IdxT"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-navigating-the-amazon-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LRF68U9I9Hn#~TIWNIn$?EIWS6k9"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-bat-traffic-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L8F~Eho~Nekr^hWXS5R-1%w]xDs9"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a44c529-60bb-4ad2-812d-fd3d7b6347a6/may-16-understand-yourself-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LVIfS^EjxV$~I~xpS0WB68wgsWWX"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf91eec5-9d10-4290-96ae-c4261ace5321/may-16-poppies-paradise-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LASiaB_4kW_N~qban+SMW:WBRjoM"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L5268QWSVnj{bfjYacfmM[oMohj["},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf059fd3-dbd8-4270-b9ed-70e1a0019e4c/may-19-april-showers-bring-magnolia-flowers-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LYHoR*Y8IpsE5JR7aLNeD*$yayRk"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LFAnv5NH0J-p0Kt7?HM{xaWVX8j["},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/232649eb-ba07-4c5f-8af4-6458d6ed1f1b/may-16-add-color-to-your-life-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LZR.}h%M_Nx[?aj[Myj[yDj[RPaf"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bf65a30-3cc8-4130-a166-9da219b32153/may-18-lake-deck-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LMHvn]}sn4$iI=I@j[xDR6V[s.o0"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dd1179a-2295-4645-b45b-5d0c4dfa185a/may-12-tentacles-36-preview-opt.png","type":"photo","width":800,"height":500,"blurhash":"LZN,_CRjt7ofM{WBRjWB~q-;WBax"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LMBq3+tSI9xuZgadR+aK0cRjt8Na"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LBPZc5~p~ps+~pt6IVRj?bRPD*x]"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4645119c-bad7-4818-8942-d15ca3f9a1f8/may-16-asparagus-say-hi-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LOFRzVtkkCtQ?^kCkCj[t.axjZf6"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1feda6da-f329-496d-8aab-94d38cd68b90/may-17-spring-gracefulness-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LTA1^$M}M|yEMHjDnijY9EtRtQR5"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LQQ9u~_NwJx]Dz%N-;Io9DROxuRj"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b2b9d54-a7e9-4848-ba1b-2e0bbea22e95/may-15-enjoy-may-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LXE5f@KhI=r}x[W;WBjv0=w4xDXe"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb0c1df9-2698-41a7-9234-8ce0a987121f/may-18-geo-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LZQ,aako~W=|TIV@$Oof?csWITS~"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e76c8b69-c631-447f-b8ae-d35ab9cf365e/may-17-be-on-your-bike-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L04-@MWC0K?a-pWCM|t7Ipofs:Rj"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-duck-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LMSY{p?b.T-U^kbaSyWE%iWAQ+kX"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b554f32a-777c-420b-9381-2a3ad1c8ca6d/may-14-monkgolfier-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LIH{cgPAK4,D.ltQKiv#zBNuWBr?"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LYR2_C?cI9^*-CITwtkE8^M_t7s:"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-popping-into-spring-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LJKBtHyD6.59.TxZI[nO5BWZjE-n"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c0be6e7-ec80-4da9-b230-fdf54d63a878/may-15-make-a-wish-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L44VdQkD91Rk_HRUH_bXMPQ?tNtf"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4fb947b-c824-4176-b4aa-e93416466ffa/may-13-green-bear-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LYJ[33yryFozuPnir=RO%OnhS2a~"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fe8b679-631f-4f87-916c-8858285564cb/may-14-bird-day-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LDPs*NT}tt.Sx_KQo=SexUr=aRsC"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85846408-9120-44a1-b754-bc3c57b062e2/may-14-beautiful-things-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LbQkpQMdxu-:~Ws;R5s:o@t6RQMe"}],"categories":["Wallpapers"],"attachments":null,"extra":null,"language":null},{"title":"How To Turn Your Figma Designs Into Live Apps With Anima Playground","url":"https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/","content":"
How To Turn Your Figma Designs Into Live Apps With Anima Playground
As designers, it’s important to be able to transform visual ideas into concepts within minutes and into fully functional products within hours. Well, today we’re bringing you closer to AnimaApp, an app designed to make your life easier — whether you’re a designer, developer, product team member or entrepreneur.
For years, designers and developers have been stuck in a frustrating loop. Designers create stunning UIs in Figma, only for developers to spend hours — or days — coding them from scratch. Along the way, details get lost, tweaks pile up, and before you know it, the whole process turns into a never-ending back-and-forth.
It’s a tale as old as modern product teams: pixel-perfect designs turned into imperfect realities, timelines stretched by repetitive tasks, and collaboration slowed by tool mismatches. Designers work in one world, developers in another — and the bridge between them has always been shaky at best.
But what if you could just… skip the painful part?
That’s where Anima Playground comes in. It’s a tool that transforms your Figma designs into fully functional web apps automatically. No more pixel-matching marathons, no more manual UI rebuilding. Just a smoother, faster way to go from a design to a live product — with AI doing the heavy lifting.
What Is Anima Playground?
Anima Playground is an AI-powered development environment that makes the jump from design to code seamless. It turns your Figma designs into clean, editable, and production-ready React components — instantly. And unlike static design-to-code tools of the past, this one goes further: it lets you add business logic, connect to APIs, and preview real-time changes right inside the playground.
In short: it’s not just a handoff tool. It’s where design becomes a working app.
Here’s what you can do with Anima Playground:
Import Figma designs exactly as they were created — layouts, styles, responsiveness, and all.
Generate React components instantly, with support for libraries like MUI and shadcn/ui.
Use AI prompts to add logic — from button clicks to dynamic lists and form validation.
Customize everything, with full code access and live previews.
How It Works
Easily sync your Figma designs with Anima Playground. All it takes is four quick steps.
1. Import Your Figma Designs
No clunky exports, no third-party converters. Just paste your Figma link, and Anima syncs it directly. It preserves layout, typography, responsiveness, and component structure, exactly as designed.
This step sets the foundation: Anima translates your Figma layers into React code, respecting design fidelity down to the pixel. Designers can rest easy knowing their UI won’t get “lost in translation.”
2. Convert Designs Into React Components
Once imported, your Figma designs are instantly transformed into React components. This includes:
Clean JSX structure
Tailwind, MUI, or shadcn/ui styling (you choose!)
Nested component trees
Auto-handling of responsive layouts
You can switch between UI libraries with a simple prompt or setting change — no need to rewrite everything manually. Whether you’re building a startup landing page or a complex dashboard, the output is dev-ready and easy to extend.
3. Add Logic With AI-Powered Prompts
Want a button to open a modal? Or a form that sends data to an API? You don’t need to write all that boilerplate yourself.
Just describe what you want using natural language — for example:
“Make this button open a signup modal.”
Anima’s AI will generate the underlying code for you — complete with state management, handlers, and reusable logic. You can always dive in and tweak the output to fit your specific app structure.
This turns design into functional UI with a level of speed that traditional front-end workflows just can’t match.
Use AI prompts to add interactivity and logic effortlessly. (Large preview)
4. See Live Changes Instantly
As you make changes — whether through prompts or direct code edits — you see them reflected in real-time. Anima Playground acts as a visual IDE, combining the flexibility of code with the immediacy of design tools.
This live feedback loop means less context-switching and faster iterations. Whether you’re testing animations, layout tweaks, or new features, you get to see it before you commit to anything.
More Than Just Design-to-Code
While many tools promise “Figma to code,” Anima Playground goes beyond static conversion. It’s a fully interactive environment where real apps are born — with logic, data, and interactivity.
Some powerful features include:
One-click AI suggestions to enhance your UI with logic.
Custom component support, allowing teams to inject their own building blocks.
Component reuse, letting you structure apps in a scalable way.
Flexible framework support, starting with React and planning to support more in the future.
It’s not just for prototyping — it’s for building.
Why It Matters
The design-to-code handoff has been broken for too long. Anima Playground isn’t just another tool. It’s a game-changer. Here’s why:
🚀 Speed What used to take days now takes minutes. You skip the repetitive coding, layout guesswork, and context switching.
🎯 Accuracy Your designs stay true to the original. No more pixel-matching or guessing which font size the designer used.
🧩 Flexibility Developers get full access to the code. It’s not a black box — it’s fully transparent and editable.
🤝 Collaboration Designers and developers finally share the same playground — literally. This tightens feedback loops and shortens build cycles.
By making the workflow smarter, Anima Playground helps teams build better products, faster, and with fewer headaches.
Who Is It For?
Whether you’re a designer, developer, startup founder, or PM, Anima Playground removes the barriers between your ideas and real products.
Designers can see their visions come to life, exactly as imagined.
Developers can skip the grunt work and focus on logic, architecture, and business needs.
Teams can work together in a unified environment — no more waiting for the “handoff.”
It’s perfect for building landing pages, dashboards, internal tools, MVPs, and more.
Are You Ready To Try It?
Anima Playground and the Anima API are redefining the connection between design and development in the era of AI-powered coding. Whether you’re a designer, developer, product team member, marketer, or entrepreneur, Anima empowers you to transform visual ideas into concepts within minutes—and into fully functional products within hours.
If you’re tired of the endless design-to-development grind, it’s time to give Anima Playground a spin. Whether you’re a designer who wants to bring your vision to life or a developer looking to speed up the build process, this tool has your back.
Let your designs do more than look good — let them work!
","description":"As designers, it’s important to be able to transform visual ideas into concepts within minutes and into fully functional products within hours. Well, today we’re bringing you closer to AnimaApp, an app designed to make your life easier — whether you’re a designer, developer…","guid":"https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/","author":"Anima Team","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-28T16:00:00.177Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Tools","Design","Figma","Workflow"],"attachments":null,"extra":null,"language":null},{"title":"UX And Design Files Organization Template","url":"https://www.smashingmagazine.com/2025/04/ux-design-files-organization-template/","content":"
UX And Design Files Organization Template
Lost in a sea of UX files, docs, PDFs, and scattered decisions across Slack, Dropbox, Notion, and Figma? We talk a lot about organizing Figma, but what about a sensible folder structure for all UX assets? Let’s fix that.
Are you also getting lost in all the files, deliverables, shared docs, PDFs, and reports related to your UX work? What about decisions scattered everywhere between email, Slack conversations, Dropbox folders, SharePoint, Notion, and Figma?
It’s too easy to lose important assets and too difficult to find them just when you need them. While we often speak about how to neatly organize Figma files, we rarely discuss a sensible folder structure for all our UX assets. Well, let’s change that.
A while back, I stumbled upon a neat organizational starter kit by Courtney Pester. It’s an incredibly thorough setup template to get started with and build upon. Surely your projects will require a customized setup, but it will get you running fairly quickly.
In the article, Courtney suggests breaking down all assets and resources into 7 main categories — all representing distinct parts of the project lifecycle, and neatly broken down into sub-folders:
Every project starts by duplicating the same main folder template and adjusting it for the needs of the project. Most importantly, we choose a central place where all key assets have to be located — be it Notion, Google Drive, Dropbox, or anything else. If an important detail lands in your email or is sent to you via Slack, it has to end up in that shared space.
I really can’t emphasize enough the importance of having a shared understanding about where the files will be stored and how they will be accessed. Proper organization of assets will not happen automatically — usually, it requires effort and commitment from the entire team to ensure that it doesn’t become a place with some bits and pieces, while other critical details and decisions are scattered all over other channels.
Now, when we bring all documents and artefacts together, we end up with a quite lengthy but also comprehensive folder structure:
It might appear quite daunting at first, but of course, the overall structure would change quite significantly depending on what exactly you are working on.
Beware Of Duplications
Probably the most underrated problem in any type of file structure organization is duplication and versioning. Before we start the project, we need to be very clear about what types of files should end up in the shared drive and which shouldn’t. You might or might not need intermediate versions of some documents, but you definitely want to keep the final ones.
These are typically the questions I would be raising:
Do we need to restrict access to some sections of the folder (e.g., sensitive data)?
What naming conventions do we use for files/folders (e.g,. semantic versioning, V1, V2, –FINAL)
How do we manage deprecated or outdated files? Do we archive or delete them?
What would be the main communication channel for stakeholders/clients?
Are there any legal requirements for storing and sharing some specific files?
What will happen to the shared space once the project has finished?
Frankly, the reason why I raise these questions isn’t only to make decisions and create some shared conventions in the team. A much more important goal is to strengthen communication channels and raise awareness. We want to establish a shared commitment and ownership over that space — mostly to avoid any key decisions falling through the cracks, resulting in severe delays, costs, or cutting corners.
Secure But Easy To Access
It might sound obvious, but worth emphasizing: if the shared space is difficult to use, it will not be used. That’s when people will find workarounds to store some of “their” assets in spaces that are more convenient to use — with pieces of information scattered all over different channels.
The shared space has to be easily accessible for everyone who should be able to access and maintain it. We most certainly want to stay secure, but setting up a multi-layered authentication process with Yubikey and a virtual machine is unnecessary.
For most situations, a password/passkey + 2FA (2-Factor-Authentication) would be perfectly enough.
The Drawbacks Of The Tree Structure
Personally, I do have a small issue with the tree structure. Although it neatly organizes all artefacts in folders, it doesn’t really reflect the project timeline. But different assets are more important at different times of a project lifecycle. And: there are typically dependencies between different parts of a project, so it might also be a good idea to break down by time or at least tag by milestones.
For example, we might want to look up research insights related to a specific part of the project. Or review the video from usability sessions when a specific iteration was tested. Doing so with a high-level tree structure can be a bit challenging and time-consuming.
When organizing artefacts, I try to follow one single principle: put things that belong together close to each other. Typically, it means having a high-level structure with key iterations, broken down by milestones. It can live in Notion or in Miro, with each milestone linked to a Figma mock-up (not uploaded .fig files!).
And: don’t feel compelled to replicate any file structure entirely. Use it as a foundation to be inspired by and build upon. Customize away for the specific needs of your projects and your team. What works for you works for you. There is really no perfect and universal way that works out of the box.
How do you organize your files and assets? What folder structures and organization systems do you use? Share what works best for you and your team in the comments below.
Meet Measure UX & Design Impact (8h), a new practical guide for designers and UX leads to measure and show your UX impact on business. Use the code 🎟 IMPACT to save 20% off today. Jump to the details.
","description":"Lost in a sea of UX files, docs, PDFs, and scattered decisions across Slack, Dropbox, Notion, and Figma? We talk a lot about organizing Figma, but what about a sensible folder structure for all UX assets? Let’s fix that. 6 min read\\nUX, Design, Web Design\\nShare on Twitter, LinkedIn\\n\\nAr…","guid":"https://www.smashingmagazine.com/2025/04/ux-design-files-organization-template/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-27T16:00:00.150Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-design-files-organization-template/1-ux-design-files-orginization-template.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-design-files-organization-template/2-table-of-contents.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-design-files-organization-template/4-comprehensive-folder-structure.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-design-files-organization-template/3-templates-ux-research-work.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png","type":"photo","width":900,"height":466}],"categories":["UX","Design","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio","url":"https://www.smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/","content":"
“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio
It starts with good intentions — a quick fix here, a shiny feature there — and suddenly, your product portfolio’s bursting at the seams. In this guide, Talke Hoppmann-Walton walks you through a “Product Kondo” exercise to declutter, realign, and spark some serious product joy for both your business and your customers.
When building digital products, thinking in terms of single features and urgent client needs can lead to a large portfolio of products with high maintenance costs. At first, this approach makes sense, as you’re offering new value to customers and keeping important clients happy. But, over time, you often end up with a collection of highly bespoke solutions that ignore two key principles:
Your product portfolio should cater to your core customer segments and meet their needs.
Your product portfolio should balance the short-term benefits of bespoke solutions against long-term maintenance costs while aligning with your business strategy.
So the reality often looks like this: large legacy product portfolios have grown over time, and the effort required to clean up is hard to prioritize against other seemingly more pressing topics.
This article highlights the benefits of going through a clean-up exercise and explains how to conduct a “Product Kondo” exercise on your product portfolio. Like Marie Kondo, the Japanese master of cleaning up closets and houses to keep what brings you joy, discard what you no longer need, and organize what you keep into a workable order, this exercise seeks to identify the most valuable items for both your business and your customers. This article discusses the issues with large legacy portfolios and explains how to simplify and organize them into customer-centric portfolios, with stakeholder buy-in throughout the process.
Overflowing Product Cupboards
There are many reasons why an organization might end up with a large legacy product portfolio, which, similar to the cupboards organized by Marie Kondo, is in dire need of a good clean-up. Whether your portfolio is overgrown from crafting bespoke solutions for important enterprise clients (a common B2B scenario), from testing new features with a B2C customer segment, or various other possible reasons, incentive structures chiefly among them — overgrown portfolios are very common. And the problem is they need to not just be developed in the first place, they need to be maintained, and that gets ever more costly and complex over time.
While this might be oversimplified, the general logic holds true: the more bespoke your product portfolio, the harder it is to keep clean and tidy. Or as Marie Kondo would say, “In a messy cupboard, it’s impossible to find the pieces that truly bring you joy.” In this context, joy translates into:
Value for the customer,
Revenue for the business.
If you want to work out how to find that joy in your product portfolio again, this article outlines the practical steps taken for such a “Product Kondo” exercise in a global not-for-profit organization with a large legacy portfolio, including the moment when theory met reality, and the learnings from this effort.
We conducted this clean-up in a globally distributed organization undergoing a wider transformation. For more than 20 years, the organization had been gathering and distributing data in various formats: from raw to modelled data, scores, and advanced data products. However, it had not been focused on customer centricity nor regarded products as strategic differentiators. This meant that key indicators of success for product organizations had never been tracked. So the challenge was to map out and simplify the portfolio with very few indicators available to track product performance (e.g., user analytics data).
So, how do you start understanding where the value lies in your portfolio and what factors are driving this portfolio clean-up in the first place?
As part of the wider organizational transformation, one consideration was to simplify the product portfolio in order to reduce maintenance costs and the technical effort required for a planned migration to a new platform. Another important concern was to align future development with the newly developed business strategy. Therefore, reducing costs and planning for the future were the key drivers.
The “Product Kondo” Portfolio Clean-up
So if you find yourself in a similar situation, where you have a complex legacy portfolio, and where across many years features have been added, but hardly anything has ever been sunset, a “Product Kondo” clean-up, i.e., a cleaning out of your product cupboards, might be what’s needed.
To do that, it’s useful to go in with two ideas:
Transparency about the need to simplify;
Transparency about how decisions will be made, so teams are on board and able to contribute.
Getting buy-in and building a narrative everyone understands and sees as relevant is crucial when trying to clean up — especially in large companies, where you’ll always find someone who thinks “we need everything,” and the relative importance of different customer segments is unclear, with no accurate portfolio overview in place.
If you’re unclear about the state of your current portfolio, how do you know where to focus next strategically?
Not knowing where the highest value lies in your portfolio and how it all maps out as a whole has another implication: If you don’t know your current status quo, it’s hard to plan ahead and it’s equally hard to get out of the delivery mode many product organizations find themselves in, where you simply build what gets requested, but can’t act as a driver of future growth.
To organize a portfolio in order to define how to handle it going forward, while not having much information to base decisions on, the high-level approach was this:
Define the FOR WHOM (By building a user segmentation matrix).
Establish the STATUS QUO (By auditing previous attempts to map the portfolio).
Agree the HOW (By defining evaluation criteria & prioritisation).
Ensuring BUY-IN (through deep dives with key stakeholders and experts).
Note: Every company is different, especially regarding the information that’s available. So this is not an attempt at building the next framework or providing a one-size-fits-all approach to portfolio organization. Instead, it is a proposed solution for how to approach mapping out your current portfolio to start from a cleaner slate, with your customer segments in mind. These four areas of work should be considered as necessary when attempting a “product kondo” exercise in your own organization.
1. For Whom? Building A User Segmentation Matrix
First things first, if you’re not clear about your primary and secondary customer segments, then this is where to start. If you want teams to be able to focus, it’s crucial to define priorities. Identifying key external user groups/segments, understanding their differences, and assessing their importance to the organization’s overall business success is a great start. Building a user segmentation matrix is a great foundation for prioritizing efforts and aligning services/products around user needs.
Apart from establishing the key jobs-to-be-done, goals, and pain points for each customer segment, it fosters transparency around the following factors:
Thinking from a customer perspective.
Considering measurable data like user numbers, size of accounts, and revenue.
The fact that some user groups are more valuable to an organization than others, hence should be ranked higher in a prioritization effort.
How to define user segments, with different levels of relevance to the organization and its future strategy, is described in more detail here. It was the initial mental model shared across teams prior to starting this portfolio simplification effort.
Next up: Understanding the current status quo and building a “source of truth” of everything considered under the remit of the product organization. Because you need a clear reference point to get started.
2. Status Quo: Auditing And Defining What To Measure
To determine the best approach and size the task ahead, understanding what had been done before was crucial, so as not to reinvent the wheel. It was clear that the organization had a sprawling product catalogue that contained a varied mix of different items, lacking clear definitions and categorization.
The initial audit was about updating the product catalog that had been assembled three years earlier and adding information that would be relevant for assessing relative value. As revenue, user numbers, or development effort had never been tracked, this is where we gathered additional insights on each item from the product owners (POs) responsible.
The assessment criteria were partly taken from the previous effort (criteria 1-9), and further criteria were added to obtain a more holistic picture (criteria 10-15). See the table below.
Evaluation criteria and agreed relevance. (Large preview)
3. How? Doing The Audit
In order to be transparent about decision-making, it was important to agree on the evaluation criteria and scoring with key stakeholders upfront and ensure every contributor understood that a lack of data would lead to low scores. To that end, we asked all 36 product owners (POs) to submit data for each product under their remit. As the organization had not previously tracked this information, the initial responses were often quite vague, and many cells were left blank.
To increase data quality and make data-based decisions, 1:1 interviews with POs allowed us to answer questions and build out “best guess” assumptions together in cases of missing data.
Note: While not technically perfect, we decided that moving forward with assumptions grounded in subject matter expertise, rather than completely missing data, would be preferable.
Lastly, some inputs like “automation potential” were hard to assess for less technical POs. Our approach here followed the product mindset that while it is important to make data-informed decisions, “done is better than perfect.” So once we had enough confidence in the picture that emerged, we proceeded with scoring in the interest of time.
As a side note regarding data quality: 1. Manually cleaning inputs throughout (e.g., removing duplicates) and 2. following up until clear inputs were provided, helped increase input quality. In addition, predefined ranges led to higher data quality than inputs requiring hard-to-quantify data, like, e.g., expected impact.
3.1. Scoring
Defining the scoring methodology upfront and getting stakeholders to align on the relevance of different criteria transparently was crucial for this work. Particularly keeping in mind that simplifying (in other words, reducing) the portfolio has an immediate impact on various teams, communicating openly about what is being done, how, and why is important, so everyone understands the longer-term goal: to reduce cost, maintenance, and prepare for future growth.
The image below illustrates the three stages that led to the prioritized list and score for each item.
Image 2: Overview of the Scoring methodology. (Large preview)
The outcome of this stage now ranked the business and user value for each data product, and the initial expectation was that this was the end of the portfolio cleanup. A list of all items ranked by their value to the business, so that, e.g., the bottom half could be cut and the rest migrated to the new technical platform in order of priority.
At least that was the theory, and this is where it met reality.
Dealing With Change Reality
Once the weighted list was ready and the whole portfolio was ranked, it became clear that what was considered the “Product portfolio” in fact consisted of 12 different types of items, and roughly 70% of them could not be considered actual products.
While inside the organization, everything was called a PRODUCT, it became clear that the types of items referred to as “products” were in fact a mixed bag of trackers, tables, graphs, extracts, data sets, dashboards, reports, tools, scoring, and so on. And many low-ranking internal-facing tools enabled highly relevant customer-facing products.
The list was essentially comparing “apples to oranges,” and that meant that simply cutting the bottom half of lower-scoring items would lead to the whole “house of cards” tumbling down, especially as a lot of items had dependencies on each other.
What To Do?
First and foremost, we worked with leadership to explain the issue of missing categorization in the portfolio and the risks that cutting the lower-scoring half of the list would entail, especially due to the time pressures of the wider ongoing transformation effort.
Next, we proposed to work with key product owners and leaders to help categorize the portfolio correctly, in order to determine how best to handle each item going forward.
We used the following five buckets to enable sorting, with the intention of keeping the “other” category as small as possible.
Aside from simplifying the terminology used, this categorization meant that each category could be handled differently in terms of future work.
For example, all raw data items would be automated, while the process around “low effort” data items didn’t have to be changed going forward, once it was clear how low the manual effort actually was. Notably, the categorization included a “Sunset/Stop” category to allow stakeholders to already move items there during the deep dives of their own volition, rather than through top-down decision making.
4. Getting Buy-in: Building Product Trees
To get buy-in and allow for active contributions from subject matter experts, we planned workshops per customer segment (as defined by the user segmentation matrix — the initial starting point). Aside from organizing the portfolio items, these workshops allowed key people to be actively involved and thereby act as advocates for the future success of this work.
Using Miro boards to share all audit findings, goals, and the purpose of the clean-up, we conducted seven workshops overall. With 4–6 participants, we spent 3 hours categorizing all items per customer segment. In order to avoid groupthink, all participants were asked to cluster their part of the portfolio as part of the preparation.
The “product tree” concept, developed as an innovation game called “prune the product tree” by Luke Hohmann to organize features around customer needs, helped create a shared mental model among participants. In contrast to Hohmann, we applied the product tree concept here to organize the current portfolio logically and actively reduce it, rather than imagine new products.
In this context, the roots of the tree signified raw data, the tree trunk equated to modeled or derived data, with the crown of the tree signifying data products, and the outer branches were left for “other” items — to capture what could not be easily grouped but had to be included.
Product tree metaphor for categorization. (Large preview)
Grouping items in this way served a second purpose: to guide how to handle them in the future transformation effort. The plan was to automate raw data first, based on priority. While modeled or derived data would have to be checked for complexity to determine future handling. The actual data products identified would be crucial for the company’s future strategy and were to be reimagined with a product mindset going forward.
The tree metaphor worked well here, despite being used in a different way from its original context, as it provided a mental model for categorization. By clustering items, it was possible to better determine their value for each customer segment in the portfolio. According to the feedback gathered after each workshop, the joint mapping and visualization helped teams trust the process and feel actively involved.
Findings
Analyzing the findings from the workshops revealed the complexity of this effort, with many different factors playing into the prioritization. To visualize this complexity, we used the following approach:
Mapping out the product tree by swimlanes (as introduced in the workshops).
Layering in usage across multiple segments (through color-coding).
Adding the level of dependencies (through the type of frame around each item).
Then, add the quantitative assessment and ranking through numbering and color-coding.
For each workshop, we cleaned up the boards, making sure to include crucial comments, especially those about future treatment, such as when a legal obligation to deliver would end.
Organizing data items into swimlanes, following the product tree metaphor. (Large preview)
Using swimlanes helped participants organize data items, while the tree metaphor clarified the interconnectedness and dependencies between items. Especially in the context of data products, this makes a lot of sense, e.g., with raw data being at the root of all other possible versions of “products” derived from them, whether these might be scores, modelled data, automated reports, or more advanced products.
Doing this Product Kondo exercise also helped the teams and all stakeholders gain a shared understanding of how the portfolio was structured for each customer segment. The visualization in swimlanes and with colour-coding and various different frames provided a way to illustrate the complex reality that the initial ranked list format wasn’t able to clarify.
Only once this portfolio mapping was in place, and once quantitative as well as qualitative insights were combined, was it possible to make good decisions about how to handle each item going forward.
For example, all items in the “raw data” category would be automated as part of the wider transformation effort, while all items in the “sunset” category would definitely not be considered for migrating over to the new tech platform. Moreover, the items grouped under “low effort” would continue to be handled manually, while all items grouped under “derived & modelled” would have to be assessed further by a team of tech leads to determine whether or not they might be automated in the future. The items most relevant for the future business strategy of this organization were those grouped under “data products”, i.e., those products that would have to be re-imagined with clear customer needs in mind, based on the user segmentation matrix.
Learnings
In total, we achieved a portfolio reduction of 67.8% from 198 items initially to 118 post clean-up. However, what matters here is not simply the reduction but the categorization, i.e., separating and organizing the portfolio into different swimlanes and introducing the product tree metaphor. The product tree visualisation helped all stakeholders understand the interconnectedness of the portfolio, where the roots signify the core product and the branches different, more advanced products or features built on top of that core.
Similarly, the categorization into swimlanes helped to organize and cluster similar items, getting away from comparing apples and oranges in the initial big portfolio audit table. It illustrated very clearly that not all items are alike and can’t be judged and rated in the same way.
It is worth mentioning that there is no one best way to label your swimlanes, but a good starting point is to think of naming different clusters, e.g., from basic to most complex, and to always include a “sunset/stop” cluster and potentially one that covers “redesign/tech upgrade” items. Having these two buckets allows contributors to actively shape the decision-making around the quick-win items, usually the most obviously outdated or clunky parts of the portfolio.
Whether or not you categorize your products in order to determine how to handle them in an organizational transformation, e.g., to assess automation potential, will largely depend on why and when you’re cleaning up your product portfolio. Even outside of a transformation effort, clustering your portfolio into different categories, understanding interconnectedness, and whether or not each customer segment has a well-rounded product tree, with solid roots and future-looking branches, is a useful exercise in sense-making and keeping your organization lean.
Correct categorization was the biggest challenge that had to be dealt with first, to enable the organization to iterate and focus on where to play and re-imagine products to match the future business strategy.
When Theory Meets Reality
This portfolio clean-up had to pivot and expand to include a mapping exercise because we hadn’t factored in the unclear terminology used across the organization, and that, instead of simply gathering and ranking, the biggest task was to correctly categorize and structure. And this is likely to be different from organization to organization. So I would always recommend checking which categories of items you’re comparing in your portfolio. If you’re not entirely sure, you should always include a clustering or mapping exercise right from the start.
Product Kondo: The Groundwork For Transformation
If you’re struggling with a large legacy portfolio and no longer confident that everything in it serves a purpose and brings joy to users and the business, it’s time to clean up.
Particularly in organizations bound by various contractual obligations, this is the groundwork that enables product teams to iterate.
Moreover, doing this clean-up and clearing out effort across teams is a highly transparent way to include teams in change. And it is a useful way for getting teams to contribute and actively shape a transformation effort. Business decisions have to be taken, but taking them with transparency and in an evidence-guided way ensures that you are bringing people along.
Benefits of cleaning up your portfolio. (Large preview)
Last but not least — if you don’t have the capacity to do the full portfolio clean-up (which took us about 4 months, with a core team of roughly 4 people) — start smaller. And start with including these considerations in your day-to-day, for example, by always checking if products or features should be stopped or sunset every time you’re launching new products. Or start by mapping out the different categories of items in your portfolio — with swimlanes and the product tree metaphor in mind. What is core, and what is the future state of play?
Upside: Once you’ve got that big picture overview and worked out what to sunset or where to slim down, you have more capacity to focus on current and future priorities strategically.
Reality check: Of course, the work doesn’t stop there. The next step is to align it all back to your user segments and check how your portfolio serves each of these, particularly the primary segments.
","description":"It starts with good intentions — a quick fix here, a shiny feature there — and suddenly, your product portfolio’s bursting at the seams. In this guide, Talke Hoppmann-Walton walks you through a “Product Kondo” exercise to declutter, realign, and spark some serious product joy for…","guid":"https://www.smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/","author":"Talke Hoppmann-Walton","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-24T16:00:00.153Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Workflow","Business","Guides"],"attachments":null,"extra":null,"language":null},{"title":"Boosting Up Your Creativity Without Endless Reference Scrolling","url":"https://www.smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/","content":"
Boosting Up Your Creativity Without Endless Reference Scrolling
Product design requires a balance between logic and creativity. This balance results in products that not only meet technical and user requirements but also deliver a captivating user experience. While it is clear that creativity is driven by both the left and right hemispheres, an important question remains: how can we boost creativity while keeping the process enjoyable? It may not be obvious, but non-design-related activities can, in fact, be an opportunity to enhance creativity.
The work of a designer largely consists of inventing new things, which requires creativity that is generally believed to depend on inspiration, making it unpredictable and difficult to control. Many designers, as well as those who would like to try their hand at design, are wondering: what to do if inspiration does not come at the right moment?
There are many practical recommendations from experienced designers and design managers on how to work without inspiration. These mainly rely on discipline, planning, and working with references. I would like to suggest an alternative approach: how to boost creativity and “lure” inspiration with the help of neuroscience.
I’m Marina, and I have been deeply interested in neuroscience for a long time. I have tried many methods from my own experience and observed the experience of my colleagues. In this article, I want to share the ways that seemed to me the most effective in luring creativity, which I eventually built into my life routine on an ongoing basis.
How Our Brain Works
The brain has been and remains an important topic that is underexplored, especially in the context of design and design thinking. No other profession represents the blend of creativity and logic quite like design, in my opinion. This raises a fair question: which part of the brain is more important, the left or the right? To start with, let’s briefly refresh which part of the brain is responsible for what:
Left Hemisphere
Right Hemisphere
Language and Speech: Language-related activities like speaking, writing, and comprehension
Creativity and Artistic Abilities: Imagination, creative thinking, music, visual arts, etc.
Analytical Thinking: Mathematical operations, sequential processing, and problem-solving
Emotional Processing: Emotion recognition, facial expressions, tone of voice, gestures
Linear Thinking: Step-by-step way of information processing
Holistic Thinking: Looking at the big picture rather than focusing on details
While each part of the brain is responsible for certain functions, they work together to process information. For some activities (analyzing data, solving equations, and working with precise calculations), it might be more important to rely on the left hemisphere, while for others (composing music, acting), the right hemisphere.
However, when it comes to the design process and design thinking, it’s essential to stimulate both hemispheres and not limit the role of a product designer to being either predominantly left- or right-brained.
Interhemispheric Interaction In Product Design: Why Are Both Equally Important?
In product design, the need for well-established interhemispheric interaction is especially noticeable since this work requires a balance between logic and creativity. The left hemisphere’s logical functions help designers break down complex problems, analyze user needs, and organize structured workflows, ensuring the product’s functionality and usability.
For example, logical processes are crucial in creating wireframes and user flows and adhering to technical constraints. On the other side, the right hemisphere’s creative and spatial abilities play a critical role in developing visually appealing designs and innovative user experiences. It’s extremely important for a designer to think outside the box and solve user problems without forgetting about the balanced and attractive visual part at the same time.
The idea that two parts of the brain are interconnected and complement each other during creative tasks isn’t new, nor is it my invention. One of the most influential works for product designers is Experiences in Visual Thinking by Robert H. McKim, an Emeritus Professor of Mechanical Engineering. The value of this book lies in the author’s attempt to explain visual thinking through the lenses of psychology, neurology, semantics, art, and perception. This work was later included in Stanford University’s list of recommended readings for engineering and art design students, further highlighting its significance beyond the field of design.
In the context of the brain’s left and right hemispheres, the author explains and demonstrates through a range of experiments that, to achieve productive thinking — the kind that leads to creative actions — we need to achieve an “internal transfer” between the so-called rational and intuitive halves of the brain. In our thinking process, to achieve creativity, we need to build bridges to “integrate the artist and scientist within each one of us.”
He offers a series of exercises (“3-1/Food for Thought,” “3-2/Dominant Eye,” “3-3/Internal Transfer”) that demonstrate that both brain hemispheres complement each other in cognition and creativity, and he offers to practice them to achieve the so-called “internal transfer”.
One of the simplest exercises offered by McKim is the “3-2/Dominant Eye”. Look at the picture and try to describe what you see:
If you see a duck first (most people see it first) — your left hemisphere is more active. This is because the left hemisphere was activated before reading. If you see a rabbit — often after it’s mentioned — your right hemisphere is more active. This exercise shows that we can consciously choose to shift between hemispheres, training ourselves to engage either side more effectively.
In his work, Professor H. McKim not only demonstrates how to activate the left or right hemisphere but also explains the complementary modes of thought, which consist of two stages. The first stage involves generating an array of ideas, often through a visual thinking process, while the second stage focuses on selecting and refining these ideas (or objects) for further development. Creativity is born during the first stage, but to be executed tangibly, it requires the second stage. Even mathematicians do not only think in terms of mathematical symbols; many, particularly creative ones, use vague images and visuals as part of their thought processes.
According to McKim, creativity requires a balanced development of both hemispheres, as creative thinkers are ambidextrous and capable of transferring ideas into actionable steps. Another important aspect of visual thinking is the right environment, which leads to creativity. McKim describes it as “relaxed attention” — a mental state where ideas emerge spontaneously. Relaxed attention is often achieved through side activities like meditation, taking breaks, physical relaxation, and engaging in non-linear thinking, such as doodling or daydreaming.
I will further share my perspective on enhancing creativity through side activities and present my top three mental and physical occupations. However, it’s important to understand the complementary nature of our brain and how visual thinking often stems from diverse activities and practices.
What Helps Creativity
While it is clear that creativity is driven by both the left and right hemispheres, an important question remains: how can we boost creativity while keeping the process enjoyable? It may not be obvious, but non-design-related activities can, in fact, be an opportunity to enhance creativity.
Physical Activity
The interconnection between our body, mind, and thinking process might be key to awakening creativity. Motor skills are controlled by both hemispheres, with the right hemisphere controlling the left side of the body and the left hemisphere controlling the right side. But it also works in the opposite direction — movements trigger active brain activity.
Sports that combine the need to develop a strategy while also requiring active movement may work best for turning up creativity.
Understanding the intricacies of the brain highlights the importance of integrating all parts of the brain. In order to learn, you must first have a sensory experience, then reflect and make connections. Finally, you must take action based on the experience. The knowledge that your first movements, even inside the womb, help build your brain underscores the fact that you actually move to learn. In other words, movement is essential to learning. (Source: Anne Green Gilbert. Brain-Compatible Dance Education, 2019)
Here are the top activities that positively impact creativity, and I will explain why they have this effect.
Tennis
The basis of a good game is a well-thought-out and trained strategy. Tennis requires a quick analysis of the situation, prompt decisions, and maximum involvement. No wonder this sport is called “chess in motion”: in the process, it is developing memory, concentration, and strategic thinking. At the same time, working in a group and communicating during workouts help reduce stress levels and improve mood.
Table tennis also develops concentration. The need to memorize combinations, develop motor skills, visual and motor types of memory, and compare the opponent’s movements, speed, angle of flight of the ball, and its rotational force form the basis of a successful game. It is suitable for those who do not have the opportunity to play lawn tennis.
I asked several designers if they do any of these things in their free time and how they think it affects their productivity and professional skills. Here is what they’ve shared:
“I started playing tennis a couple of years ago. I work out once or twice a week individually with a coach or in a group. This is a sport that requires high concentration during the game. It seems to me that this skill helped me in my work as well; before that, I was often distracted, and it was difficult for me to do the same task for a long time.
At the same time, due to the fact that I have to fully concentrate during the game, I manage to switch from everyday problems and unload my brain. I prefer to play in the morning or afternoon and take a break from work. Therefore, I return to work more energetically and can take a fresh look at my tasks.”
— Ilia Kanazin, Product Designer with 7+ years of experience working in SaaS
Dance challenges the brain by requiring the integration of movement, rhythm, coordination, and memory, which promotes neuroplasticity, or the brain’s ability to form new neural connections. The more varied the movement patterns and rhythmic complexities, the more the brain is stimulated to adapt and reorganize. Neuroplasticity has a positive effect on memory capacity, learning abilities, and problem-solving skills, which are good for the design process.
At the same time, cognitive flexibility supports the developed design because you always need to adjust your decisions, getting new data from user testing and feedback from the stakeholders. Dancers often have to improvise or adapt to changes in the rhythm and conditions. Also, they constantly learn new movements and combinations of them. Such experience in choreography and expression develops connections between hemispheres, which influences a person’s ability to think creatively in general.
Balance Exercises
In my opinion, the balance board is one of the most convenient and affordable home simulators. With its help, you can do a short workout at any time to take a break from long work and return to work with a fresh look.
Board balance exercises can be quite diverse. It can be added to your usual exercises and diversified with squats, exercises with a slight weight on the upper body, or shoulder and neck warm-up, which will increase cognitive activity as a result.
You can also just stand on the balance board while listening to work calls, which don’t require active participation, watching TV shows, or chatting on the phone with friends.
Case Study
“By training your body to move more creatively, you train your mind to think more creatively.”
— Jennifer Heisz. Move The Body, Heal The Mind, 2022
While it may be challenging to find documented real-life cases that provide clear examples of famous designs fueled by sport and physical activity, there are historically backed examples and research studies demonstrating that physical activity positively influences creativity.
For example, Charles Darwin’s “Thinking Path”. The scientist developed his most famous works, “On the Origin of Species” and “The Descent of Man,” at Down House, where he took daily walks. This activity is known as Darwin’s Thinking Path, and it is well-documented how his walking routine influenced the way he contemplated his scientific theories.
With the emergence of neuroscience as a science in the mid-20th century, we have gained a new perspective on what drives creative thinking, which is ultimately beneficial for design. Neuroscience provides insights into how various activities influence the brain, which, as a result, leads to changes in other fields.
For example, tennis is recognized for its benefits to brain health. It enhances the ability to process sensory information rapidly, improving overall cognitive processing speed and reaction time. In addition, strategic thinking is required in this game and engages the prefrontal cortex — the brain’s hub for decision-making and strategic planning. And we can see how this single activity demonstrates the far-reaching cognitive benefits of physical exercise.
Nowadays, researchers in neuroscience are united in their opinion on what unleashes creativity — physical activity unlocks it. There are even experiments that measure it: Marily Oppezzo, a behavioral and learning scientist at Stanford, studied how walking affects creativity. Her experiment compared walking on a treadmill, walking outdoors, sitting indoors and outdoors, and being pushed in a wheelchair. Surprisingly, even treadmill walking in a dull room boosted creativity by 60% compared to sitting.
“It’s not specific activities but individuals’ experiences of them that determine their effect.”
Another study goes further, explaining that not all sports impact creativity to the same extent.
“It may surprise you — it wasn’t artistic sports but net and combat sports. Why? Because cultivating a creative mind depends on how we train. In artistic sports (figure skating, gymnastics, synchronized swimming), athletes memorize a series of predefined steps. Although creating these routines may involve creativity, the training itself is structured, predictable, and planned.”
Training that is mostly predictable makes our brain less mentally flexible, in contrast to net and combat sports (such as badminton, tennis, volleyball, and fencing), which make us learn to act instinctively. As we train physically, our brain also adapts, becoming more flexible — particularly in terms of cognitive flexibility. This, in turn, enhances our creativity. (Source: Jennifer Heisz. Move The Body, Heal The Mind, 2022)
Mental Activity
However, physical activity is not the only way to achieve a ‘relaxed attention’ state and learn to balance the left and right hemispheres of the brain. Mental activities also trigger the same process. I have selected the top 3 activities that will enhance your creativity at work.
Learning Foreign Languages
As we discussed above, during the design process, both brain hemispheres are used, and when you’re learning foreign languages, it leads to similar processes in your brain, so you train it through similar activities.
Language processing primarily occurs in the left hemisphere, but emotional intonation and context (e.g., sarcasm, tone) are understood by the right hemisphere. When someone says “Oh, great!” after receiving bad news, the left hemisphere processes the words and grammar, understanding the literal meaning, while the right hemisphere interprets the tone and context, allowing the person to get the real point of the message.
Learning a second language exposes people to new methods of expressing the same thoughts, which promotes creativity. Finding synonyms, understanding idiomatic terms, and gaining the ability to flip between languages all promote divergent thinking, which is the ability to generate several solutions to a given problem.
In parallel, learning foreign languages helps to develop storytelling and self-presentation skills, which are also very useful in a designer’s work.
“I’ve lived in several countries for a long time, so in addition to my native language, I speak three other foreign languages as well. It helps me to build communication with different people, which is very important in the designer’s work.
I think because I know how to say the same thing in different languages, I also use this approach in design. To solve the same problem, I can offer several solutions and choose the most appropriate one together with the stakeholders.
Now I am a Senior Growth Designer, and this job requires constantly looking for non-standard solutions and implementing them quickly. I think the use of different languages contributes to this from the point of view of brain function.
Speaking multiple languages also comes really handy when you are dealing with personas from different nationalities. For example, Western Saas products use a more minimalist approach, whereas Saas from Asia or China, for example, more information is better than less.”
Table games develop strategic thinking, require players to anticipate opponents’ moves, solve problems in real-time, and sometimes think outside the box. Traditional games like chess encourage critical thinking, as players must analyze the current situation, weigh potential outcomes, and decide on the best course of action. This improves the brain’s executive functions, including decision-making, planning, and strategic thinking.
Some tabletop games are based on role-playing or storytelling, such as Dungeons & Dragons or Dixit. These games encourage players to invent stories, create characters, and navigate imaginative scenarios, fostering creative thinking and imagination.
Board games also train communication skills, which product designers have to use a lot in their jobs. Playing table games, especially in groups, encourages the participants to convince their teammates of their decisions and carefully listen to others. The games that involve cooperation help the players develop their collaboration skills, such as finding compromises, negotiating, and making concessions.
Music Lessons
Playing a musical instrument has been a widely researched topic in neuroscience in recent decades. It has been proven that music lessons improve cognitive abilities by improving the neural connection between the left and right hemispheres of the brain, which leads to a positive effect on memory, learning ability, and non-verbal thinking, as a result of which the brain as a whole works much more productively in other areas of life.
The brain learns to hear and interpret sounds, which happens only while playing an instrument and is impossible while simply listening to music. As a result, a person is better able to process complex information. Playing musical instruments involves the relationship between the motor, sensory, auditory, visual, and emotional components of the central and peripheral nervous systems. Such brain training includes artistic and aesthetic aspects of learning, which is a unique feature of playing a musical instrument. The combination of linguistic and mathematical activity in the left hemisphere gets used to working in coordination with creative functions in the right hemisphere.
An interesting fact: Albert Einstein often played the violin during moments of deep thinking, claiming that music was an extension of his thought process and helped him solve particularly difficult problems.
A Lesson From Paul Klee
It is worth noting that it works both ways — both your music lessons enhance your creativity in design, and design pushes your success in music.
In the book Enchanted Neurons, Pierre Boulez, French composer and conductor, talks about the lessons that Paul Klee (Swiss-born German artist. His highly individual style was influenced by movements in art that included expressionism, cubism, and surrealism) taught at the Bauhaus (German art school which became famous for its approach to design based on unifying individual artistic vision with the principles of mass production and emphasis on function).
“Theoretical reflection is particularly interesting to me when it is applied to something that is completely foreign to music because it then makes it possible to discover solutions that you would never have found if you had remained bound by the limits of your art.
I’ll give you a personal example: the discovery not only of Klee’s painting but also the lessons that he gave at the Bauhaus, which we spoke about earlier, was extremely important to me, especially from the point of view of composition. I understood how using very simple elements like two motifs made it possible to think about the way in which these two motifs could interact. I remember, in particular, an exercise given by Klee to his students: a straight line and a circle. That’s it. The exercise consisted of trying to invent something, a meeting of this line and this circle.”
— Pierre Boulez, Jean-Pierre Changeux, Philippe Manoury. Enchanted Neurons, 2020
This lesson shared by Pierre Boulez demonstrates how interdisciplinary inspiration — such as the course of visual artist Paul Klee — shaped his creative process and how concepts from outside music can lead to new solutions.
In my opinion, the reverse can also be true: music and its principles can inspire creativity in other disciplines.
“I started composing music even earlier than I started designing. Music has a composition and rhythm-like design. And development in one area also entails a boost in another. It works both ways; success in music develops my design skills. Design helps me make more complex music.
In addition, there is also a practical benefit; I make my own covers for my tracks and use my tracks for my showcases. Plus, I listen to a lot of different music, and it develops my world perception, fills me with energy, and creates the right mood for working on projects.”
Tips For Incorporating A Routine That Sustains Designer’s Creativity
Whenever you feel stuck in your work or overly critical of your designs or prototype, think about the strategies from the above that might help your creative process.
Find something you genuinely enjoy or have always wanted to try and implement in small steps. It doesn’t need to be a completely new hobby. For example, you could dance to your favorite music at home, stand on a balance board between work calls, or try something new once a month or quarter with friends, like skating, rock climbing, or other activities. This year, I plan to go skiing for the first time.
Constantly explore new things, even small ones. Take different routes to work, cook new dishes, or listen to unfamiliar music. Even if you don’t end up loving it, it’s still valuable because your brain is enriched by the experience.
Meet new people. As I mentioned earlier, communication skills are essential for designers, but beyond that, new people can inspire you in unexpected ways. They might introduce you to a new sport, hobby, or activity that you could even try together.
I shared examples of designers who have rebuilt their creativity through activities like tennis, music, and languages, and I feel the impact in my own daily routine when I try new things and hobbies. Whatever approach you decide to follow, I guarantee your brain will feel the difference and reward you with fresh ideas and inspiration.
Conclusion
Creativity may be developed in a variety of ways, including browsing reference sites and putting in a lot of practice — both of which are important. Outside these classic ways, you can engage in activities that not only promote creativity but also improve your mental and physical health.
There are many possibilities for increasing brain activity, and you can develop your own entertaining and useful ways of spending time. Finally, trying something new will generate new thoughts and break down the monotony.
When you experience virtual reality, read poetry or fiction, see a film, listen to a piece of music, or move your body to dance, to name a few of the many arts, you are biologically changed. There is a neurochemical exchange that can lead to what Aristotle called catharsis, or a release of emotion that leaves you feeling more connected to yourself and others afterward. (Source: Susan Magsamen, Ivy Ross. Your Brain on Art, 2023)
","description":"Product design requires a balance between logic and creativity. This balance results in products that not only meet technical and user requirements but also deliver a captivating user experience. While it is clear that creativity is driven by both the left and right hemispheres…","guid":"https://www.smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/","author":"Marina Chernyshova","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-23T16:00:00.150Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/1-neuroscience-designers-boost-creativity-endless-reference-scrolling.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/2-neuroscience-designers-boost-creativity-endless-reference-scrolling.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/3-neuroscience-designers-boost-creativity-endless-reference-scrolling.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/4-neuroscience-designers-boost-creativity-endless-reference-scrolling.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Creativity","Workflow","Design","UX"],"attachments":null,"extra":null,"language":null},{"title":"Building An Offline-Friendly Image Upload System","url":"https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/","content":"
Building An Offline-Friendly Image Upload System
Poor internet connectivity doesn’t have to mean poor UX. With PWA technologies like IndexedDB, service workers, and the Background Sync API, you can build an offline-friendly image upload system that queues uploads and retries them automatically — so your users can upload stress-free, even when offline.
So, you’re filling out an online form, and it asks you to upload a file. You click the input, select a file from your desktop, and are good to go. But something happens. The network drops, the file disappears, and you’re stuck having to re-upload the file. Poor network connectivity can lead you to spend an unreasonable amount of time trying to upload files successfully.
What ruins the user experience stems from having to constantly check network stability and retry the upload several times. While we may not be able to do much about network connectivity, as developers, we can always do something to ease the pain that comes with this problem.
One of the ways we can solve this problem is by tweaking image upload systems in a way that enables users to upload images offline — eliminating the need for a reliable network connection, and then having the system retry the upload process when the network becomes stable, without the user intervening.
This article is going to focus on explaining how to build an offline-friendly image upload system using PWA (progressive web application) technologies such as IndexedDB, service workers, and the Background Sync API. We will also briefly cover tips for improving the user experience for this system.
Planning The Offline Image Upload System
Here’s a flow chart for an offline-friendly image upload system.
Flow chart of an offline-friendly image upload system (Large preview)
As shown in the flow chart, the process unfolds as follows:
The user selects an image. The process begins by letting the user select their image.
The image is stored locally in IndexedDB. Next, the system checks for network connectivity. If network connectivity is available, the system uploads the image directly, avoiding unnecessary local storage usage. However, if the network is not available, the image will be stored in IndexedDB.
The service worker detects when the network is restored. With the image stored in IndexedDB, the system waits to detect when the network connection is restored to continue with the next step.
The background sync processes pending uploads. The moment the connection is restored, the system will try to upload the image again.
The file is successfully uploaded. The moment the image is uploaded, the system will remove the local copy stored in IndexedDB.
Implementing The System
The first step in the system implementation is allowing the user to select their images. There are different ways you can achieve this:
You can use a simple <input type=\\"file\\"> element;
A drag-and-drop interface.
I would advise that you use both. Some users prefer to use the drag-and-drop interface, while others think the only way to upload images is through the <input type=\\"file\\"> element. Having both options will help improve the user experience. You can also consider allowing users to paste images directly in the browser using the Clipboard API.
Registering The Service Worker
At the heart of this solution is the service worker. Our service worker is going to be responsible for retrieving the image from the IndexedDB store, uploading it when the internet connection is restored, and clearing the IndexedDB store when the image has been uploaded.
To use a service worker, you first have to register one:
Checking For Network Connectivity
Remember, the problem we are trying to solve is caused by unreliable network connectivity. If this problem does not exist, there is no point in trying to solve anything. Therefore, once the image is selected, we need to check if the user has a reliable internet connection before registering a sync event and storing the image in IndexedDB.
function uploadImage() {\\n if (navigator.onLine) {\\n // Upload Image\\n } else {\\n // register Sync Event\\n // Store Images in IndexedDB\\n }\\n}\\n
Note: I’m only using the navigator.onLine property here to demonstrate how the system would work. The navigator.onLine property is unreliable, and I would suggest you come up with a custom solution to check whether the user is connected to the internet or not. One way you can do this is by sending a ping request to a server endpoint you’ve created.
Registering The Sync Event
Once the network test fails, the next step is to register a sync event. The sync event needs to be registered at the point where the system fails to upload the image due to a poor internet connection.
async function registerSyncEvent() {\\n if (\'SyncManager\' in window) {\\n const registration = await navigator.serviceWorker.ready;\\n await registration.sync.register(\'uploadImages\');\\n console.log(\'Background Sync registered\');\\n }\\n}\\n
After registering the sync event, you need to listen for it in the service worker.
The sendImages function is going to be an asynchronous process that will retrieve the image from IndexedDB and upload it to the server. This is what it’s going to look like:
async function sendImages() {\\n try {\\n // await image retrieval and upload\\n } catch (error) {\\n // throw error\\n }\\n}\\n
Opening The Database
The first thing we need to do in order to store our image locally is to open an IndexedDB store. As you can see from the code below, we are creating a global variable to store the database instance. The reason for doing this is that, subsequently, when we want to retrieve our image from IndexedDB, we wouldn’t need to write the code to open the database again.
Storing The Image In IndexedDB
With the IndexedDB store open, we can now store our images.
Now, you may be wondering why an easier solution like localStorage wasn’t used for this purpose.
The reason for that is that IndexedDB operates asynchronously and doesn’t block the main JavaScript thread, whereas localStorage runs synchronously and can block the JavaScript main thread if it is being used.
Here’s how you can store the image in IndexedDB:
With the images stored and the background sync set, the system is ready to upload the image whenever the network connection is restored.
Retrieving And Uploading The Images
Once the network connection is restored, the sync event will fire, and the service worker will retrieve the image from IndexedDB and upload it.
Deleting The IndexedDB Database
Once the image has been uploaded, the IndexedDB store is no longer needed. Therefore, it should be deleted along with its content to free up storage.
With that, the entire process is complete!
Considerations And Limitations
While we’ve done a lot to help improve the experience by supporting offline uploads, the system is not without its limitations. I figured I would specifically call those out because it’s worth knowing where this solution might fall short of your needs.
No Reliable Internet Connectivity Detection JavaScript does not provide a foolproof way to detect online status. For this reason, you need to come up with a custom solution for detecting online status.
Chromium-Only Solution The Background Sync API is currently limited to Chromium-based browsers. As such, this solution is only supported by Chromium browsers. That means you will need a more robust solution if you have the majority of your users on non-Chromium browsers.
IndexedDB Storage Policies Browsers impose storage limitations and eviction policies for IndexedDB. For instance, in Safari, data stored in IndexedDB has a lifespan of seven days if the user doesn’t interact with the website. This is something you should bear in mind if you do come up with an alternative for the background sync API that supports Safari.
Enhancing The User Experience
Since the entire process happens in the background, we need a way to inform the users when images are stored, waiting to be uploaded, or have been successfully uploaded. Implementing certain UI elements for this purpose will indeed enhance the experience for the users. These UI elements may include toast notifications, upload status indicators like spinners (to show active processes), progress bars (to show state progress), network status indicators, or buttons to provide retry and cancel options.
Wrapping Up
Poor internet connectivity can disrupt the user experience of a web application. However, by leveraging PWA technologies such as IndexedDB, service workers, and the Background Sync API, developers can help improve the reliability of web applications for their users, especially those in areas with unreliable internet connectivity.
","description":"Poor internet connectivity doesn’t have to mean poor UX. With PWA technologies like IndexedDB, service workers, and the Background Sync API, you can build an offline-friendly image upload system that queues uploads and retries them automatically — so your users can upload stress…","guid":"https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/","author":"Amejimaobari Ollornwi","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-22T16:00:00.087Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-offline-friendly-image-upload-system/1-upload-system-flow-chart.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Serverless","JavaScript","User Experience"],"attachments":null,"extra":null,"language":null},{"title":"What Does It Really Mean For A Site To Be Keyboard Navigable","url":"https://www.smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable/","content":"
What Does It Really Mean For A Site To Be Keyboard Navigable
Keyboard navigation is a vital aspect of accessible web design, and a detail-oriented approach is crucial. Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment.
Efficient navigation is vital for a functional website, but not everyone uses the internet the same way. While most visitors either scroll on mobile or click through with a mouse, many people only use their keyboards. Up to 10 million American adults have carpal tunnel syndrome, which may cause pain when holding a mouse, and vision problems can make it difficult to follow a cursor. Consequently, you should keep your site keyboard navigable to achieve universal appeal and accessibility.
Understanding Keyboard Navigation
Keyboard navigation allows users to engage with your website solely through keyboard input. That includes using shortcuts and selecting elements with the Tab and Enter keys.
There are more than 500 keyboard shortcuts among operating systems and specific apps your audience may use. Standard ones for web navigation include Ctrl + F to find words or resources, Shift + Arrow to select text, and Ctrl + Tab to move between browser tabs. While these are largely the responsibilities of the software companies behind the specific browser or OS, you should still consider them.
Single-button navigation is another vital piece of keyboard navigability. Users may move between clickable items with the Tab and Shift keys, use the Arrow keys to scroll, press Enter or Space to “click” a link, and exit pop-ups with Esc.
The Washington Post homepage goes further. Pressing Tab highlights clickable elements as it should, but the first button press brings up a link to the site’s accessibility statement first. Users can navigate past this, but including it highlights how the design understands how keyboard navigability is a matter of accessibility.
You should understand how people may use these controls so you can build a site that facilitates them. These navigation options are generally standard, so any deviation or lack of functionality will stand out. Ensuring keyboard navigability, especially in terms of enabling these specific shortcuts and controls, will help you meet such expectations and avoid turning users away.
Why Keyboard Navigation Matters In Web Design
Keyboard navigability is crucial for a few reasons. Most notably, it makes your site more accessible. In the U.S. alone, over one in four people have a disability, and many such conditions affect technology use. For instance, motor impairments make it challenging for someone to use a standard mouse, and users with vision problems typically require keyboard and screen reader use.
Beyond accounting for various usage needs, enabling a wider range of control methods makes a site convenient. Using a keyboard rather than a mouse is faster when it works as it should and may feel more comfortable. Considering how workers spend nearly a third of their workweek looking for information, any obstacles to efficiency can be highly disruptive.
Falling short in these areas may lead to legal complications. Regulations like the Americans with Disabilities Act necessitate tech accessibility. While the ADA has no binding rules for what constitutes an accessible website, it specifically mentions keyboard navigation in its nonbinding guidance. Failing to support such functionality does not necessarily mean you’ll face legal penalties, but courts can use these standards to inform their decision on whether your site is reasonably accessible.
In 2023, Kitchenaid faced a class-action lawsuit for failing to meet such standards. Plaintiffs alleged that the company’s site didn’t support alt text or keyboard navigation, making it inaccessible to users with visual impairments. While the case ultimately settled out of court, it’s a reminder of the potential legal and financial repercussions of overlooking inclusivity.
Outside the law, an inaccessible site presents ethical concerns, as it shows preferential treatment for those who can use a mouse, even if that’s unintentional. Even without legal action, public recognition of this bias may lead to a drop in visitors and a tainted public image.
Elements Of A Keyboard-Navigable Site
Thankfully, ensuring keyboard navigability is a straightforward user experience design practice. Because navigation is standard across OSes and browsers, keyboard-accessible sites employ a few consistent elements.
Focus Indicators
Web Accessibility In Mind states that sites must provide a visual indicator of elements currently in focus when users press Tab. Focus indicators are typically a simple box around the highlighted icon.
These are standard in CSS, but some designers hide them, so avoid using outline:0 or outline:none to limit their visibility. You can also increase the contrast or change the indicator’s color in CSS.
The CNN Breaking News homepage is a good example of a strong focus indicator. Pressing Tab immediately brings up the box, which is bold enough to see easily and even uses a white border when necessary to stand out against black or dark-colored site elements.
Logical Tab Order
The order in which the focus indicator moves between elements also matters. Generally speaking, pressing the Tab key should move it from left to right and top to bottom — the same way people read in English.
A few errors can stand in the way. Disabled buttons disrupt keyboard navigation flow by skipping an element with no explanation or highlighting it without making it clickable. Similarly, an interface where icons don’t fall in a predictable left-to-right, top-to-bottom order will make logical tab movement difficult.
The Sutton Maddock Vehicle Rental site is a good example of what not to do. When you press Tab, the focus indicator jumps from “Contact” to the Facebook link before going backward to the Twitter link. It starts at the right and moves left when it goes to the next line — the opposite order of what feels natural.
Skip Navigation Links
Skip links are also essential. These interactive elements let keyboard users jump to specific content without repeated keystrokes. Remember, these skips must be one of the first areas highlighted when you press Tab so they work as intended.
The HSBC Group homepage has a few skip navigation links. Pressing Tab pulls up three options, letting users quickly jump to whichever part of the site interests them.
Keyboard-Accessible Interactive Elements
Finally, all interactive elements on a keyboard-navigable site should be accessible via keystrokes. Anything people can click on or drag with a cursor should also support navigation and interaction. Enabling this is as simple as letting users select all items with the Tab or Arrow keys and press them with Space or Enter.
Appropriately, this Arizona State University page on keyboard accessibility showcases this concept well. All drop-down menus are possible to open by navigating to them via Tab and pressing Enter, so users don’t need a mouse to interact with them.
How to Test for Keyboard Navigability
After designing a keyboard-accessible UX, you should test it to ensure that it works properly. The easiest way to do this is to explore the site solely with your keyboard. The chart below outlines the criteria to look for when determining whether your site is legitimately keyboard navigable.
Keyboard Navigable
Not Keyboard Navigable
Clickable Elements
All elements are reachable through the keyboard and open when you press Enter.
Only some elements are possible to reach through the keyboard. Some links may be broken or not open when you press Enter.
Focus Indicators
Pressing Tab, Space, or Enter brings up a focus indicator that is easy to see in all browsers.
Focus indicators may not appear when pressing all buttons. The box may be hard to see or only appear in some browsers.
Skip Navigation Links
Pressing Tab for the first time pulls up at least one skip link to take users to much-visited content or menus. Continuing to press Tab moves the focus indicator past these links to highlight elements on the page as normal.
No skip links appear when pressing Tab for the first time. Alternatively, they appear after moving through all other elements. Skip links may not be functional.
Screen Reader Support
Screen readers can read each element when highlighted with the focus indicator.
Some elements may not encourage any action from screen readers when highlighted.
The Web Content Accessibility Guidelinesoutline two test rules to verify keyboard navigability:
The first ensures all interactive elements are accessible via the Tab key,
The second checks for keyboard scroll functionality.
Employ both standards to review your UX before making a site live.
Typical issues include the inability to highlight elements with the Tab key or things that don’t fall in a natural order. You can discover both problems by trying to access everything with your keyboard. However, you may prefer to conduct a navigability audit through a third party. Many private companies offer these services, but you can also use the Bureau of Internet Accessibility for a basic WCAG audit.
Make Your Site Keyboard Navigable Today
Keyboard navigability ensures you cater to all needs and preferences for an inclusive, accessible website design. While it’s straightforward to implement, it’s also easy to miss, so remember these principles when designing your UX and testing your site.
WCAG provides several techniques you can employ to meet keyboard accessibility standards and enhance your users’ experience:
Technique G90, for keyboard-triggered event handlers
User-friendliness is an industry best practice that demonstrates your commitment to inclusivity for all. Even users without disabilities will appreciate intuitive, efficient keyboard navigation.
","description":"Keyboard navigation is a vital aspect of accessible web design, and a detail-oriented approach is crucial. Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment…","guid":"https://www.smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable/","author":"Eleanor Hecks","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-17T16:00:00.862Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/1-washington-post-homepage.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/3-cnn-homepage.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/4-sutton-maddock-vehicle-rental-site.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/5-hsbc-group-homepage.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/6-arizona-state-university-keyboard-accessibility.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Accessibility","UX","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"Fostering An Accessibility Culture","url":"https://www.smashingmagazine.com/2025/04/fostering-accessibility-culture/","content":"
Fostering An Accessibility Culture
Building an accessibility culture isn’t easy, and there’s no clear playbook. But Dani offers insights from his own journey, where small, consistent habits made a big difference.
A year ago, I learned that my role as an accessibility engineer was at risk of redundancy. It was a tough moment, both professionally and personally. For quite some time, my mind raced with guilt, self-doubt, plain sadness… But as I sat with these emotions, I found one line of thought that felt productive: reflection. What did I do well? What could I have done better? What did I learn?
Looking back, I realized that as part of a small team in a massive organization, we focused on a long-term goal that we also believed was the most effective and sustainable path: gradually shaping the organization’s culture to embrace accessibility.
Around the same time, I started listening to “Atomic Habits” by James Clear. The connection was immediate. Habits and culture are tightly linked concepts, and fostering an accessibility culture was really about embedding accessibility habits into everyone’s processes. That’s what we focused on. It took us time (and plenty of trial and error) to figure this out, and while there’s no definitive playbook for creating an accessibility program at a large organization, I thought it might help others if I shared my experiences.
Before we dive in, here’s a quick note: This is purely my personal perspective, and you’ll find a bias towards culture and action in big organizations. I’m not speaking on behalf of any employer, past or present. The progress we made was thanks to the incredible efforts of every member of the team and beyond. I hope these reflections resonate with those looking to foster an accessibility culture at their own companies.
Goals Vs. Systems
To effectively shape habits, it’s crucial to focus on systems and processes (who we want to become) rather than obsessing over a final goal (or what we want to achieve). This perspective is especially relevant in accessibility.
Take the goal of making your app accessible. If you focus solely on achieving compliance without changing your systems (embedding accessibility into processes and culture), progress will be temporary.
For example, you might request an accessibility audit and fix the flagged issues to achieve compliance. While this can provide “quick” results, it’s often a short-lived solution.
Software evolves constantly: features are rewritten, old code is removed, and new functionality is added. Without an underlying system in place, accessibility issues can quickly resurface. Worse, this approach may reinforce the idea that accessibility is something external, checked by someone else, and fixed only when flagged. Not to mention that it becomes increasingly expensive the later accessibility issues are addressed in the process. It can also feel demoralizing when accessibility becomes synonymous with a long list of last-minute tickets when you are busiest.
I’ll take the liberty of tweaking that to an aspirational state. Without recognizing the importance of the practice, any progress made is at risk of regression.
Instead, I encourage organizations to focus on building habits and embedding good accessibility practices into their workflows. A strong system not only ensures lasting progress but also fosters a culture where accessibility becomes second nature.
What Is Your Actual Goal?
That doesn’t mean goals are useless — they’re very effective in setting up direction.
In my team, we often said (only half-jokingly) that our ultimate goal was to put ourselves out of a job. This mindset reflects an important principle: accessibility is a cross-organizational responsibility, not the task of a single person or team.
That’s why, in my opinion, focusing solely on compliance rather than culture transformation (or prioritizing the “state” of accessibility over the “practice”) is a flawed strategy.
The real goal should be to build a user-centric culture where accessibility is embedded in every workflow, decision, and process. By doing so, companies can create products where accessibility is not about checking boxes and closing tickets but delivering meaningful and inclusive experiences to all users.
How Do We Get There?
Different companies (of various sizes, structures, and cultures) will approach accessibility differently, depending on where they are in their journey. I still have to meet, though, an accessibility team that ever felt they had enough resources. This makes careful resource allocation a cornerstone of your strategy. And while there’s no one-size-fits-all solution, shifting left (addressing issues earlier in the development process) tends to be the most effective approach in most cases.
Design Systems
If your company has a design system, partnering with the team that owns it can be one of your biggest wins. Fixing a single component used across dozens of places improves the experience everywhere it’s used. This approach scales beautifully.
Involvement in foundational decisions and discussions, like choosing color palettes, typography, and component interactions, and so on, can also be very valuable. Contributing to documentation and guidelines tailored to accessibility can help teams across the organization make informed decisions.
It is worth repeating, you’ll need as many allies as possible. The more limited your resources, the more important this becomes. Something as simple as a Slack channel that becomes a safe space where people can ask questions and share tips can go a long way. Other ideas include lunch-and-learns, regular meetups, office hours, or building a more formal champions network. And, very importantly, it is about finding ways of recognising and celebrating wins and everyone’s good work.
If you’re exploring this, I highly recommend joining the Champions of Accessibility Network (CAN) group. It’s a great way to learn and connect with others who are passionate about accessibility.
Education
Education is key for scaling accessibility efforts. While not everyone needs to be an expert, we should strive for everyone to know the basics. Repeatedly raising basic issues like missing accessibility labels, small target sizes, poor color contrast, and so on, can’t be productive.
Consider periodic training for different roles (PMs, designers, engineers…), embedding accessibility into onboarding sessions and documentation. You’ll need to find what works for you.
Everything that can be automated should eventually be automated. We know there’s already a lot on your plate, and automation should help lighten the load. This is especially true in larger organizations, where it can help scale efforts more efficiently. However, automated accessibility checks are not the silver bullet some might hope for.
One key issue is viewing automation as the solution rather than a safety net. Some companies claim automated tools catch as much as 57% of all issues or even 80% of issues by volume (PDF), though it is widely accepted that the figure is about 30%. Native mobile apps present greater challenges, making it likely that the real number is significantly lower for iOS and Android. These tools, and the high expectations around them, can create a false sense of security or reduce efforts to merely appease an automated tool of choice.
Whether your focus is on compliance or customer satisfaction, manual testing remains an essential part of the process. Whenever possible, you should also be testing with real users.
For me, the greatest value of automation is in catching basic regressions before release and serving as a gentle nudge to developers, reminding them to consider accessibility more thoughtfully. Ideally, they don’t just fix an issue and move on but take a moment to reflect:
How did this issue arise in the first place?
Did we consider accessibility during development?
Did we skip manual testing with a screen reader?
When it comes to shaping habits, the environment matters. A strong accessibility culture isn’t built on willpower alone. It thrives on systems that encourage good practices and make bad ones harder to fall into. Nudges like automated checks, documentation, and proactive education are invaluable for keeping accessibility at the top of the mind.
Remediation
I won’t lie; the moment I was first told my new job was to work on accessibility, I immediately jumped in, doing what I knew best, trying to fix as many issues as possible myself. While rewarding at first, this approach isn’t scalable in larger organizations. It can quickly lead to burnout. It also sets an expectation within the company that it’s your team’s responsibility to get it done, an expectation that becomes increasingly difficult to reset as time goes on.
Not saying you shouldn’t be hands-on, though! But you need to be strategic. Try to focus on supporting teams with complex issues, pair programming with colleagues, code reviews, or implementing cross-app improvements, ideally in partnership with the design system teams. This way, your efforts can have a broader impact.
Auditing
Accessibility audits are another tool in your toolbox. Audits can be valuable but are often overused. They’re most effective after teams have done their best to make the product accessible, serving as a validation step rather than the starting point. After all, how useful is an audit if a significant portion of the flagged issues are basic problems that automated tools could have detected?
Alternatively, audits might help when you need quick results but don’t have the time or resources to upskill your workforce in time for a timely and necessary remediation.
While audits have their place and, as mentioned, can be valuable in certain situations, I wouldn’t rely on them to be the cornerstone of your strategy.
And So Much More
Try to find what works for your team, and, most importantly, adapt as circumstances change. Beyond the strategies mentioned, you might explore other initiatives:
Collecting accessibility metrics,
Conducting user research and testing,
Improving procurement practices,
Ensuring accessible content and communications,
Supporting accessible hiring, workplace platforms, and tools.
It doesn’t mean one area of action is more important than another. Actually, in my view, one of the biggest reasons cultural change around accessibility takes longer than other areas is the lack of diversity in the workforce. Contributing to lines of action to address this issue might not be as immediately obvious as others.
The industry hasn’t done enough to hire people with disabilities, leaving them underrepresented in building products that truly work for them. Worse yet, they face more barriers in the hiring process. And even when they do get hired, they may find that the tools meant to enable us to do our work and be productive don’t work for them.
The key is to identify and lay out your areas of action first, then prioritize strategically while staying flexible as circumstances evolve. A thoughtful, adaptive approach ensures that no matter the challenge, your efforts remain impactful, avoiding stretching your team too thin and losing focus.
Valley Of Despair
Here’s the truth that everyone working in accessibility inevitably and unfortunately faces sooner rather than later: accessibility done right, as we’ve seen so far, takes time. And that goes against the “move fast and break things” culture of quick results and short-termism that many companies still follow, even if they won’t openly admit it.
The slow-cooking nature of the process can, therefore, work against us. Being patient and trusting that small changes will aggregate and compound over time is incredibly challenging and sometimes nerve-racking. On top of that, if there’s a misalignment with leadership about what the ultimate goal is, or if there’s pressure to deliver quick results, it’s easy to feel like throwing in the towel, or worse, to experience burnout.
Unfortunately, burnout is an all-too-common issue in the accessibility community.
“When nothing seems to help, I go and look at a stonecutter hammering away at his rock perhaps a hundred times without as much as a crack showing in it. Yet at the hundred and first blow it will split in two, and I know it was not that blow that did it — but all that had gone before.”
— Jacob Riis
This serves as a powerful reminder that every small effort contributes to the eventual breakthrough, even when progress feels invisible.
An Uncomfortable Truth
Top-down approaches are easier, and yet, most accessibility initiatives start from the bottom. For a sustainable strategy, however, you’ll need both. If necessary, you’ll have to get buy-in from leadership or risk feeling like you’re constantly swimming upstream. Surprisingly, this is often harder than it seems. This topic could easily be an article on its own, but Vitaly Friedman offers some useful pointers in his piece “How To Make A Strong Case For Accessibility.”
In my experience, leadership buy-in is crucial to fostering an accessibility culture. Leaders often want to see how accessibility impacts the bottom line and whether investing in it is profitable. The hardest part is getting started, so if you can make a convincing case this way, do it.
I once watched a talk by Dave Dame titled “Stakeholders Agree That Accessibility Is Important, But That Does Not Mean They Will Invest In Accessibility.” He made an excellent point: You may need to speak the business language to get their attention. As Dave put it, “I have Cerebral Palsy, but my money doesn’t.”
That’s the mindset I wish more CEOs and leaders had. It is a story of how a change of mindset from “we have to do it” to “it is a core part of what we do” leads to a lasting and successful accessibility culture. Going beyond the bare minimum, Apple has become a leader in accessibility. An innovative company that consistently makes products more accessible and pushes the entire industry forward.
The Good News
Once good habits are established, they tend to stick around. When I was let go, some people (I’m sure trying to comfort me) said the accessibility of the app would quickly regress and that the company would soon realize their mistake. Unexpectedly for them, I responded that I actually hoped it wouldn’t regress anytime soon. That, to me, would be the sign that I had done my job well.
And honestly, I felt confident it wouldn’t. Incredible people with deep knowledge and a passion for accessibility and building high-quality products stayed at the company. I knew the app was in good hands.
But it’s important not to fall into complacency. Cultures can be taken for granted, but they need constant nurturing and protection. A company that hires too fast, undergoes a major layoff, gets acquired, experiences high turnover, or sees changes in leadership or priorities… Any of these can pretty quickly destabilize something that took years to build.
Wrapping Up
This might not be your experience, and what we did may not work for you, but I hope you find this insight useful. I have, as they say, strong opinions, but loosely held. So I’m looking forward to knowing what you think and learning about your experiences too.
There’s no easy way or silver bullet! It’s actually very hard! The odds are against you. And we tend to constantly be puzzled about why the world is against us doing something that seems so obviously the right thing to do: to invite and include as many people as possible to use your product, to remove barriers, to avoid exclusion. It is important to talk about exclusion, too, when we talk about accessibility.
“Even though we were all talking about inclusion, we each had a different understanding of that word. Exclusion, on the other hand, is unanimously understood as being left out (...) Once we learn how to recognize exclusion, we can begin to see where a product or experience that works well for some might have barriers for someone else. Recognizing exclusion sparks a new kind of creativity on how a solution can be better.”
Something that might help: always assume goodwill and try to meet people where they are. I need to remind myself of this quite often.
“It is all about understanding where people are, meeting them where they’re at (...) People want to fundamentally do the right thing (...) They might not know what they don’t know (...) It might mean stepping back and going to the fundamentals (...) I know some people get frustrated about having to re-explain accessibility over and over again, but I believe that if we are not willing to do that, then how are we gonna change the hearts and minds of people?”
Play the long game, and focus more on systems and processes than just goals.
Build a network: rally allies around you and secure buy-in from leadership by showing that accessibility is not extra work; if considered after the fact, they’re actually missed steps.
Shift left and be strategic: reflect on where your limited resources can have the biggest, most lasting impact.
Be persistent. Be resilient.
But honestly, anything you can do is progress. And progress is all we need, just for things to be a little better every day. Your job is incredibly important. Thanks for all you do!
Accessibility: This is the way!
","description":"Building an accessibility culture isn’t easy, and there’s no clear playbook. But Dani offers insights from his own journey, where small, consistent habits made a big difference. 15 min read\\nAccessibility, Web Design, UX\\nShare on Twitter, LinkedIn\\n\\nA year ago, I learned that my role as…","guid":"https://www.smashingmagazine.com/2025/04/fostering-accessibility-culture/","author":"Daniel Devesa Derksen-Staats","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-16T16:00:00.672Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fostering-accessibility-culture/bug-fix-cost.jpg","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fostering-accessibility-culture/inforgraphic-showing-stats-purple-pound.jpg","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Accessibility","Web Design","UX"],"attachments":null,"extra":null,"language":null},{"title":"Inclusive Dark Mode: Designing Accessible Dark Themes For All Users","url":"https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/","content":"
Inclusive Dark Mode: Designing Accessible Dark Themes For All Users
Dark mode isn’t just a trendy aesthetic. It’s a gateway to more inclusive digital experiences, but only if designed thoughtfully. While its sleek visuals and reduced eye strain appeal to many, poorly implemented dark themes can alienate users with visual impairments, causing readability issues like blurred text or harsh contrasts. Discover how to craft dark modes that don’t just look good but work for everyone, from those with light sensitivity to machine learning algorithms. Learn why offering customization and embracing adaptability can transform dark mode from a design trend into a universally empowering tool.
Dark mode, a beloved feature in modern digital interfaces, offers a visually striking alternative to traditional light themes. Its allure lies in the striking visual contrast it provides, a departure from the light themes that have dominated our screens for decades.
However, its design often misses the mark on an important element — accessibility. For users with visual impairments or sensitivities, dark mode can introduce significant challenges if not thoughtfully implemented.
Hence, designing themes with these users in mind can improve user comfort in low-light settings while creating a more equitable digital experience for everyone. Let’s take a look at exactly how this can be done.
The Pros And Cons Of Dark Modes In Terms Of Accessibility
Dark mode can offer tangible accessibility benefits when implemented with care. For many users, especially those who experience light sensitivity, a well-calibrated dark theme can reduce eye strain and provide a more comfortable reading experience. In low-light settings, the softer background tones and reduced glare may help lessen fatigue and improve visual focus.
However, these benefits are not universal. For some users, particularly those with conditions such as astigmatism or low contrast sensitivity, dark mode can actually compromise readability. Light text on a dark background may lead to blurred edges or halo effects around characters, making it harder to distinguish content.
The Role Of Contrast In Dark Mode Accessibility
When you’re designing, contrast isn’t just another design element, it’s a key player in dark mode’s overall readability and accessibility. A well-designed dark mode, with the right contrast, can also enhance user engagement, creating a more immersive experience and drawing users into the content.
How is this possible? Well, the darker tones can hold attention longer, especially in low-light settings, leading to higher interaction rates while making your design more accessible. The point is, without proper contrast, even the sleekest dark mode design can become difficult to navigate and uncomfortable to use.
Designing For Contrast In Dark Mode
Instead of using pure black backgrounds, which can cause eye strain and make text harder to read, opt for dark grays. These softer tones help reduce harsh contrast and provide a modern look.
However, it’s important to note that color adjustments alone don’t solve technical challenges like anti-aliasing. In dark mode, anti-aliasing has the problem of halo effects, where the edges of the text appear blurred or overly luminous. To mitigate these issues, designers should test their interfaces on various devices and browsers and consider CSS properties to improve text clarity.
Real-world user testing, especially with individuals who have visual impairments, is essential to fine-tune these details and ensure an accessible experience for all users.
For individuals with low vision or color blindness, the right contrast can mean the difference between a frustrating and a seamless user experience. To keep your dark mode design looking its best, don’t forget to also:
Try to choose high-contrast color combinations for improved readability.
Make sure you avoid overly saturated colors, as they can strain the eyes in dark mode.
In addition to human readability, machine readability is equally important in an age of increased automation. Machine readability refers to how effective computers and bots are at extracting and processing data from the interface without human intervention. It’s important for pretty much any type of interface that has automation built into the workflows. For example, if the interface utilizes machine learning, machine readability is essential. Machine learning relies on accurate, quality data and effective interaction between different modules and systems, which makes machine readability critical to make it effective.
You can help ensure your dark mode interface is machine-readable in the following ways:
Use clear, semantic markup. Write your HTML so that it naturally describes the structure of the page. This means using proper tags (like <header>, <nav>, <main>, and <footer>) and ARIA roles. When your code is organized this way, machines can read and understand your page better, regardless of whether it’s in dark or light mode.
Keep the structure consistent across themes. Whether users choose dark mode or light mode, the underlying structure of your content should remain the same. This consistency ensures that screen readers and other accessibility tools can interpret the page without confusion.
Maintain good color contrast. In dark mode, use color choices that meet accessibility standards. This not only helps people with low vision but also ensures that automated tools can verify your design’s accessibility.
Implement responsive styles with media queries. Use CSS media queries like ‘prefers-color-scheme’ to automatically adjust the interface based on the user’s system settings. This makes sure that the switch between dark and light modes happens smoothly and predictably, which helps both users and assistive technologies process the content correctly.
Making sure that data, especially in automated systems, is clear and accessible prevents functionality breakdowns and guarantees seamless workflows.
Best Strategies For Designing Accessible Dark Themes
Although we associate visual accessibility with visual impairments, the truth is that it’s actually meant for everyone. Easier access is something we all strive for, right? But more than anything, practicality is what matters. Fortunately, the strategies below fit the description to a tee.
Strengthen Contrast For Usability
Contrast is the backbone of dark mode design. Without proper implementation, elements blend together, creating a frustrating user experience. Instead of looking at contrast as just a relationship between colors, try to view it in the context of other UI elements:
Rethink background choices. Instead of pure black, which can cause harsh contrast and eye strain, use dark gray shades like #121212. These tones offer a softer, more adaptable visual experience.
Prioritize key elements. Ensure interactive elements like buttons and links have contrast ratios exceeding 4.5:1. This not only aids readability but also emphasizes functionality.
Test in real environments. Simulate low-light and high-glare conditions to see how contrast performs in real-life scenarios.
Pay Special Attention To Typography In Dark Themes
The use of effective typography is vital for preserving readability in dark mode. In particular, the right font choice can make your design both visually appealing and functional, while the wrong one can cause strain and confusion for users.
Thus, when designing dark themes, it’s essential to prioritize text clarity without sacrificing aesthetics. You can do this by prioritizing:
Sans-serif fonts They are often the best option for dark mode, as they offer a clean, modern look and remain highly readable when paired with a well-balanced contrast.
Strategic use of light elements Consider incorporating subtle, lighter accents to emphasize key elements, such as headings, call-to-action buttons, or critical information, without fully shifting to a light mode. These accents act as visual cues, drawing attention to important content.
Proper font metrics and stylization It’s important to consider font size and weight—larger, bolder fonts tend to stand out better against dark backgrounds, ensuring that your text is easy to read.
Make Sure Your Color Integration Is Thoughtful
Colors in dark mode require a delicate balance to ensure accessibility. It’s not as simple as looking at a list of complimentary color pairs and basing your designs around them. Instead, you must think about how users with visual impairments will experience the dark theme design.
While avoiding color combinations like red and green for the sake of colorblind users is a widely known rule, visual impairment is more than just color blindness. In particular, you have to pay attention to:
Low vision: Ensure text is clear with strong contrast and scalable fonts. Avoid thin typefaces and cluttered layouts for better readability.
Light sensitivity (photophobia): Minimize bright elements against dark backgrounds to reduce eye strain. Provide brightness and contrast adjustment options for comfort.
Glaucoma: Use bold, clear fonts and simplify layouts to minimize visual confusion. Focus on reducing clutter and enhancing readability.
Macular degeneration: Provide large text and high-contrast visuals to aid users with central vision loss. Refrain from relying on centrally aligned, intricate elements.
Diabetic retinopathy: Keep designs simple, avoiding patterns or textures that obscure content. Use high-contrast and well-spaced elements for clarity.
Retinitis pigmentosa: Place essential elements centrally with high contrast for those with peripheral vision loss. Avoid spreading critical information across wide areas.
Cataracts: Reduce glare by using dark gray backgrounds instead of pure black. Incorporate soft, muted colors, and avoid sharp contrasts.
Night blindness: Provide bright, legible text with balanced contrast against dark themes. Steer clear of overly dim elements that can strain vision.
As you can see, there are a lot of different considerations. Something you need to account for is that it’s nigh-on impossible to have a solution that will fix all the issues. You can’t test an interface for every single individual who uses it. The best you can do is make it as accessible as possible for as many users as possible, and you can always make adjustments in later iterations if there are major issues for a segment of users.
Understanding Color Perception And Visual Impairments To Get The Ideal Dark Mode
Even though dark mode doesn’t target only users with visual impairments, their input and ease of use are perhaps the most important.
The role of color perception in dark mode varies significantly among users, especially for those with visual impairments like color blindness or low vision. These conditions can make it challenging to distinguish certain colors on dark backgrounds, which can affect how users navigate and interact with your design.
In particular, some colors that seem vibrant in light mode may appear muted or blend into the background, making it difficult for users to see or interact with key elements. This is exactly why testing your color palette across different displays and lighting conditions is essential to ensure consistency and accessibility. However, you probably won’t be able to test for every single screen type, device, or environmental condition. Once again, make the dark mode interface as accessible as possible, and make adjustments in later iterations based on feedback.
For users with visual impairments, accessible color palettes can make a significant difference in their experience. Interactive elements, such as buttons or links, need to stand out clearly from the rest of the design, using colors that provide strong contrast and clear visual cues.
How Slack handles visual impairments. (Large preview)
In the example above, Slack did an amazing job providing users with visual impairments with premade options. That way, someone can save hours of valuable time. If it wasn’t obvious by now, apps that do this find much more success in customer attraction (and retention) than those that don’t.
Making Dark Mode A User Choice
Dark mode is often celebrated for its ability to reduce screen glare and blue light, making it more comfortable for users who experience certain visual sensitivities, like eye strain or discomfort from bright screens.
For many, this creates a more pleasant browsing experience, particularly in low-light environments. However, dark mode isn’t a perfect solution for everyone.
Users with astigmatism, for instance, may find it difficult to read light text on a dark background. The contrast can cause the text to blur or create halos, making it harder to focus. Likewise, some users prefer dark mode for its reduced eye strain, while others may find it harder to read or simply prefer light mode.
These different factors mean that adaptability is important to better accommodate users who may have certain visual sensitivities. You can allow users to toggle between dark and light modes based on their preferences. For even greater comfort, think of providing options to customize text colors and background shades.
Switching between dark and light modes should also be smooth and unobtrusive. Whether you’re working in a bright office or relaxing in a dimly lit room, the transition should never disrupt your workflow.
On top of that, remembering your preferences automatically for future sessions creates a consistent and thoughtful user experience. These adjustments turn dark mode into a truly personalized feature, tailored to elevate every interaction you have with the interface.
Conclusion
While dark mode offers benefits like reduced eye strain and energy savings, it still has its limits. Focusing on key elements like contrast, readability, typography, and color perception helps guarantee that your designs are inclusive and user-friendly for all of your users.
Offering dark mode as an optional, customizable feature empowers users to interact with your interface in a way that best suits their needs. Meanwhile, prioritizing accessibility in dark mode design creates a more equitable digital experience for everyone, regardless of their abilities or preferences.
","description":"Dark mode isn’t just a trendy aesthetic. It’s a gateway to more inclusive digital experiences, but only if designed thoughtfully. While its sleek visuals and reduced eye strain appeal to many, poorly implemented dark themes can alienate users with visual impairments, causing…","guid":"https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/","author":"Alex Williams","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-14T16:00:00.112Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/6-contrast-in-dark-mode.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/2-darkmode-font.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/3-examples-different-dark-mode-apps.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/4-slack-visual-impairments.png","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/5-light-mode-vs-dark-mode.png","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["Accessibility","UX","Design"],"attachments":null,"extra":null,"language":null},{"title":"Gild Just One Lily","url":"https://www.smashingmagazine.com/2025/04/gild-just-one-lily/","content":"
Gild Just One Lily
“Gilding the lily” isn’t always bad. In design, a touch of metaphorical gold — a subtle animated transition, a hint of color, or added depth in a drop shadow — can help communicate a level of care and attention that builds trust. But first? You need a lily. Nail the fundamentals. Then, gild it carefully.
The phrase “gild the lily” implies unnecessary ornamentation, the idea being that adorning a lily with superficial decoration only serves to obscure its natural beauty. Well, I’m here to tell you that a little touch of what might seem like unnecessary ornamentation in design is exactly what you need.
When your design is solid, and you’ve nailed the fundamentals, adding one layer of decoration can help communicate a level of care and attention.
First, You Need A Lily
Let’s break down the “gild the lily” metaphor. First, you need a lily. Lilies are naturally beautiful, and each is unique. They don’t need further decoration. To play in this metaphor, let’s assume your design is already great. If not, you don’t have a lily. Get back to work on the fundamentals and check back in later (or keep reading anyhow).
Now that you’ve got a lily, let’s talk gilding. To “gild” is to cover it with a thin layer of gold. We’re not talking about the inner beauty baked into the very soul of your product (that’s the lily part of the metaphor). A touch of metaphorical gold foil on the surface can send a message of delight with a hint of decadence.
This gilding might come in the form of a subtle, animated transition or through a hint of colour and added depth in a drop shadow. Before we get into specifics, let’s make sure our metaphor doesn’t carry us too far.
Gild Sparingly
If we go too far with our gilding, we can communicate indulgence and excess rather than a hint of decadence.
An over-the-top design can be particularly irritating, depending on the state of mind of the person you’re designing for. For example, a flashy animation bragging about your new AI chat feature may not sit so well with a frustrated customer who can’t get their password reset to use it in the first place.
Wink At The Audience (Once)
Not every great product design can be so obviously beautiful as a lily. Even if you have a great design, it may not be noticeable to those enjoying the benefits of that design. Our designs shouldn’t always be noticeable, but sometimes it’s fun to notice and appreciate a great design.
If you’re Apple, you don’t need to worry about your design going unnoticed. Nobody thinks the background color of the Apple website is white (#FFFFFF) because they forgot to specify one in their stylesheet (though I’m old enough to remember a time when the default background of the web was a battleship gray, #CCCCCC). It’s so clear from the general level of refinement and production quality on the Apple site that the white background is a deliberate choice.
The Apple website, featuring their trademark product photos in Jony Ive’s white world. (Large preview)
You and I are not Apple. Your client is (probably) not Apple. You don’t have an army of world-class product photographers and motion designers working in a glass spaceship in Cupertino. You’re on a small team pushing up against budget and schedule constraints. Even with these limitations, you’re managing to make great products.
The great design behind your products might be so well done that it is invisible. The door handle is so well-shaped that you don’t notice how well-shaped it is. That button is so well-placed that no one thinks about where it is positioned.
When you’re nailing the fundamentals, it’s ok to wink at the audience once in a while. Not only is it ok, but it can even augment your design.
By calling just a touch of attention to the thoughtfulness of your design, you may make it even more delightful to experience. Take it one inch too far, though, and you’re distracting from the experience and begging for applause. Walk this line carefully.
Digital Lilies
A metaphor — even one with gold and lilies — only takes us so far. Let’s consider some concrete examples of gilding a digital product. When it comes to the web, a few touches of polish to reach for can include the following:
The Supabase site has dark and light themes, both of which are just a touch of a pure black and pure white (pure black and white are shown at the bottom of the screenshot to highlight the tiny difference). (Large preview)
Not-quite black and not-quite white: Instead of solid black (#000000) and solid white (#FFFFFF) colors on the web, find subtle variations. They may look black/white on a first glance, but there’s a subtle implication of care and customization. An off-white background also allows you to have pure white elements, like form inputs, that stand out nicely against the backdrop. Be careful to preserve enough contrast to ensure accessible text.
Josh W. Comeau’s example shows how color can improve shadows. (Large preview)
This chart from the Utopia blog shows how font sizes can scale smoothly in proportion to the viewport width. (Large preview)
Comfortable lettering: Find a comfortable line height and letter spacing for the font family you’re using. A responsive type system like Utopia can help define spacing that looks and feels comfortable across a variety of device sizes.
The One React framework site includes a distinctive splash of color along the top. Note the gentle curve of the color element. (Large preview)
A touch of color: When you don’t want your brand colors to overwhelm your design or you would like a complementary color to accent an otherwise monotone site, consider adding a single, simple stripe of solid color along the top of the viewport. Even something a few pixels tall can add a nice splash of color without complicating the rest of the design. The site for the One React web framework does this nicely and goes further with a uniquely shaped yellow accent at the top of the site. It’s even more subtle if you’re seeing their dark-mode design, but it’s still there.
The A List Apart site features custom illustrations for its articles and has done that long before the advent of AI image generation. Visit the seminal Responsive Web Design article and try resizing your browser for an especially apt response. (Large preview)
Illustration and photography: It’s easier than ever to find whimsical and fun illustrations for your site, but no stock image can replace a relevant illustration or photo so apt that it must have been crafted just for this case. A List Apart has commissioned a unique illustration in a consistent style for each of their articles for decades. You don’t have to be a gifted illustrator. There may be charm in your amateur scribbles. If not, hire a great artist.
Beware, Cheap Gilding
Symbols of decadence are valued because they are precious in some way. This is why we talk about gilding with gold and not brass. This is also why a business card with rounded corners may feel more premium than a simple rectangle. It feels more expensive because it is.
Printing has gotten pretty cheap, though, even with premium touches. Printing flourishes like rounded corners or a smooth finish don’t convey the same value and care as they did before they became quick up-sell options from your local (or budget online) print shop.
A well-worded and thoughtful cover letter used to be a great way to stand out from a pile of similar resumes. Now, it takes a whole different approach to stand out from a wall of AI-LLM-generated cover letters that say everything an employer might want to hear.
On the web, a landing page where new page sections slide and fade in with animation is used to imply that someone spent extra time on the implementation. Now, a page with too much motion feels more like a million other templates enabled by site-building tools like Wix, Squarespace, and Webflow.
Custom fonts have also become so easy and ubiquitous on the web that sticking to system default fonts can be as strong a statement as a stylish typeface.
Does Anyone Care?
Is everyone going to notice that the drop shadows on your website have a hint of color? No. Is anyone going to notice? Maybe not. If you get the details right, though, people will feel it. These levels of polish are cumulative, contributing one percent here and there to the overall experience. They may not notice the hue of your drop shadow, but they may impart some trust from a sense of the care that went into the design.
Most people aren’t web developers or designers. They don’t know the implementation details of CSS animations and box-shadows. Similarly, I’m not a car expert — far from it. I value reliability and affordability more than performance and luxury in a car. Even so, when I close the door on a high-quality vehicle, I can feel the difference.
On that next project, allow yourself to gild just one lily.
","description":"“Gilding the lily” isn’t always bad. In design, a touch of metaphorical gold — a subtle animated transition, a hint of color, or added depth in a drop shadow — can help communicate a level of care and attention that builds trust. But first? You need a lily. Nail the fundamentals.…","guid":"https://www.smashingmagazine.com/2025/04/gild-just-one-lily/","author":"Steven Garrity","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-09T16:00:00.104Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/1-apple-wwebsite.png","type":"photo","width":800,"height":597},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/2-supabase-site.png","type":"photo","width":800,"height":457},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/3-comeau-example.png","type":"photo","width":800,"height":294},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/4-chart-utopia-blog.png","type":"photo","width":800,"height":450},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/5-one-react-framework-site.png","type":"photo","width":800,"height":488},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/gild-just-one-lily/6-a-list-apart-site.png","type":"photo","width":800,"height":597}],"categories":["Inspiration","Design","Web Design"],"attachments":null,"extra":null,"language":null},{"title":"Using Manim For Making UI Animations","url":"https://www.smashingmagazine.com/2025/04/using-manim-making-ui-animations/","content":"
Using Manim For Making UI Animations
Animation makes things clearer, especially for designers and front-end developers working on UI, prototypes, or interactive visuals. Manim is a tool that lets you create smooth and dynamic animations, not just for the design field but also in math, coding, and beyond, to explain complex ideas or simply make everything a little bit more interactive.
Say you are learning to code for the first time, in Python, for example, which is a great starting point for getting into development. You are likely to come across some information like “a variable stores a value.” That sounds straightforward, but if you are a beginner just starting, then it can also be a bit confusing. How does a variable store or hold something? What happens when we assign a new value to it?
To figure things out, you could read a bunch and watch tutorials, but sometimes, resources like these don’t help the concept fully click. That’s where animation helps. It has the power to take complex programming concepts and turn them into something visual, dynamic, and easy to grasp.
Let’s break it down with an example: Say we have a box labeled X, first empty, then fill with a value 5, for this example, then update to 12, then 8, then 20, then 3.
This animation shows how a variable stores values and updates over time, step by step. Source Code
Even if you are unfamiliar with Python, an animation like this makes the concept more obvious, helping you understand how variables work with visual cues. You can now visualize the variables as containers that hold and update values dynamically. It’s way easier to see that than it is to just read about variables.
Well, Manim isn’t just limited to programming; it works for math, physics, UI/UX, and more. In trigonometry, you can take something like a “Sine Wave” as an example, which is a smooth, continuous curve that moves up and down in a repeating pattern, and it is found everywhere from sound waves to electrical signals to the motion of a pendulum.
Sounds simple, right? Or maybe a bit confusing, especially if you’re not a math person, but let me help with this:
A smooth sine wave moving across the screen, illustrating oscillation and periodic motion. Source Code
Now, with this, you can see how the wave moves. Instead of just numbers and formulas, you’re watching it happen. And that’s pretty much the idea here! In this article, we’ll explore Manim and how it makes concepts easier to understand through animation.
Manim, Manim! What Is It?
By now, you may have a rough idea of what Manim can do, but let’s break it down a little more. What exactly is Manim? Well, it’s two things.
First, Manim is an open-source Python library for creating high-quality mathematical animations.
If you’ve ever watched a 3Blue1Brown video, you’ve seen Manim in action because Grant Sanderson originally developed it for his YouTube channel.
Second, Manim is a script-driven animation engine, meaning you write Python code to generate animations instead of dragging and dropping elements like in typical video editing software.
This gives you precise control over every detail, including text, color, shape, transformations, timing — you name it. Whether you’re explaining math, physics, or programming concepts, Manim makes it fairly easy to create clear and dynamic visuals with just a few lines of code. Plus, it works seamlessly with LaTeX, so you can render mathematical equations beautifully without extra effort. That’s why it’s popular among educators, researchers, and content creators.
Of course, Manim isn’t the only tool you can use. If it doesn’t quite fit your needs or the programming language you are most comfortable with, here are some alternatives worth checking out:
Processing This is a Java-based coding framework, great for generative art and interactive visuals. If you enjoy experimenting with visual design through code, in Java, to be exact, then Processing gives you a solid foundation.
p5.js This is a JavaScript library, an alternative for web animations. If you’re a front-end developer working with HTML and CSS, p5.js makes it easy for you to create graphics directly in the browser.
Desmos This focuses on math visualization. Desmos lets you create interactive graphs and scripted animations directly in the browser. You can use it through Desmos Graphs, Desmos Calculator, or the Desmos API.
Blender (with Python Scripting) This is mostly known for 3D animation, but with its Python API, you can script animations, including math and physics-based simulations.
Now, let’s compare them:
Tool
Language
Best For
Strengths
Manim
Python
Math, physics, programming animations
High precision, script-driven, LaTeX support
Processing
Java
Generative art, interactive visuals
Great for creative coding
p5.js
JavaScript
Web-based animations
Works well with HTML & CSS
Blender (Python API)
Python
3D & math-based animations
Powerful 3D capabilities, physics simulations
Desmos
JavaScript
Math visualizations
Browser-based, great for interactive graphs
How To Get Started
There are multiple ways to install the library. You can set it up locally, use Conda or Docker, or run it inside Jupyter Notebooks. But if you don’t want to deal with installations, Replit is a great alternative, as it’s a real-time live editor that lets you start coding animations instantly.
1. Create An Account On Replit Using GitHub or Email.
Once you’re in, your dashboard should look something like this:
Then, search for Manim and create your app. At this point, you don’t have to do anything else because this sets up everything for you (including the main.py file, a media folder, and all of the required dependencies).
Voilà! Now you can start coding your animations right away!
Using Manim For Math, Code, And UI/UX Visuals
Okay, you know Manim. Whether it’s for math, programming, physics, or even prototyping UI concepts, it’s all about making complex concepts easier to grasp through animation. But how does that work in practice? Let’s go through some ways Manim makes things clearer and more engaging.
1. Math & Geometry Visuals
Sometimes, math can feel a bit like a puzzle with missing pieces. But with Manim, numbers, shapes, and graphs move, making patterns and relationships easier to grasp. Take graphs, for example. When you tweak a parameter, Manim instantly updates the visualization so you can watch how a function changes over time. And that’s a game-changer for understanding concepts like derivatives or transformations.
Geometry concepts also come easier and become even more fun when you can see those shapes move, giving you a clear understanding of rotation or reflection. If you’re drawing a triangle with a compass and straightedge, for example, Manim can animate each step, making it easier to follow along and understand the idea.
2. Coding & Algorithms
As you may already know, coding is a process that runs step by step, and Manim makes that easy to see. Whether you are working on the front end or the back end, logic flows in a way that’s not always clear from just reading or writing code. With Manim, you can, for example, watch how a sorting algorithm moves numbers around or simply how a loop runs.
The same goes for data structures like linked lists, trees, and more. A binary tree makes more sense when you can see it grow and balance itself. Even complex algorithms like Dijkstra’s shortest path become clearer when you watch the path being calculated in real time, even if you may not have a background in math.
Watch as the tree is explored node by node, showing how data is structured and accessed. Source Code
3. UI/UX Concepts & Motion Design
Although Manim is not a UI/UX design tool, it can be useful for demonstrating designs. Static images can’t always show the full picture, but with Manim, before-and-after comparisons become more dynamic, and of course, it makes it easier to highlight why a new navigation menu, for example, is more intuitive or how a checkout flow reduces friction.
Animated heatmaps can show click patterns over time, helping to spot trends more easily. Conversion funnels become clearer when each stage is animated, revealing exactly where users drop off.
Well, that’s a lot we covered! By now, you should have Manim installed in whatever way works best for you. But before we jump into the coding part, let’s quickly go over Manim’s core building blocks. Manim’s animations are made of three main concepts:
Mobjects,
Animations,
Scenes.
1. Mobjects (Mathematical Objects)
Everything you display in Manim is a Mobject (short for “mathematical object”). There are different types:
Basic shapes like Circle(), Rectangle(), and Arrow(),
Text elements for adding labels, and
Advanced structures like graphs, axes, and bar charts.
A mobject is more like a blueprint, and it won’t show up unless you add it to a scene. Here’s a brief example:
from manim import *\\n\\nclass MobjectExample(Scene):\\n def construct(self):\\n circle = Circle() # Create a circle\\n circle.set_fill(BLUE, opacity=0.5) # Set color and transparency\\n self.add(circle) # Add to the scene\\n self.wait(2)\\n
A blue circle will appear for about two seconds when you run this:
2. Animations
Animations in Manim, on the other hand, are all about changing these objects over time. Rather than just displaying a sharp edge, we can make it move, rotate, fade, or transform into something else. Really, we do have this much control through the Animationclass.
If we use the same circle example from earlier, we can add animations to see how it works and compare the visual differences:
Here, we are making a move, scaling up, and rotating. The play() method is what makes animations run. For example, FadeIn(circle) makes the circle gradually appear, and circle.animate.shift(RIGHT * 2) moves it two units to the right. If you want to slow things down, you can add run_time to control the duration, like the following:
This makes the scaling take three more seconds instead of the default amount of time:
3. Scenes
Scenes are what hold everything together. A scene defines what appears, how it animates, and in what order. Every Manim script has a class that is inherited from a Scene, and it contains a construct() method. This is where we write our animation logic. For example,
class SimpleScene(Scene):\\n def construct(self):\\n text = Text(\\"Hello, Manim!\\")\\n self.play(Write(text))\\n self.wait(2)\\n
This creates a simple text animation where the words appear as if being written.
Bringing Manim To Design
As we discussed earlier, Manim is a great tool for UI/UX designers and front-end developers to visualize user interactions or to explain UI concepts. Think about how users navigate through a website or an app: they click buttons, move between pages, and interact with elements. With Manim, we can animate these interactions and see them play out step by step.
With this in mind, let’s create a simple flow where a user clicks a button, leading to a new page:
The code creates a simple UI animation for a homepage displaying a button. When the button is clicked, it fades slightly to simulate pressing, and then the homepage and button fade out while a new page fades in, creating a transition effect.
If you think of it, scrolling is one of the most natural interactions in modern web and app design. Whether moving between sections on a landing page or smoothly revealing content, well-designed scroll animations make the experience feel fluid. Let me show you:
This animation shows a scrolling effect by moving sections of a webpage upward, simulating how content shifts as a user scrolls. It is a simple way to visualize transitions that make the UI feel smooth and engaging.
Wrapping Up
Manim makes it easier to show how users interact with a design. You can animate navigations, interactions, and user behaviors to understand better how design works in action. Is there more to explore? Definitely! You can take these simple examples and build on them by adding more complex features.
But what I hope you take away from all of this is that subtle animations can help communicate and clarify concepts and that Manim is a library for making those sorts of animations. Traditionally, it’s used to help explain mathematical and scientific concepts, but you can see just how useful it can be to working in front-end development, particularly when it comes to highlighting and visualizing UI changes.
","description":"Animation makes things clearer, especially for designers and front-end developers working on UI, prototypes, or interactive visuals. Manim is a tool that lets you create smooth and dynamic animations, not just for the design field but also in math, coding, and beyond, to explain…","guid":"https://www.smashingmagazine.com/2025/04/using-manim-making-ui-animations/","author":"Joas Pambou","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-07T16:00:00.934Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/using-manim-making-ui-animations/1-create-account-replit.png","type":"photo","width":800,"height":381},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/using-manim-making-ui-animations/2-replit-create-app.png","type":"photo","width":800,"height":378},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/using-manim-making-ui-animations/3-replit-choose-template.png","type":"photo","width":800,"height":380},{"url":"https://files.smashing.media/articles/using-manim-making-ui-animations/4-manim-graphs-800px.gif","type":"photo","width":800,"height":450},{"url":"https://files.smashing.media/articles/using-manim-making-ui-animations/5-manim-triangle.gif","type":"photo","width":640,"height":360}],"categories":["Animation","Python","Tools"],"attachments":null,"extra":null,"language":null},{"title":"How To Build A Business Case To Promote Accessibility In Your B2B Products","url":"https://www.smashingmagazine.com/2025/04/how-build-business-case-promote-accessibility-b2b-products/","content":"
How To Build A Business Case To Promote Accessibility In Your B2B Products
When passion for accessibility meets business indifference, what bridges the gap? Gloria Diaz Alonso shares how she turned frustration into strategy — by learning to speak the language of business.
When I started working on promoting accessibility, I was fully convinced of its value and was determined to bring it to the business stakeholders. I thought that the moment I started pushing for it inside the company, my key stakeholders would be convinced, committed, and enlightened, and everyone would start working to make it possible.
I prepared a lovely presentation about the benefits of accessibility. I made sure my presentation reflected that accessibility is the right thing to do: it is good for everyone, including those who don’t have a disability; it improves usability, makes the code more robust, and, of course, promotes inclusivity. I confidently shared it with my stakeholders. I was so excited. Aaaaaand BOOM… I hit a wall. They didn’t show much interest. I repetitively got comments, such as:
It doesn’t bring much value to us.
It doesn’t impact the revenue.
The regulation doesn’t apply to us, so there is no reason.
Accessibility is just for a few people with disabilities.
It would cost too much.
“People don’t manage to understand the real value. How can they say it has no impact?” I thought. After some time of processing my frustration and thinking about it, I realized that maybe I was not communicating the value correctly. I was not speaking the same language, and I was just approaching it from my perspective. It was just a presentation, not a business case.
If there is something I had to learn when working that I didn’t in university, it is that if you want to move things forward in a company, you have to have a business case. I never thought that being a UX Designer would imply building so many of them. The thing with business cases, and that I neglected on my first attempts, is that they put the focus on, well, “the business”.
The ultimate goal is to build a powerful response to the question “Why should WE spend money and resources on this and not on something else?” not “Why is it good?” in general.
After some trial and error, I understood a bit better how to tackle the main comments and answer this question to move the conversation forward. Of course, the business case and strategy you build will depend a lot on the specific situation of your company and your product, but here is my contribution, hoping it can help.
In this article, I will focus on two of the most common situations: pushing for accessibility in a new product or feature and starting to bring accessibility to existing products that didn’t consider it before.
Implementing accessibility has a cost. Everything in a project has a cost. If developers are solving accessibility issues, they are not working on new features, so at the very least, you have to consider the opportunity cost. You have to make sure that you transform that cost into an investment and that that investment provides good results. You need to provide some more details on how you do it, so here are the key questions that help me to build my case:
Why should we spend money and resources on this and not on something else?
What exactly do we want to do?
What are the expected results?
How much would it cost?
How can I make a decision?
Why Should We Spend Money And Resources On This And Not On Something Else?
Risk Prevention
There is a good chance that your stakeholders have heard about accessibility due to the regulations. In the past years, accessibility has become a hot topic, mainly motivated by the European Accessibility Act (EAA), the Web Accessibility Directive (WAD) in Europe or the Americans with Disabilities Act (ADA), and the Section 508 of the Rehabilitation Act in the US and equivalent regulations on other countries. They should definitely be aware of them. However, unless they are from the legal department, they may not need to know every detail; just having an overview should be enough to understand the landscape. You can simplify it a bit, so no one panics.
One of the most useful slides I use is a summary table of the regulations with some key information:
What is the goal of the regulation?
Who is it targeting?
Relevant deadlines.
How does it affect us? This is essential information that you have to adapt to your business context. If you have some B2C or supply to the government, you may be affected. Even if you are pure private B2B, you will be partly affected, as more and more clients may include accessibility as a requirement for all the software they purchase.
If your company operates only in one country, it would be a good idea to include a summary of your country-specific regulations.
A simplified version of the regulation helps stakeholders to feel more comfortable and understand better how they are impacted by it. (Large preview)
In addition, explain how the WCAG relates to the regulation. In the end, it is a third-party international standard used as the baseline for most official laws and directives and comes up in conversations quite often.
Keep in mind that using the regulation to motivate your case can work, but only to some point. We are aware that the regulation about accessibility is getting stronger and the requirements are affecting a good number of companies, especially big companies, but still not everyone. If you only base your case on it, the easy answer is, “Yeah, well, but we are not required to do it”.
If we start working now we will have time to prepare. If we consider accessibility for all the new features and projects, the cost won’t be affected much, and we will be prepared for the future.
However, many companies still don’t see the urgency of working on it if they are not directly required to do so by the regulation yet, and it is not certain that they will need to do it in the future. They prefer not to focus on it until that moment arrives. It is not necessarily a problem to be prioritized now, and there may be more urgent matters.
They should be aware of the regulations and the situation. We should show them how they could be affected, but if we don’t show the real value that accessibility brings to the products and the company, the conversation may end there.
Explore If It Can Be A Competitive Advantage
Big companies are starting to consider accessibility as part of their procurement process, which means that it is a hard requirement to become a provider, a checkbox in the selection process. You can try reaching out to your sales department to see if any clients are asking about your plans regarding accessibility compliance. If so, make sure you document them in the business case. Include some rough background research about those clients:
Are they strategic clients?
Are they clients who already have one of our products and want to expand?
How much revenue can they potentially bring?
Are they important companies in the industry that others may use as a reference?
Was it a one-time question?
Did they try to push for it?
The potential revenue and interest from important clients can be a good motivation.
In addition, try to find out if your competitors care about accessibility or are compliant. You can go to their website and see if they have an accessibility statement, if they have any certification by external parties (normally on the footer), if they include their accessibility level on their sales materials, or just try basic keyboard navigation and run an automatic checker to see what their situation is. If none of them are compliant or their accessibility level is really low, becoming compliant or implementing accessibility may be a competitive advantage for you, a differentiator. On the other hand, if they are compliant and you are not, you may lose some deals because of it.
To sum up, check clients’ interest in the topic, compare the situation of different competitors, and see if accessibility could be a potential revenue generator.
Showcase The Value It Brings To Your Users
Depending on the industries your product focuses on, the assumption may be that you don’t have a big user base of people with disabilities, and therefore, your users won’t benefit much from accessibility.
Accessibility helps everyone, and if you are reading this article, it is probably because you agree with it. But that statement sounds too generic and a bit theoretical, so it is important to provide specific and accurate examples around your users, in particular, that help people visualize it.
Think of your user base. What characteristics do they have? In which situations do they use your software? Maybe most of your users don’t have a disability, or you don’t even have the data about it, but they are office workers who use your software a lot, and having good keyboard navigation would help them to be more efficient. Maybe most of them are over fifty years old and can benefit from adapting the font size. They might have to use the software in the open air and are affected by sun glare, so they need high contrast between elements, or they have to wear gloves and prefer larger target sizes.
And I would say you always have to account for neurodiversity. The idea is to identify in which everyday situations your users face they can benefit from accessibility, even if they don’t have a disability.
Another key thing is to look for specific feedback from your users and customers on accessibility. If you are lucky enough to have an insight repository, look for anything related. Keep in mind that people can be asking about accessibility without knowing that they are asking for accessibility, so don’t expect to find all the insights directly with an “accessibility” tag, but rather search for related keywords in the “user’s vocabulary” (colors, hard to click, mobile devices, zoom, keyboard, error, and so on).
If you don’t have access to a repository, you can contact customer service and try to find out help requests or feedback about it with them. Anything you find is evidence that your users, your specific users, benefit from accessibility.
Highlight The Overlap With Good Practices
Accessibility overlaps heavily with best practices for usability, design, and development. Working on it helps us improve the overall product quality without, in some cases, adding extra effort.
In terms of design, the overlap between accessibility improvements and usability improvements is really huge. Things like writing precise error messages, having a clear page structure, relying on consistency, including clear labels and instructions, or keeping the user in control are some examples of the intersection. To visualize it, I like taking the 10 usability heuristics of Nielsen Norman and relating them to design-related success criteria from the WCAG.
There is a big overlap between the usability heuristics and the accessibility success criteria that highlights the positive impact of accessibility on general usability. (Large preview)
For the developers, the work on accessibility creates a more structured code that is easier to understand. Some of the key aspects are the use of markup and the proper order of the code. In addition, the use of landmarks is key for managing responsive interfaces and, of course, choosing the most adequate component for the specific functionality needed and identifying it correctly with unique labels prevents the product from having unexpected behaviors.
As for the QA team, the test that they perform can vary a lot based on the product, but testing the responsiveness is normally a must, as well as keyboard navigation since it increases the efficiency of repetitive tasks.
Considering accessibility implies having clear guidelines that help you to work in the correct direction and overlap with things that we should already be doing.
What Exactly Do We Want To Do?
As we said, we are going to focus on two of the most common situations: pushing for accessibility in a new product or feature and starting to incorporate accessibility into existing products that didn’t consider it before.
New Products Or Features
If you are about to build a product from scratch, you have a wonderful opportunity to apply an accessibility-first approach and consider accessibility by default from the very beginning. This approach allows you to minimize the number of accessibility issues that end up reaching the user and reduces the cost of rework when trying to fix them or when looking for compliance.
One of the key things you need to successfully apply this approach is considering accessibility as a shared responsibility. The opposite of an accessibility-first approach is the retroactive consideration of accessibility. When you only care for accessibility after the implementation and run an audit on the released product, you will find all the issues that accumulated. Plenty of them could have been easily solvable if you knew them when you were designing or coding, but solving them afterward becomes complicated.
For example, if you only considered drag and drop for rearranging a list of items, now you have to rethink the interaction process and make sure it works in all the cases, devices, and so on. If single-point interactions were a requirement from the beginning, you would just implement them naturally and save time.
Applying an accessibility-first approach means that everyone has to contribute.
The POs have to make sure that accessibility is included as a requirement and that people have the time and resources to cover it.
Designers have to follow best practices and guidelines to make sure the design itself is accessible.
The devs should do the same, include markup and proper semantics, and follow the guidelines for accessible code.
QAs are the final filter before the product reaches the user. They should try to pick as much as possible so it can get fixed.
If everyone shares the ownership and spends a bit more time on including accessibility in their task, the overall result will have a good base. Of course, you may still need to tackle some specific issues with an expert, and when auditing the final product, you will probably still find some issues that escaped the process, but the number will be drastically lower.
Sharing the ownership of accessibility helps to make the topic more approachable. (Large preview)
In addition, the process of auditing your product can get much lighter. Running an accessibility audit means first defining who will do it: is it internal or external? If it is external, which providers? How long would it take to negotiate the contract?
Afterward, you have to set the scope of the audit. It is impossible to check the full product, so you start by checking the most important workflows and key pages. Then, you will do the analysis. The result is normally a list of issues prioritized based on the user impact and some recommendations for remediating it.
Once you have the issues, you have to plan the remediation and figure out how much capacity from the teams we have to allocate to it based on when we want to have the fixes ready. You also have to group similar issues together to prevent the change of context during remediation, increase efficiency, and eliminate all duplicated issues (the auditors may not know the architecture of the product, so you may find several issues documented that, in reality, are just one because you are using the same component).
Considering this full process, for a large product, you can easily spend three months just before you start the actual remediation of the issues. Applying an accessibility-first approach means that the number of issues that reach the audit of the released product is much lower, so the process of auditing and fixing goes much faster.
Identifying and solving possible issues along the product cycle prevents them from accumulating and minimizes the rework. (Large preview)
If you can apply this approach, you should definitely consider the need for educational resources and their impact. You don’t want people just to work on accessibility but to understand the value they are creating when doing it (I am preparing another article that focuses on this). You want them to feel comfortable with the topic and understand what their responsibilities are and which things they have to pay attention to. Check if you already have accessibility resources inside the company that you can use. The important thing for the business is that those resources are going to contribute to reducing the effort.
The implementation of an accessibility-first approach has a very clear learning curve. In the beginning, people will take a bit of extra time to consider accessibility as part of their task, but after they have done it for several tasks, it comes naturally, and the effort needed to implement it really drops.
Think of “not relying on color only for conveying information”, as a designer, the first two times you have to figure something out instead of just changing the color of a text or icon to convey a status, you spend some time looking for solutions, afterward, you already have in mind a bunch of strategies that allow you to directly chose a valid option almost automatically.
Using an accessibility-first approach for new products is a clear strategy, but it is also valid for new features in an existing product. If you include it by default in anything new you create, you are preventing new issues from accumulating.
To sum up, applying an accessibility-first approach is really beneficial.
If you can implement an accessibility-first approach, do it.
Existing Products Or Features
If you try to bring accessibility to legacy products that have been running for many years, an accessibility-first approach may not be enough. In these cases, there are a million topics competing for priority and resources. Accessibility may be perceived as a massive effort that brings reduced value.
You may face a product that can have a big technical debt, that may not have a big user base of people with disabilities, or in which the number of existing accessibility issues is so overwhelming that you would need five years to solve them. You won´t be able to move forward if you try to solve all the problems at once. Here are some of the strategies that have worked for me to kick off the work on accessibility.
Start by checking the Design System. If the Design System has accessibility issues, they are going to be inherited by all the products that use them, so it is better to solve them at a higher level than to have each product team solving the exact same issue in all their products. You can begin by taking a quick look at it:
Does it consider color contrast?
And target size?
Does the documentation include any accessibility considerations or guidelines?
Are there color-dependent components?
If you have a dedicated team for the Design System, you can also reach out to them. You can find out what is their level of awareness on the topic. If they don’t have much knowledge, you can give them an introduction or help them identify and fix the knowledge gaps they have.
If you notice some issues, you can organize a proper audit of the design system from the design and development perspective and pair up with them to fix as much as you can. It is a good way of getting some extra hands to help you while tackling strategic issues.
When working on the Design System, you can also spot which components or areas are more complex and create guidelines and documentation together with them to help the teams reuse those components and patterns, leveraging accessibility.
Error messages are a typical example in which you can prevent accessibility issues from appearing with a simple guideline while promoting consistency and usability across the products. (Large preview)
If the Design System is in good shape, you don’t have one, or you prefer to focus only on the product, you need to start by analyzing and fixing the most relevant part. You have to set a manageable scope. I recommend taking the most relevant workflows and the ones the users use the most. Two or three of them could be a good start. Inside the workflows, try picking the pages that have different structures so you can have a representative sample, for instance, one with a form, a table, plain text, lots of images, and so on. In many cases, the pages that share the same structure share the same problems, so having more variety in the sample helps you to pick more critical issues.
Picking pages with different structures can help you to identify a more representative sample of critical issues and blockers. (Large preview)
Once you have chosen the workflows and screens, you can audit them, but with a reduced scope. If your product has never considered accessibility, it is likely to have way too many issues. When doing an audit, you normally test compliance with all the success criteria (59 if we consider levels A and AA) and do manual testing with different browsers, screen readers, and devices. Then, document each of the issues, prioritize them, and include the remediation in the planning.
It takes a lot of time, and you may get hundreds of issues, or even thousands, which makes you feel like “I will never get this done” and if you even get there like “I am finally done with this I don’t want to hear about it for a long time”. If this is the situation you are forecasting for the business, most likely, you will not get the green light for the project. It is too much of an investment. So unless they have hard requirements for compliance coming from some really strategic customers, you are going to get stuck.
As we said, ideally, we would do a complete audit and fix everything, but delivering some value is better than delivering nothing, so instead, you can propose a reduced first audit to get you on the move. Rather than doing a detailed audit of all 59 criteria, I normally focus on these three things:
Running an automatic check. It is very fast and prepares the report by itself. Though it is only capable of finding around 30% of the issues, it is a good start.
Doing basic manual keyboard testing, checking that all the interactive elements are focusable, in the logical order, and following the expected keyboard command interactions.
Doing a quick responsive test. Basically, what breaks when I change the viewport? Do I have information on top of each other when I zoom in? Can I still use the functionalities?
With these three tests, you will already have a large number of critical issues and blockers to solve while staying close to the overlapping area between accessibility and good design and development practices and not taking too much time.
Running a simplified audit helps you find many critical issues to kick off the project in a reduced time. (Large preview)
Remember, the goal of this first audit is to get easy-to-identify critical issues to have a starting point, not to solve all the problems. In this way, you can start delivering value while building the idea that accessibility is not a one-time fix but a continuous process. In addition, it gives you a lot of insights into the aspects in which the teams need guidelines and training, as well as defining the minimum things that the different roles have to consider when working to reduce the number of future accessibility issues. You want to take it as a learning opportunity.
Note: Accessibility insights is a good tool for auditing by yourself as it includes explanations and visual helpers and guides you through the process. Screen reader testing should be added to the audit scope if you can, but it can be hard to do it if you have never done it before, and some of the issues will already be highlighted during the automatic check and the keyboard testing.
What Are The Expected Results?
The results you want to achieve are going to have a huge impact on the strategy.
Are you aiming for compliance or bringing value to the users and preparing for the future?
This is a key question you have to ask yourself.
Compliance with the regulation is pretty much a binary option. To be compliant with the WCAG at a certain level, let’s say AA, you should pass all the success criteria for that level and the previous ones. Each success criterion intends to help people with a specific disability. If you try to be compliant only with some of them, you would be leaving people out. Of course, in reality, there are always going to be some minor issues and violations of a success criterion that reach the user. But the idea is that you are either compliant or not. With this in mind, you have to make sure that you consider several audits, ideally by a certified external party that can reassure your compliance.
Trying to become compliant with a product that has never considered accessibility can become quite a large task, so it may not be the best first step. But, in general, if you are aiming for full compliance, it may be because you have strong motivations coming from the risk reduction and competitive advantage categories.
On the other hand, if your goal is to start including accessibility in the product to prepare for the future and help users, you will probably target a lighter result. Rather than looking for perfection, you want to start to have a level that is good enough as soon as possible.
You can focus on identifying and solving the most critical issues for the users and on applying an accessibility-first approach to new developments. The result is probably not compliant and not perfect, but it eliminates critical barriers without a huge effort. It will have basic accessibility to help users, and you can apply an iterative approach to improve the level.
While accessibility compliance has a binary result, accessibility is a spectrum, and there is great value in working on accessibility even if you don’t reach compliance. (Large preview)
Keep in mind that it is impossible to have a 100% accessible product. As the product evolves, there are always going to be some issues that escape the test and reach the user. The important thing is to work to ensure that these issues are minor ones and not blockers or critical ones. If you can get the resources to fix the most important problems, you are already bringing value, even if you don’t reach compliance.
How Much Would It Cost?
An accessibility-first approach typically means you have to assign 5 to 10% of the product capacity to apply it (the number goes down to 5% due to the learning curve). The underlying risk, though, is that the business still considers these percentages to be too high. To prevent this from happening, you have to highlight strongly the side value of accessibility and the huge overlap it has with the design and development best practices we mentioned above.
In addition, to help justify the cost, you can look for examples inside your company that allow you to compare it with the cost of retroactive fitting accessibility. If there are not any, you can look for some basic issue, such as the lack of structure of a page, and use it to illustrate that in order to add the structure afterward, once the product is released you would need to do a substantial rework or ask a developer to help you to estimate the effort of adding a heading structure to 40 different pages after released.
As for introducing accessibility in existing products, the cost can be quite hard to estimate. Having a rough audit can help you understand how many critical issues you have at the start, and you can ask developers to help you estimate some of the changes to get a rough idea.
If you attach accessibility improvements to usability or UX ones, then it doesn’t really need dedicated capacity. For example, if some of the inputs are lacking labels or instructions and your users get confused, it is a usability problem that overlaps with accessibility. Normally, accessibility issues related to the Reflow criteria are quite time-consuming, as they rely on a proper responsive design. But isn’t it just good design?
I recommend checking the list of features in the product backlog and the feedback from the users to find out which accessibility improvements can you combine with them, especially with features that have priority according to the product strategy (such us, enabling the product on mobile devices, or improving efficiency by promoting keyboard navigation).
The bigger the overlap, the more you can reduce the effort. This said, I would say it is better not to make it too ambitious when you are starting. It is better to start moving, even if it is slowly, than to hit a wall. When you manage to start with it, you will spark curiosity in other people, gain allies, and have results that can help you to expand the project and the scope.
You can also consider an alternative approach, define an affordable capacity that you could dedicate based on your product situation (maybe 10 or 15%), and set the scope to match it.
Finally, it is also important to gather the existing resources you have access to, internal or external. If there are guidelines, if the Design System is accessible, if there are related company goals, educational sessions… Whatever is there already is something you can use, and that doesn’t add to the total cost of the project. If the Design System is accessible, it would be a waste if we don’t leverage it and make sure we implement the components in an accessible way. You can put together an overview to show the support you have.
How Can I Make A Decision?
Business stakeholders are short on time and have many things in mind. If you want them to make a decision and consider all the factors when making it, you have to help them visualize them together in an executive summary.
If there is a single direction that you are trying to promote, for example, implementing an accessibility-first approach for new products and features, you can put on a slide the three key questions we mentioned above and the answers to those questions:
What exactly do we want to do?
What are the expected results?
How much would it cost?
The executive summary shall contain all the key information on what you are trying to achieve. In addition to answers to three main questions, you can include metrics, an expected timeline, or other relevant information. (Large preview)
If there are different directions you can take, for example, you want to start to incorporate accessibility into products that meet certain conditions, or you can afford different capacities dedicated to accessibility for different products, you can use a decision-making diagram or a decision-making matrix. The idea is to visualize the different criteria that can affect the strategy and the adapted result for each of them.
For example,
Do I have clients inquiring about accessibility?
Is the product already using an accessible design system?
Are we considering opening part of the product to B2C?
Is the product going to take responsiveness and mobile interactions as a priority?
Do we want to expand the product target market to governmental institutions?
Mapping out the factors and possible directions can help you and decision-makers understand which products can be a better starting point for accessibility, where it makes sense to allocate more capacity, and which possibilities are open. This becomes especially relevant when you are trying to bring accessibility to several products at the same time.
The decision-making diagram provides a good overview of the different options in the strategy while illustrating the reasoning. (Large preview)
Whatever representation you choose for your conditions, make sure it visualizes the answers to those questions to facilitate the decision-making process and get approval. I generally include it at the end of the presentation, or even at the beginning and the end.
Keep It Up!
Even if your business case is really good, sometimes you don’t get to have a big impact due to circumstances. It may be that there is a big shift in priorities, that the stakeholders change, that your contract ends (if you are a consultant), or that the company just doesn’t have the resources to work on it at that moment, and it gets postponed.
I know it can be very frustrating, but don´t lose the motivation. Change can move quite slowly, especially in big companies, but if you have put the topic into people’s minds, it will be back on the table. In the meantime, you can try organizing evangelization sessions for the teams to find new allies and share your passion. You may need to wait a bit more, but there will be more opportunities to push the topic again, and since people already know about it, you will probably get more support. You have initiated the change, and your effort will not be lost.
Key Points
Highlight the specific impact of accessibility on your specific products and users.
Check if accessibility could be a competitive differentiator.
Leverage the overlap between accessibility and good practices or product features to reduce the effort.
Include the existing resources and how you can benefit from them.
Clarify the expected result based on the effort.
Visualize the key points of the strategy to help the decision-making and approval process.
It is better to start with a small scope and iterate than not start at all.
","description":"When passion for accessibility meets business indifference, what bridges the gap? Gloria Diaz Alonso shares how she turned frustration into strategy — by learning to speak the language of business. 28 min read\\nAccessibility, Business, Workflow\\nShare on Twitter, LinkedIn\\n\\nWhen I…","guid":"https://www.smashingmagazine.com/2025/04/how-build-business-case-promote-accessibility-b2b-products/","author":"Gloria Diaz Alonso","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-03T16:00:00.327Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png","type":"photo","width":800,"height":664},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg","type":"photo","width":800,"height":606},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg","type":"photo","width":800,"height":401},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg","type":"photo","width":800,"height":366},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg","type":"photo","width":800,"height":362},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg","type":"photo","width":800,"height":173},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg","type":"photo","width":800,"height":264},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png","type":"photo","width":800,"height":384},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg","type":"photo","width":800,"height":218},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png","type":"photo","width":800,"height":451}],"categories":["Accessibility","Business","Workflow"],"attachments":null,"extra":null,"language":null},{"title":"Building A Drupal To Storyblok Migration Tool: An Engineering Perspective","url":"https://www.smashingmagazine.com/2025/04/building-drupal-storyblok-migration-tool-engineering-perspective/","content":"
Building A Drupal To Storyblok Migration Tool: An Engineering Perspective
In this article, Edoardo Dusi shares the engineering and architectural choices made by the team at Storyblok and how real-world migration challenges were addressed using modern PHP practices.
Content management is evolving. The traditional monolithic CMS approach is giving way to headless architectures, where content management and presentation are decoupled. This shift brings new challenges, particularly when organizations need to migrate from legacy systems to modern headless platforms.
Our team encountered this scenario when creating a migration path from Drupal to Storyblok. These systems handle content architecture quite differently — Drupal uses an entity-field model integrated with PHP, while Storyblok employs a flexible Stories and Blocks structure designed for headless delivery.
If you just need to use a script to do a simple — yet extensible — content migration from Drupal to Storyblok, I already shared step-by-step instructions on how to download and use it. If you’re interested in the process of creating such a script so that you can write your own (possibly) better version, stay here!
We observed that developers sometimes struggle with manual content transfers and custom scripts when migrating between CMSs. This led us to develop and share our migration approach, which we implemented as an open-source tool that others could use as a reference for their migration needs.
Our solution combines two main components: a custom Drush command that handles content mapping and transformation and a new PHP client for Storyblok’s Management API that leverages modern language features for improved developer experience.
We’ll explore the engineering decisions behind this tool’s development, examining our architectural choices and how we addressed real-world migration challenges using modern PHP practices.
The journey from Drupal to Storyblok presents unique architectural challenges. The fundamental difference lies in how these systems conceptualize content: Drupal structures content as entities with fields, while Storyblok uses a component-based approach with Stories and Blocks.
Initial Requirements Analysis
A successful migration tool needs to understand both systems intimately. Drupal’s content model relies heavily on its Entity API, storing content as structured field collections within entities. A typical Drupal article might contain fields for the title, body content, images, and taxonomies. Storyblok, on the other hand, structures content as stories that contain blocks, reusable components that can be nested and arranged in a flexible way. It’s a subtle difference that shaped our technical requirements, particularly around content mapping and data transformation, but ultimately, it’s easy to see the relationships between the two content models.
Technical Constraints
Early in development, we identified several key constraints. Storyblok’s Management API enforces rate limits that affect how quickly we can transfer content. Media assets must first be uploaded and then linked. Error recovery becomes essential when migrating hundreds of pieces of content.
The brand-new Management API PHP client handles these constraints through built-in retry mechanisms and response validation, so in writing a migration script, we don’t need to worry about them.
Tool Selection
We chose Drush as our command-line interface for several reasons. First, it’s deeply integrated with Drupal’s bootstrap process, providing direct access to the Entity API and field data. Second, Drupal developers are already familiar with its conventions, making our tool more accessible.
The decision to develop a new Management API client came from our experience with the evolution of PHP since we developed the first PHP client, and our goal to provide developers with a dedicated tool for this specific API that offered an improved DX and a tailored set of features.
This groundwork shaped how we approached the migration workflow.
The Building Blocks: A New Management API Client
A content migration tool interacts heavily with Storyblok’s Management API &mdash, creating stories, uploading assets, and managing tags. Each operation needs to be reliable and predictable. Our brand-new client simplifies these interactions through intuitive method calls: The client handles authentication, request formatting, and response parsing behind the scenes, letting devs focus on content operations rather than API mechanics.
Design For Reliability
Content migrations often involve hundreds of API calls. Our client includes built-in mechanisms for handling common scenarios like rate limiting and failed requests. The response handling pattern provides clear feedback about operation success: A logger can be injected into the client class, as we did using the Drush logger in our migration script from Drupal.
Improving The Development Experience
Beyond basic API operations, the client reduces cognitive load through predictable patterns. Data objects provide a structured way to prepare content for Storyblok: This pattern validates data early in the process, catching potential issues before they reach the API.
Designing The Migration Workflow
Moving from Drupal’s entity-based structure to Storyblok’s component model required careful planning of the migration workflow. Our goal was to create a process that would be both reliable and adaptable to different content structures.
Command Structure
The migration leverages Drupal’s entity query system to extract content systematically. By default, access checks were disabled (a reversible business decision) to focus solely on migrating published nodes.
Key Steps And Insights
Text Fields
Required minimal effort: values like value() mapped directly to Storyblok fields.
Rich text posed no encoding challenges, enabling straightforward 1:1 transfers.
Handling Images
Upload: Assets were sent to an AWS S3 bucket.
Link: Storyblok’s Asset APIupload() method returned an object_id, simplifying field mapping.
Assign: The asset ID and filename were attached to the story.
Managing Tags
Tags extracted from Drupal were pre-created via Storyblok’s Tag API (optional but ensures consistency).
When assigning tags to stories, Storyblok automatically creates missing ones, streamlining the process.
Why Staged Workflows Matter
The migration avoids broken references by prioritizing dependencies (assets first, tags next, content last). While pre-creating tags add control, teams can adapt this logic—for example, letting Storyblok auto-generate tags to save time.
Flexibility is key: every decision (access checks, tag workflows) can be adjusted to align with project goals.
Real-World Implementation Challenges
Migrating content between Drupal and Storyblok presents challenges that you, as the implementer, may encounter.
For example, when dealing with large datasets, you may find that Drupal sites with thousands of nodes can quickly hit the rate limits enforced by Storyblok’s management API. In such cases, a batching mechanism for your requests is worth considering. Instead of processing every node at once, you can process a subset of records, wait for a short period of time, and then continue.
Alternatively, you could use the createBulk method of the Story API in the Management API, which allows you to handle multiple story creations with built-in rate limit handling and retries. Another potential hurdle is the conversion of complex field types, especially when Drupal’s nested structures or Paragraph fields need to be mapped to Storyblok’s more flexible block-based model.
One approach is first to analyze the nesting depth and structure of the Drupal content, then flatten deeply nested elements into reusable Storyblok components while maintaining the correct hierarchy. For example, a paragraph field with embedded media and text can be split into blocks within Storyblok, with each component representing a logical section of content. By structuring data this way before migration, you ensure that content remains editable and properly structured in the new system.
Data consistency is another aspect that you need to manage carefully. When migrating hundreds of records, partial failures are always risky. One approach to managing this is to log detailed information for each migration operation and implement a retry mechanism for failed operations.
For example, wrapping API calls in a try-catch block and logging errors can be a practical way to ensure that no records are silently dropped. When dealing with fields such as taxonomy terms or tags created on the fly in Storyblok, you may run into duplication issues. A good practice is to perform a check before creating a new tag. This could involve maintaining a local cache of previously created tags and checking against them before sending a create request to the API.
The same goes for images; a check could ensure you don’t upload the same asset twice.
Lessons Learned And Looking Forward
A dedicated API client for Storyblok streamlined interactions, abstracting backend complexity while improving code maintainability. Early use of structured data objects to prepare content proved critical, enabling pre-emptive error detection and reducing API failures.
We also ran into some challenges and see room for improvement:
Encoding issues in rich text (e.g., HTML entities) were resolved with a pre-processing step
Performance bottlenecks with large text/images required memory optimization and refined request handling
Enhancements could include support for Drupal Layout Builder, advanced validation layers, or dynamic asset management systems.
💡 For deeper dives into our Management API client or migration strategies, reach out via Discord, explore the PHP Client repo, or connect with me on Mastodon. Feedback and contributions are welcome!
","description":"In this article, Edoardo Dusi shares the engineering and architectural choices made by the team at Storyblok and how real-world migration challenges were addressed using modern PHP practices. 7 min read\\nCMS, Tools, Workflow, Headless\\nShare on Twitter, LinkedIn\\n\\nContent management is…","guid":"https://www.smashingmagazine.com/2025/04/building-drupal-storyblok-migration-tool-engineering-perspective/","author":"Edoardo Dusi","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-04-01T16:00:00.577Z","media":null,"categories":["CMS","Tools","Workflow","Headless"],"attachments":null,"extra":null,"language":null},{"title":"Blossoms, Flowers, And The Magic Of Spring (April 2025 Wallpapers Edition)","url":"https://www.smashingmagazine.com/2025/03/desktop-wallpaper-calendars-april-2025/","content":"
Blossoms, Flowers, And The Magic Of Spring (April 2025 Wallpapers Edition)
The beginning of the new month is the perfect opportunity to give your desktop a makeover. If you’re looking for some beautiful and unique wallpapers to cater for a bit of inspiration this April, well, this post has got you covered.
Starting the new month with a little inspiration boost — that’s the idea behind our monthly wallpapers series which has been going on for more than fourteen years already. Each month, the wallpapers are created by the community for the community, and everyone who has an idea for a design is welcome to join in — experienced designers just like aspiring artists. Of course, it wasn’t any different this time around.
For this edition, creative folks from all across the globe once again got their ideas flowing to bring some good vibes to your screens. You’ll find their wallpapers compiled below, along with a selection of timeless April favorites from our archives that are just too good to be forgotten. A huge thank-you to everyone who shared their designs with us this month — you’re smashing!
If you too would like to get featured in one of our upcoming wallpapers posts, please don’t hesitate to submit your design. We can’t wait to see what you’ll come up with! Happy April!
You can click on every image to see a larger preview.
We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.
April Blooms And Easter Joy
“April bursts with color, joy, and the magic of new beginnings. As spring awakens, Easter fills the air with wonder — bunnies paint playful masterpieces on eggs, and laughter weaves through cherished traditions. It’s a season to embrace warmth, kindness, and the simple beauty of blooming days.” — Designed by LibraFire from Serbia.
“It’s April, and we’re heading to Tanzania with Jane Goodall, her chimpanzees, and her reflection that we are all important: ‘Every individual matters. Every individual has a role to play. Every individual makes a difference.” — Designed by Veronica Valenzuela from Spain.
“Our April calendar needs not mark any special occasion — April itself is a reason to celebrate. It was a breeze creating this minimal, pastel-colored calendar design with a custom lettering font and plant pattern for the ultimate spring feel.” — Designed by PopArt Studio from Serbia.
“We all look forward to the awakening of a life that spreads its wings after a dormant winter and opens its petals to greet us. Long live spring, long live life.” — Designed by LibraFire from Serbia.
“‘Sweet spring is your time is my time is our time for springtime is lovetime and viva sweet love,’ wrote E. E. Cummings. And we have a question for you: Is there anything more refreshing, reviving, and recharging than nature in blossom? Let it inspire us all to rise up, hold our heads high, and show the world what we are made of.” — Designed by PopArt Studio from Serbia.
“This month is International Guitar Month! Time to get out your guitar and play. As a graphic designer/illustrator seeing all the variations of guitar shapes begs to be used for a fun design. Search the guitar shapes represented and see if you see one similar to yours, or see if you can identify some of the different styles that some famous guitarists have played (BTW, Prince’s guitar is in there and purple is just a cool color).” — Designed by Karen Frolo from the United States.
“We love the art direction, story, and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by Kasra Design from Malaysia.
“March 26 was Solitude Day. To celebrate it, here is the picture about the loneliest house in the world. It is a real house, I found it on Youtube.” — Designed by Vlad Gerasimov from Georgia.
“Inspired by the Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature when we take a look outside.” — Designed by Nils Kunath from Germany.
“It is very common that it rains in April. This year, I am not sure… But whatever… we are just prepared!” — Designed by Verónica Valenzuela from Spain.
“Spring and fresh herbs always feel like they compliment each other. Keeping it light and fresh with this wallpaper welcomes a new season!” — Designed by Susan Chiang from the United States.
“We walked to Oz with our friends. The road is long, but we follow the yellow bricks. Are you coming with us?” — Designed by Veronica Valenzuela from Spain.
“Celebrate National Dolphin Day on April 14th by acknowledging the captivating beauty and importance of dolphins in our oceans!” — Designed by PopArt Studio from Serbia.
“Missing my hometown’s delicious ‘Kai See Hor Fun’ (in Cantonese) that literally translates to ‘Shredded Chicken Flat Rice Noodles’. It is served in a clear chicken and prawn soup with chicken shreds, prawns, spring onions, and noodles.” — Designed by Lew Su Ann from Brunei.
","description":"The beginning of the new month is the perfect opportunity to give your desktop a makeover. If you’re looking for some beautiful and unique wallpapers to cater for a bit of inspiration this April, well, this post has got you covered. 12 min read\\nWallpapers\\nShare on Twitter, LinkedIn\\n\\nS…","guid":"https://www.smashingmagazine.com/2025/03/desktop-wallpaper-calendars-april-2025/","author":"Cosima Mielke","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-03-30T16:00:00.391Z","media":[{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-25-april-blooms-and-easter-joy-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LGKU+*%N?dx]9u=^JEskFi9dv|NH"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-25-walking-among-chimpanzees-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LpOyncR5x]w[?^t7V@ozpJt7WBI;"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-25-eggcited-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LOM#O#rrH?xtw]offlWBD4o}%zV@"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-25-2001-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L5Fr-Fof9G~q?HRjRi%MD*j[%LWC"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-swing-into-spring-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LWR2oN%M-:x]xafkoLj[?]WBE2n%"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e46f3a5-f552-494c-a790-2ea6e0fefa97/apr-20-spring-awakens-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LFEzf-;^IA%1%MxC9t^P1*6AOsXT"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58e505d3-2a5f-40ce-8be0-f284bacd9016/apr-19-inspiring-blossom-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LAQ].p_05RyD~qtKEN$*$$$+-W-m"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8258c4b2-ea98-45d8-9727-8bba2812646d/apr-19-dreaming-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LiJIqXD*_3My~q-;bHV@.7R*IUtQ"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47694eea-aa70-4e2c-a1ac-04d66d9b1360/apr-17-clover-field-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L9R{=9_2bw_N~Wo0o#xvoza~jYaK"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fb9c64b-f5d1-41fe-be48-11a7e77ccaa5/apr-16-rainy-day-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L9GSDW_MX,=~RZnU%DIXx:yDTMpa"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e0f0ee-e850-46d9-af29-662819ebf30e/apr-15-a-time-for-reflection-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LM8rwUNIM|R+o#ayayaz00xaxat7"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3044f60-78ac-448a-9603-45c926378aeb/apr-17-purple-rain-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L3BU*NwPIU?1D*oJ=}%4xYEKt7o4"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5e6958ee-8d8a-45e2-8789-f83e72eeb153/apr-18-wildest-dreams-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LOJIIJ-nIVt7KjIp%Ljt0ho#RPWC"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9f501224-75ff-4f61-84dc-700a6362185a/april-11-prunus-48-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LcK1wI.mN_%2XTs9wbnhOEoJjZWX"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-20-april-fox-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L9SEj%~WyY~B~Wj[WBoft-niR3S$"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee587665-f8be-49e3-b526-5b4b6778d668/apr-17-fairytale-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L26%?PJ:1Gn75?V[}WXSEd$*E+,p"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-22-coffee-morning-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L7P?s,~p_2~p~pfQoft7_2j[9Gae"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2024/apr-23-the-lonliest-house-in-the-world-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LpG6|:V@R*j[}sNHWWoLxZNba}js"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f852d5ba-45e9-450a-a18e-61789bcda9df/apr-15-the-perpetual-circle-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LVO:U?~X%3xu.SoMw{W;^mInNZni"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3f77535-471b-4c15-b34b-aa549c370d67/apr-16-ready-for-april-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LLRMVi?b?w%h?woIxBR.JEbIrojD"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef95403f-b12f-43a4-ace6-2a5e0efc6146/apr-17-happy-easter-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LLRW0D?a?t%M-:V[aeoe?@RQDkox"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2023/apr-19-in-the-river-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LCFFfsD9%J^~TBJ7oM%woJcCodtO"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f65379f3-d09d-4218-9921-513057977894/apr-17-springtime-sage-preview-opt.png","type":"photo","width":800,"height":514,"blurhash":"LFS?Gc~q%Mx[?bj]ofayR%j[ofWB"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e9230d56-af8c-47a3-ae80-cf712b815ec9/apr-15-citrus-passion-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LALPQj%0aQ~o?ZpcIVkB#%#PRPRR"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-22-walking-to-the-wizard-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LPQR:;x]k=%e46VtkoTJ4;VsaJOG"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58076361-5c86-4765-bfe8-1da146f780b1/apr-17-hello-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LIRysg?b?b?b%MofRjay~qj[9Fay"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-24-oceanic-wonders-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"Ld9vUbZ#MJs:ysS5Mys:bZR-W=oz"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/644b4916-4c76-45f5-bb00-f272b5a886a7/apr-16-playful-alien-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L539lUVtHXtltkaeVskVHYozy=VY"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/424e321b-e0e7-451d-afb7-8a67e917f7bc/apr-14-good-day-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LLQAK*T29%-p~ot5WBkC9j$}xAbb"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-19-april-showers-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LcNT+^x@~mt6%1WWX7sT^$j@E3a}"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a62abc10-fedb-42a7-ae53-5ad4d97a9b85/march-12-march-fusion-77-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LXLFUM%Nys%2E1s:Xnw]X:xGR5xD"},{"url":"https://files.smashing.media/articles/desktop-wallpaper-calendars-april-2025/apr-24-do-doodling-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"L9B:1]AdNHpKVgW;o_oe4U$eF3rV"},{"url":"https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1cee84d7-09c2-45e4-bcdc-1299d26941c1/apr-14-ipoh-hor-fun-preview-opt.png","type":"photo","width":800,"height":450,"blurhash":"LQAVmrbu0hocb]f7ixfQ0~jZ]QbI"}],"categories":["Wallpapers"],"attachments":null,"extra":null,"language":null},{"title":"How To Argue Against AI-First Research","url":"https://www.smashingmagazine.com/2025/03/how-to-argue-against-ai-first-research/","content":"
How To Argue Against AI-First Research
Companies have been turning their attention to “synthetic,” AI-driven user testing. However, as convenient as it might seem, it’s dangerous, expensive, and usually diminishes user value. Let’s take a closer look at why exactly it is problematic and how we can argue against it to make a case for UX research with real users. Part of Smart Interface Design Patterns by yours truly.
With AI upon us, companies have recently been turning their attention to “synthetic” user testing — AI-driven research that replaces UX research. There, questions are answered by AI-generated “customers,” human tasks “performed” by AI agents.
However, it’s not just for desk research or discovery that AI is used for; it’s an actual usability testing with “AI personas” that mimic human behavior of actual customers within the actual product. It’s like UX research, just… well, without the users.
One of the tools to conduct “synthetic testing,” or AI-generated UX research, without users. (Source: Synthetic Users) (Large preview)
If this sounds worrying, confusing, and outlandish, it is — but this doesn’t stop companies from adopting AI “research” to drive business decisions. Although, unsurprisingly, the undertaking can be dangerous, risky, and expensive and usually diminishes user value.
This article is part of our ongoing series on UX. You can find more details on design patterns and UX strategy in Smart Interface Design Patterns 🍣 — with live UX training coming up soon. Free preview.
Fast, Cheap, Easy… And Imaginary
Erika Hall famously noted that “design is only as ‘human-centered’ as the business model allows.” If a company is heavily driven by hunches, assumptions, and strong opinions, there will be little to no interest in properly-done UX research in the first place.
The opportunity for business value is in delivering user value when users struggle. By Erika Hall. (Large preview)
But unlike UX research, AI research (conveniently called synthetic testing) is fast, cheap, and easy to re-run. It doesn’t raise uncomfortable questions, and it doesn’t flag wrong assumptions. It doesn’t require user recruitment, much time, or long-winded debates.
And: it can manage thousands of AI personas at once. By studying AI-generated output, we can discover common journeys, navigation patterns, and common expectations. We can anticipate how people behave and what they would do.
Well, that’s the big promise. And that’s where we start running into big problems.
LLMs Are People Pleasers
Good UX research has roots in what actually happened, not what might have happened or what might happen in the future.
By nature, LLMs are trained to provide the most “plausible” or most likely output based on patterns captured in its training data. These patterns, however, emerge from expected behaviors by statistically “average” profiles extracted from content on the web. But these people don’t exist, they never have.
By default, user segments are not scoped and not curated. They don’t represent the customer base of any product. So to be useful, we must eloquently prompt AI by explaining who users are, what they do, and how they behave. Otherwise, the output won’t match user needs and won’t apply to our users.
Every LLM hallucinates, but newer models perform better at some tasks, such as summarizing. By Nature.com. (Large preview)
In comparison, researchers are only able to define what’s relevant as the process unfolds. In actual user testing, insights can help shift priorities or radically reimagine the problem we’re trying to solve, as well as potential business outcomes.
Real insights come from unexpected behavior, from reading behavioral clues and emotions, from observing a person doing the opposite of what they said. We can’t replicate it with LLMs.
AI User Research Isn’t “Better Than Nothing”
Pavel Samsonov articulates that things that sound like customers might say them are worthless. But things that customers actually have said, done, or experienced carry inherent value (although they could be exaggerated). We just need to interpret them correctly.
AI user research isn’t “better than nothing” or “more effective.” It creates an illusion of customer experiences that never happened and are at best good guesses but at worst misleading and non-applicable. Relying on AI-generated “insights” alone isn’t much different than reading tea leaves.
The Cost Of Mechanical Decisions
We often hear about the breakthrough of automation and knowledge generation with AI. Yet we often forget that automation often comes at a cost: the cost of mechanical decisions that are typically indiscriminate, favor uniformity, and erode quality.
Some research questions generated by AI could be useful, others useless. By Maria Rosala. (Large preview)
As Maria Rosala and Kate Moran write, the problem with AI research is that it most certainly will be misrepresentative, and without real research, you won\'t catch and correct those inaccuracies. Making decisions without talking to real customers is dangerous, harmful, and expensive.
Beyond that, synthetic testing assumes that people fit in well-defined boxes, which is rarely true. Human behavior is shaped by our experiences, situations, habits that can’t be replicated by text generation alone. AI strengthens biases, supports hunches, and amplifies stereotypes.
Triangulate Insights Instead Of Verifying Them
Of course AI can provide useful starting points to explore early in the process. But inherently it also invites false impressions and unverified conclusions — presented with an incredible level of confidence and certainty.
Starting with human research conducted with real customers using a real product is just much more reliable. After doing so, we can still apply AI to see if we perhaps missed something critical in user interviews. AI can enhance but not replace UX research.
Triangluate linear customer journeys by layering them on top of each other to identify the most frequent areas of use. By John Cutler. (Large preview)
Also, when we do use AI for desk research, it can be tempting to try to “validate” AI “insights” with actual user testing. However, once we plant a seed of insight in our head, it’s easy to recognize its signs everywhere — even if it really isn’t there.
Instead, we study actual customers, then triangulate data: track clusters or most heavily trafficked parts of the product. It might be that analytics and AI desk research confirm your hypothesis. That would give you a much stronger standing to move forward in the process.
Wrapping Up
I might sound like a broken record, but I keep wondering why we feel the urgency to replace UX work with automated AI tools. Good design requires a good amount of critical thinking, observation, and planning.
To me personally, cleaning up after AI-generated output takes way more time than doing the actual work. There is an incredible value in talking to people who actually use your product.
I would always choose one day with a real customer instead of one hour with 1,000 synthetic users pretending to be humans.
Meet Measure UX & Design Impact (8h), a new practical guide for designers and UX leads to measure and show your UX impact on business. Use the code 🎟 IMPACT to save 20% off today. Jump to the details.
","description":"Companies have been turning their attention to “synthetic,” AI-driven user testing. However, as convenient as it might seem, it’s dangerous, expensive, and usually diminishes user value. Let’s take a closer look at why exactly it is problematic and how we can argue against it to…","guid":"https://www.smashingmagazine.com/2025/03/how-to-argue-against-ai-first-research/","author":"Vitaly Friedman","authorUrl":null,"authorAvatar":null,"publishedAt":"2025-03-27T16:00:00.471Z","media":[{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-to-argue-against-ai-first-research/user-research-without-users-opt.png","type":"photo","width":800,"height":499},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-to-argue-against-ai-first-research/value-exchange-opt.png","type":"photo","width":800,"height":450},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-to-argue-against-ai-first-research/hallucination-opt.png","type":"photo","width":800,"height":597},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-to-argue-against-ai-first-research/ai-prompt-research-questions-opt.png","type":"photo","width":800,"height":874},{"url":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-to-argue-against-ai-first-research/layering-customer-journeys-opt.png","type":"photo","width":800,"height":451},{"url":"https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png","type":"photo","width":900,"height":466}],"categories":["Design","UX"],"attachments":null,"extra":null,"language":null},{"title":"Adaptive Video Streaming With Dash.js In React","url":"https://www.smashingmagazine.com/2025/03/adaptive-video-streaming-dashjs-react/","content":"
Adaptive Video Streaming With Dash.js In React
HTML <video> is the de facto element we turn to for embedding video content, but it comes with constraints. For example, it downloads the video file linearly over HTTP, which leads to performance hiccups, especially for large videos consumed on slower connections. But with adaptive bitrate streaming, we can split the video into multiple segments at different bitrates and resolutions.
I was recently tasked with creating video reels that needed to be played smoothly under a slow network or on low-end devices. I started with the native HTML5 <video> tag but quickly hit a wall — it just doesn’t cut it when connections are slow or devices are underpowered.
After some research, I found that adaptive bitrate streaming was the solution I needed. But here’s the frustrating part: finding a comprehensive, beginner-friendly guide was so difficult. The resources on MDN and other websites were helpful but lacked the end-to-end tutorial I was looking for.
That’s why I’m writing this article: to provide you with the step-by-step guide I wish I had found. I’ll bridge the gap between writing FFmpeg scripts, encoding video files, and implementing the DASH-compatible video player (Dash.js) with code examples you can follow.
Going Beyond The Native HTML5 <video> Tag
You might be wondering why you can’t simply rely on the HTML <video> element. There’s a good reason for that. Let’s compare the difference between a native <video> element and adaptive video streaming in browsers.
Progressive Download
With progressive downloading, your browser downloads the video file linearly from the server over HTTP and starts playback as long as it has buffered enough data. This is the default behavior of the <video> element.
<video src=\\"rabbit320.mp4\\" />\\n
When you play the video, check your browser’s network tab, and you’ll see multiple requests with the 206 Partial Content status code.
It uses HTTP 206 Range Requests to fetch the video file in chunks. The server sends specific byte ranges of the video to your browser. When you seek, the browser will make more range requests asking for new byte ranges (e.g., “Give me bytes 1,000,000–2,000,000”).
In other words, it doesn’t fetch the entire file all at once. Instead, it delivers partial byte ranges from the single MP4 video file on demand. This is still considered a progressive download because only a single file is fetched over HTTP — there is no bandwidth or quality adaptation.
If the server or browser doesn’t support range requests, the entire video file will be downloaded in a single request, returning a 200 OK status code. In that case, the video can only begin playing once the entire file has finished downloading.
The problems? If you’re on a slow connection trying to watch high-resolution video, you’ll be waiting a long time before playback starts.
Adaptive Bitrate Streaming
Instead of serving one single video file, adaptive bitrate (ABR) streaming splits the video into multiple segments at different bitrates and resolutions. During playback, the ABR algorithm will automatically select the highest quality segment that can be downloaded in time for smooth playback based on your network connectivity, bandwidth, and other device capabilities. It continues adjusting throughout to adapt to changing conditions.
This magic happens through two key browser technologies:
Media Source Extension (MSE) It allows passing a MediaSource object to the src attribute in <video>, enabling sending multiple SourceBuffer objects that represent video segments.
Media Capabilities API It provides information on your device’s video decoding and encoding abilities, enabling ABR to make informed decisions about which resolution to deliver.
Together, they enable the core functionality of ABR, serving video chunks optimized for your specific device limitations in real time.
Streaming Protocols: MPEG-DASH Vs. HLS
As mentioned above, to stream media adaptively, a video is split into chunks at different quality levels across various time points. We need to facilitate the process of switching between these segments adaptively in real time. To achieve this, ABR streaming relies on specific protocols. The two most common ABR protocols are:
MPEG-DASH,
HTTP Live Streaming (HLS).
Both of these protocols utilize HTTP to send video files. Hence, they are compatible with HTTP web servers.
This article focuses on MPEG-DASH. However, it’s worth noting that DASH isn’t supported by Apple devices or browsers, as mentioned in Mux’s article.
MPEG-DASH
MPEG-DASH enables adaptive streaming through:
A Media Presentation Description (MPD) file This XML manifest file contains information on how to select and manage streams based on adaptive rules.
Segmented Media Files Video and audio files are divided into segments at different resolutions and durations using MPEG-DASH-compliant codecs and formats.
On the client side, a DASH-compliant video player reads the MPD file and continuously monitors network bandwidth. Based on available bandwidth, the player selects the appropriate bitrate and requests the corresponding video chunk. This process repeats throughout playback, ensuring smooth, optimal quality.
Now that you understand the fundamentals, let’s build our adaptive video player!
Steps To Build an Adaptive Bitrate Streaming Video Player
Here’s the plan:
Transcode the MP4 video into audio and video renditions at different resolutions and bitrates with FFmpeg.
Generate an MPD file with FFmpeg.
Serve the output files from the server.
Build the DASH-compatible video player to play the video.
Install FFmpeg
For macOS users, install FFmpeg using Brew by running the following command in your terminal:
Next, run the following script to extract the audio track and encode it in WebM format for DASH compatibility:
-i \\"input_video.mp4\\": Specifies the input video file.
-vn: Disables the video stream (audio-only output).
-acodec libvorbis: Uses the libvorbis codec to encode audio.
-ab 128k: Sets the audio bitrate to 128 kbps.
\\"audio.webm\\": Specifies the output audio file in WebM format.
Generate Video Renditions
Run this script to create three video renditions with varying resolutions and bitrates. The largest resolution should match the input file size. For example, if the input video is 576×1024 at 30 frames per second (fps), the script generates renditions optimized for vertical video playback.
-c:v libvpx-vp9: Uses the libvpx-vp9 as the VP9 video encoder for WebM.
-keyint_min 150 and -g 150: Set a 150-frame keyframe interval (approximately every 5 seconds at 30 fps). This allows bitrate switching every 5 seconds.
-tile-columns 4 and -frame-parallel 1: Optimize encoding performance through parallel processing.
-f webm: Specifies the output format as WebM.
In each rendition:
-an: Excludes audio (video-only output).
-vf scale=576:1024: Scales the video to a resolution of 576x1024 pixels.
-b:v 1500k: Sets the video bitrate to 1500 kbps.
WebM is chosen as the output format, as they are smaller in size and optimized yet widely compatible with most web browsers.
Generate MPD Manifest File
Combine the video renditions and audio track into a DASH-compliant MPD manifest file by running the following script:
-f webm_dash_manifest -i \\"…\\": Specifies the inputs so that the ASH video player will switch between them dynamically based on network conditions.
-map 0 -map 1 -map 2 -map 3: Includes all video (0, 1, 2) and audio (3) in the final manifest.
-adaptation_sets: Groups streams into adaptation sets:
id=0,streams=0,1,2: Groups the video renditions into a single adaptation set.
id=1,streams=3: Assigns the audio track to a separate adaptation set.
The resulting MPD file (input_video_manifest.mpd) describes the streams and enables adaptive bitrate streaming in MPEG-DASH.
After completing these steps, you’ll have:
Three video renditions (576x1024, 480x854, 360x640),
The original video input_video.mp4 should also be kept to serve as a fallback video source later.
Serve The Output Files
These output files can now be uploaded to cloud storage (e.g., AWS S3 or Cloudflare R2) for playback. While they can be served directly from a local folder, I highly recommend storing them in cloud storage and leveraging a CDN to cache the assets for better performance. Both AWS and Cloudflare support HTTP range requests out of the box.
Building The DASH-Compatible Video Player In React
There’s nothing like a real-world example to help understand how everything works. There are different ways we can implement a DASH-compatible video player, but I’ll focus on an approach using React.
First, install the Dash.js npm package by running:
npm i dashjs\\n
Next, create a component called <DashVideoPlayer /> and initialize the Dash MediaPlayer instance by pointing it to the MPD file when the component mounts.
The ref callback function runs upon the component mounting, and within the callback function, playerRef will refer to the actual Dash MediaPlayer instance and be bound with event listeners. We also include the original MP4 URL in the <source> element as a fallback if the browser doesn’t support MPEG-DASH.
If you’re using Next.js app router, remember to add the ‘use client’ directive to enable client-side hydration, as the video player is only initialized on the client side.
Here is the full example:
Result
Observe the changes in the video file when the network connectivity is adjusted from Fast 4G to 3G using Chrome DevTools. It switches from 480p to 360p, showing how the experience is optimized for more or less available bandwidth.
ABR example
Conclusion
That’s it! We just implemented a working DASH-compatible video player in React to establish a video with adaptive bitrate streaming. Again, the benefits of this are rooted in performance. When we adopt ABR streaming, we’re requesting the video in smaller chunks, allowing for more immediate playback than we’d get if we needed to fully download the video file first. And we’ve done it in a way that supports multiple versions of the same video, allowing us to serve the best format for the user’s device.