![[Valid RSS]](images/valid-rss-rogers.png "Valid RSS")
This is a valid RSS feed.
This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.
line 737, column 97: (4 occurrences) [help]
... code> Element: Curve And Arc Commands]]></title>
^
<description><![CDATA[Meet “Accessible UX Research,” our upcomin ...
<description><![CDATA[Meet “Accessible UX Research,” our upcomin ...
<description><![CDATA[Meet “Accessible UX Research,” our upcomin ...
<description><![CDATA[Meet “Accessible UX Research,” our upcomin ...
... silent="true">Pre-order the book.</a>]]></description>
^
line 976, column 3: (32 occurrences) [help]
]]></content:encoded>
^
<description><![CDATA[SVG is easy — until you meet `path`. Howev ...
<?xml version="1.0" encoding="utf-8"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom"> <channel> <title>Articles on Smashing Magazine — For Web Designers And Developers</title> <link>https://www.smashingmagazine.com/</link> <description>Recent content in Articles on Smashing Magazine — For Web Designers And Developers</description> <lastBuildDate>Sun, 06 Jul 2025 00:32:43 GMT</lastBuildDate> <docs>https://validator.w3.org/feed/docs/rss2.html</docs> <generator>manual</generator> <language>en</language> <image> <title>Articles on Smashing Magazine — For Web Designers And Developers</title> <url>https://www.smashingmagazine.com/images/favicon/app-icon-512x512.png</url> <link>https://www.smashingmagazine.com/</link> </image> <copyright>All rights reserved 2025, Smashing Media AG</copyright> <category>Development</category> <category>Design</category> <category>UX</category> <category>Mobile</category> <category>Front-end</category> <atom:link href="https://www.smashingmagazine.com/feed/" rel="self" type="application/rss+xml"/> <item> <title><![CDATA[CSS Intelligence: Speculating On The Future Of A Smarter Language]]></title> <link>https://smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language/</link> <guid>https://smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language/</guid> <pubDate>Wed, 02 Jul 2025 13:00:00 GMT</pubDate> <description><![CDATA[CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the `if()` function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.]]></description> <content:encoded><![CDATA[<p>Once upon a time, CSS was purely presentational. It imperatively handled the fonts, colors, backgrounds, spacing, and layouts, among other styles, for markup languages. It was a <strong>language for looks</strong>, doing what it was asked to, never thinking or making decisions. At least, that was what it was made for when <a href="https://www.w3.org/People/howcome/">Håkon Wium Lie proposed CSS in 1994</a>, and the World Wide Web Consortium (W3C) adopted it two years later.</p><p>Fast-forward to today, a lot has changed with the addition of new features, and more are on the way that shift the style language to a more imperative paradigm. CSS now actively powers complex responsive and interactive user interfaces. With recent advancements like <a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">container queries</a>, <a href="https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/">relational pseudo-classes</a>, and <a href="https://www.w3.org/TR/css-values-5/#if-notation">the <code>if()</code> function</a>, the language once within the <strong>domains of presentations</strong> has stepped foot into the <strong>territory of logic</strong>, reducing its reliance on the language that had handled its logical aspect to date, JavaScript.</p><p>This shift presents interesting questions about CSS and its future for developers. CSS has deliberately remained within the domains of styling alone for a while now, but is it time for that to change? Also, is CSS still a <strong>presentational language</strong> as it started, or is it becoming something more and bigger? This article explores how smart CSS has become over the years, where it is heading, the problems it is solving, whether it is getting too complex, and how developers are reacting to this shift.</p>Historical Context: CSS’s Intentional Simplicity<p>A glimpse into CSS history shows a language born to separate content from presentation, making web pages easier to manage and maintain. The first official version of CSS, <a href="https://www.w3.org/TR/CSS1/">CSS1</a>, was released in 1996, and it introduced basic styling capabilities like font properties, colors, box model (padding, margin, and border), sizes (width and height), a few simple displays (none, block, and inline), and basic selectors.</p><p>Two years later, <a href="https://www.w3.org/TR/CSS2/">CSS2 was launched</a> and expanded what CSS could style in HTML with features like positioning, <code>z-index</code>, enhanced selectors, table layouts, and media types for different devices. However, there were inconsistencies within the style language, an issue CSS2.1 resolved in 2011, becoming the standard for modern CSS. It simplified web authoring and site maintenance.</p><p>CSS was largely <strong>static</strong> and <strong>declarative</strong> during the years between CSS1 and CSS2.1. Developers experienced a mix of frustrations and breakthroughs for their projects. Due to the absence of intuitive layouts like Flexbox and CSS Grid, developers relied on hacky alternatives with table layouts, positioning, or floats to get around complex designs, even though <a href="https://www.w3.org/TR/CSS1/#floating-elements">floats were originally designed for text to wrap around an obstacle</a> on a webpage, usually a media object. As a result, developers faced issues with collapsing containers and unexpected wrapping behaviour. Notwithstanding, basic styling was intuitive. A newbie could easily pick up web development today and add basic styling the next day. CSS was separated from content and logic, and as a result, it was <strong>highly performant</strong> and <strong>lightweight</strong>.</p>CSS3: The First Step Toward Context Awareness<p>Things changed <a href="https://www.smashingmagazine.com/2012/07/learning-css3-useful-reference-guide/">when CSS3 rolled out</a>. Developers had expected a single monolithic update like the previous versions, but their expectations and the reality of the latest release were unmatched. The CSS3 red carpet revealed a <strong>modular system</strong> with powerful layout tools like Flexbox, CSS Grid, and media queries, defining for the first time how developers establish responsive designs. <a href="https://www.w3.org/Style/CSS/current-work">With over 20 modules</a>, CSS3 marked the inception of a <strong>“smarter CSS”</strong>.</p><p>Flexbox’s introduction around 2012 provided a flexible, one-dimensional layout system, while CSS Grid, launched in 2017, took layout a step further by offering a two-dimensional layout framework, making complex designs with minimal code possible. These advancements, as discussed by <a href="https://origin-blog.mediatemple.net/design-creative/five-huge-css-milestones/">Chris Coyier</a>, reduced reliance on hacks like floats.</p><p>It did not stop there. There’s <a href="https://www.w3.org/TR/mediaqueries-3/">media queries</a>, a prominent release of CSS3, that is one of the major contributors to this <em>smart CSS</em>. With media queries, CSS can react to different devices’ screens, adjusting its styles to fit the screen dimensions, aspect ratio, and orientation, a feat that earlier versions could not easily achieve. In the fifth level, it added <a href="https://www.w3.org/TR/mediaqueries-5/#mf-user-preferences">user preference media features</a> such as <code>prefers-color-scheme</code> and <code>prefers-reduced-motion</code>, making CSS more <strong>user-centric</strong> by adapting styles to user settings, <strong>enhancing accessibility</strong>.</p><p>CSS3 marked the beginning of a <strong>context-aware CSS</strong>.</p><blockquote>Context-awareness means the ability to understand and react to the situation around you or in your environment accordingly. It means systems and devices can sense critical information, like your location, time of day, and activity, and adjust accordingly.</blockquote> <p>In web development, the term “context-awareness” has always been used with components, but what drives a context-aware component? If you mentioned anything other than the component’s styles, you would be wrong! For a component to be considered context-aware, <a href="https://www.lukeleber.com/blog/2024-07-25-context-aware-components">it needs to feel its environment’s presence</a> and know what happens in it. For instance, for your website to update its styles to accommodate a dark mode interface, it needs to be aware of the user’s preferences. Also, to change its layout, a website needs to know the device a user is accessing it on — and thanks to user preference media queries, that is possible. </p><p>Despite these features, CSS remained largely reactive. It responded to external factors like screen size (via media queries) or input states (like <code>:hover</code>, <code>:focus</code>, or <code>:checked</code>), but it never made decisions based on the changes in its environment. Developers typically turn to JavaScript for that level of interaction. </p><p>However, not anymore. </p><p>For example, with container queries and, more recently, <a href="https://www.smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/">container <em>style</em> queries</a>, CSS now responds not only to layout constraints but to <strong>design intent</strong>. It can adjust based on a component’s environment and even its parent’s theme or state. And that’s not all. The recently specced <code>if()</code> function promises <strong>inline conditional logic</strong>, <a href="https://css-tricks.com/if-css-gets-inline-conditionals/">allowing styles to change based on conditions</a>, all of which can be achieved without scripting.</p><p>These developments suggest CSS is moving beyond presentation to handle behaviour, challenging its traditional role.</p>New CSS Features Driving Intelligence<p>Several features are currently pushing CSS towards a dynamic and adaptive edge, thereby making it smarter, but these two are worth mentioning: container style queries and the <code>if()</code> function.</p><h3>What Are Container Style Queries, And Why Do They Matter?</h3><p>To better understand what container style queries are, it makes sense to make a quick stop at a close cousin: container size queries introduced in the <a href="https://www.w3.org/TR/css-contain-3/">CSS Containment Module Level 3</a>.</p><p><a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">Container size queries</a> allow developers to style elements based on the dimensions of their parent container. This is a huge win for component-based designs as it eliminates the need to shoehorn responsive styles into global media queries.</p><pre><code>/* Size-based container query */@container (min-width: 500px) { .card { flex-direction: row; }}</code></pre> <p><a href="https://css-tricks.com/css-container-queries/#aa-container-style-queries">Container style queries</a> take it a step further by allowing you to style elements based on custom properties (aka CSS variables) set on the container.</p><pre><code>/* Style-based container query */@container style(--theme: dark) { .button { background: black; color: white; }}</code></pre> <p>These features are a big deal in CSS because they unlock <strong>context-aware components</strong>. A button can change appearance based on a <code>--theme</code> property set by a parent without using JavaScript or hardcoded classes.</p><h3>The <code>if()</code> Function: A Glimpse Into The Future</h3><p>The CSS <code>if()</code> function might just be the most radical shift yet. When implemented (Chrome is the only one to support it, <a href="https://developer.chrome.com/blog/new-in-chrome-137?hl=en#if">as of version 137</a>), it would allow developers to write inline conditional logic directly in property declarations. Think of the <em>ternary operator</em> in CSS.</p><pre><code>padding: if(style(--theme: dark): 2rem; else: 3rem);</code></pre> <p>This hypothetical line or pseudo code, <em>not syntax</em>, sets the text color to white <em>if</em> the <code>--theme</code> variable equals <code>dark</code>, or black otherwise. Right now, the <code>if()</code> function is not supported in any browser, but it is on the radar of the CSS Working Group, and influential developers like <a href="https://lea.verou.me/blog/2024/css-conditionals/">Lea Verou</a> are already exploring its possibilities.</p>The New CSS: Is The Boundary Between CSS And JavaScript Blurring?<p>Traditionally, the separation of concerns concerning styling was thus: <a href="https://medium.com/@giosterr44/mastering-the-basics-why-html-css-javascript-are-still-essential-c0343ab485b4">CSS for how things look and JavaScript for how things behave</a>. However, features like container style queries and the specced <code>if()</code> function are starting to blur the line. CSS is beginning to <em>behave</em>, not in the sense of API calls or event listeners, but in the ability to conditionally apply styles based on logic or context.</p><p>As web development evolved, CSS started encroaching on JavaScript territory. CSS3 brought in animations and transitions, a powerful combination for interactive web development, which was impossible without JavaScript in the earlier days. Today, research proves that CSS has taken on several interactive tasks previously handled by JavaScript. For example, the <code>:hover</code> pseudo-class and <code>transition</code> property allow for visual feedback and smooth animations, as discussed in “<a href="https://www.smashingmagazine.com/2011/02/bringing-interactivity-to-your-website-with-web-standards/">Bringing Interactivity To Your Website With Web Standards</a>”. </p><p>That’s not all. Toggling accordions and modals existed within the domains of JavaScript before, but today, this is possible with new <a href="https://pagepro.co/blog/html-css-vs-javascript/">powerful CSS combos like the <code><details></code> and <code><summary></code> HTML tags for accordions or modals with the <code>:target</code> pseudo-class</a>. CSS can also handle tooltips using <code>aria-label</code> with <code>content: attr(aria-label)</code>, and star ratings with radio inputs and labels, as detailed in the same <a href="https://pagepro.co/blog/html-css-vs-javascript/">article</a>. </p><p>Another article, “<a href="https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/">5 things you can do with CSS instead of JavaScript</a>”, lists features like <code>scroll-behavior: smooth</code> for smooth scrolling and <code>@media (prefers-color-scheme: dark)</code> for dark mode, tasks that once required JavaScript. In the same article, you can also see that it’s possible to create a carousel without JavaScript by using the CSS scroll snapping functionality (and we’re not even talking about features designed specifically for creating carousels solely in CSS, recently <a href="https://developer.chrome.com/blog/carousels-with-css?hl=en">prototyped in Chrome</a>).</p><p>These extensions of CSS into the JavaScript domain have now left the latter with handling only complex, crucial interactions in a web application, such as user inputs, making API calls, and managing state. While the CSS pseudo-classes like <code>:valid</code> and <code>:invalid</code> can help as error or success indicators in input elements, you still need JavaScript for dynamic content updates, form validation, and real-time data fetching.</p><p>CSS now solves problems that many developers never knew existed. With JavaScript out of the way in many style scenarios, developers now have simplified codebases. The dependencies are fewer, the overheads are lower, and website performance is better, especially on mobile devices. In fact, this shift leans CSS towards a <strong>more accessible web</strong>, as CSS-driven designs are often easier for browsers and assistive technologies to process.</p><p>While the new features come with a lot of benefits, they also introduce complexities that did not exist before:</p><ul><li>What happens when logic is spread across both CSS and JavaScript?</li><li>How do we <strong>debug conditional styles</strong> without a clear view of what triggered them?</li><li>CSS only had to deal with basic styling like colors, fonts, layouts, and spacing, which were easier for new developers to onboard. How hard does the <strong>learning curve</strong> become as these new features require understanding concepts once exclusive to JavaScript?</li></ul><p>Developers are split. While some welcome the idea of a natural evolution of a smarter, more component-aware web, <a href="https://css-tricks.com/is-there-too-much-css-now/">others worry CSS is becoming too complex</a> — a language originally designed for formatting documents now juggling logic trees and style computation.</p>Divided Perspective: Is Logic In CSS Helpful Or Harmful?<p>While the evidence in the previous section leans towards boundary-blurring, there’s significant <strong>controversy among developers</strong>. Many modern developers argue that logic in CSS is long overdue. As web development grows more componentized, the limitations of declarative styling have become more apparent, causing proponents to see logic as a necessary evolution for a once purely styling language.</p><p>For instance, in frontend libraries like React, components often require conditional styles based on props or states. Developers have had to make do with JavaScript or CSS-in-JS solutions for such cases, but the truth remains that these solutions are not right. They introduce complexity and couple styles and logic. CSS and JavaScript are meant to have standalone concerns in web development, <a href="https://css-tricks.com/the-differing-perspectives-on-css-in-js/">but libraries like CSS-in-JS have ignored the rules and combined both</a>. </p><p>We have seen how preprocessors like SASS and LESS proved the usefulness of conditionals, loops, and variables in styling. Developers who do not accept the CSS in JavaScript approach have settled for these preprocessors. Nevertheless, like <a href="https://x.com/argyleink/status/1317304102460608512?t=rgyYyNApPOZt8iqh8NTEUQ&s=19">Adam Argyle</a>, they voice their need for native CSS solutions. With native conditionals, developers could reduce JavaScript overhead and avoid runtime class toggling to achieve conditional presentation. </p><blockquote>“It never felt right to me to manipulate style settings in JavaScript when CSS is the right tool for the job. With CSS custom properties, we can send to CSS what needs to come from JavaScript.”<br /><br />— <a href="https://x.com/codepo8/status/1358082931122724864">Chris Heilmann</a></blockquote> <p>Also, Bob Ziroll <a href="https://x.com/bobziroll/status/1819078139055595669">dislikes using JavaScript for what CSS is meant to handle</a> and finds it unnecessary. This reflects a preference for using CSS for styling tasks, even when JavaScript is involved. These developers embrace CSS’s new capabilities, seeing it as a way to reduce JavaScript dependency for performance reasons. </p><p>Others argue against it. Introducing logic into CSS is a slippery slope, and CSS could lose its core strengths — simplicity, readability, and accessibility — by becoming too much like a programming language. The fear is that developers run the risk of <a href="https://www.smashingmagazine.com/2024/02/web-development-getting-too-complex/">complicating the web more than it is supposed to be</a>.</p><blockquote>“I’m old-fashioned. I like my CSS separated from my HTML; my HTML separated from my JS; my JS separated from my CSS.”<br /><br />— <a href="https://x.com/SaraSoueidan/status/1273181281103351812">Sara Soueidan</a></blockquote> <p>This view emphasises the traditional separation of concerns, arguing that mixing roles can complicate maintenance. Additionally, Brad Frost has also <a href="https://x.com/brad_frost/status/993189025132490755">expressed skepticism</a> when talking specifically about CSS-in-JS, stating that it, <em>“doesn’t scale to non-JS-framework environments, adds more noise to an already-noisy JS file, and the demos/examples I have seen haven’t embodied CSS best practices.”</em> This highlights concerns about scalability and best practices, suggesting that <strong>the blurred boundary might not always be beneficial</strong>.</p><p>Community discussions, such as on <a href="https://stackoverflow.com/questions/24012569/is-it-always-better-to-use-css-when-possible-instead-of-js">Stack Overflow</a>, also reflect this divide. A question like <em>“Is it always better to use CSS when possible instead of JS?”</em> receives answers favouring CSS for performance and simplicity, but others argue JavaScript is necessary for complex scenarios, illustrating the ongoing debate. Don’t be fooled. It might seem convenient to agree that CSS performs better than JavaScript in styling, <a href="https://css-tricks.com/myth-busting-css-animations-vs-javascript/">but that’s not always the case</a>. </p>A Smarter CSS Without Losing Its Soul<p>CSS has always stood apart from full-blown programming languages, like JavaScript, by being declarative, accessible, and purpose-driven.</p><p>If CSS is to grow more intelligent, the challenge lies not in making it more powerful for its own sake but in evolving it without compromising its major concern.</p><p>So, what might a logically enriched but <em>still declarative</em> CSS look like? Let’s find out.</p><h3>Conditional Rules (<code>if</code>, <code>@when</code>…<code>@else</code>) With Carefully Introduced Logic</h3><p>A major frontier in CSS evolution is the introduction of native conditionals via the <a href="https://chromestatus.com/feature/6313805904347136"><code>if()</code></a> function and the <code>@when</code>…<code>@else</code> at-rules, which are part of the <a href="https://drafts.csswg.org/css-conditional-5/">CSS Conditional Rules Module Level 5</a> specification. While still in the early draft stages, this would allow developers to apply styles based on evaluated conditions without turning to JavaScript or a preprocessor. Unlike JavaScript’s imperative nature, these conditionals aim to keep logic ingrained in CSS’s existing flow, aligned with the cascade and specificity.</p><h3>More Powerful, Intentional Selectors</h3><p>Selectors have always been one of the major strengths of CSS, and expanding them in a targeted way would make it easier to express relationships and conditions declaratively without needing classes or scripts. Currently, <a href="https://css-tricks.com/the-css-has-selector/"><code>:has()</code></a> lets developers style a parent based on a child, and <code>:nth-child(An+B [of S]?)</code> (<a href="https://www.w3.org/TR/selectors-4/">in Selectors Level 4</a>) allows for more complex matching patterns. Together, they allow greater precision without altering CSS’s nature.</p><h3>Scoped Styling Without JavaScript</h3><p>One of the challenges developers face in component-based frameworks like React or Vue is style scoping. Style scoping ensures styles apply only to specific elements or components and do not leak out. In the past, to achieve this, you needed to implement BEM naming conventions, CSS-in-JS, or build tools like CSS Modules. Native scoped styling in CSS, via the new experimental <a href="https://css-tricks.com/almanac/rules/s/scope/"><code>@scope</code></a> rule, allows developers to encapsulate styles in a specific context without extra tooling. This feature makes CSS more modular without tying it to JavaScript logic or complex class systems.</p><p>A fundamental design question now is whether we could empower CSS without making it like JavaScript. The truth is, to empower CSS with conditional logic, powerful selectors, and scoped rules, we don’t need it to mirror JavaScript’s syntax or complexity. The goal is declarative expressiveness, giving CSS more awareness and control while retaining its clear, readable nature, and we should focus on that. When done right, smarter CSS can amplify the language’s strengths rather than dilute them.</p><p>The real danger is not logic itself but unchecked complexity that obscures the simplicity with which CSS was built.</p>Cautions And Constraints: Why Smart Isn’t Always Better<p>The push for a smarter CSS comes with significant trade-offs alongside control and flexibility. Over the years, <a href="https://www.quora.com/In-general-does-adding-features-to-a-programming-language-make-it-better">history has shown that adding a new feature to a language or framework, or library, most likely introduces complexity</a>, not just for newbies, but also for expert developers. The danger is not in CSS gaining power but in how that power is implemented, taught, and used.</p><p>One of CSS’s greatest strengths has always been its <strong>approachability</strong>. Designers and beginners could learn the basics quickly: selectors, properties, and values. With more logic, scoping, and advanced selectors being introduced, that learning curve steepens. The risk is a widening gap between “basic CSS” and “real-world CSS”, echoing what happened with JavaScript and its ecosystem. </p><p>As CSS becomes more powerful, developers increasingly lean on tooling to manage and abstract that power, like building systems (e.g., webpack, Vite), linters and formatters, and component libraries with strict styling conventions. This creates dependencies that are hard to escape. <strong>Tooling becomes a prerequisite, not an option</strong>, further complicating onboarding and increasing setup time for projects that used to work with a single stylesheet.</p><p>Also, more logic means more potential for <strong>unexpected outcomes</strong>. New issues might arise that are harder to spot and fix. Resources like DevTools will then need to evolve to visualise scope boundaries, conditional applications, and complex selector chains. Until then, debugging may remain a challenge. <a href="https://robkendal.co.uk/blog/why-is-css-in-js-a-bad-or-good-idea/">All of these are challenges experienced with CSS-in-JS</a>; how much more Native CSS?</p><p>We’ve seen this before. CSS history is filled with overcomplicated workarounds, like tables for the layout before Flexbox, relying on floats with clear fix hacks, and overly rigid grid systems before native CSS Grid. In each case, the hacky solution eventually became the problem. CSS got better not by mimicking other languages but by <em>standardising thoughtful, declarative solutions</em>. With the right power, <a href="https://rachelandrew.co.uk/archives/2020/04/07/making-things-better/">we can make CSS better</a> at the end of the day.</p>Conclusion<p>We just took a walk down the history lane of CSS, explored its presence, and peeked into what its future could be. We can all agree that CSS has come a long way from a simple, declarative language to a <strong>dynamic</strong>, <strong>context-aware</strong>, and, yes, <strong>smarter language</strong>. The evolution, of course, comes with tension: a smarter styling language with fewer dependencies on scripts and a complex one with a steeper learning curve.</p><p>This is what I conclude:</p><p>The future of CSS shouldn’t be a race to add logic for its own sake. Instead, it should be a thoughtful expansion, power balanced by clarity and innovation grounded in accessibility.</p><p>That means asking tough questions before shipping new features. It means ensuring that new capabilities help solve actual problems without introducing new barriers.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Gabriel Shoyombo)</author> <enclosure url="http://files.smashing.media/articles/css-intelligence-speculating-future-smarter-language/css-intelligence-speculating-future-smarter-language.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Turning User Research Into Real Organizational Change]]></title> <link>https://smashingmagazine.com/2025/07/turning-user-research-into-organizational-change/</link> <guid>https://smashingmagazine.com/2025/07/turning-user-research-into-organizational-change/</guid> <pubDate>Tue, 01 Jul 2025 10:00:00 GMT</pubDate> <description><![CDATA[Bridging the gap between user research insights and actual organizational action — with a clear roadmap for impact.]]></description> <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://www.lyssna.com/">Lyssna</a></p><p>We’ve all been there: you pour your heart and soul into conducting meticulous user research. You gather insightful data, create detailed reports, and confidently deliver your findings. Yet, months later, little has changed. Your research sits idle on someone’s desk, gathering digital dust. It feels frustrating, like carefully preparing a fantastic meal, only to have it left uneaten.</p><p>There are so many useful tools (like <a href="https://www.lyssna.com/">Lysnna</a>) to help us run incredible user research, and articles about how to get the most from them. However, there’s much less guidance about ensuring our user research gets adopted and brings about real change. So, in this post, I want to answer a simple question: <strong>How can you make sure your user research truly transforms your organization?</strong></p>Introduction<blockquote>User research is only as valuable as the impact it has.</blockquote> <p>When research insights fail to make their way into decisions, teams miss out on opportunities to improve products, experiences, and ultimately, business results. In this post, we’ll look at:</p><ul><li>Why research often fails to influence organizational change;</li><li>How to ensure strategic alignment so research matters from day one;</li><li>Ways to communicate insights clearly so stakeholders stay engaged;</li><li>How to overcome practical implementation barriers;</li><li>Strategies for realigning policies and culture to support research-driven changes.</li></ul><p>By covering each of these areas, you’ll have a <strong>clear roadmap</strong> for turning your hard-won research into genuine action.</p>Typical Reasons For Failure<p>If you’ve ever felt your research get stuck, it probably came down to one (or more) of these issues.</p><h3>Strategic Misalignment</h3><p>When findings aren’t tied to business objectives or ROI, they struggle to gain traction. Sharing a particular hurdle that users face will fall on deaf ears if stakeholders cannot see how that problem will impact their bottom line.</p><p>Research arriving <strong>too late</strong> is another hurdle. If you share insights after key decisions are made, stakeholders assume your input won’t change anything. Finally, research often competes with other priorities. Teams might have limited resources and focus on urgent deadlines rather than long-term user improvements.</p><h3>Communication Issues</h3><p>Even brilliant research can get lost in translation if it’s buried in <strong>dense reports</strong>. I’ve seen stakeholders glaze over when handed 30-page documents full of jargon. When key takeaways aren’t crystal clear, decision-makers can’t quickly act on your findings.</p><p>Organizational silos can make communication worse. Marketing might have valuable insights that product managers never see, or designers may share findings that customer support doesn’t know how to use. Without a way to bridge those gaps, research lives in a vacuum.</p><h3>Implementation Challenges</h3><p>Great insights require a champion. Without a clear owner, research often lives with the person who ran it, and no one else feels responsible. Stakeholder skepticism also plays a role. Some teams doubt the methods or worry the findings don’t apply to real customers.</p><p>Even if there is momentum, insufficient follow-up or progress tracking can stall things. I’ve heard teams say, <em>“We started down that path but ran out of time.”</em> Without regular check-ins, good ideas fade away.</p><h3>Policy And Cultural Barriers</h3><p>Legal, compliance, or tech constraints can limit what you propose. I once suggested a redesign to comply with new accessibility standards, but the existing technical stack couldn’t support it. Resistance due to <strong>established culture</strong> is also common. If a company’s used to launching fast and iterating later, they might see research-driven change as slowing them down.</p><p>Now that we understand what stands in the way of effective research implementation, let’s explore practical solutions to overcome these challenges and drive real organizational change.</p>Ensuring Strategic Alignment<p>When research ties directly to business goals, it becomes impossible to ignore. Here’s how to do it.</p><h3>Early Stakeholder Engagement</h3><p>Invite key decision-makers into the research planning phase. I like to host a kickoff session where we <strong>map research objectives to specific KPIs</strong>, like increasing conversions by 10% or reducing support tickets by 20%. When your stakeholders help shape those objectives, they’re more invested in the results.</p><h3>Research Objectives Aligned With Business KPIs</h3><p>While UX designers often focus on user metrics like satisfaction scores or task completion rates, it’s crucial to connect our research to business outcomes that matter to stakeholders. Start by identifying the <strong>key business metrics</strong> that will demonstrate the value of your research:</p><ul><li>Identify which metrics matter most to the organization (e.g., conversion rate, churn, average order value).</li><li>Frame research questions to directly address those metrics.</li><li>Make preliminary hypotheses about how insights may affect the bottom line.</li></ul><h3>Develop Stakeholder-Specific Value Propositions</h3><p>When presenting user research to groups, it’s easy to fall into the trap of delivering a one-size-fits-all message that fails to truly resonate with anyone. Instead, we need to carefully consider how different stakeholders will receive and act on our findings. </p><p>The real power of user research emerges when we can connect our insights directly to what matters most for each specific audience:</p><ul><li><strong>For the product team</strong>: Show how insights can reduce development time by eliminating guesswork.</li><li><strong>For marketing</strong>: Demonstrate how understanding user language can boost ad copy effectiveness.</li><li><strong>For executives</strong>: Highlight potential cost savings or revenue gains.</li></ul><h3>ROI Framework Development</h3><p>Stakeholders want to see <strong>real numbers</strong>. Develop simple templates to estimate potential cost savings or revenue gains. For example, if you uncover a usability issue that’s causing a 5% drop-off in the signup flow, translate that into lost revenue per month.</p><p>I also recommend documenting <strong>success stories</strong> from similar projects within your own organization or from case studies. When a stakeholder sees that another company boosted revenue by 15% after addressing a UX flaw, they’re more likely to pay attention.</p><h3>Research Pipeline Integration</h3><p>Integrate research tasks directly into your product roadmap. Schedule user interviews or usability tests just before major feature sprints. That way, findings land at the right moment — when teams are making critical decisions.</p><h3>Regular Touchpoints with Strategic Teams</h3><p>It’s essential to maintain <strong>consistent communication</strong> with strategic teams through regular research review meetings. These sessions provide a dedicated space to discuss new insights and findings. To keep everyone aligned, stakeholders should have access to a shared calendar that clearly marks key research milestones. Using collaborative tools like Trello boards or shared calendars ensures the entire team stays informed about the research plan and progress.</p><h3>Resource Optimization</h3><p>Research doesn’t have to be a massive, months-long effort each time. Build <strong>modular research plans</strong> that can scale. If you need quick, early feedback, run a five-user usability test rather than a full survey. For deeper analysis, you can add more participants later.</p>Addressing Communication Issues<p>Making research understandable is almost as important as the research itself. Let’s explore how to share insights so they stick.</p><h3>Create Research One-Pagers</h3><p>Condense key findings into a scannable one-pager. No more than a single sheet. Start with a brief summary of the problem, then highlight three to five top takeaways. Use bold headings and visual elements (charts, icons) to draw attention.</p><h3>Implement Progressive Disclosure</h3><p>Avoid dumping all details at once. Start with a high-level executive summary that anyone can read in 30 seconds. Then, link to a more detailed section for folks who want the full methodology or raw data. This layered approach helps different stakeholders absorb information at their own pace.</p><h3>Use Visual Storytelling</h3><p>Humans are wired to respond to stories. Transform data into a narrative by using journey maps, before/after scenarios, and user stories. For example, illustrate how a user feels at each step of a signup process, then show how proposed changes could improve their experience. </p><p><img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/1-example-journey-map.png" /></p><h3>Regular Stakeholder Updates</h3><p>Keep the conversation going. Schedule brief weekly or biweekly “research highlights” emails or meetings. These should be <strong>no more than five minutes</strong> and focus on one or two new insights. When stakeholders hear snippets of progress regularly, research stays top of mind.</p><h3>Interactive Presentations</h3><p>Take research readouts beyond slide decks. Host <strong>workshop-style sessions</strong> where stakeholders engage with findings hands-on. For instance, break them into small groups to discuss a specific persona and brainstorm solutions. When people physically interact with research (sticky notes, printed journey maps), they internalize it better.</p>Overcome Implementation Challenges<p>Now that stakeholders understand and value your research, let’s make sure they turn insights into action.</p><h3>Establish Clear Ownership</h3><p>Assign a dedicated owner for each major recommendation. Use a RACI matrix to clarify who’s Responsible, Accountable, Consulted, and Informed. I like to share a simple table listing each initiative, the person driving it, and key milestones.</p><blockquote>When everyone knows who’s accountable, progress is more likely.</blockquote> <h3>RACI Matrix Example</h3><table> <thead> <tr> <th>Initiative</th> <th>Responsible</th> <th>Accountable</th> <th>Consulted</th> <th>Informed</th> </tr> </thead> <tbody> <tr> <td>Redesign Signup Flow</td> <td>UX Lead</td> <td>Product Manager</td> <td>Engineering, Legal</td> <td>Marketing, Support</td> </tr> <tr> <td>Create One-Pager Templates</td> <td>UX Researcher</td> <td>Design Director</td> <td>Stakeholder Team</td> <td>All Departments</td> </tr> </tbody></table> <h3>Build Implementation Roadmaps</h3><p>Break recommendations down into phases. For example,</p><ul><li>Phase 1: Quick usability tweaks (1–2 weeks).</li><li>Phase 2: Prototype new design (3–4 weeks).</li><li>Phase 3: Launch A/B test (2–3 weeks).</li></ul><p>Each phase needs clear timelines, success metrics, and resources identified upfront.</p><h3>Address Stakeholder Skepticism</h3><p>Be <strong>transparent</strong> about your methods. Share your recruitment screeners, interview scripts, and a summary of analysis steps. Offer validation sessions where stakeholders can ask questions about how the data was collected and interpreted. When they understand the process, they trust the findings more.</p><h3>Create Support Systems</h3><p>Even when stakeholders agree, they need help executing. Establish mentorship or buddy programs where experienced researchers or designers guide implementation. Develop training materials, like short “how-to” guides on running usability tests or interpreting survey data. Set up feedback channels (Slack channels, shared docs) where teams can ask questions or share roadblocks.</p><h3>Monitor And Track Progress</h3><p>Establish <strong>regular progress reviews</strong> weekly or biweekly. Use dashboards to track metrics such as A/B test performance, error rates, or user satisfaction scores. Even a more complicated dashboard can be built using no-code tools and AI, so you no longer need to rely on developer support.</p><p><img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/2-post-launch-backlog.png" /></p>Realign Policies and Culture<p>Even the best strategic plans and communication tactics can stumble if policies and culture aren’t supportive. Here’s how to address systemic barriers.</p><h3>Create a Policy Evolution Framework</h3><p>First, audit existing policies for anything that blocks research-driven changes. Maybe your data security policy requires months of legal review before you can recruit participants. Document those barriers and work with legal or compliance teams to create flexible guidelines. Develop a process for <strong>policy exception requests</strong> — so if you need a faster path for a small study, you know how to get approval without massive delays.</p><h3>Technical Infrastructure Adaptation</h3><p>Technology can be a silent killer of good ideas. Before proposing changes, work with IT to understand current limitations. Document technical requirements clearly so teams know what’s feasible. Propose a phased approach to any necessary infrastructure updates. Start with small changes that have an immediate impact, then plan for larger upgrades over time.</p><h3>Build Cultural Buy-In</h3><p>Culture shift doesn’t happen overnight. Share quick wins and success stories from early adopters in your organization. Recognize and reward change pioneers. Send a team-wide shout-out when someone successfully implements a research-driven improvement. Create a champions network across departments, so each area has at least one advocate who can spread best practices and encourage others.</p><p><img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/3-mailchimp-personas.jpg" /></p><h3>Develop a Change Management Strategy</h3><p>Change management is about clear, consistent communication. Develop tailored communication plans for different stakeholder groups. For example, executives might get a one-page impact summary, while developers get technical documentation and staging environments to test new designs. Establish feedback channels so teams can voice concerns or suggestions. Finally, provide change management training for team leaders so they can guide their direct reports through transitions.</p><h3>Measure Cultural Impact</h3><p>Culture can be hard to quantify, but simple <strong>pulse surveys</strong> go a long way. Ask employees how they feel about recent changes and whether they are more confident using data to make decisions. Track employee engagement metrics like survey participation or forum activity in research channels. Monitor resistance patterns (e.g., repeated delays or rejections) and address the root causes proactively.</p>Conclusions<p>Transforming user research into organizational change requires a holistic approach. Here’s what matters most:</p><ul><li><strong>Strategic Alignment</strong>: Involve stakeholders early, tie research to KPIs, and integrate research into decision cycles.</li><li><strong>Effective Communication</strong>: Use one-pagers, progressive disclosure, visual storytelling, regular updates, and interactive presentations to keep research alive.</li><li><strong>Implementation Frameworks</strong>: Assign clear ownership, build phased roadmaps, address skepticism, offer support systems, and track progress.</li><li><strong>Culture and Policy</strong>: Audit and update policies, adapt infrastructure gradually, foster cultural buy-in, and employ change management techniques.</li></ul><p>When you bring all of these elements together, research stops being an isolated exercise and becomes a driving force for real, measurable improvements. Keep in mind:</p><ul><li>Early stakeholder engagement drives buy-in.</li><li>Clear research-to-ROI frameworks get attention.</li><li>Ongoing, digestible communication keeps momentum.</li><li>Dedicated ownership and phased roadmaps prevent stalls.</li><li>Policy flexibility and cultural support enable lasting change.</li></ul><p>This is an iterative, ongoing process. Each success builds trust and opens doors for more ambitious research efforts. Be patient, stay persistent, and keep adapting. When your organization sees research as a core driver of decisions, you’ll know you’ve truly succeeded.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Paul Boag)</author> <enclosure url="http://files.smashing.media/articles/turning-user-research-into-organizational-change/turning-user-research-into-organizational-change.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Never Stop Exploring (July 2025 Wallpapers Edition)]]></title> <link>https://smashingmagazine.com/2025/06/desktop-wallpaper-calendars-july-2025/</link> <guid>https://smashingmagazine.com/2025/06/desktop-wallpaper-calendars-july-2025/</guid> <pubDate>Mon, 30 Jun 2025 12:00:00 GMT</pubDate> <description><![CDATA[July is just around the corner, and that means it’s time for a new collection of desktop wallpapers. Created with love by artists and designers from across the globe, they are bound to bring some good vibes to your screen. Enjoy!]]></description> <content:encoded><![CDATA[<p>For many of us, July is the epitome of summer. The time for spending every free minute outside to enjoy the sun and those seemingly endless summer days, whether it’s in a nearby park, by a lake, or on a trip exploring new places. So why not bring a bit of that <strong>summer joy</strong> to your desktop, too?</p> <p>For this wallpapers post, artists and designers from across the globe once again <strong>tickled their creativity</strong> and designed desktop wallpapers that capture that very special July feeling — just like it has been a <a href="https://www.smashingmagazine.com/category/wallpapers">monthly tradition</a> here at Smashing Magazine for more then 14 years already. You’ll find their artworks compiled below, along with a selection of summery 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 month — this post wouldn’t exist without you!</p> <p>If you, too, would like to <strong>get featured</strong> in one of our upcoming wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">submit your design</a>. We can’t wait to see what you’ll come up with! Happy July!</p> <ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> 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.</li></ul> <p></p>Stamped In Summer<p></p><p></p><p>“Moments of July marked in sunlight, sea breeze, and sky — a quiet snapshot of summer, worn at the edges like a well-traveled postcard.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/july-25-stamped-in-summer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-stamped-in-summer-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/july-25-stamped-in-summer-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Fried To Perfection<p></p><p></p><p>“This egg knows what July is all about. Soaking up the sun, relaxing without a care, and letting the warmth do its magic. Whether it’s a full vacation or just a quiet afternoon, take a moment to pause and recharge. You deserve it.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/july-25-fried-to-perfection-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-fried-to-perfection-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/july-25-fried-to-perfection-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Attack Of The Summer Snack<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/july-25-attack-of-the-summer-snack-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-attack-of-the-summer-snack-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/july-25-attack-of-the-summer-snack-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Not For Messy Desks<p></p><p></p><p>“Before going on holidays, let’s clean up your desk! Choose this wallpaper with shapes in disorder, and then you will have to reorder your desktop shortcuts.” — Designed by <a href="https://www.philippebrouard.fr">Philippe Brouard</a> from France.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/july-25-not-for-messy-desks-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-not-for-messy-desks-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/july-25-not-for-messy-desks-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-3840x2160.jpg">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-3840x2160.jpg">3840x2160</a></li></ul> <p></p>The Tiny Mermaid<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/july-25-the-tiny-mermaid-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-the-tiny-mermaid-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/july-25-the-tiny-mermaid-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Coastal Summer<p></p><p></p><p>“I was inspired by the Italian summer aesthetic when creating this wallpaper.” — Designed by <a href="https://www.instagram.com/dot.designz/?__pwa=1">Dylan Pugh</a> from the United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/july-25-coastal-summer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-coastal-summer-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/july-25-coastal-summer-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Enjoy The Little Things<p></p><p></p><p>“Sometimes the smallest things take up the most room in your heart — pause, notice, and smile.” — Designed by <a href="https://www.linkedin.com/in/hiteshpuri">Hitesh Puri</a> from Delhi, India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/july-25-enjoy-the-little-things-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-enjoy-the-little-things-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/july-25-enjoy-the-little-things-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Summer With Virginia<p></p><p></p><p>“Summer is here, and this month we share it with Virginia Apgar, a great woman who, thanks to her famous Apgar test applied to newborns, has reduced infant mortality worldwide.” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/july-25-summer-with-virginia-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-summer-with-virginia-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/july-25-summer-with-virginia-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Birdie July<p></p><p></p><p>Designed by <a href="https://pathlove.com/">Lívi Lénárt</a> from Hungary.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5448a8b6-1627-4a28-bf82-e76d385f88dd/july-20-birdie-july-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52c6aad-ac2c-4fd9-9aa6-528d7bf7bf6e/july-20-birdie-july-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52c6aad-ac2c-4fd9-9aa6-528d7bf7bf6e/july-20-birdie-july-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Diving Among Corals<p></p><p></p><p>“The long-awaited vacation is coming closer. After working all year, we find ourselves with months that, although we don’t stop completely, are lived differently. We enjoy the days and nights more, and if we can, the beach will keep us company. Therefore, we’ll spend this month in Australia, enjoying the coral reefs and diving without limits.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela </a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Summer Cannonball<p></p><p></p><p>“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1537ec9a-99ad-4cc1-8755-8ac0ee69b83b/july-17-summer-cannonball-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e8e873-674d-43b2-b5b6-3709ad2f428c/july-17-summer-cannonball-preview-opt.png" /></a><p></p><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e8e873-674d-43b2-b5b6-3709ad2f428c/july-17-summer-cannonball-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-640x1136.png">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-750x1334.png">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-2880x1800.png">2880x1800</a></li></ul> <p></p>Day Turns To Night<p></p><p></p><p>Designed by <a href="https://www.behance.net/xenialatii">Xenia Latii</a> from Germany.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2996c7ca-1d17-421e-b9e8-fb327c486367/july-16-day-turns-to-night-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8502bdc-b5a7-44e3-85a1-13c5ee8987a0/july-16-day-turns-to-night-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8502bdc-b5a7-44e3-85a1-13c5ee8987a0/july-16-day-turns-to-night-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>A Flamboyance Of Flamingos<p></p><p></p><p>“July in South Africa is dreary and wintery so we give all the southern hemisphere dwellers a bit of color for those gray days. And for the northern hemisphere dwellers a bit of pop for their summer!” — Designed by Wonderland Collective from South Africa.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2bbc33fd-46b8-437c-ac69-ecbf96320b61/july-15-a-flamboyance-of-flamingos-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa099a9d-0d72-4083-ac98-3e84d03dc825/july-15-a-flamboyance-of-flamingos-preview-opt.png" /></a><p></p><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa099a9d-0d72-4083-ac98-3e84d03dc825/july-15-a-flamboyance-of-flamingos-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>In Space<p></p><p></p><p>Designed by Lieke Dol from the Netherlands.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Eternal Summer<p></p><p></p><p>“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds, and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44fce15a-b5f0-4933-b73b-66411fb6b698/july-17-eternal-summer-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd17eedd-d2e1-43d9-806a-1a853d0415fb/july-17-eternal-summer-preview-opt.png" /></a><p></p><ul><p></p><p><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd17eedd-d2e1-43d9-806a-1a853d0415fb/july-17-eternal-summer-preview-opt.png">preview</a></li></p><p><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-2560x1440.png">2560x1440</a></li></p></ul><p></p><p></p>Road Trip In July<p></p><p></p><p>“July is the middle of summer, when most of us go on road trips, so I designed a calendar inspired by my love of traveling and summer holidays.” — Designed by Patricia Coroi from Romania.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/319ba5e3-32f3-4335-a680-5959c2a49775/july-17-road-trip-in-july-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f660eb-9d67-48e9-8de5-0b38b16181fa/july-17-road-trip-in-july-preview.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f660eb-9d67-48e9-8de5-0b38b16181fa/july-17-road-trip-in-july-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-640x1136.jpg">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>DJ Little Bird<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>July Flavor<p></p><p></p><p>Designed by Natalia Szendzielorz from Poland.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/37726e2c-1f3f-4609-a499-bf44eab09dcb/july-16-july-flavour-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02dcf5d3-db10-43f8-9d98-f1dd53e6d702/july-16-july-flavour-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02dcf5d3-db10-43f8-9d98-f1dd53e6d702/july-16-july-flavour-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-540x960.jpg">540x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-600x800.jpg">600x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-2880x1800.jpg">2880x1800</a></li></ul> <p></p>Heated Mountains<p></p><p></p><p>“Warm summer weather inspired the color palette.” — Designed by Marijana Pivac from Croatia.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Hotdog<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Sweet Summer<p></p><p></p><p>“In summer, everything inspires me.” — Designed by Maria Karapaunova from Bulgaria.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>The Ancient Device<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ec8b597-e406-4b1e-b0d2-95420b115f6c/july-21-the-ancient-device-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4f1d08-e3cd-4783-8cde-1386f34ed7c3/july-21-the-ancient-device-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4f1d08-e3cd-4783-8cde-1386f34ed7c3/july-21-the-ancient-device-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Riding In The Drizzle<p></p><p></p><p>“Rain has come, showering the existence with new seeds of life. Everywhere life is blooming, as if they were asleep and the falling music of raindrops have awakened them. Feel the drops of rain. Feel this beautiful mystery of life. Listen to its music, melt into it.” — Designed by <a href="https://aufait.in/document-management-system">DMS Software</a> from India.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5acea4a6-5483-4425-8eeb-c7f5f0a3b295/july-19-riding-in-the-drizzle-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0828d9a5-d788-4e99-b930-5bbad01b45e2/july-19-riding-in-the-drizzle-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0828d9a5-d788-4e99-b930-5bbad01b45e2/july-19-riding-in-the-drizzle-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Taste Like Summer<p></p><p></p><p>“In times of clean eating and the world of superfoods there is one vegetable missing. An old, forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it, dip it!” — Designed by <a href="https://www.netzbewegung.com/de/start/">Alexandra Tamgnoué</a> from Germany.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/28df075e-42b1-4990-a5d3-cf7e8b9b9b41/july-17-taste-like-summer-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3de3571f-466c-4772-a945-4e22af244f29/july-17-taste-like-summer-preview.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3de3571f-466c-4772-a945-4e22af244f29/july-17-taste-like-summer-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Island River<p></p><p></p><p>“Make sure you have a refreshing source of ideas, plans, and hopes this July. Especially if you are to escape from urban life for a while.” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e25b7ef-1294-4f55-933a-d8e14e92affc/july-16-island-river-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c639eef9-6a52-47e8-8996-ba56f1167742/july-16-island-river-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c639eef9-6a52-47e8-8996-ba56f1167742/july-16-island-river-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Captain Amphicar<p></p><p></p><p>“My son and I are obsessed with the Amphicar right now, so why not have a little fun with it?” — Designed by <a href="https://www.3bicycles.com/">3 Bicycles Creative</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2915201-289a-4723-ae4a-5d014105c0db/july-16-captain-amphicar-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/295f6033-ce57-4e72-b3e0-9de5cae96cd9/july-16-captain-amphicar-preview.png" /></a><p></p><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/295f6033-ce57-4e72-b3e0-9de5cae96cd9/july-16-captain-amphicar-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>An Intrusion Of Cockroaches<p></p><p></p><p>“Ever watched <em>Joe’s Apartment</em> when you were a kid? Well, that movie left a soft spot in my heart for the little critters. Don’t get me wrong: I won’t invite them over for dinner, but I won’t grab my flip flop and bring the wrath upon them when I see one running in the house. So there you have it… three roaches… bringing the smack down on that pesky human… ZZZZZZZAP!!” — Designed by Wonderland Collective from South Africa.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5782cbe2-5c14-49f7-ba53-bce238c1d430/july-15-an-intrusion-of-cockroaches-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efd43660-6705-4fb6-bcc2-993e764a8a5b/july-15-an-intrusion-of-cockroaches-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efd43660-6705-4fb6-bcc2-993e764a8a5b/july-15-an-intrusion-of-cockroaches-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Tropical Lilies<p></p><p></p><p>“I enjoy creating tropical designs. They fuel my wanderlust and passion for the exotic, instantaneously transporting me to a tropical destination.” — Designed by Tamsin Raslan from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eedd035d-7844-4e18-826f-4f48965c4d37/july-16-tropical-lilies-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/18e34889-f79b-4fec-8d5f-e4b951e98daf/july-16-tropical-lilies-preview-opt.png" /></a><p></p><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/18e34889-f79b-4fec-8d5f-e4b951e98daf/july-16-tropical-lilies-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Frogs In The Night<p></p><p></p><p>“July is coming and the nights are warmer. Frogs look at the moon while they talk about their day.” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Summer Never Ends<p></p><p></p><p>“July is a very special month to me — it’s the month of my birthday and of the best cherries.” — Designed by <a href="https://izhik.com/">Igor Izhik</a> from Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e5e3757-f986-4a53-bf01-5dcbf3e50346/july-15-summer-never-ends-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3fbc34-cdd9-458f-998d-79234057df5b/july-15-summer-never-ends-preview.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3fbc34-cdd9-458f-998d-79234057df5b/july-15-summer-never-ends-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Fire Camp<p></p><p></p><p>“What’s better than a starry summer night with an (unexpected) friend around a fire camp with some marshmallows? Happy July!” — Designed by <a href="https://etiennemansard.com/">Etienne Mansard</a> from the UK.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a193982-ecfe-4701-9809-ae4962f3cbea/july-17-fire-camp-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6bf0b33e-80dc-42ef-8a79-273dd775e9b8/july-17-fire-camp-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6bf0b33e-80dc-42ef-8a79-273dd775e9b8/july-17-fire-camp-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-2048x1536.jpg">2048x1536</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Cactus Hug<p></p><p></p><p>Designed by <a href="https://www.iliscreative.com">Ilaria Bagnasco</a> from Italy.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ba59339-0606-4f62-adee-f504e32dd5ab/july-17-cactus-hug-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4851b8-8e30-4bc2-b4f3-50270d400fdd/july-17-cactus-hug-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4851b8-8e30-4bc2-b4f3-50270d400fdd/july-17-cactus-hug-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-2560x1600.jpg">2560x1600</a></li></ul> <p></p>Melting July<p></p><p></p><p>“July often brings summer heat and we all wish for something cold to take it away… If you take a closer look, you will see an ice cream melting from the sunset. Bon appetit!” — Designed by <a href="https://www.popwebdesign.de/">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52951d6-d5e1-4c7a-ab4f-0dbf94d408a1/july-17-melting-july-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bbc2d132-c70d-4da9-bba7-ea17da755c98/july-17-melting-july-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bbc2d132-c70d-4da9-bba7-ea17da755c98/july-17-melting-july-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Summer Essentials<p></p><p></p><p>“A few essential items for the summertime weather at the beach, park, and everywhere in-between.” — Designed by <a href="https://dribbble.com/zvandehey">Zach Vandehey</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b76a80e0-f512-46ed-897c-c4bb4209c17b/july-12-summer-essentials-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f0df6f6-c026-466b-aaf0-58320646d673/july-12-summer-essentials-preview.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f0df6f6-c026-466b-aaf0-58320646d673/july-12-summer-essentials-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-2560x1440.jpg">2560x1440</a></li></ul> ]]></content:encoded> <author>hello@smashingmagazine.com (Cosima Mielke)</author> <enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-stamped-in-summer-preview-opt.png" length="0" type="image/png"/> </item> <item> <title><![CDATA[Can Good UX Protect Older Users From Digital Scams?]]></title> <link>https://smashingmagazine.com/2025/06/can-good-ux-protect-older-users-digital-scams/</link> <guid>https://smashingmagazine.com/2025/06/can-good-ux-protect-older-users-digital-scams/</guid> <pubDate>Wed, 25 Jun 2025 12:00:00 GMT</pubDate> <description><![CDATA[As online scams become more sophisticated, Carrie Webster explores whether good UX can serve as a frontline defense, particularly for non-tech-savvy older users navigating today’s digital world.]]></description> <content:encoded><![CDATA[<p>A few years ago, my mum, who is in her 80s and not tech-savvy, almost got scammed. She received an email from what appeared to be her bank. It looked convincing, with a professional logo, clean formatting, and no obvious typos. The message said there was a suspicious charge on her account and presented a link asking her to “verify immediately.”</p><p>She wasn’t sure what to do. So she called me.</p><p>That hesitation saved her. The email was fake, and if she’d clicked on the link, she would’ve landed on a counterfeit login page, handing over her password details without knowing it.</p><p>That incident shook me. I design digital experiences for a living. And yet, someone I love almost got caught simply because a bad actor knew how to <em>design well</em>. That raised a question I haven’t stopped thinking about since: <strong>Can good UX protect people from online scams?</strong></p><p>Quite apart from this incident, I see my Mum struggle with most apps on her phone. For example, navigating around her WhatsApp and YouTube apps seems to be very awkward for her. She is not used to accessing the standard app navigation at the bottom of the screen. What’s “intuitive” for many users is simply not understood by older, non-tech users. </p>Brief Overview Of How Scams Are Evolving Online<p><a href="https://www.macquarie.com.au/security-and-fraud/scams.html">Online scams</a> are becoming increasingly sophisticated, leveraging advanced technologies like artificial intelligence and deepfake videos to create more convincing yet fraudulent content. Scammers are also exploiting new digital platforms, including social media and messaging apps, to reach victims more directly and personally. </p><p>Phishing schemes have become more targeted, often using personal information taken from social media to craft customised attacks. Additionally, scammers are using crypto schemes and fake investment opportunities to lure those seeking quick financial gains, making online scams more convincing, diverse, and harder to detect.</p>The Rise In Fraud Targeting Older, Less Tech-savvy Users<p>In 2021, there were more than <a href="https://theconversation.com/are-older-adults-more-vulnerable-to-scams-what-psychologists-have-learned-about-whos-most-susceptible-and-when-227991#:~:text=Social%20and%20emotional%20influences%20are,to%20fraudulent%20emails%20and%20robocalls.&text=Finally%2C%20an%20individual's%20brain%20and,make%20someone%20appear%20less%20trustworthy.">90,000 older victims of fraud</a>, according to the FBI. These cases resulted in US$1.7 billion in losses, a 74% increase compared with 2020. Even so, that may be a significant undercount since embarrassment or lack of awareness keeps some victims from reporting.</p><p>In Australia, the ACCC’s 2023 “<a href="https://www.guests.com.au/accounting-news/2024-05/accc-scam-report/">Targeting Scams</a>” report revealed that Australians aged 65 and over were the only age group to experience an increase in scam losses compared to the previous year. Their losses rose by 13.3% to $120 million, often following contact with scammers on social media platforms.</p><p>In the UK, nearly <a href="https://www.independentage.org/news-media/press-releases/new-data-shows-online-scams-cost-older-people-an-average-of-ps4000-but">three in five (61%) people aged over 65</a> have been the target of fraud or a scam. On average, older people who have been scammed have lost nearly £4,000 each.</p><p>According to <a href="https://www.ftc.gov/news-events/news/press-releases/2024/10/ftc-issues-annual-report-congress-agencys-actions-protect-older-adults">global consumer protection agencies</a>, people over 60 are more likely to lose money to online scams than any other group. That’s a glaring sign: we need to rethink how we’re designing experiences for them.</p><p>Older users are disproportionately <a href="https://silversafeandsecure.org/resources-blog/why-do-scams-target-older-people-a-short-guide">targeted by scammers</a> for several reasons:</p><ul><li><strong>They’re perceived as having more savings or assets.</strong></li><li><strong>They’re less likely to be digital natives</strong>, so they may not spot the red flags others do.</li><li><strong>They tend to trust authority figures and brands</strong>, especially when messages appear “official.”</li></ul><p>Scammers exploit trust. They impersonate banks, government agencies, health providers, and even family members. The one that scares me the most is the ability to use AI to mimic a loved one’s voice — anyone can be tricked by this. </p>Cognitive Load And Decision Fatigue In Older Users<p>Imagine navigating a confusing mobile app after a long day. Now imagine you’re in your 70s or 80s; your eyesight isn’t as sharp, your finger tapping isn’t as accurate, and every new screen feels like a puzzle.</p><p>As people age, they may experience <a href="https://uark.pressbooks.pub/hbse1/chapter/cognitive-development-in-late-adulthood_ch_29/">slower processing speeds</a>, reduced working memory, and lower tolerance for complexity. That means:</p><ul><li>Multistep processes are harder to follow.</li><li>Unexpected changes in layout or behaviour can cause anxiety.</li><li>Vague language increases confusion.</li></ul><p>Decision fatigue hits harder, too. If a user has already made five choices on an app, they may click the 6th button without fully understanding what it does, especially if it seems to be part of the flow. </p><p>Scammers rely on these factors. However, good UX can help to reduce it.</p>The Digital Literacy Gap And Common Pain Points<p>There’s a big difference between someone who grew up with the internet and someone who started using it in their 60s. <a>Older users often struggle with</a>:</p><ul><li>Recognising safe vs. suspicious links;</li><li>Differentiating between ads and actual content;</li><li>Knowing how to verify sources;</li><li>Understanding terms like “multi-factor authentication” or “phishing”.</li></ul><p>They may also be more likely to blame themselves when something goes wrong, leading to underreporting and repeat victimization.</p><p>Design can help to bridge some of that gap. But only if we build with their experience in mind.</p>The Role UX Designers Can Play In Preventing Harm<p>As UX designers, we focus on making things easy, intuitive, and accessible. But we can also shape how people <em>understand risk</em>.</p><p>Every choice, from wording to layout to colour, can affect how users interpret safety cues. When we design for the right cues, we help users avoid mistakes. When we get them wrong or ignore them altogether, we leave people vulnerable.</p><p>The good news? We have tools. We have influence. And in a world where digital scams are rising, we can use both to design for protection, not just productivity.</p>UX As The First Line Of Defence<p>The list below describes some UX design improvements that we can consider as designers:</p><h3>1. Clear, Simple Design As A Defence Mechanism</h3><ul><li>Simple interfaces reduce user errors and scam risks.</li><li>Use linear flows, fewer input fields, and clear, consistent instructions.</li><li>Helps users feel confident and spot unusual activity.</li></ul><h3>2. Make Security Cues Obvious And Consistent</h3><ul><li>Users rely on visible indicators: padlocks, HTTPS, and verification badges.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/1-obvious-padlock-icon.png" /></p><ul><li>Provide clear warnings for risky actions and unambiguous button labels.</li></ul><h3>3. Prioritize Clarity In Language</h3><ul><li>Use plain, direct language for critical actions (e.g., “Confirm $400 transfer”).</li><li>Avoid vague CTAs like “Continue” or playful labels like “Let’s go!”</li><li>Clear language reduces uncertainty, especially for older users.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/2-action-buttons-instructions.png" /></p><h3>4. Focus On Accessibility And Readability</h3><ul><li>Use minimum 16px fonts and high-contrast colour schemes.</li><li>Provide clear spacing and headings to improve scanning.</li><li>Accessibility benefits everyone, not just older users.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/3-large-text-icons.jpg" /></p><h3>5. Use Friction To Protect, Not Hinder</h3><ul><li>Intentional friction (e.g., verification steps or warnings) can prevent mistakes.</li><li>Thoughtfully applied, it enhances safety without frustrating users.</li></ul><h3>6. Embed Contextual Education</h3><ul><li>Include just-in-time tips, tooltips, and passive alerts.</li><li>Help users understand risks within the flow, not after the fact.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/4-tooltips.png" /></p>What Can’t UX Fix?<p>Let’s be realistic: UX isn’t magic. We can’t stop phishing emails from landing in someone’s inbox. We can’t rewrite bad policies, and we can’t always prevent users from clicking on a well-disguised trap.</p><p>I personally think that even good UX may be limited in helping people like my mother, who will never be tech-savvy. To help those like her, ultimately, additional elements like support contact numbers, face-to-face courses on how to stay safe on your phone, and, of course, help from family members as required. These are all about human contact touch points, which can never be replaced by any kind of digital or AI support that may be available.</p><p>What we <em>can</em> do as designers is build systems that make hesitation feel natural. We can provide visual clarity, reduce ambiguity, and inject small moments of friction that nudge users to double-check before proceeding, especially in financial and banking apps and websites. </p><p>That hesitation might be the safeguard we need. </p>Other Key Tips To Help Seniors Avoid Online Scams<h3>1. Be Skeptical Of Unsolicited Communications</h3><p>Scammers often pose as <a href="https://allseniors.org/articles/avoiding-scams-a-seniors-guide-to-online-and-phone-security">trusted entities</a> like banks, government agencies, or tech support to trick individuals into revealing personal information. Avoid clicking on links or downloading attachments from unknown sources, and never share personal details like your Medicare number, passwords, or banking information unless you’ve verified the request independently.</p><h3>2. Use Strong, Unique Passwords And Enable Two-Factor Authentication</h3><p>Create complex passwords that combine letters, numbers, and symbols, and avoid reusing passwords across different accounts. Whenever possible, enable two-factor authentication (2FA) to add an extra layer of security to your online accounts.</p><h3>3. Stay Informed About Common Scams</h3><p><a href="https://allseniors.org/articles/avoiding-scams-a-seniors-guide-to-online-and-phone-security/">Educate yourself</a> on prevalent scams targeting seniors, such as phishing emails, romance scams, tech support fraud, and investment schemes. <a href="https://www.ageuk.org.uk/information-advice/money-legal/scams-fraud/scams-guide/">Regularly consult trusted resources</a> like the NCOA and Age UK for updates on new scam tactics and prevention strategies.</p><h3>4. Verify Before You Act</h3><p>If you <a href="https://www.kiplinger.com/retirement/stop-scammers-targeting-your-retirement-savings">receive a request</a> for money or personal information, especially if it's urgent, take a moment to verify its legitimacy. Contact the organization directly <strong>using official contact information</strong>, not the details provided in the suspicious message. Be particularly cautious with unexpected requests from supposed family members or friends.</p><h3>5. Report Suspected Scams Promptly</h3><p>If you believe you've encountered a scam, report it to the appropriate authorities. Reporting helps protect others and contributes to broader efforts to combat fraud.</p><p><strong>For more comprehensive information and resources, consider exploring the following:</strong></p><ul><li><a href="https://www.ncoa.org/article/22-tips-for-seniors-to-avoid-scams/">National Council on Aging: 22 Tips for Seniors to Avoid Scams</a></li><li><a href="https://www.ageuk.org.uk/information-advice/money-legal/scams-fraud/scams-guide/">Age UK: Avoiding Scams Information Guide</a></li><li><a href="https://www.esafety.gov.au/seniors/online-scams">eSafety Commissioner: Online Scams for Seniors</a></li></ul>Examples Of Good Alert/Warning UX In Banking Platforms<p>I recall my mother not recognising a transaction in her banking app, and she thought that money was being taken from her account. It turns out that it was a legitimate transaction made in a local cafe, but the head office was located in a suburb she was not familiar with, which caused her to think it was fraudulent. </p><p>This kind of scenario could easily be addressed with a feature I have seen in the ING banking app (International Netherlands Group). You tap on the transaction to view more information about your transaction. </p><ul><li><strong>ING bank</strong>: You can now select a transaction to get more information on the business.</li></ul><a href="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/5-ing-banking-app.gif"><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/5-ing-banking-app.gif" /></a>ING Banking App: click on the transaction to view more details. (Source: <a href="https://helphub.ing.com.au/how-to/additional-transaction-details/">ING Help Hub</a>) <ul><li><strong>Banking apps</strong> like NAB (National Australia Bank) now interrupt suspicious transfers with messages like, “Have you spoken to this person on the phone? Scammers often pose as trusted contacts.” <a href="https://news.nab.com.au/news/nab-payment-alerts-latest/">NAB said</a> that December was the biggest month in 2024 for abandoned payments, with customers scrapping $26 million worth of payments after receiving a payment alert.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/6-nab-payment-alerts.jpg" /></p><ul><li><strong>Macquarie Bank</strong> has introduced additional prompts for bank transactions to confirm the user’s approval of all transactions. </li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/7-macquarie-bank-approve-transactions.png" /></p><ul><li><strong>Monzo Bank</strong> has added three security elements to reduce online fraud for banking transactions:<ul><li><strong>Verified Locations</strong>: Sending or moving large amounts of money from locations that the account holder has marked as safe. This helps block fraudsters from accessing funds if they’re not near these trusted places.</li><li><strong>Trusted Approvers</strong>: For large transactions, a trusted contact must give the green light. This adds protection if their phone is stolen or if they want to safeguard someone who may be more vulnerable.</li><li><strong>Secure QR Codes</strong>: Account holders can generate a special QR code and keep it stored in a safe place. They scan it when needed to unlock extra layers of security.</li></ul></li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/8-security-options-online-transactions.png" /></p><ul><li><strong>Email platforms</strong> like <strong>Gmail</strong> highlight spoofed addresses or impersonation attempts with yellow banners and caution icons.</li></ul><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/9-gmail-yellow-banner.png" /></p><p>These interventions are not aimed at stopping users, but they can give them one last chance to rethink their transactions. That’s powerful.</p><p>Finally, here’s an example of clear UX cues that streamline the experience and guide users through their journey with greater confidence and clarity.</p><p><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/10-ux-trusted-experience.png" /></p>Conclusion<p>Added security features in banking apps, like the examples above, aren’t just about preventing fraud; they’re examples of thoughtful UX design. These features are built to feel natural, not burdensome, helping users stay safe without getting overwhelmed. As UX professionals, we have a responsibility to design with protection in mind, anticipating threats and creating experiences that guide users away from risky actions. Good UX in financial products isn’t just seamless; it’s about security by design.</p><p>And in a world where digital deception is on the rise, <strong>protection is usability.</strong> Designers have the power and the responsibility to make interfaces that support safer choices, especially for older users, whose lives and life savings may depend on a single click.</p><p>Let’s stop thinking of security as a backend concern or someone else’s job. Let’s design systems that are scam-resistant, age-inclusive, and intentionally clear. And don’t forget to reach out with the additional human touch to help your older family members.</p><p>When it comes down to it, <strong>good UX isn’t just helpful — it can be life-changing.</strong></p>]]></content:encoded> <author>hello@smashingmagazine.com (Carrie Webster)</author> <enclosure url="http://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/can-good-ux-protect-older-users-digital-scams.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Decoding The SVG <code>path</code> Element: Curve And Arc Commands]]></title> <link>https://smashingmagazine.com/2025/06/decoding-svg-path-element-curve-arc-commands/</link> <guid>https://smashingmagazine.com/2025/06/decoding-svg-path-element-curve-arc-commands/</guid> <pubDate>Mon, 23 Jun 2025 10:00:00 GMT</pubDate> <description><![CDATA[On her quest to teach you how to code vectors by hand, Myriam Frisano’s second installment of a `path` deep dive explores the most complex aspects of SVG’s most powerful element. She’ll help you understand the underlying rules and function of how curves and arcs are constructed. By the end of it, your toolkit is ready to tackle all types of tasks required to draw with code — even if some of the lines twist and turn.]]></description> <content:encoded><![CDATA[<p>In the <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">first part of decoding the SVG <code>path</code> pair</a>, we mostly dealt with converting things from semantic tags (<code>line</code>, <code>polyline</code>, <code>polygon</code>) into the <code>path</code> command syntax, but the <code>path</code> element didn’t really offer us any new shape options. This will change in this article as we’re learning how to draw <strong>curves</strong> and <strong>arcs</strong>, which just refer to parts of an ellipse. </p>TL;DR On Previous Articles<p>If this is your first meeting with this series, I recommend you familiarize yourself with the <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">basics of hand-coding SVG</a>, as well as <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/marker">how the <code><marker></code> works</a> and have a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate">basic understanding of animate</a>, as this guide doesn’t explain them. I also recommend knowing about the <code>M/m</code> command within the <code><path></code> <code>d</code> attribute (I wrote the aforementioned <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">article on path line commands</a> to help). </p><p><strong>Note</strong>: <em>This article will solely focus on the syntax of curve and arc commands and not offer an introduction to <code>path</code> as an element.</em></p><p>Before we get started, I want to do a quick recap of how I code SVG, which is by using JavaScript. I don’t like dealing with numbers and math, and reading SVG code that has numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and all written out, I have a much better time with this type of code, and I think you will, too.</p><p>As the goal of this article is about understanding <code>path</code> syntax and not about doing placement or how to leverage loops and other more basic things, I will not run you through the entire setup of each example. I’ll share some snippets of the code, but please note that it may be slightly adjusted from the CodePen or simplified to make the article easier to read. However, if there are specific questions about code not part of the text that’s in the CodePen demos — the comment section is open, as always.</p><p>To keep this all framework-agnostic, the code is written in vanilla JavaScript, though, in practice, TypeScript comes highly recommended when dealing with complex images.</p>Drawing Bézier Curves<p>Being able to draw lines, polygons, polylines, and compounded versions of them is all fun and nice, but <code>path</code> can also do more than just offer more cryptic implementations of basic semantic SVG tags.</p><p>One of those additional types is Bézier curves.</p><p>There are multiple different curve commands. And this is where the idea of points and control points comes in.</p><blockquote><strong>Bézier math plotting is out of scope for this article.</strong><br />But, there is a visually gorgeous video by Freya Holmér called <a href="https://youtu.be/aVwxzDHniEw?si=WB_3i88VVJlZS6jf">The Beauty of Bézier Curves</a> which gets into the construction of cubic and quadratic bézier curves that features beautiful animation and the math becomes a lot easier to digest.</blockquote> <p>Luckily, SVG allows us to draw quadratic curves with one control point and cubic curves with two control points without having to do any additional math.</p><p>So, what is a control point? A control point is the position of the handle that controls the curve. It is not a point that is drawn.</p><p>I found the best way to understand these path commands is to render them like a GUI, like Affinity and Illustrator would. Then, draw the “handles” and draw a few random curves with different properties, and see how they affect the curve. Seeing that animation also really helps to see the mechanics of these commands.</p><p>This is what I’ll be using markers and animation for in the following visuals. You will notice that the markers I use are rectangles and circles, and since they are connected to lines, I can make use of <code>marker</code> and then save myself a lot of animation time because these additional elements are rigged to the system. (And animating a single <code>d</code> command instead of <code>x</code> and <code>y</code> attributes separately makes the SVG code also much shorter.)</p><h3>Quadratic Bézier Curves: <code>Q</code> & <code>T</code> Commands</h3><p>The <code>Q</code> command is used to draw quadratic béziers. It takes two arguments: the control point and the end point.</p><p>So, for a simple curve, we would start with <code>M</code> to move to the start point, then <code>Q</code> to draw the curve.</p><div><pre><code>const path = <code>M${start.x} ${start.y} Q${control.x} ${control.y} ${end.x} ${end.y}</code>;</code></pre></div> <p>Since we have the Control Point, the Start Point, and the End Point, it’s actually quite simple to render the singular handle path like a graphics program would.</p><p>Funny enough, you probably have never interacted with a quadratic Bézier curve like with a cubic one in most common GUIs! Most of the common programs will convert this curve to a cubic curve with two handles and control points as soon as you want to play with it. </p><p>For the drawing, I created a couple of markers, and I’m drawing the handle in red to make it stand out a bit better.</p><p>I also stroked the main <code>path</code> with a gradient and gave it a crosshatch pattern fill. (We looked at <code>pattern</code> in <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">my first article</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient"><code>linearGradient</code></a> is fairly similar. They’re both <code>def</code> elements you can refer to via <code>id</code>.) I like seeing the fill, but if you find it distracting, you can modify the variable for it. </p><p>I encourage you to look at the example with and without the rendering of the handle to see some of the nuance that happens around the points as the control points get closer to them. </p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/LEVXLoJ">SVG Path Quadratic Bézier Curve Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><blockquote><strong>Quadratic Béziers are the “less-bendy” ones.</strong><br />These curves always remain somewhat related to “u” or “n” shapes and can’t be manipulated to be contorted. They can be squished, though.</blockquote> <p>Connected Bézier curves are called “Splines”. And there is an additional command when chaining multiple quadratic curves, which is the <code>T</code> command.</p><p>The <code>T</code> command is used to draw a curve that is connected to the previous curve, so it always has to follow a <code>Q</code> command (or another <code>T</code> command). It only takes one argument, which is the endpoint of the curve.</p><div><pre><code>const path = <code>M${p1.x} ${p1.y} Q${cP.x} ${cP.y} ${p2.x} ${p2.y} T${p3.x} ${p3.y}</code></code></pre></div> <p>The <code>T</code> command will actually use information about our control Point <code>cP</code> within the <code>Q</code> command. </p><p>To see how I created the following example. Notice that the inferred handles are drawn in green, while our specified controls are still rendered in red.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/vEOQJBM">SVG Path Quadratic Curve T Command [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><p>OK, so the top curve takes two <code>Q</code> commands, which means, in total, there are three control points. Using a separate control point to create the scallop makes sense, but the third control point is just a reflection of the second control point through the preceding point.</p><p>This is what the <code>T</code> command does. It infers control points by reflecting them through the end point of the preceding <code>Q</code> (or <code>T</code>) command. You can see how the system all links up in the animation below, where all I’ve manipulated is the position of the main points and the first control points. The inferred control points follow along.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/WbvYENx">SVG Path Quadratic Bézier Spline T Command Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><p>The <code>q</code> and <code>t</code> commands also exist, so they will use relative coordinates.</p><p>Before I go on, if you do want to interact with a cubic curve, <a href="https://yqnn.github.io/svg-path-editor/">SVG Path Editor</a> allows you to edit all path commands very nicely.</p><h3>Cubic Bézier Curves: <code>C</code> And <code>S</code></h3><p>Cubic Bézier curves work basically like quadratic ones, but instead of having one control point, they have two. This is probably the curve you are most familiar with.</p><p>The order is that you start with the first control point, then the second, and then the end point.</p><div><pre><code>const path = <code>M${p1.x} ${p1.y} C${cP1.x} ${cP1.y} ${cP2.x} ${cP2.y} ${p2.x} ${p2.y}</code>;</code></pre></div> <p>Let’s look at a visual to see it in action.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/EajOvaL">SVG Path Cubic Bézier Curve Animation [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><blockquote><strong>Cubic Bézier curves are contortionists.</strong><br />Unlike the quadratic curve, this one can curl up and form loops and take on completely different shapes than any other SVG element. It can split the filled area into two parts, while the quadratic curve can not.</blockquote> <p>Just like with the <code>T</code> command, a reflecting command is available for cubic curves <code>S</code>.</p><p>When using it, we get the first control point through the reflection, while we can define the new end control point and then the end point. Like before, this requires a spline, so at least one preceding <code>C</code> (or <code>S</code>) command.</p><pre><code>const path = ` M ${p0.x} ${p0.y} C ${c0.x} ${c0.y} ${c1.x} ${c1.y} ${p1.x} ${p1.y} S ${c2.x} ${c2.y} ${p2.x} ${p2.y}`;</code></pre> <p>I created a living visual for that as well.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/RNPqZPz">SVG Path Cubic Bézier Spline S Command Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><blockquote><strong>When to use <code>T</code> and <code>S</code>:</strong><br />The big advantage of using these chaining reflecting commands is if you want to draw waves or just absolutely ensure that your spline connection is smooth.</blockquote> <p>If you can’t use a reflection but want to have a nice, smooth connection, make sure your control points form a straight line. If you have a kink in the handles, your spline will get one, too.</p>Arcs: <code>A</code> Command<p>Finally, the last type of <code>path</code> command is to create arcs. Arcs are sections of circles or ellipses.</p><p>It’s my least favorite command because there are so many elements to it. But it is the secret to drawing a proper donut chart, so I have a bit of time spent with it under my belt.</p><p>Let’s look at it.</p><p>Like with any other <code>path</code> command, lowercase implies relative coordinates. So, just as there is an <code>A</code> command, there’s also an <code>a</code>.</p><p>So, an arc path looks like this:</p><div><pre><code>const path = <code>M${start.x} ${start.y} A${radius.x} ${radius.y} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}</code>;</code></pre></div> <p>And what the heck are <code>xAxisRotation</code>, <code>largeArcFlag</code>, and <code>sweepFlag</code> supposed to be? In short:</p><ul><li><code>xAxisRotation</code> is the rotation of the underlying ellipse’s axes in degrees.</li><li><code>largeArcFlag</code> is a boolean value that determines if the arc is greater than 180°.</li><li><code>sweepFlag</code> is also a boolean and determines the arc direction, so does it go clockwise or counter-clockwise?</li></ul><p>To better understand these concepts, I created this visual.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/GgJwvZR">SVG Path Arc Command Visuals [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><h3>Radius Size</h3><p>You’ll notice in that CodePen that there are ellipses drawn for each command. In the top row, they are overlapping, while in the bottom row, they are stacked up. Both rows actually use the same <code>radius.x</code> and <code>radius.y</code> values in their arc definitions, while the distance between the start and end points increases for the second row.</p><p>The reason why the stacking happens is that the radius size is only taken into consideration if the start and end points fit within the specified ellipse. That behavior surprised me, and thus, I dug into the specs and found the following information on how the arc works:</p><blockquote>“Arbitrary numerical values are permitted for all elliptical arc parameters (other than the boolean flags), but user agents must make the following adjustments for invalid values when rendering curves or calculating their geometry:<br /><br />If the endpoint (<strong>x</strong>, <strong>y</strong>) of the segment is identical to the current point (e.g., the endpoint of the previous segment), then this is equivalent to omitting the elliptical arc segment entirely.<br /><br />If either <strong>rx</strong> or <strong>ry</strong> is 0, then this arc is treated as a straight line segment (a “lineto”) joining the endpoints.<br /><br />If either <strong>rx</strong> or <strong>ry</strong> have negative signs, these are dropped; the absolute value is used instead.<br /><br />If <strong>rx</strong>, <strong>ry</strong> and <strong>x-axis-rotation</strong> are such that there is no solution (basically, the ellipse is not big enough to reach from the current point to the new endpoint) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).<br /><br />See the appendix section <a href="https://svgwg.org/svg2-draft/implnote.html#ArcCorrectionOutOfRangeRadii">Correction of out-of-range radii</a> for the mathematical formula for this scaling operation.”<br /><br />— <a href="https://svgwg.org/svg2-draft/paths.html#ArcOutOfRangeParameters">9.5.1 Out-of-range elliptical arc parameters</a></blockquote> <p>So, really, that stacking is just nice and graceful error-handling and not how it was intended. Because the top row is how arcs should be used.</p><blockquote>When plugging in logical values, the underlying ellipses and the two points give us four drawing options for how we could connect the two points along an elliptical path. That’s what the boolean values are for.</blockquote> <h3><code>xAxisRotation</code></h3><p>Before we get to the booleans, the crosshatch pattern shows the <code>xAxisrotation</code>. The ellipse is rotated around its center, with the degree value being in relation to the x-direction of the SVG.</p><p>So, if you work with a circular ellipse, the rotation won’t have any effect on the arc (except if you use it in a pattern like I did there).</p><h3>Sweep Flag</h3><p>Notice the little arrow marker to show the arc drawing direction. If the value is 0, the arc is drawn clockwise. If the value is 1, the arc is drawn counterclockwise.</p><h3>Large Arc Flag</h3><p>The large Arc Flag tells the path if you want the smaller or the larger arc from the ellipse. If we have a scaled case, we get exactly 180° of our ellipse.</p><blockquote>Arcs usually require a lot more annoying circular number-wrangling than I am happy doing (As soon as radians come to play, I tend to spiral into rabbit holes where I have to relearn too much math I happily forget.)<br /><br />They are more reliant on values being related to each other for the outcome to be as expected and there’s just so much information going in.<br /><br />But — and that’s a bit but — arcs are wonderfully powerful!</blockquote> Conclusion<p>Alright, that was a lot! However, I do hope that you are starting to see how <code>path</code> commands can be helpful. I find them extremely useful to illustrate data.</p><p>Once you know how easy it is to set up stuff like grids, boxes, and curves, it doesn’t take many more steps to create visualizations that are a bit more unique than what the standard data visualization libraries offer.</p><blockquote>With everything you’ve learned in this series of articles, you’re basically fully equipped to render all different types of charts — or other types of visualizations.</blockquote> <p>Like, how about visualizing the underlying cubic-bezier of something like <code>transition-timing-function: ease;</code> in CSS? That’s the thing I made to figure out how I could turn those transition-timing-functions into something an <code><animate></code> tag understands.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/gbpQxgp">CSS Cubic Beziers as SVG Animations & CSS Transition Comparisons [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.</p><p>SVG is fun and quirky, and the <code>path</code> element may be the holder of the most overwhelming string of symbols you’ve ever laid eyes on during code inspection. However, if you take the time to understand the underlying logic, it all transforms into one beautifully simple and extremely powerful syntax.</p><p>I hope with this pair of <code>path</code> decoding articles, I managed to expose the underlying mechanics of how path plots work. If you want even more resources that don’t require you to dive through specs, try the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">MDN tutorial about paths</a>. It’s short and compact, and was the main resource for me to learn all of this. </p><p>However, since I wrote my deep dive on the topic, I stumbled into the beautiful <a href="https://svg-tutorial.com">svg-tutorial.com</a>, which does a wonderful job visualizing SVG coding as a whole but mostly features my favorite arc visual of them all in the <a href="https://svg-tutorial.com/editor/arc">Arc Editor</a>. And if you have a path that you’d like properly decoded without having to store all of the information in these two articles, there’s <a href="https://svg-path-visualizer.netlify.app/">SVG Path Visualizer</a>, which breaks down path information super nicely.</p><p>And now: Go forth and have fun playing in the matrix.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Myriam Frisano)</author> <enclosure url="http://files.smashing.media/decoding-svg-path-element-curve-arc-commands/decoding-svg-path-element-curve-arc-commands.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Meet Accessible UX Research, A Brand-New Smashing Book]]></title> <link>https://smashingmagazine.com/2025/06/accessible-ux-research-pre-release/</link> <guid>https://smashingmagazine.com/2025/06/accessible-ux-research-pre-release/</guid> <pubDate>Fri, 20 Jun 2025 16:00:00 GMT</pubDate> <description><![CDATA[Meet “Accessible UX Research,” our upcoming book to make your UX research inclusive. Learn how to recruit, plan, and design with disabled participants in mind. <strong>Print shipping in August 2025. eBook available for download later this summer.</strong> <a href="/printed-books/accessible-ux-research/" data-product-sku="accessible-ux-research" data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-silent="true">Pre-order the book.</a>]]></description> <content:encoded><![CDATA[<p><strong>UX research</strong> can take so much of the guesswork out of the design process! But it’s easy to forget just how <em>different</em> people are and how their needs and preferences can vary. We can’t predict the needs of every user, but we shouldn’t expect different people using the product in roughly the same way. That’s how we end up with an incomplete, inaccurate, or simply wrong picture of our customers.</p> <p>There is no shortage of accessibility checklists and guidelines. But accessibility isn’t a checklist. It doesn’t happen by accident. It’s a <strong>dedicated effort</strong> to include and consider and understand different needs of different users to make sure everyone can use our products successfully. That’s why we’ve teamed up with Michele A. Williams on a shiny new book around just that.</p> <p>Meet <em>Accessible UX Research</em>, your guide to <strong>making UX research more inclusive</strong> of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. <a href="/printed-books/accessible-ux-research/">Pre-order the book.</a></p> <a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png" /> </a> About The Book<p>The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a <strong>practical guide to inclusive UX research</strong>, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.</p> <p>Inside, you’ll learn how to:</p> <ul><li><strong>Plan research</strong> that includes disabled participants from the start,</li><li><strong>Recruit participants</strong> with disabilities,</li><li><strong>Facilitate sessions</strong> that work for a range of access needs,</li><li><strong>Ask better questions</strong> and avoid unintentionally biased research methods,</li><li><strong>Build trust and confidence</strong> in your team around accessibility and inclusion.</li></ul> <p>The book also challenges common assumptions about disability and urges readers to <strong>rethink what inclusion really means</strong> in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.</p> <p>High-quality hardcover. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. <strong>Print shipping in August 2025. eBook available for download later this summer.</strong> <a href="/printed-books/accessible-ux-research/">Pre-order the book.</a></p> Contents<ol><li><strong>Disability mindset</strong>: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</li><li><strong>Diversity of disability</strong>: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</li><li><strong>Disability in the stages of UX research</strong>: Disabled participants can and should be part of every research phase — formative, prototype, and summative.</li><li><strong>Recruiting disabled participants</strong>: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</li><li><strong>Designing your research</strong>: While our goal is to influence accessible products, our research execution must also be accessible.</li><li><strong>Facilitating an accessible study</strong>: Preparation and communication with your participants can ensure your study logistics run smoothly.</li><li><strong>Analyzing and reporting with accuracy and impact</strong>: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.</li><li><strong>Disability in the UX research field</strong>: Inclusion isn’t just for research <em>participants</em>, it’s important for our <em>colleagues</em> as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</li></ol> Who This Book Is For<p>Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…</p> <ol><li>You have been tasked to <strong>improve accessibility of your product</strong>, but need to know where to start to facilitate this successfully.</li><li>You want to establish a <strong>culture for accessibility</strong> in your company, but not sure how to make it work.</li><li>You want to <strong>move from WCAG/EAA compliance</strong> to established accessibility practices and inclusion in research practices and beyond.</li><li>You want to <strong>improve your overall accessibility knowledge</strong> and be viewed as an Accessibility Specialist for your organization.</li></ol> <a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-varnish-opt.png" /> </a> About the Author<p><a href="https://mawconsultingllc.com/"><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/michele-williams-opt.png" /></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.</p> Testimonials<blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/eric-bailey-opt.png" />“<em>Accessible UX Research</em> stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a <strong>solid framework</strong> for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.<br /><br />This is <strong>the book I wish I had</strong> when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”<br /><br />Eric Bailey, Accessibility Advocate</blockquote> <blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/devon-pershing-opt.png" />“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a <strong>critical piece in the puzzle</strong> of actually doing and integrating that research into accessibility work day to day.”<br /><br />Devon Pershing, Author of <em>The Accessibility Operations Guidebook</em></blockquote> <blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/manuel-matuzovic-opt.png" />“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the <strong>depth of human experience</strong>. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”<br /><br />Manuel Matuzović, Author of the <em>Web Accessibility Cookbook</em></blockquote> <blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/anna-e-cook-opt.png" />“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A <strong>strong focus on real-world application</strong> equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”<br /><br />Anna E. Cook, Accessibility and Inclusive Design Specialist</blockquote> Technical Details<ul><li>ISBN: 978-3-910835-03-0 (print)</li><li><strong>Quality hardcover</strong>, stitched binding, ribbon page marker.</li><li>Free worldwide airmail <strong>shipping from Germany starting in August 2025</strong>.</li><li>eBook available for download as <strong>PDF, ePUB, and Amazon Kindle later this summer</strong>.</li><li><a href="/printed-books/accessible-ux-research/">Pre-order the book.</a></li></ul> Community Matters ❤️<p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em> as soon as it’s out</a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p> More Smashing Books & Goodies<p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p> <p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="/printed-books/">printed books that stand the test of time</a>. Addy, Heather, and Steven are three of these people. Have you checked out their books already?</p> <div> <div><a href="/printed-books/success-at-scale/"><img src="https://files.smashing.media/books/success-at-scale-cover-release-opt.png" /></a></div><h4><a href="/printed-books/success-at-scale/">Success at Scale</a></h4><p>A deep dive into how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale.</p><p><a href="/printed-books/success-at-scale/">Add to cart $44</a></p> <div><a href="/printed-books/understanding-privacy/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2da7a90-acdb-43c7-82b2-5225c33ca4d7/understanding-privacy-cover-new-opt.png" /></a></div><h4><a href="/printed-books/understanding-privacy/">Understanding Privacy</a></h4><p>Everything you need to know to put your users first and make a better web.</p><p><a href="/printed-books/understanding-privacy/">Add to cart $44</a></p> <div><a href="/printed-books/touch-design-for-mobile-interfaces/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png" /></a></div><h4><a href="/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4><p>Learn how touchscreen devices really work — and how people really use them.</p><p><a href="/printed-books/touch-design-for-mobile-interfaces/">Add to cart $44</a></p> </div> ]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png" length="0" type="image/png"/> </item> <item> <title><![CDATA[CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control]]></title> <link>https://smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/</link> <guid>https://smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/</guid> <pubDate>Thu, 19 Jun 2025 15:00:00 GMT</pubDate> <description><![CDATA[CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.]]></description> <content:encoded><![CDATA[<p>CSS is wild, really wild. And tricky. But let’s talk specifically about <strong>specificity</strong>.</p><p>When writing CSS, it’s close to impossible that you haven’t faced the frustration of styles not applying as expected — that’s specificity. You applied a style, it worked, and later, you try to override it with a different style and… nothing, it just ignores you. Again, specificity.</p><p>Sure, there’s the option of resorting to <code>!important</code> flags, but like all developers before us, it’s always <a href="https://cssguidelin.es/#important">risky and discouraged</a>. It’s way better to fully understand specificity than go down that route because otherwise you wind up fighting your own important styles.</p>Specificity 101<p>Lots of developers understand the concept of specificity in different ways.</p><blockquote>The core idea of specificity is that the CSS Cascade algorithm used by browsers determines which style declaration is applied when two or more rules match the same element.</blockquote> <p>Think about it. As a project expands, so do the specificity challenges. Let’s say Developer A adds <code>.cart-button</code>, then maybe the button style looks good to be used on the sidebar, but with a little tweak. Then, later, Developer B adds <code>.cart-button .sidebar</code>, and from there, any future changes applied to <code>.cart-button</code> might get overridden by <code>.cart-button .sidebar</code>, and just like that, the specificity war begins.</p><p><img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/1-specificity-tension.png" /></p><p>I’ve written CSS long enough to witness different strategies that developers have used to manage the specificity battles that come with CSS.</p><pre><code>/* Traditional approach */#header .nav li a.active { color: blue; } /* BEM approach */.header__nav-item--active { color: blue; } /* Utility classes approach */.text-blue { color: blue; } /* Cascade Layers approach */@layer components { .nav-link.active { color: blue; }}</code></pre> <p>All these methods reflect different strategies on how to control or at least maintain CSS specificity:</p><ul><li><strong>BEM</strong>: tries to simplify specificity by being explicit.</li><li><strong>Utility-first CSS</strong>: tries to bypass specificity by keeping it all atomic.</li><li><strong>CSS Cascade Layers</strong>: manage specificity by organizing styles in layered groups.</li></ul><p>We’re going to put all three side by side and look at how they handle specificity.</p><p><img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/2-different-strategies-control-css-specificity.png" /></p>My Relationship With Specificity<p>I actually used to think that I got the whole picture of CSS specificity. Like the usual inline greater than ID greater than class greater than tag. But, reading <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade">the MDN docs on how the CSS Cascade truly works</a> was an eye-opener.</p><p>There’s a code I worked on in an old codebase provided by a client, which looked something like this:</p><pre><code>/* Legacy code */#main-content .product-grid button.add-to-cart { background-color: #3a86ff; color: white; padding: 10px 15px; border-radius: 4px;} /* 100 lines of other code here */ /* My new CSS */.btn-primary { background-color: #4361ee; /* New brand color */ color: white; padding: 12px 20px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}</code></pre> <p>Looking at this code, no way that the <code>.btn-primary</code> class stands a chance against whatever specificity chain of selectors was previously written. As far as specification goes, CSS gives the first selector a specificity score of <code>1, 2, 1</code>: one point for the ID, two points for the two classes, and one point for the element selector. Meanwhile, the second selector is scored as <code>0, 1, 0</code> since it only consists of a single class selector.</p><p>Sure, I had some options:</p><ul><li>I could <strong>use <code>!important</code> on the properties</strong> in <code>.btn-primary</code> to override the ones declared in the stronger selector, but the moment that happens, be prepared to use it everywhere. So, I’d rather avoid it.</li><li>I could try <strong>going more specific</strong>, but personally, that’s just being cruel to the next developer (who might even be me).</li><li>I could <strong>change the styles of the existing code</strong>, but that’s adding to the specificity problem:</li></ul><pre><code>#main-content .product-grid .btn-primary { /* edit styles directly */}</code></pre> <p>Eventually, I ended up writing the whole CSS from scratch.</p><p><img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/3-legacy-modern-button.png" /></p><p>When <em>nesting</em> was introduced, I tried it to control specificity that way:</p><div><pre><code>.profile-widget { // ... other styles .header { // ... header styles .user-avatar { border: 2px solid blue; &.is-admin { border-color: gold; // This becomes .profile-widget .header .user-avatar.is-admin } } }}</code></pre></div> <p>And just like that, I have unintentionally created high-specificity rules. That’s how easily and naturally we can drift toward specificity complexities.</p><p>So, to save myself a lot of these issues, I have one principle I always abide by: <a href="https://css-tricks.com/strategies-keeping-css-specificity-low/"><strong>keep specificity as low as possible</strong></a>. And if the selector complexity is becoming a complex chain, I rethink the whole thing.</p>BEM: The OG System<p>The Block-Element-Modifier (BEM, for short) has been around the block (pun intended) for a long time. It is a methodological system for writing CSS that forces you to make every style hierarchy explicit. </p><pre><code>/* Block */.panel {} /* Element that depends on the Block */.panel__header {}.panel__content {}.panel__footer {} /* Modifier that changes the style of the Block */.panel--highlighted {}.panel__button--secondary {}</code></pre> <p>When I first experienced BEM, I thought it was amazing, despite contrary opinions that it looked ugly. I had no problems with the double hyphens or underscores because they made my CSS predictable and simplified.</p><p><img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/4-bem.png" /></p><h3>How BEM Handles Specificity</h3><p>Take a look at these examples. Without BEM:</p><pre><code>/* Specificity: 0, 3, 0 */.site-header .main-nav .nav-link { color: #472EFE; text-decoration: none;} /* Specificity: 0, 2, 0 */.nav-link.special { color: #FF5733;}</code></pre> <p>With BEM:</p><pre><code>/* Specificity: 0, 1, 0 */.main-nav__link { color: #472EFE; text-decoration: none;} /* Specificity: 0, 1, 0 */.main-nav__link--special { color: #FF5733;}</code></pre> <p>You see how BEM makes the code look predictable as all selectors are created equal, thus making the code easier to maintain and extend. And if I want to add a button to <code>.main-nav</code>, I just add <code>.main-nav__btn</code>, and if I need a disabled button (modifier), <code>.main-nav__btn--disabled</code>. Specificity is low, as I don’t have to increase it or fight the cascade; I just write a new class.</p><p>BEM’s naming principle made sure components lived in isolation, which, for a part of CSS, the specificity part, it worked, i.e, <code>.card__title</code> class will never accidentally clash with a <code>.menu__title</code> class.</p><h3>Where BEM Falls Short</h3><p>I like the idea of BEM, but it is not perfect, and a lot of people noticed it:</p><ul><li>The class names can get <em>really</em> long.</li></ul><div><pre><code><div class="product-carousel__slide--featured product-carousel__slide--on-sale"> <!-- yikes --></div></code></pre></div> <ul><li><strong>Reusability might not be prioritized</strong>, which somewhat contradicts the native CSS ideology. Should a button inside a card be <code>.card__button</code> or reuse a global <code>.button</code> class? With the former, styles are being duplicated, and with the latter, the BEM strict model is being broken.</li><li>One of the core pains in software development starts becoming a reality — <strong>naming things</strong>. <a href="https://css-tricks.com/naming-things-is-only-getting-harder/">I’m sure you know the frustration of that already.</a></li></ul><p>BEM is good, but sometimes you may need to be flexible with it. A <strong>hybrid system</strong> (maybe using BEM for core components but simpler classes elsewhere) can still keep specificity as low as needed.</p><pre><code>/* Base button without BEM */.button { /* Button styles */} /* Component-specific button with BEM */.card__footer .button { /* Minor overrides */}</code></pre> Utility Classes: Specificity By Avoidance<p>This is also called <a href="https://css-tricks.com/lets-define-exactly-atomic-css/">Atomic CSS</a>. And in its entirety, it <em>avoids specificity.</em></p><div><pre><code><button class="bg-red-300 hover:bg-red-500 text-white py-2 px-4 rounded"> A button</button></code></pre></div> <blockquote>The idea behind utility-first classes is that every utility class has the same specificity, which is one class selector. Each class is a tiny CSS property with a single purpose.</blockquote> <p><code>p-2</code>? Padding, nothing more. <code>text-red</code>? Color red for text. <code>text-center</code>? Text alignment. It’s like how LEGOs work, but for styling. You stack classes on top of each other until you get your desired appearance.</p><p><img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/5-specificity-by-avoidance.png" /></p><h3>How Utility Classes Handle Specificity</h3><p>Utility classes do not solve specificity, but rather, they take the BEM ideology of low specificity to the extreme. Almost all utility classes have the same lowest possible specificity level of (<code>0</code>, <code>1</code>, <code>0</code>). And because of this, overrides become easy; if more padding is needed, bump <code>.p-2</code> to <code>.p-4</code>.</p><p>Another example:</p><pre><code><button class="bg-orange-300 hover:bg-orange-700"> This can be hovered</button></code></pre> <p>If another class, <code>hover:bg-red-500</code>, is added, the order matters for CSS to determine which to use. So, even though the utility classes avoid specificity, the other parts of the CSS Cascade come in, which is the order of appearance, with the last matching selector declared being the winner.</p><h3>Utility Class Trade-Offs</h3><p>The most common issue with utility classes is that <strong>they make the code look ugly</strong>. And frankly, I agree. But being able to picture what a component looks like without seeing it rendered is just priceless.</p><p>There’s also the argument of reusability, that you repeat yourself every single time. But once one finds a repetition happening, just turn that part into a reusable component. It also has its genuine <strong>limitations</strong> when it comes to specificity:</p><ul><li>If your brand color changes, which is a global change, and you’re deep in the codebase, you can’t just change one and have others follow like native CSS.</li><li>The parent-child relationship that happens naturally in native CSS is out the window due to how atomic utility classes behave.</li><li>Some argue the HTML part should be left as markup and the CSS part for styling. Because now, there’s more markup to scan, and if you decide to clean up:</li></ul><div><pre><code><!-- Too long --><div class="p-4 bg-yellow-100 border border-yellow-300 text-yellow-800 rounded"> <!-- Better? --><div class="alert-warning"></code></pre></div> <p>Just like that, we’ve ended up writing CSS. Circle of life.</p><p>In my experience with utility classes, they work best for:</p><ul><li><strong>Speed</strong><br />Writing the markup, styling it, and seeing the result swiftly.</li><li><strong>Predictability</strong><br />A utility class does exactly what it says it does.</li></ul>Cascade Layers: Specificity By Design<p>Now, this is where it gets interesting. BEM offers structure, utility classes gain speed, and CSS Cascade Layers give us something paramount: <strong>control</strong>.</p><p>Anyways, Cascade Layers (<code>@layers</code>) groups styles and declares what order the groups should be, regardless of the specificity scores of those rules.</p><p>Looking at a set of independent rulesets:</p><pre><code>button { background-color: orange; /* Specificity: 0, 0, 1 */} .button { background-color: blue; //* Specificity: 0, 1, 0*/} #button { background-color: red; /* Specificity: 1, 0, 0 */} /* No matter what, the button is red */</code></pre> <p>But with <code>@layer</code>, let’s say, I want to prioritize the <code>.button</code> class selector. I can shape how the specificity order should go:</p><pre><code>@layer utilities, defaults, components; @layer defaults { button { background-color: orange; /* Specificity: 0, 0, 1 */ }} @layer components { .button { background-color: blue; //* Specificity: 0, 1, 0*/ }} @layer utilities { #button { background-color: red; /* Specificity: 1, 0, 0 */ }}</code></pre> <p>Due to how <code>@layer</code> works, <code>.button</code> would win because the <code>components</code> layer is the highest priority, even though <code>#button</code> has higher specificity. Thus, before CSS could even check the usual specificity rules, the layer order would first be respected.</p><p>You just have to respect the folks over at W3C, because now one can purposely override an ID selector with a simple class, without even using <code>!important</code>. Fascinating.</p><h3>Cascade Layers Nuances</h3><p>Here are some things that are worth calling out when we’re talking about CSS Cascade Layers:</p><ul><li>Specificity is still part of the game.</li><li><code>!important</code> acts differently than expected in <code>@layer</code> (they work in reverse!).</li><li><code>@layers</code> aren’t selector-specific but rather style-property-specific.</li></ul><div><pre><code>@layer base { .button { background-color: blue; color: white; }} @layer theme { .button { background-color: red; /* No color property here, so white from base layer still applies */ }}</code></pre></div> <ul><li><code>@layer</code> can easily be abused. I’m sure there’s a developer out there with over 20+ layer declarations that’s grown into a monstrosity.</li></ul><h3>Comparing All Three</h3><p>Now, for the TL;DR folks out there, here’s a side-by-side comparison of the three: BEM, utility classes, and CSS Cascade Layers.</p><table> <thead> <tr> <th>Feature</th> <th>BEM</th> <th>Utility Classes</th> <th>Cascade Layers</th> </tr> </thead> <tbody> <tr> <td>Core Idea</td> <td>Namespace components</td> <td>Single purpose classes</td> <td>Control cascade order</td> </tr> <tr> <td>Specificity Control</td> <td>Low and flat</td> <td>Avoids entirely</td> <td>Absolute control due to Layer supremacy</td> </tr> <tr> <td>Code Readability</td> <td>Clear structure due to naming</td> <td>Unclear if unfamiliar with the class names</td> <td>Clear if layer structure is followed</td> </tr> <tr> <td>HTML Verbosity</td> <td>Moderate class names (can get long)</td> <td>Many small classes that adds up quickly</td> <td>No direct impact, stays only in CSS</td> </tr> <tr> <td>CSS Organization</td> <td>By component</td> <td>By property</td> <td>By priority order</td> </tr> <tr> <td>Learning Curve</td> <td>Requires understanding conventions</td> <td>Requires knowing the utility names</td> <td>Easy to pick up, but requires a deep understanding of CSS</td> </tr> <tr> <td>Tools Dependency</td> <td>Pure CSS</td> <td>Often depends of third-party e.g Tailwind</td> <td>Native CSS</td> </tr> <tr> <td>Refactoring Ease</td> <td>High</td> <td>Medium</td> <td>Low</td> </tr> <tr> <td>Best Use Case</td> <td>Design Systems</td> <td>Fast builds</td> <td>Legacy code or third-party codes that need overrides</td> </tr> <tr> <td>Browser Support</td> <td>All</td> <td>All</td> <td>All (except IE)</td> </tr> </tbody></table> <p>Among the three, each has its sweet spot:</p><ul><li><strong>BEM</strong> is best when:<ul><li>There’s a clear design system that needs to be consistent,</li><li>There’s a team with different philosophies about CSS (BEM can be the middle ground), and</li><li>Styles are less likely to leak between components.</li></ul></li><li><strong>Utility classes</strong> work best when:<ul><li>You need to build fast, like prototypes or MVPs, and</li><li>Using a component-based JavaScript framework like React.</li></ul></li><li><strong>Cascade Layers</strong> are most effective when:<ul><li>Working on legacy codebases where you need full specificity control,</li><li>You need to integrate third-party libraries or styles from different sources, and</li><li>Working on a large, complex application or projects with long-term maintenance.</li></ul></li></ul><p>If I had to choose or rank them, I’d go for utility classes with Cascade Layers over using BEM. But that’s just me!</p>Where They Intersect (How They Can Work Together)<p>Among the three, Cascade Layers should be seen as an orchestrator, as it can work with the other two strategies. <code>@layer</code> is a fundamental tenet of the CSS Cascade’s architecture, unlike BEM and utility classes, which are methodologies for controlling the Cascade’s behavior.</p><pre><code>/* Cascade Layers + BEM */@layer components { .card__title { font-size: 1.5rem; font-weight: bold; }} /* Cascade Layers + Utility Classes */@layer utilities { .text-xl { font-size: 1.25rem; } .font-bold { font-weight: 700; }}</code></pre> <p>On the other hand, using BEM with utility classes would just end up clashing:</p><div><pre><code><!-- This feels wrong --><div class="card__container p-4 flex items-center"> <p class="card__title text-xl font-bold">Something seems wrong</p></div></code></pre></div> <p>I’m putting all my cards on the table: I’m a utility-first developer. And most utility class frameworks use <code>@layer</code> behind the scenes (e.g., <a href="https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web">Tailwind</a>). So, those two are already together in the bag. </p><p>But, do I dislike BEM? Not at all! I’ve used it a lot and still would, if necessary. I just find naming things to be an exhausting exercise.</p><p>That said, we’re all different, and you might have opposing thoughts about what you think feels best. It truly doesn’t matter, and that’s the beauty of this web development space. <em>Multiple routes can lead to the same destination</em>.</p>Conclusion<p>So, when it comes to comparing BEM, utility classes, and CSS Cascade Layers, is there a true “winning” approach for controlling specificity in the Cascade?</p><p>First of all, CSS Cascade Layers are arguably the most powerful CSS feature that we’ve gotten in years. They shouldn’t be confused with BEM or utility classes, which are strategies rather than part of the CSS feature set.</p><p>That’s why I like the idea of combining either BEM with Cascade Layers or utility classes with Cascade Layers. Either way, the idea is to <strong>keep specificity low and leverage Cascade Layers to set priorities on those styles</strong>.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Victor Ayomipo)</author> <enclosure url="http://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/css-cascade-layers-bem-utility-classes-specificity-control.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[What I Wish Someone Told Me When I Was Getting Into ARIA]]></title> <link>https://smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/</link> <guid>https://smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/</guid> <pubDate>Mon, 16 Jun 2025 13:00:00 GMT</pubDate> <description>< is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning about ARIA at some point.]]></description> <content:encoded><![CDATA[<p>If you haven’t encountered ARIA before, great! It’s a chance to learn something new and exciting. If you have heard of ARIA before, this might help you better understand it or maybe even teach you something new!</p><p>These are all things I wish someone had told me when I was getting started on my web accessibility journey. This post will: </p><ul><li>Provide a mindset for <strong>how to approach ARIA</strong> as a concept, </li><li><strong>Debunk some common misconceptions</strong>, and </li><li><strong>Provide some guiding thoughts</strong> to help you better understand and work with it. </li></ul><p>It is my hope that in doing so, this post will help make an oft-overlooked yet vital corner of web design and development easier to approach.</p>What This Post Is Not<p>This <strong>is not</strong> a recipe book for how to use ARIA to build accessible websites and web apps. It is also not a guide for how to remediate an inaccessible experience. <strong>A lot of accessibility work is highly contextual</strong>. I do not know the specific needs of your project or organization, so trying to give advice here could easily do more harm than good. </p><p>Instead, think of this post as a “know before you go” guide. I’m hoping to give you a good headspace to approach ARIA, as well as highlight things to watch out for when you undertake your journey. So, with that out of the way, let’s dive in!</p>So, What Is ARIA?<blockquote>ARIA is what you turn to if there is not a native HTML element or attribute that is better suited for the job of communicating interactivity, purpose, and state.</blockquote> <p>Think of it like a spice that you sprinkle into your markup to enhance things.</p><p>Adding ARIA to your HTML markup is a way of providing additional information to a website or web app for <a href="https://webaim.org/articles/visual/blind#screenreaders">screen readers</a> and <a href="https://webaim.org/articles/motor/assistive#voicerecognition">voice control software</a>.</p><ul><li><strong>Interactivity</strong> means the content can be activated or manipulated. An example of this is navigating to a link’s destination.</li><li><strong>Purpose</strong> means what something is used for. An example of this is a text input used to collect someone’s name.</li><li><strong>State</strong> means the current status content has been placed in and controlled by <a href="https://www.w3.org/TR/wai-aria/#introstates">states, properties, and values</a>. An example of this is an accordion panel that can either be expanded or collapsed.</li></ul><p>Here is an illustration to help communicate what I mean by this:</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/1-interactivity-purpose-state.png" /></p><ul><li>The presence of <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML’s <code>button</code> element</a> will instruct assistive technology to report it as a button, letting someone know that it can be activated to perform a predefined action.</li><li>The presence of the text string “Mute” will be reported by assistive technology to clue the person into what the button is used for.</li><li>The presence of <a href="https://w3c.github.io/aria/#aria-pressed"><code>aria-pressed="true"</code></a> means that someone or something has previously activated the button, and it is now in a “pushed in” state that sustains its action. </li></ul><p>This overall pattern will let people who use assistive technology know:</p><ol><li>If something is interactive,</li><li>What kind of interactive behavior it performs, and </li><li>Its <a href="https://w3c.github.io/aria/#host_general_attrs">current state</a>.</li></ol>ARIA’s History<p>ARIA has been around for a long time, with <a href="https://www.w3.org/TR/2006/WD-aria-role-20060926/">the first version published on September 26th, 2006</a>. </p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/2-browser.png" /></p><p>ARIA was created to provide a bridge between the limitations of HTML and the need for making interactive experiences understandable by assistive technology.</p><p>The latest version of ARIA is <a href="https://www.w3.org/TR/wai-aria-1.2/">version 1.2</a>, published on June 6th, 2023. Version 1.3 is slated to be released relatively soon, and you can read more about it in <a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/">this excellent article by Craig Abbott</a>.</p><p>You may also see it referred to as WAI-ARIA, where WAI stands for “Web Accessibility Initiative.” The <a href="https://www.w3.org/WAI/">WAI</a> is part of the <a href="https://www.w3.org/">W3C</a>, the organization that sets standards for the web. That said, most accessibility practitioners I know call it “ARIA” in written and verbal communication and leave out the “WAI-” part.</p>The Spirit Of ARIA Reflects The Era In Which It Was Created<p>The reason for this is simple: The web was a lot less mature in the past than it is now. The most popular operating system in 2006 was <a href="https://en.wikipedia.org/wiki/Windows_XP">Windows XP</a>. The iPhone didn’t exist yet; it was released a year later.</p><p>From a very high level, <strong>ARIA is a snapshot of the operating system interaction paradigms of this time period</strong>. This is because ARIA recreates them.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/3-wxpdefaultdesk.png" /></p><h3>The Mindset</h3><p>Smartphones with features like <a href="https://jquerymobile.com/">tappable</a>, swipeable, and draggable surfaces were far less commonplace. Single Page Application “web app” experiences were also rare, with <a href="https://en.wikipedia.org/wiki/Ajax_(programming">Ajax</a>)-based approaches being the most popular. This means that we have to <strong>build the experiences of today using the technology of 2006</strong>. In a way, <strong>this is a good thing</strong>. It forces us to take new and novel experiences and interrogate them. </p><p>Interactions that cannot be broken down into smaller, more focused pieces that map to ARIA patterns are most likely inaccessible. This is because they won’t be able to be operated by assistive technology or function on older or less popular devices. </p><p>I may be biased, but I also think these sorts of novel interactions that can’t translate also serve as a warning that a general audience will find them to be <strong>confusing and, therefore, unusable</strong>. This belief is important to consider given that the internet serves: </p><ul><li>An unknown number of people,</li><li>Using an unknown number of devices, </li><li>Each with an unknown amount of personal customizations, </li><li>Who have their own unique needs and circumstances and </li><li>Have unknown motivational factors.</li></ul><h3>Interaction Expectations</h3><p>Contemporary expectations for keyboard-based interaction for web content — checkboxes, radios, modals, accordions, and so on — are sourced from Windows XP and its predecessor operating systems. These interaction models are carried forward as muscle memory for older people who use assistive technology. Younger people who rely on assistive technology also learn these de facto standards, thus continuing the cycle.</p><p>What does this mean for you? Someone using a keyboard to interact with your website or web app <strong>will most likely</strong> <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows"><strong>try these Windows OS-based keyboard shortcuts first</strong></a>. This means things like pressing: </p><ul><li>Enter to navigate to a link’s destination, </li><li>Space to activate buttons, </li><li>Home and End to jump to the start or end of a list of items, and so on.</li></ul><h3>It’s Also A Living Document</h3><p>This is not to say that ARIA has stagnated. It is constantly being worked on with new additions, removals, and clarifications. Remember, it is now at version 1.2, with <a href="https://www.w3.org/TR/wai-aria-1.3/">version 1.3 arriving soon</a>.</p><p>In parallel, HTML as a language also reflects this evolution. Elements were originally created to support a document-oriented web and have been gradually evolving to <a href="https://open-ui.org/">support more dynamic, app-like experiences</a>. The great bit here is that this is all <a href="https://github.com/w3c/aria/">conducted in the open</a> and is something you can contribute to if you feel motivated to do so.</p>ARIA Has Rules For Using It<p>There are <a href="https://www.w3.org/TR/using-aria/#NOTES">five rules included in ARIA’s documentation</a> to help steer how you approach it:</p><ol><li><a href="https://www.w3.org/TR/using-aria/#firstrule">Use a native element whenever possible.</a><br />An example would be using an anchor element (<code><a></code>) for a link rather than a <code>div</code> with a click handler and a <code>role</code> of <code>link</code>.</li><li><a href="https://www.w3.org/TR/using-aria/#secondrule">Don’t adjust a native element’s semantics if at all possible.</a><br />An example would be trying to use a heading element as a tab rather than wrapping the heading in a semantically neutral <code>div</code>.</li><li><a href="https://www.w3.org/TR/using-aria/#3rdrule">Anything interactive has to be keyboard operable.</a><br />If you can’t use it with a keyboard, it isn’t accessible. Full stop.</li><li><a href="https://www.w3.org/TR/using-aria/#4thrule">Do not use <code>role="presentation"</code> or <code>aria-hidden="true"</code> on a focusable element.</a><br />This makes something intended to be interactive unable to be used by assistive technology.</li><li><a href="https://www.w3.org/TR/using-aria/#fifthrule">Interactive elements must be named.</a><br />An example of this is using the text string “Print” for a <code>button</code> element.</li></ol><p>Observing these five rules will do a lot to help you out. The following is more context to provide even more support.</p>ARIA Has A Taxonomy<p>There is a structured grammar to ARIA, and it is centered around roles, as well as states and properties. </p><h3>Roles</h3><p>A <a href="https://www.w3.org/TR/wai-aria/#dfn-role">Role</a> is what assistive technology reads and then announces. A lot of people refer to this in shorthand as <em>semantics</em>. <strong>HTML elements have implied roles</strong>, which is why an anchor element will be announced as a link by screen readers with no additional work.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/4-roles.png" /></p><p><strong>Implied roles are almost always better to use</strong> if the use case calls for them. Recall <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> here. This is usually what digital accessibility practitioners refer to when they say, “Just use semantic HTML.”</p><p>There are many reasons for favoring implied roles. The main consideration is better guarantees of support across an unknown number of operating systems, browsers, and assistive technology combinations. </p><p><a href="https://www.w3.org/TR/wai-aria/#roles_categorization">Roles have categories</a>, each with its own purpose. The <a href="https://www.w3.org/TR/wai-aria/#abstract_roles">Abstract role category</a> is notable in that it is an organizing <a href="https://en.wiktionary.org/wiki/supercategory">supercategory</a> <strong>not intended to be used by authors</strong>:</p><blockquote>Abstract roles are used for the ontology. Authors <strong>MUST NOT</strong> use abstract roles in content.</blockquote> <pre><code><!-- This won't work, don't do it --><h2 role="sectionhead"> Anatomy and physiology</h2> <!-- Do this instead --><section aria-labeledby="anatomy-and-physiology"> <h2 id="anatomy-and-physiology"> Anatomy and physiology </h2></section></code></pre> <p>Additionally, in the same way, you can only declare ARIA on certain things, <strong>you can only declare some ARIA as children of other ARIA declarations</strong>. An example of this is the <a href="https://www.w3.org/TR/wai-aria/#listitem">the <code>listitem</code> role</a>, which requires <a href="https://www.w3.org/TR/wai-aria/#list">a role of <code>list</code></a> to be present on its parent element.</p><p>So, what’s the best way to determine if a role requires a parent declaration? The answer is to <a href="https://www.w3.org/TR/wai-aria/#role_definitions">review the official definition</a>.</p><h3>States And Properties</h3><p><a href="https://www.w3.org/TR/wai-aria/#introstates">States and properties</a> are the other two main parts of ARIA‘s overall taxonomy. </p><p>Implicit roles are provided by semantic HTML, and explicit roles are provided by ARIA. Both describe <strong>what an element is</strong>. States <strong>describe that element’s characteristics in a way that assistive technology can understand</strong>. This is done via property declarations and their companion values.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/5-role-and-state.png" /></p><p>ARIA states can change quickly or slowly, both as a result of human interaction as well as application state. When the state is changed as a result of human interaction, it is considered an “unmanaged state.” Here, a developer must supply the underlying JavaScript logic to control the interaction.</p><p>When the state changes as a result of the application (e.g., operating system, web browser, and so on), this is considered “<a href="https://www.w3.org/TR/wai-aria/#dfn-managed-state">managed state</a>.” Here, the application automatically supplies the underlying logic.</p>How To Declare ARIA<p>Think of ARIA as an extension of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">HTML attributes</a>, a suite of name/value pairs. Some values are predefined, while others are author-supplied:</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/6-predefined-author-defined.png" /></p><p>For the examples in the previous graphic, the <code>polite</code> value for <code>aria-live</code> is one of <a href="https://w3c.github.io/aria/#aria-live">the three predefined values</a> (<code>off</code>, <code>polite</code>, and <code>assertive</code>). For <code>aria-label</code>, “Save” is a text string manually supplied by the author.</p><p>You declare ARIA on HTML elements the same way you declare other attributes:</p><pre><code><!-- Applies an id value of "carrot" to the div--><div id="carrot"></div> <!-- Hides the content of this paragraph element from assistive technology --><p aria-hidden="true"> Assistive technology can't read this</p> <!-- Provides an accessible name of "Stop", and also communicates that the button is currently pressed. A type property with a value of "button" prevents browser form submission.--><button aria-label="Stop" aria-pressed="true" type="button"> <!-- SVG icon --></button></code></pre> <p>Other usage notes:</p><ul><li>You can place more than one ARIA declaration on an HTML element. </li><li>The order of placement of ARIA when declared on an HTML element does not matter.</li><li>There is no limit to how many ARIA declarations can be placed on an element. Be aware that <strong>the more you add, the more complexity you introduce</strong>, and more complexity means a larger chance <a href="https://www.a11yproject.com/posts/aria-has-perfect-support/">things may break or not function as expected</a>.</li><li>You can declare ARIA on an HTML element and also have other non-ARIA declarations, such as <code>class</code> or <code>id</code>. The order of declarations does not matter here, either.</li></ul><p>It might also be helpful to know that boolean attributes are treated a little differently in ARIA when compared to HTML. <a href="https://hidde.blog/">Hidde de Vries</a> writes about this in his post, <a href="https://hidde.blog/boolean-attributes-in-html-and-aria-whats-the-difference/">“Boolean attributes in HTML and ARIA: what's the difference?”</a>.</p>Not A Whole Lot Of ARIA Is “Hardcoded”<p>In this context, “hardcoding” means directly writing a static attribute or value declaration into your component, view, or page. </p><p>A lot of ARIA is designed to be applied or conditionally modified dynamically based on <a href="https://www.freecodecamp.org/news/stateful-vs-stateless-architectures-explained/">application state</a> or as a response to someone’s action. An example of this is a show-and-hide disclosure pattern:</p><ul><li><a href="https://w3c.github.io/aria/#aria-expanded">ARIA’s <code>aria-expanded</code> attribute</a> is toggled from <code>false</code> to <code>true</code> to communicate if the disclosure is in an expanded or collapsed state.</li><li><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">HTML’s <code>hidden</code> attribute</a> is conditionally removed or added in tandem to show or hide the disclosure’s full content area.</li></ul><div><pre><code><div class="disclosure-container"> <button aria-expanded="false" class="disclosure-toggle" type="button"> How we protect your personal information </button> <div hidden class="disclosure-content"> <ul> <li>Fast, accurate, thorough and non-stop protection from cyber attacks</li> <li>Patching practices that address vulnerabilities that attackers try to exploit</li> <li>Data loss prevention practices help to ensure data doesn't fall into the wrong hands</li> <li>Supply risk management practices help ensure our suppliers adhere to our expectations</li> </ul> <p> <a href="/security/">Learn more about our security best practices</a>. </p> </div></div></code></pre></div> <p>A common example of a hardcoded ARIA declaration you’ll encounter on the web is <a href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/">making an SVG icon inside a button decorative</a>:</p><pre><code><button type="button> <svg aria-hidden="true"> <!-- SVG code --> </svg> Save</button></code></pre> <p>Here, the string “Save” is what is required for someone to understand what the button will do when they activate it. The accompanying icon helps that understanding visually but is considered redundant and therefore <a href="https://www.w3.org/WAI/tutorials/images/decorative/">decorative</a>.</p>Declaring An Aria Role On Something That Already Uses That Role Implicitly Does Not Make It “Extra” Accessible<p>An implied role is all you need if you’re using semantic HTML. Explicitly declaring its role via ARIA does not confer any additional advantages.</p><pre><code><!-- You don't need to declare role="button" here. Using the <button> element will make assistive technology announce it as a button. The role="button" declaration is redundant. --><button role="button"> Save</button></code></pre> <p>You might occasionally run into these redundant declarations on <a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html">HTML sectioning elements</a>, such as <code><main role="main"></code>, or <code><footer role="contentinfo"></code>. This isn’t needed anymore, and you can just use the <code><main></code> or <code><footer></code> elements.</p><p>The reason for this is historic. These declarations were done for support reasons, in that it was a stop-gap technique for assistive technology that needed to be updated to support these <a href="https://www.w3.org/html/logo/">new-at-the-time HTML elements</a>.</p><p>Contemporary assistive technology does not need these redundant declarations. Think of it the same way that we don’t have to use vendor prefixes for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">CSS <code>border-radius</code> property</a> anymore.</p><p><strong>Note</strong>: <em>There is an exception to this guidance. There are circumstances where certain complex and complicated markup patterns don’t work as expected for assistive technology. In these cases, we want to hardcode the implicit role as explicit ARIA to ensure it works. This assistive technology support concern is <a href="#the-more-aria-you-add-to-something-the-greater-the-chance-something-will-behave-unexpectedly">covered in more detail later in this post</a>.</em></p>You Don’t Need To Say What A Control Is; That Is What Roles Are For<p>Both implicit and explicit roles are announced by screen readers. You don’t need to include that part for things like the interactive element’s text string or <a href="https://w3c.github.io/aria/#aria-label">an <code>aria-label</code></a>.</p><pre><code><!-- Don't do this --><button aria-label="Save button" type="button"> <!-- Icon SVG --></button> <!-- Do this instead --><button aria-label="Save" type="button"> <!-- Icon SVG --></button></code></pre> <p>Had we used the string value of “Save button” for our Save button, a screen reader would announce it along the lines of, “Save button, button.” That’s <a href="https://theideaplace.net/tooltip-should-not-start-an-accessible-name/">redundant</a> and confusing.</p>ARIA Roles Have Very Specific Meanings<p>We sometimes refer to website and web app navigation colloquially as menus, especially if it’s an e-commerce-style <a href="https://www.nngroup.com/articles/mega-menus-work-well/">mega menu</a>.</p><p>In ARIA, <a href="https://w3c.github.io/aria/#menu">menus mean something very specific</a>. Don’t think of global or in-page navigation or the like. Think of menus in this context as what appears when you click the Edit menu button on your application’s menubar.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/7-menu.png" /></p><p>Using a role improperly because its name seems like an appropriate fit at first glance creates confusion for people who do not have the context of the visual UI. <strong>Their expectations will be set with the announcement of the role</strong>, then subverted when it does not act the way it is supposed to.</p><p>Imagine if you click on a link, and instead of taking you to another webpage, it sends something completely unrelated to your printer instead. It’s sort of like that.</p><p>Declaring <code>role="menu"</code> is a common example of a misapplied role, but there are others. The best way to know what a role is used for? <a href="https://www.w3.org/TR/wai-aria/#role_definitions">Go straight to the source</a> and read up on it. </p>Certain Roles Are Forbidden From Having Accessible Names<p>These roles are <code>caption</code>, <code>code</code>, <code>deletion</code>, <code>emphasis</code>, <code>generic</code>, <code>insertion</code>, <code>paragraph</code>, <code>presentation</code>, <code>strong</code>, <code>subscript</code>, and <code>superscript</code>. </p><p>This means you can try and provide an accessible name for one of these elements — say via <code>aria-label</code> — but it won’t work because it’s disallowed by <a href="https://www.w3.org/TR/wai-aria-1.2/#namefromprohibited">the rules of ARIA’s grammar</a>.</p><div><pre><code><!-- This won't work--><strong aria-label="A 35% discount!"> $39.95</strong> <!-- Neither will this --><code title="let JavaScript example"> let submitButton = document.querySelector('button[type="submit"]');</code></code></pre></div> <p>For these examples, recall that the role is implicit, sourced from the declared HTML element.</p><p>Note here that sometimes a browser will make an attempt regardless and overwrite the author-specified string value. This overriding is a confusing act for all involved, which led to the rule being established in the first place. </p>You Can’t Make Up ARIA And Expect It To Work<p>I’ve witnessed some developers guess-adding CSS classes, such as <code>.background-red</code> or <code>.text-white</code>, to their markup and being rewarded if the design visually updates correctly. </p><p>The reason this works is that someone previously added those classes to the project. With ARIA, the people who add the content we can use are the <a href="https://www.w3.org/WAI/about/groups/ariawg/">Accessible Rich Internet Applications Working Group</a>. This means each new version of ARIA has a predefined set of properties and values. Assistive technology is then updated to parse those attributes and values, <a href="https://ericwbailey.website/published/it-needs-to-map-back-to-a-role/#edicts-still-need-to-be-carried-out">although this isn’t always a guarantee</a>.</p><p>Declaring ARIA, which isn’t part of that predefined set, means assistive technology won’t know what it is and consequently won’t announce it.</p><pre><code><!-- There is no "selectpanel" role in ARIA. Because of this, this code will be announced as a button and not as a select panel.--><button role="selectpanel" type="button"> Choose resources</button></code></pre> ARIA Fails Silently<p>This speaks to the previous section, where ARIA won’t understand words spoken to it that exist outside its limited vocabulary.</p><p><strong>There are no console errors for malformed ARIA</strong>. There’s also no alert dialog, beeping sound, or flashing light for your operating system, browser, or assistive technology. This fact is yet another reason why it is so important to <a href="https://webaim.org/articles/nvda/"><strong>test with actual assistive technology</strong></a>. </p><p><a href="https://webaim.org/articles/screenreader_testing/">You don’t have to be an expert</a> here, either. There is a good chance your code needs updating if you set something to announce as a specific <a href="https://www.w3.org/TR/wai-aria/#introstates">state</a> and assistive technology in its default configuration does not announce that state.</p>ARIA Only Exposes The Presence Of Something To Assistive Technology<p><strong>Applying ARIA to something does not automatically “unlock” capabilities</strong>. It <strong>only</strong> sends a hint to assistive technology about how the interactive content should behave. </p><p>For assistive technology like screen readers, that hint could be for how to announce something. For assistive technology like <a href="https://www.afb.org/node/16207/refreshable-braille-displays">refreshable Braille displays</a>, it could be for how it raises and lowers its pins. For example, <strong>declaring <code>role="button"</code> on a <code>div</code> element does not automatically make it clickable</strong>. You will still need to:</p><ul><li>Target the <code>div</code> element in JavaScript, </li><li>Tie it to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event">click event</a>, </li><li>Author the interactive logic that it performs when clicked, and then </li><li>Accommodate <a href="https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.html">all the other expected behaviors</a>.</li></ul><p>This all makes me wonder why you can’t save yourself some work and use a <code>button</code> element in the first place, but that is a different story for a different day. </p><p>Additionally, <strong>adjusting an element’s role via ARIA does not modify the element’s native functionality</strong>. For example, you can declare <code>role="image"</code> on a <code>div</code> element. However, attempting to declare the <code>alt</code> or <code>src</code> attributes on the <code>div</code> won’t work. This is because <code>alt</code> and <code>src</code> are <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">not supported attributes for <code>div</code></a>.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/8-image%20element-div.png" /></p>Declaring an ARIA Role On Something Will Override Its Semantics, But Not Its Behavior<p>This speaks to the previous section on <strong>ARIA only exposing something’s presence</strong>. Don’t forget that certain HTML elements have primary and secondary interactive capabilities built into them.</p><p>For example, an anchor element’s primary capability is navigating to whatever URL value is provided for its <code>href</code> attribute. Secondary capabilities for an anchor element include copying the URL value, opening it in a new tab or incognito window, and so on.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/9-right-click.png" /></p><p>These secondary capabilities are still preserved. However, it may not be apparent to someone that they can use them — or use them in the way that they’d expect — depending on what is announced. </p><p>The opposite is also true. When an element has no capabilities, having its role adjusted does not grant it any new abilities. Remember, <a href="#aria-only-exposes-the-presence-of-something-to-assistive-technology"><strong>ARIA only announces</strong></a>. This is why that <code>div</code> with a <code>role</code> of <code>button</code> assigned to it won’t do anything when clicked if no companion JavaScript logic is also present.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/keyboard-support.png" /></p>You Will Need To Declare ARIA To Make Certain Interactions Accessible<p>A lot of the previous content may make it seem like ARIA is something you should avoid using altogether. This isn’t true. Know that this guidance is written to help steer you to <strong>situations where HTML does not offer the capability to describe an interaction</strong> out of the box. <strong>This space is where you want to use ARIA</strong>.</p><p>Knowing how to identify this area requires spending some time learning what HTML elements there are, as well as what they are and are not used for. I quite like <a href="https://html5doctor.com/">HTML5 Doctor’s Element Index</a> for upskilling on this. </p>Certain ARIA States Require Certain ARIA Roles To Be Present<p>This is analogous to how HTML has both <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a> and attributes that can only be used on a per-element basis. For example, <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code> can be used on any HTML element</a> or role. However, <a href="https://w3c.github.io/aria/#aria-posinset"><code>aria-posinset</code> can only be used with <code>article</code>, <code>comment</code>, <code>listitem</code>, <code>menuitem</code>, <code>option</code>, <code>radio</code>, <code>row</code>, and <code>tab</code> roles</a>. Remember here that these roles can be provided by either HTML or ARIA.</p><p>Learning what states require which roles can be achieved by <a href="https://www.w3.org/TR/wai-aria/#state_prop_def">reading the official reference</a>. Check for the “Used in Roles” portion of each entry’s characteristics:</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/11-used-in-roles.png" /></p><p>Automated code scanners — like <a href="https://www.deque.com/axe/">axe</a>, <a href="https://wave.webaim.org/">WAVE</a>, <a href="https://www.tpgi.com/arc-platform/arc-toolkit/">ARC Toolkit</a>, <a href="https://pa11y.org/">Pa11y</a>, <a href="https://github.com/IBMa/equal-access#equal-access">equal-access</a>, and so on — can catch this sort of thing if they are written in error. I’m a big fan of implementing these sorts of checks as part of a <a href="https://en.wikipedia.org/wiki/Continuous_integration">continuous integration</a> strategy, as it makes it a code quality concern shared across the whole team.</p>ARIA Is More Than Web Browsers<p>Speaking of technology that listens, it is helpful to know that the ARIA you declare <strong>instructs the browser to speak to the operating system</strong> the browser is installed on. Assistive technology then listens to <a href="https://www.w3.org/TR/wai-aria/#dfn-accessibility-tree">what the operating system reports</a>. It then communicates that to the person using the computer, tablet, smartphone, and so on.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/12-flowchart-four-steps.png" /></p><p>A person can then instruct assistive technology to request the operating system to take action on the web content displayed in the browser. </p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/13-flowchart-four-steps.png" /></p><p><strong>This interaction model is by design</strong>. It is done to make interaction from assistive technology indistinguishable from interaction performed without assistive technology. </p><p>There are a few reasons for this approach. The most important one is <a href="https://css-tricks.com/accessibility-events/">it helps <strong>preserve the privacy and autonomy</strong></a> of the <a href="https://accessaces.com/what-disabled-people-have-to-give-up-in-the-name-of-accessibility/">people who rely on assistive technologies</a>.</p>Just Because It Exists In The ARIA Spec Does Not Mean Assistive Technology Will Support It<p>This support issue was touched on earlier and is a difficult fact to come to terms with. </p><p>Contemporary developers enjoy the hard-fought, hard-won benefits of <a href="https://www.webstandards.org/">the web standards movement</a>. This means you can declare HTML and know that it will <a href="https://www.w3.org/standards/">work with every major browser</a> out there. ARIA does not have this. <strong>Each assistive technology vendor has its own interpretation of the ARIA specification</strong>. Oftentimes, these interpretations are convergent. Sometimes, they’re not. </p><p>Assistive technology vendors also have support roadmaps for their products. Some assistive technology vendors:</p><ul><li>Will eventually add support, </li><li>May never, and some </li><li>Might do so in a way that contradicts how other vendors choose to implement things.</li></ul><p>There is also the operating system layer to contend with, which I’ll cover in more detail in a little bit. Here, the mechanisms used to communicate with assistive technology are dusty, oft-neglected areas of software development. </p><p>With these layers comes a scenario where <strong>the assistive technology can support the ARIA declared, but the operating system itself cannot communicate the ARIA’s presence, or vice-versa</strong>. The reasons for this are varied but ultimately boil down to a historic lack of support, prioritization, and resources. However, I am <a href="https://aria-at.w3.org/">optimistic that this is changing</a>. </p><p>Additionally, <strong>there is no equivalent to <a href="https://caniuse.com/">Caniuse</a>, <a href="https://web.dev/baseline">Baseline</a>, or <a href="https://webstatus.dev/">Web Platform Status</a> for assistive technology</strong>. The closest analog we have to support checking resources is <a href="https://a11ysupport.io/">a11ysupport.io</a>, but know that it is the painstaking work of a single individual. Its content may not be up-to-date, as the work is both Herculean in its scale and Sisyphean in its scope. Because of this, I must re-stress <a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/"><strong>the importance of manually testing with assistive technology</strong></a> to determine if the ARIA you use works as intended.</p><p><strong>How To Determine ARIA Support</strong></p><p>There are three main layers to determine if something is supported:</p><ol><li>Operating system and version.</li><li>Assistive technology and version,</li><li>Browser and browser version.</li></ol><h3>1. Operating System And Version</h3><p>Each operating system (e.g., Windows, macOS, Linux) has its own way of <a href="https://alistapart.com/article/semantics-to-screen-readers/">communicating what content is present to assistive technology</a>. Each piece of assistive technology has to accommodate <strong>how</strong> to parse that communication.</p><p>Some assistive technology is incompatible with certain operating systems. An example of this is not being able to use <a href="https://support.apple.com/guide/voiceover/get-started-vo4be8816d70/10/mac/15.0">VoiceOver</a> with Windows, or <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> with macOS. Furthermore, each version of each operating system has slight variations in what is reported and how. Sometimes, the operating system needs to be updated to “teach” it the updated AIRA vocabulary. Also, do not forget that things like <a href="https://github.com/FreedomScientific/standards-support/issues">bugs and regressions</a> can occur.</p><h3>2. Assistive Technology And Version</h3><p><strong>There is no “one true way” to make assistive technology</strong>. Each one is built to address different access needs and wants and is done so in an opinionated way — think how different web browsers have different features and UI. </p><p>Each piece of assistive technology that consumes web content has its own way of communicating this information, and <strong>this is by design</strong>. It works with what the operating system reports, filtered through things like heuristics and preferences.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/14-voice-control.png" /></p><p>Like operating systems, assistive technology also has different versions with what each version is capable of supporting. They can also be susceptible to bugs and regressions.</p><p>Another two factors worth pointing out here are <strong>upgrade hesitancy</strong> and <strong>lack of financial resources</strong>. Some people who rely on assistive technology are hesitant to upgrade it. This is based on a very understandable fear of breaking an important mechanism they use to interact with the world. This, in turn, translates to scenarios like holding off on updates until absolutely necessary, as well as disabling auto-updating functionality altogether.</p><p>Lack of financial resources is sometimes referred to as <a href="https://stimpunks.org/glossary/crip-tax/">the disability or crip tax</a>. <a href="https://www.un.org/development/desa/disabilities/resources/factsheet-on-persons-with-disabilities/disability-and-employment.html">Employment rates tend to be lower for disabled populations</a>, and with that comes less money to spend on acquiring new technology and updating it. This concern can and does apply to operating systems, browsers, and assistive technology.</p><h3>3. Browser And Browser Version</h3><p>Some assistive technology works better with one browser compared to another. This is due to the underlying mechanics of <strong>how the browser reports its content to assistive technology</strong>. Using Firefox with NVDA is an example of this.</p><p>Additionally, the support for this reporting sometimes only gets added for newer versions. Unfortunately, it also means support can sometimes accidentally regress, and people don’t notice before releasing the browser update — again, this is due to a historic lack of resources and prioritization.</p>The Less Commonly-Used The ARIA You Declare, The Greater The Chance You’ll Need To Test It<p>Common ARIA declarations you’ll come across include, but are not limited to:</p><ul><li><code>aria-label</code>,</li><li><code>aria-labelledby</code>,</li><li><code>aria-describedby</code>,</li><li><code>aria-hidden</code>,</li><li><code>aria-live</code>.</li></ul><p>These are more common because they’re more supported. They are more supported because many of these declarations have been around for a while. Recall <a href="#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">the previous section that discussed actual assistive technology support</a> compared to what the ARIA specification supplies.</p><p>Newer, more esoteric ARIA, or historically deprioritized declarations, may not have that support yet or may never. An example of how complicated this can get is <a href="https://w3c.github.io/aria/#aria-controls"><code>aria-controls</code></a>. </p><p><code>aria-controls</code> is a part of ARIA that has been around for a while. <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> had support for <code>aria-controls</code>, but then removed it after user feedback. Meanwhile, every other screen reader I’m aware of never bothered to add support.</p><p>What does that mean for us? Determining support, or lack thereof, is best accomplished by <strong>manual testing with assistive technology.</strong> </p>The More ARIA You Add To Something, The Greater The Chance Something Will Behave Unexpectedly<p>This fact takes into consideration the complexities in preferences, different levels of support, bugs, regressions, and other concerns that come with ARIA’s usage.</p><p>Philosophically, it’s a lot like adding more interactive complexity to your website or web app via JavaScript. The larger the surface area your code covers, <strong>the bigger the chance something unintended happens</strong>.</p><p>Consider the amount of ARIA added to a component or discrete part of your experience. The more of it there is declared nested into <a href="https://dom.spec.whatwg.org/">the Document Object Model (DOM)</a>, the more it interacts with parent ARIA declarations. This is because assistive technology reads what the DOM exposes to help determine intent.</p><p>A lot of contemporary development efforts are isolated, feature-based work that focuses on one small portion of the overall experience. Because of this, they may not take this holistic nesting situation into account. This is another reason why — you guessed it — manual testing is so important.</p><p>Anecdotally, <a href="https://webaim.org/projects/million/#aria">WebAIM’s annual Millions report</a> — an accessibility evaluation of the top 1,000,000 websites — touches on this phenomenon:</p><blockquote><strong>Increased ARIA usage on pages was associated with higher detected errors. The more ARIA attributes that were present, the more detected accessibility errors could be expected.</strong> This does not necessarily mean that ARIA introduced these errors (these pages are more complex), but pages typically had significantly more errors when ARIA was present.</blockquote> Assistive Technology May Support Your Invalid ARIA Declaration<p>There is a chance that ARIA, which is authored inaccurately, will actually function as intended with assistive technology. While <strong>I do not recommend betting on this fact to do your work</strong>, I do think it is worth mentioning when it comes to things like debugging.</p><p>This is due to the wide range of familiarity there is with people who author ARIA. </p><p>Some of the more mature assistive technology vendors try to accommodate the lower end of this familiarity. This is done in order to <strong>better enable the people who use their software to actually get what they need</strong>.</p><p>There isn’t an exhaustive list of what accommodations each piece of assistive technology has. Think of it like <a href="https://quandyfactory.com/blog/39/the_virtue_of_forgiving_html_parsers">the forgiving nature of a browser’s HTML parser</a>, where <strong>the ultimate goal is to render content for humans</strong>.</p><code>aria-label</code> Is Tricky<p><a href="https://w3c.github.io/aria/#aria-label"><code>aria-label</code></a> is one of the most common ARIA declarations you’ll run across. It’s also one of the most misused.</p><p><a href="https://benmyers.dev/blog/dont-use-aria-label-on-static-text-elements/"><code>aria-label</code> can’t be applied to non-interactive HTML elements</a>, but oftentimes is. It <a href="https://adrianroselli.com/2019/11/aria-label-does-not-translate.html">can’t always be translated</a> and is oftentimes <a href="https://ericwbailey.website/published/what-they-dont-tell-you-when-you-translate-your-app/#you%E2%80%99ll-need-to-translate-%2F-localize-more-than-you-think-you-will">overlooked for localization efforts</a>. Additionally, it can make things frustrating to operate for people who use voice control software, where the visible label differs from what the underlying code uses.</p><p>Another problem is when it overrides an interactive element’s pre-existing accessible name. For example:</p><pre><code><!-- Don't do this --><a aria-label="Our services" href="/services/"> Services</a></code></pre> <p>This is a violation of <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG Success Criterion 2.5.3: Label in Name</a>, pure and simple. I have also seen it used as a way to provide a <a href="https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html">control hint</a>. This is also a WCAG failure, in addition to being an antipattern:</p><div><pre><code><!-- Also don't do this --><a aria-label="Click this link to learn more about our unique and valuable services" href="/services/"> Services</a></code></pre></div> <p>These factors — along with other considerations — are why I consider <a href="https://ericwbailey.website/published/aria-label-is-a-code-smell/"><code>aria-label</code> a code smell</a>.</p><code>aria-live</code> Is Even Trickier<p>Live region announcements are <a href="https://w3c.github.io/aria/#aria-live">powered by <code>aria-live</code></a> and are an important part of communicating updates to an experience to people who use screen readers.</p><p>Believe me when I say that getting <code>aria-live</code> to work properly is tricky, even under the best of scenarios. I won’t belabor the specifics here. Instead, I’ll point you to <a href="https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/">“Why are my live regions not working?”</a>, a fantastic and comprehensive article published by TetraLogical.</p>The ARIA Authoring Practices Guide Can Lead You Astray<p>Also referred to as the APG, the <a href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices Guide</a> should be treated with a decent amount of caution.</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/15-apg-caution.png" /></p><h3>The Downsides</h3><p>The guide was originally authored to help demonstrate ARIA’s capabilities. As a result, <strong>its code examples near-exclusively, overwhelmingly, and disproportionately favor ARIA</strong>. </p><p>Unfortunately, the APG’s latest redesign also makes it far more approachable-looking than its surrounding W3C documentation. This is coupled with <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">demonstrating UI patterns</a> in a way that signals it’s a self-serve resource whose code can be used out of the box.</p><p>These factors create a scenario where people assume everything can be used as presented. This is <strong>not true</strong>. </p><p>Recall that just because ARIA is listed in the spec <a href="#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">does not necessarily guarantee it is supported</a>. Adrian Roselli writes about this in detail in his post, <a href="https://adrianroselli.com/2023/04/no-apgs-support-charts-are-not-can-i-use-for-aria.html">“No, APG’s Support Charts Are Not ‘Can I Use’ for ARIA”</a>.</p><p>Also, remember <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> and know that <a href="#aria-has-rules-for-using-it">an ARIA-first approach is counter to the specification’s core philosophy of use</a>.</p><p>In my experience, this has led to developers assuming they can copy-paste code examples or reference how it’s structured in their own efforts, and everything will just work. This leads to mass frustration:</p><ul><li>Digital accessibility practitioners have to explain that “doing the right thing” isn’t going to work as intended.</li><li>Developers then have to revisit their work to update it.</li><li>Most importantly, people who rely on assistive technology risk not being able to use something.</li></ul><p>This is to say nothing about things like timelines and resourcing, working relationships, reputation, and brand perception.</p><h3>The Upside</h3><p>The APG’s main strength is <strong>highlighting what keyboard keypresses people will expect to work</strong> on each pattern. </p><p>Consider <a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction">the listbox pattern</a>. It details keypresses you may expect (arrow keys, Space, and Enter), as well as less-common ones (<a href="https://en.wikipedia.org/wiki/Typeahead">typeahead</a> selection and making multiple selections). Here, we need to <a href="#the-spirit-of-aria-reflects-the-era-in-which-it-was-created">remember that ARIA is based on the Windows XP era</a>. The keyboard-based interaction the APG suggests is built from the muscle memory established from the UI patterns used on this operating system.</p><p>While your tree view component may look visually different from the one on your operating system, <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows">people will expect it to be keyboard operable in the same way</a>. Honoring this expectation will go a long way to <strong>ensuring your experiences are not only accessible but also intuitive and efficient to use</strong>.</p><p>Another strength of the APG is giving <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">standardized, centralized names to UI patterns</a>. Is it a dropdown? A listbox? A combobox? A select menu? <a href="https://adrianroselli.com/2020/03/stop-using-drop-down.html">Something else</a>? </p><p>When it comes to digital accessibility, these terms all have specific meanings, as well as expectations that come with them. Having a common vocabulary when discussing how an experience should work goes a long way to <strong>ensuring everyone will be on the same page</strong> when it comes time to make and maintain things.</p>macOS VoiceOver Can Also Lead You Astray<p><a href="https://support.apple.com/guide/voiceover/welcome/mac">VoiceOver on macOS</a> has been <a href="https://www.applevis.com/forum/macos-mac-apps/state-screen-readers-macos">experiencing a lot of problems</a> over the last few years. If I could wager a guess as to why this is, as an outsider, it is that Apple’s priorities are <a href="https://www.apple.com/visionos/visionos-2/">focused elsewhere</a>.</p><p>The bulk of web development efforts are conducted on macOS. This means that well-intentioned developers will reach for VoiceOver, as it comes bundled with macOS and is therefore more convenient. However, macOS VoiceOver usage has a drastic minority share for desktops and laptops. It is under 10% of usage, with Windows-based JAWS and NVDA occupying a combined 78.2% majority share:</p><p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/16-webaim-pie-chart.png" /></p><h3>The Problem</h3><p>The sad, sorry truth of the matter is that macOS VoiceOver, in its current state, has a lot of problems. It should only be used to confirm that it can operate the experience the way Windows-based screen readers can. </p><p>This means testing on Windows with NVDA or JAWS will <strong>create an experience that is far more accurate to what most people who use screen readers on a laptop or desktop will experience</strong>. </p><h3>Dealing With The Problem</h3><p>Because of this situation, I heavily encourage a workflow that involves:</p><ol><li>Creating an experience’s underlying markup,</li><li>Testing it with NVDA or JAWS to set up baseline expectations, </li><li>Testing it with macOS VoiceOver to identify what doesn’t work as expected.</li></ol><p>Most of the time, I find myself having to <a href="#declaring-an-aria-role-on-something-that-already-uses-that-role-implicitly-does-not-make-it-extra-accessible">declare redundant ARIA on the semantic HTML I write</a> in order to address missed expected announcements for macOS VoiceOver. </p><p><strong>macOS VoiceOver testing is still important to do</strong>, as it is not the fault of the person who uses macOS VoiceOver to get what they need, and we should ensure they can still have access.</p><p>You can use apps like <a href="https://www.virtualbox.org/">VirtualBox</a> and <a href="https://www.microsoft.com/en-us/evalcenter/evaluate-windows-11-enterprise">Windows evaluation Virtual Machines</a> to use Windows in your macOS development environment. Services like <a href="https://assistivlabs.com/">AssistivLabs</a> also make on-demand, preconfigured testing easy.</p><p><strong>What About iOS VoiceOver?</strong></p><p>Despite sharing the same name, <a href="https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios">VoiceOver on iOS</a> is a completely different animal. As software, it is separate from its desktop equivalent and also enjoys <a href="https://webaim.org/projects/screenreadersurvey10/#mobileplatforms">a whopping 70.6% usage share</a>. </p><p>With this knowledge, know that it’s also important to <strong>test the ARIA you write on mobile</strong> to make sure it works as intended.</p>You Can Style ARIA<p>ARIA attributes can be targeted via CSS the way other HTML attributes can. Consider this HTML markup for the main navigation portion of a small e-commerce site:</p><pre><code><nav aria-label="Main"> <ul> <li> <a href="/home/">Home</a> <a href="/products/">Products</a> <a aria-current="true" href="/about-us/">About Us</a> <a href="/contact/">Contact</a> </li> </ul></nav></code></pre> <p>The presence of <code>aria-current="true"</code> on the “About Us” link will tell assistive technology to <a href="https://tink.uk/using-the-aria-current-attribute/">announce that it is the current part of the site someone is on</a> if they are navigating through the main site navigation.</p><p>We can also tie that indicator of being the current part of the site into something that is shown visually. Here’s how you can target the attribute in CSS:</p><pre><code>nav[aria-label="Main"] [aria-current="true"] { border-bottom: 2px solid #ffffff;}</code></pre> <p>This is <strong>an incredibly powerful way to</strong> <a href="https://css-tricks.com/user-facing-state/"><strong>tie application state to user-facing state</strong></a>. Combine it with modern CSS like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a> and <a href="https://developer.chrome.com/docs/web-platform/view-transitions">view transitions</a> and you have the ability to create robust, sophisticated UI with less reliance on JavaScript.</p>You Can Also Use ARIA When Writing UI Tests<p><a href="https://en.wikipedia.org/wiki/Software_testing">Tests</a> are great. They help guarantee that the code you work on will continue to do what you intended it to do.</p><p>A lot of web UI-based testing will use the presence of classes (e.g., <code>.is-expanded</code>) or data attributes (ex, <code>data-expanded</code>) to verify a UI’s existence, position and states. These types of selectors also have a far greater likelihood to be changed as time goes on when compared to semantic code and ARIA declarations. </p><p>This is something my coworker Cam McHenry touches on in his great post, <a href="https://camchenry.com/blog/how-i-write-accessible-playwright-tests">“How I write accessible Playwright tests”</a>. Consider this piece of <a href="https://playwright.dev/">Playwright</a> code, which checks for the presence of a button that toggles open an edit menu:</p><div><pre><code>// Selects an element with a role of <code>button</code> // that has an accessible name of "Edit"const editMenuButton = await page.getByRole('button', { name: "Edit" }); // Requires the edit button to have a property // of <code>aria-haspopup</code> with a value of <code>true</code>expect(editMenuButton).toHaveAttribute('aria-haspopup', 'true');</code></pre></div> <p>The test selects UI based on outcome rather than appearance. That’s <strong>a far more reliable way to target things in the long-term</strong>.</p><p>This all helps to create a virtuous feedback cycle. It enshrines semantic HTML and ARIA’s presence in your front-end UI code, which helps to guarantee accessible experiences don’t regress. Combining this with styling, you have a <strong>powerful, self-contained system for building robust, accessible experiences</strong>. </p>ARIA Is Ultimately About Caring About People<p>Web accessibility can be about enabling important things like scheduling medical appointments. It is also about fun things like chatting with your friends. It’s also used for every web experience that lives in between. </p><p>Using semantic HTML — supplemented with a judicious application of ARIA — helps you enable these experiences. To sum things up, ARIA:</p><ul><li>Has been around for a long time, and its spirit reflects the era in which it was first created;</li><li>Has a governing taxonomy, vocabulary, and rules for use and is declared in the same way HTML attributes are;</li><li>Is mostly used for dynamically updating things, controlled via JavaScript;</li><li>Has highly specific use cases in mind for each of its roles;</li><li>Fails silently if mis-authored;</li><li>Only exposes the presence of something to assistive technology and does not confer interactivity;</li><li>Requires input from the web browser, but also the operating system, in order for assistive technology to use it;</li><li>Has a range of actual support, complicated by the more of it you use;</li><li>Has some things to watch out for, namely <code>aria-label</code>, the ARIA Authoring Practices Guide, and macOS VoiceOver support;</li><li>Can also be used for things like visual styling and writing resilient tests;</li><li>Is best evaluated by using actual assistive technology.</li></ul><p>Viewed one way, ARIA is arcane, full of misconceptions, and fraught with potential missteps. Viewed another, ARIA is a beautiful and elegant way to programmatically communicate the interactivity and state of a user interface.</p><p>I choose the second view. At the end of the day, using ARIA helps to <strong>ensure that disabled people can use a web experience the same way everyone else can</strong>. </p><p><em>Thank you to <a href="https://adrianroselli.com/">Adrian Roselli</a> and <a href="https://janmaarten.com/">Jan Maarten</a> for their feedback.</em></p><h3>Further Reading</h3><ul><li>“<a href="https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility">What the Heck is ARIA? A Beginner’s Guide to ARIA for Accessibility</a>,” Kat Shaw</li><li>“<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a>,” Léonie Watson & Chaals McCathie Nevile</li><li>“<a href="https://alistapart.com/article/semantics-to-screen-readers/">Semantics to Screen Readers</a>,” Melanie Richards</li><li>“<a href="https://www.tpgi.com/what-aria-does-not-do/">What ARIA does not do</a>,” Steve Faulkner</li><li>“<a href="https://html5accessibility.com/stuff/2024/07/15/what-aria-still-does-not-do/">What ARIA still does not do</a>,” stevef</li><li>“<a href="https://www.deque.com/blog/apg-support-tables-why-they-matter/">APG support tables — why they matter</a>,” Michael Fairchild</li><li>“<a href="https://adrianroselli.com/2023/02/aria-vs-html.html">ARIA vs HTML</a>,” Adrian Roselli</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Eric Bailey)</author> <enclosure url="http://files.smashing.media/articles/what-i-wish-someone-told-me-aria/what-i-wish-someone-told-me-aria.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS]]></title> <link>https://smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/</link> <guid>https://smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/</guid> <pubDate>Wed, 11 Jun 2025 13:00:00 GMT</pubDate> <description><![CDATA[In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.]]></description> <content:encoded><![CDATA[<p>I recently came across an old jQuery tutorial demonstrating a <strong>“moving highlight” navigation bar</strong> and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API</a> make progressive enhancement more easily achievable and handle a lot of the animation minutiae.</p><a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif"><img src="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif" /></a>(<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif">Large preview</a>) <p>In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the <code>getBoundingClientRect</code> method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API.</p>The Initial Markup<p>Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional <code>div</code> element containing an <code>id</code> of <code>#highlight</code>. We give the first navigation item a class of <code>.active</code>.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/EajQyBW">Moving Highlight Navbar Starting Markup [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p><p>For this version, we will position the <code>#highlight</code> element around the element with the <code>.active</code> class to create a border. We can utilize <code>absolute</code> positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding <code>left: -200px</code> and include <code>transition</code> styles for all properties so that any changes in the position and size of the element will happen gradually.</p><pre><code>#highlight { z-index: 0; position: absolute; height: 100%; width: 100px; left: -200px; border: 2px solid green; box-sizing: border-box; transition: all 0.2s ease;}</code></pre> Add A Boilerplate Event Handler For Click Interactions<p>We want the highlight element to animate when a user changes the <code>.active</code> navigation item. Let’s add a <code>click</code> event handler to the <code>nav</code> element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the <code>.active</code> nav item if the user clicks on a link that does not already have the <code>.active</code> class.</p><p>Initially, we can call <code>console.log</code> to ensure the handler fires only when expected:</p><div><pre><code>const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } console.log('click');});</code></pre></div> <p>Open your browser console and try clicking different items in the navigation bar. You should only see <code>"click"</code> being logged when you select a new item in the navigation bar. </p><p>Now that we know our event handler is working on the correct elements let’s add code to move the <code>.active</code> class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of <code>.active</code> after removing it from the previously active item.</p><div><pre><code>const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } - console.log('click');+ document.querySelector('nav a.active').classList.remove('active');+ event.target.classList.add('active'); });</code></pre></div> <p>Our <code>#highlight</code> element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the <code>#highlight</code> selector has <code>transition</code> styles applied, it will move gradually when its position changes. </p><p>Using <code>getBoundingClientRect</code>, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match.</p><div><pre><code>// handler for moving the highlightconst moveHighlight = () => { const activeNavItem = document.querySelector('a.active'); const highlighterElement = document.querySelector('#highlight'); const width = activeNavItem.offsetWidth; const itemPos = activeNavItem.getBoundingClientRect(); const navbarPos = navbar.getBoundingClientRect() const relativePosX = itemPos.left - navbarPos.left; const styles = { left: <code>${relativePosX}px</code>, width: <code>${width}px</code>, }; Object.assign(highlighterElement.style, styles);}</code></pre></div> <p>Let’s call our new function when the click event fires:</p><div><pre><code>navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); + moveHighlight();});</code></pre></div> <p>Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads:</p><pre><code>// handler for moving the highlightconst moveHighlight = () => { // ...} // display the highlight when the page loadsmoveHighlight();</code></pre> <p>Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/WbvMxqV">Moving Highlight Navbar [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p><p>That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like <code>mouseover</code> events. In the next section, we will explore refactoring this feature using the View Transition API.</p>Using The View Transition API<p>The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the <strong>native-app-like user experience</strong> featured in frameworks like <a href="https://docs.astro.build/en/guides/view-transitions/">Astro</a>. However, the API also provides handlers meant for <strong>SPA-style applications</strong>. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality.</p><p>For this approach, we no longer need a separate <code>#highlight</code> element. Instead, we can style the <code>.active</code> navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. </p><p>We’ll start by getting rid of the <code>#highlight</code> element and its associated CSS and replacing it with styles for the <code>nav a::after</code> pseudo-selector:</p><pre><code><nav> - <div id="highlight"></div> <a href="#" class="active">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#contact">Contact</a></nav></code></pre> <pre><code>- #highlight {- z-index: 0;- position: absolute;- height: 100%;- width: 0;- left: 0;- box-sizing: border-box;- transition: all 0.2s ease;- } + nav a::after {+ content: " ";+ position: absolute;+ left: 0;+ top: 0;+ width: 100%;+ height: 100%;+ border: none;+ box-sizing: border-box;+ }</code></pre> <p>For the <code>.active</code> class, we include the <code>view-transition-name</code> property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the <code>.active</code> navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of <code>highlight</code>, but we could theoretically give it any name.</p><pre><code>nav a.active::after { border: 2px solid green; view-transition-name: highlight;}</code></pre> <p>Once we have a selector that contains a <code>view-transition-name</code> property, the only remaining step is to trigger the transition using the <code>startViewTransition</code> method and pass in a callback function.</p><div><pre><code>const navbar = document.querySelector('nav'); // Change the active nav item on clicknavbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } document.startViewTransition(() => { document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); });});</code></pre></div> <p>Above is a revised version of the <code>click</code> handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call <code>document.startViewTransition</code> and pass in a callback function to change the item that has the <code>.active</code> class!</p>Adjusting The View Transition<p>At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.</p><a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues.gif"><img src="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues-800px.gif" /></a>(<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues.gif">Large preview</a>) <p>This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but <a href="https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/">Jake Archibald has a detailed explanation you can read</a> for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit <code>height</code> for the <code>::view-transition-old</code> and <code>::view-transition-new</code> pseudo-selectors representing a static snapshot of the old and new view, respectively.</p><pre><code>::view-transition-old(highlight) { height: 100%;} ::view-transition-new(highlight) { height: 100%;}</code></pre> <p>Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported:</p><div><pre><code>const navbar = document.querySelector('nav'); // change the item that has the .active class appliedconst setActiveElement = (elem) => { document.querySelector('nav a.active').classList.remove('active'); elem.classList.add('active');} // Start view transition and pass in a callback on clicknavbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } // Fallback for browsers that don't support View Transitions: if (!document.startViewTransition) { setActiveElement(event.target); return; } document.startViewTransition(() => setActiveElement(event.target));});</code></pre></div> <p>Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/ogXELKE">Moving Highlight Navbar with View Transition [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p>Conclusion<p>Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve <strong>native-app-like interactions without breaking the bank</strong>. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the <code>getBoundingClientRect()</code> method and the View Transition API. </p><h3>Resources</h3><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>getBoundingClientRect()</code> method documentation</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API documentation</a></li><li>“<a href="https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/">View Transitions: Handling Aspect Ratio Changes</a>” by Jake Archibald</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Blake Lundquist)</author> <enclosure url="http://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/creating-moving-highlight-navigation-bar-javascript-css.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Decoding The SVG <code>path</code> Element: Line Commands]]></title> <link>https://smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/</link> <guid>https://smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/</guid> <pubDate>Mon, 09 Jun 2025 08:00:00 GMT</pubDate> <description><![CDATA[SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `<path>` and its sometimes mystifying commands. With simple examples and visualizations, she’ll help you understand the easy syntax and underlying rules of SVG’s most powerful element so that by the end, you’re fully able to translate SVG semantic tags into a language `path` understands.]]></description> <content:encoded><![CDATA[<p>In a previous article, we looked at some <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">practical examples of how to code SVG by hand</a>. In that guide, we covered the basics of the SVG elements <code>rect</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>polyline</code>, and <code>polygon</code> (and also <code>g</code>).</p><p>This time around, we are going to tackle a more advanced topic, the absolute powerhouse of SVG elements: <code>path</code>. Don’t get me wrong; I still stand by my point that image paths are better drawn in vector programs than coded (unless you’re the type of creative who makes non-logical visual art in code — then go forth and create awe-inspiring wonders; you’re probably not the audience of this article). But when it comes to <strong>technical drawings</strong> and <strong>data visualizations</strong>, the <code>path</code> element unlocks a wide array of possibilities and opens up the world of hand-coded SVGs. </p><p>The path syntax can be really complex. We’re going to tackle it in two separate parts. In this first installment, we’re learning all about <strong>straight and angular paths</strong>. In the second part, we’ll make lines bend, twist, and turn.</p>Required Knowledge And Guide Structure<p><strong>Note</strong>: <em>If you are unfamiliar with the basics of SVG, such as the subject of <code>viewBox</code> and the basic syntax of the simple elements (<code>rect</code>, <code>line</code>, <code>g</code>, and so on), I recommend reading <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">my guide</a> before diving into this one. You should also <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/text">familiarize yourself with <code><text></code></a> if you want to understand each line of code in the examples.</em></p><p>Before we get started, I want to quickly recap how I code SVG using JavaScript. I don’t like dealing with numbers and math, and reading SVG Code with numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and write out, I have a much better time with this type of code, and I think you will, too.</p><p>The goal of this article is more about <strong>understanding <code>path</code> syntax</strong> than it is about doing placement or how to leverage loops and other more basic things. So, I will not run you through the entire setup of each example. I’ll instead share snippets of the code, but they may be slightly adjusted from the CodePen or simplified to make this article easier to read. However, if there are specific questions about code that are not part of the text in the CodePen demos, the comment section is open.</p><p>To keep this all framework-agnostic, the code is written in vanilla JavaScript (though, really, TypeScript is your friend the more complicated your SVG becomes, and I missed it when writing some of these).</p>Setting Up For Success<p>As the <code>path</code> element relies on our understanding of some of the coordinates we plug into the commands, I think it is a lot easier if we have a bit of visual orientation. So, all of the examples will be coded on top of a visual representation of a traditional <code>viewBox</code> setup with the origin in the top-left corner (so, values in the shape of <code>0 0 ${width} ${height}</code>.</p><p>I added text labels as well to make it easier to point you to specific areas within the grid.</p><blockquote>Please note that I recommend being careful when adding text within the <code><text></code> element in SVG if you want your text to be accessible. If the graphic relies on text scaling like the rest of your website, it would be better to have it rendered through HTML. But for our examples here, it should be sufficient.</blockquote> <p>So, this is what we’ll be plotting on top of:</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/MYwEdVN">SVG Viewbox Grid Visual [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p><p>Alright, we now have a ViewBox Visualizing Grid. I think we’re ready for our first session with the beast.</p>Enter <code>path</code> And The All-Powerful <code>d</code> Attribute<p>The <code><path></code> element has a <code>d</code> attribute, which speaks its own language. So, within <code>d</code>, you’re talking in terms of “commands”. </p><p>When I think of <code>non-path</code> versus <code>path</code> elements, I like to think that the reason why we have to write much more complex drawing instructions is this: <strong>All non-path elements are just dumber paths.</strong> In the background, they have one pre-drawn path shape that they will always render based on a few parameters you pass in. But <code>path</code> has no default shape. The shape logic has to be exposed to you, while it can be neatly hidden away for all other elements.</p><p>Let’s learn about those commands.</p>Where It All Begins: <code>M</code><p>The first, which is where each path begins, is the <code>M</code> command, which moves the pen to a point. This command places your starting point, but it <strong>does not draw a single thing</strong>. A path with just an <code>M</code> command is an <code>auto-delete</code> when cleaning up SVG files.</p><p>It takes two arguments: the <code>x</code> and <code>y</code> coordinates of your start position.</p><pre><code>const uselessPathCommand = `M${start.x} ${start.y}`;</code></pre> Basic Line Commands: <code>M</code> , <code>L</code>, <code>H</code>, <code>V</code><p>These are fun and easy: <code>L</code>, <code>H</code>, and <code>V</code>, all draw a line from the current point to the point specified.</p><p><code>L</code> takes <strong>two arguments</strong>, the <code>x</code> and <code>y</code> positions of the point you want to draw to.</p><pre><code>const pathCommandL = `M${start.x} ${start.y} L${end.x} ${end.y}`;</code></pre> <p><code>H</code> and <code>V</code>, on the other hand, only take <strong>one argument</strong> because they are only drawing a line in one direction. For <code>H</code>, you specify the <code>x</code> position, and for <code>V</code>, you specify the <code>y</code> position. The other value is implied.</p><pre><code>const pathCommandH = `M${start.x} ${start.y} H${end.x}`;const pathCommandV = `M${start.x} ${start.y} V${end.y}`;</code></pre> <p>To visualize how this works, I created a function that draws the path, as well as points with labels on them, so we can see what happens.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/azOLrjZ">Simple Lines with path [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p><p>We have three lines in that image. The <code>L</code> command is used for the red path. It starts with <code>M</code> at <code>(10,10)</code>, then moves diagonally down to <code>(100,100)</code>. The command is: <code>M10 10 L100 100</code>.</p><p>The blue line is horizontal. It starts at <code>(10,55)</code> and should end at <code>(100, 55)</code>. We could use the <code>L</code> command, but we’d have to write <code>55</code> again. So, instead, we write <code>M10 55 H100</code>, and then SVG knows to look back at the <code>y</code> value of <code>M</code> for the <code>y</code> value of <code>H</code>.</p><p>It’s the same thing for the green line, but when we use the <code>V</code> command, SVG knows to refer back to the <code>x</code> value of <code>M</code> for the <code>x</code> value of <code>V</code>.</p><p>If we compare the resulting horizontal path with the same implementation in a <code><line></code> element, we may</p><ol><li>Notice how much more efficient <code>path</code> can be, and</li><li>Remove quite a bit of meaning for anyone who doesn’t speak <code>path</code>.</li></ol><p>Because, as we look at these strings, one of them is called “line”. And while the rest doesn’t mean anything out of context, the line definitely conjures a specific image in our heads.</p><pre><code><path d="M 10 55 H 100" /><line x1="10" y1="55" x2="100" y2="55" /></code></pre> Making Polygons And Polylines With <code>Z</code><p>In the previous section, we learned how <code>path</code> can behave like <code><line></code>, which is pretty cool. But it can do more. It can also act like <code>polyline</code> and <code>polygon</code>.</p><p>Remember, how those two basically work the same, but <code>polygon</code> connects the first and last point, while <code>polyline</code> does not? The <code>path</code> element can do the same thing. There is a separate command to close the path with a line, which is the <code>Z</code> command.</p><div><pre><code>const polyline2Points = <code>M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y}</code>;const polygon2Points = <code>M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y} Z</code>;</code></pre></div> <p>So, let’s see this in action and create a repeating triangle shape. Every odd time, it’s open, and every even time, it’s closed. Pretty neat!</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/emNGaPm">Alternating Triangles [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p><p>When it comes to comparing <code>path</code> versus <code>polygon</code> and <code>polyline</code>, the other tags tell us about their names, but I would argue that fewer people know what a polygon is versus what a line is (and probably even fewer know what a polyline is. Heck, even the program I’m writing this article in tells me polyline is not a valid word). The argument to use these two tags over <code>path</code> for legibility is weak, in my opinion, and I guess you’d probably agree that this looks like equal levels of meaningless string given to an SVG element.</p><pre><code><path d="M0 0 L86.6 50 L0 100 Z" /><polygon points="0,0 86.6,50 0,100" /> <path d="M0 0 L86.6 50 L0 100" /><polyline points="0,0 86.6,50 0,100" /></code></pre> Relative Commands: <code>m</code>, <code>l</code>, <code>h</code>, <code>v</code><p>All of the line commands exist in absolute and relative versions. The difference is that the relative commands are lowercase, e.g., <code>m</code>, <code>l</code>, <code>h</code>, and <code>v</code>. The relative commands are always relative to the last point, so instead of declaring an <code>x</code> value, you’re declaring a <code>dx</code> value, saying this is how many units you’re moving.</p><p>Before we look at the example visually, I want you to look at the following three-line commands. Try not to look at the CodePen beforehand.</p><pre><code>const lines = [ { d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" }, { d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" }, { d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" }];</code></pre> <p>As I mentioned, I hate looking at numbers without meaning, but there is one number whose meaning is pretty constant in most contexts: <code>0</code>. Seeing a <code>0</code> in combination with a command I just learned means <em>relative</em> manages to instantly tell me that nothing is happening. Seeing <code>l 0 20</code> by itself tells me that this line only moves along one axis instead of two. </p><p>And looking at that entire blue path command, the repeated <code>20</code> value gives me a sense that the shape might have some regularity to it. The first path does a bit of that by repeating <code>10</code> and <code>30</code>. But the third? As someone who can’t do math in my head, that third string gives me <em>nothing</em>.</p><p>Now, you might be surprised, but they all draw the same shape, just in different places.</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/vEOewQp">SVG Compound Paths [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p><p>So, how valuable is it that we can recognize the regularity in the blue path? Not very, in my opinion. In some cases, going with the relative value is easier than an absolute one. In other cases, the absolute is king. Neither is better nor worse.</p><blockquote>And, in all cases, that previous example would be much more efficient if it were set up with a variable for the gap, a variable for the shape size, and a function to generate the path definition that’s called from within a loop so it can take in the index to properly calculate the start point.</blockquote> Jumping Points: How To Make Compound Paths<p>Another very useful thing is something you don’t see visually in the previous CodePen, but it relates to the grid and its code.</p><p>I snuck in a grid drawing update.</p><p>With the method used in earlier examples, using <code>line</code> to draw the grid, the above CodePen would’ve rendered the grid with 14 separate elements. If you go and inspect the final code of that last CodePen, you’ll notice that there is just a single path element within the <code>.grid</code> group.</p><p>It looks like this, which is not fun to look at but holds the secret to how it’s possible:</p><div><pre><code><path d="M0 0 H110 M0 10 H110 M0 20 H110 M0 30 H110 M0 0 V45 M10 0 V45 M20 0 V45 M30 0 V45 M40 0 V45 M50 0 V45 M60 0 V45 M70 0 V45 M80 0 V45 M90 0 V45" stroke="currentColor" stroke-width="0.2" fill="none"></path></code></pre></div> <p>If we take a close look, we may notice that there are multiple <code>M</code> commands. This is the magic of compound paths. </p><blockquote>Since the <code>M/m</code> commands don’t actually draw and just place the cursor, a <code>path</code> can have jumps.</blockquote> <p>So, whenever we have multiple paths that share common styling and don’t need to have separate interactions, we can just chain them together to make our code shorter.</p>Coming Up Next<p>Armed with this knowledge, we’re now able to replace <code>line</code>, <code>polyline</code>, and <code>polygon</code> with <code>path</code> commands and combine them in compound paths. But there is so much more to uncover because <code>path</code> doesn’t just offer foreign-language versions of lines but also gives us the option to code <code>circles</code> and <code>ellipses</code> that have open space and can sometimes also bend, twist, and turn. We’ll refer to those as <em>curves</em> and <em>arcs</em>, and discuss them more explicitly in the next article.</p><h3>Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2024/12/mastering-svg-arcs/">Mastering SVG Arcs</a>,” Akshay Gupta</li><li>“<a href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/">Accessible SVGs: Perfect Patterns For Screen Reader Users</a>,” Carie Fisher</li><li>“<a href="https://www.smashingmagazine.com/2023/01/svg-customization-animation-practical-guide/">Easy SVG Customization And Animation: A Practical Guide</a>,” Adrian Bece</li><li>“<a href="https://www.smashingmagazine.com/2022/05/magical-svg-techniques/">Magical SVG Techniques</a>,” Cosima Mielke</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Myriam Frisano)</author> <enclosure url="http://files.smashing.media/articles/decoding-svg-path-element-line-commands/decoding-svg-path-element-line-commands.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Collaboration: The Most Underrated UX Skill No One Talks About]]></title> <link>https://smashingmagazine.com/2025/06/collaboration-most-underrated-ux-skill/</link> <guid>https://smashingmagazine.com/2025/06/collaboration-most-underrated-ux-skill/</guid> <pubDate>Thu, 05 Jun 2025 08:00:00 GMT</pubDate> <description><![CDATA[We often spotlight wireframes, research, or tools like Figma, but none of that moves the needle if we can’t collaborate well. Great UX doesn’t happen in isolation. It takes conversations with engineers, alignment with product, sales, and other stakeholders, and the ability to listen, adapt, and co-create. That’s where design becomes a team sport, and when your ability to capture the outcomes multiplies the UX impact.]]></description> <content:encoded><![CDATA[<p>When people talk about UX, it’s usually about the things they can see and interact with, like wireframes and prototypes, smart interactions, and design tools like Figma, Miro, or Maze. Some of the outputs are even glamorized, like design systems, research reports, and pixel-perfect UI designs. But here’s the truth I’ve seen again and again in over two decades of working in UX: none of that moves the needle if there is no collaboration.</p><p><strong>Great UX doesn’t happen in isolation.</strong> It happens through conversations with engineers, product managers, customer-facing teams, and the customer support teams who manage support tickets. Amazing UX ideas come alive in messy Miro sessions, cross-functional workshops, and those online chats (e.g., Slack or Teams) where people align, adapt, and co-create.</p><p>Some of the most impactful moments in my career weren’t when I was “designing” in the traditional sense. They have been gaining incredible insights when discussing problems with teammates who have varied experiences, brainstorming, and coming up with ideas that I never could have come up with on my own. As I always say, ten minds in a room will come up with ten times as many ideas as one mind. Often, many ideas are the most useful outcome.</p><p>There have been times when a team has helped to reframe a problem in a workshop, taken vague and conflicting feedback, and clarified a path forward, or I’ve sat with a sales rep and heard the same user complaint show up in multiple conversations. This is when <strong>design becomes a team sport</strong>, and when your ability to capture the outcomes multiplies the UX impact.</p>Why This Article Matters Now<p>The reason collaboration feels so urgent now is that the way we work since COVID has changed, according to a <a href="https://www.bls.gov/opub/btn/volume-13/remote-work-productivity.htm">study published by the US Department of Labor</a>. Teams are more cross-functional, often remote, and increasingly complex. Silos are easier to fall into, due to distance or lack of face-to-face contact, and yet alignment has never been more important. We can’t afford to see collaboration as a “nice to have” anymore. It’s a <strong>core skill</strong>, especially in UX, where our work touches so many parts of an organisation. </p><p>Let’s break down what collaboration in UX really means, and why it deserves way more attention than it gets.</p>What Is Collaboration In UX, Really?<p>Let’s start by clearing up a misconception. Collaboration is not the same as cooperation. </p><ul><li><strong>Cooperation</strong>: “You do your thing, I’ll do mine, and we’ll check in later.”</li><li><strong>Collaboration</strong>: “Let’s figure this out together and co-own the outcome.”</li></ul><p>Collaboration, as defined in the <a href="https://oercollective.caul.edu.au/communication-concepts/chapter/defining-collaboration/">book Communication Concepts</a>, published by Deakin University, involves <strong>working with others to produce outputs</strong> and/or achieve shared goals. The outcome of collaboration is typically a tangible product or a measurable achievement, such as solving a problem or making a decision. Here’s an example from a recent project: </p><p>Recently, I worked on a fraud alert platform for a fintech business. It was a six-month project, and we had zero access to users, as the product had not yet hit the market. Also, the users were highly specialised in the B2B finance space and were difficult to find. Additionally, the team members I needed to collaborate with were based in Malaysia and Melbourne, while I am located in Sydney.</p><p>Instead of treating that as a dead end, we turned inward: collaborating with subject matter experts, professional services consultants, compliance specialists, and customer support team members who had deep knowledge of fraud patterns and customer pain points. Through bi-weekly workshops using a Miro board, iterative feedback loops, and sketching sessions, we worked on <strong>design solution options</strong>. I even asked them to present their own design version as part of the process.</p><p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png" /></p><p>After months of iterating on the fraud investigation platform through these collaboration sessions, I ended up with two different design frameworks for the investigator’s dashboard. Instead of just presenting the “best one” and hoping for buy-in, I ran a voting exercise with PMs, engineers, SMEs, and customer support. Everyone had a voice. The winning design was created and validated with the input of the team, resulting in an outcome that solved many problems for the end user and was <strong>owned by the entire team</strong>. That’s collaboration!</p><p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png" /></p><p>It is definitely one of the most satisfying projects of my career.</p><p>On the other hand, I recently caught up with an old colleague who now serves as a product owner. Her story was a cautionary tale: the design team had gone ahead with a major redesign of an app without looping her in until late in the game. Not surprisingly, the new design missed several key product constraints and business goals. It had to be scrapped and redone, with her now at the table. That experience reinforced what we all know deep down: your best work rarely happens in isolation.</p><p>As illustrated in my experience, <strong>true collaboration can span many roles</strong>. It’s not just between designers and PMs. It can also include QA testers who identify real-world issues, content strategists who ensure our language is clear and inclusive, sales representatives who interact with customers on a daily basis, marketers who understand the brand’s voice, and, of course, customer support agents who are often the first to hear when something goes wrong. The best outcomes arrive when we’re open to <strong>different perspectives and inputs</strong>. </p>Why Collaboration Is So Overlooked?<p>If collaboration is so powerful, why don’t we talk about it more?</p><p>In my experience, one reason is the <a href="https://socialinnovationsjournal.org/editions/75-disruptive-innovations/2908-let-s-bust-the-lone-hero-myth-the-role-of-collective-leadership-in-systems-change#:~:text=It%20requires%20an%20understanding%20of,affected%20by%20the%20targeted%20issue.">myth of the “lone UX hero”</a>. Many of us entered the field inspired by stories of design geniuses revolutionising products on their own. Our portfolios often reflect that as well. We showcase our solo work, our processes, and our wins. Job descriptions often reinforce the idea of the solo UX designer, listing tool proficiency and deliverables more than soft skills and team dynamics.</p><p>And then there’s the team culture within many organisations of “just get the work done”, which often leads to fewer meetings and tighter deadlines. As a result, a sense of collaboration is inefficient and wasted. I have also experienced working with some designers where perfectionism and territoriality creep in — “This is my design” — which kills the open, communal spirit that collaboration needs.</p>When Collaboration Is The User Research<p>In an ideal world, we’d always have direct access to users. But let’s be real. Sometimes that just doesn’t happen. Whether it’s due to budget constraints, time limitations, or layers of bureaucracy, talking to end users isn’t always possible. That’s where collaboration with team members becomes even more crucial.</p><p>The next best thing to talking to users? Talking to the people who talk to users. Sales teams, customer success reps, tech support, and field engineers. They’re all user researchers in disguise!</p><p>On another B2C project, the end users were having trouble completing the key task. My role was to redesign the onboarding experience for an online identity capture tool for end users. I was unable to schedule interviews with end users due to budget and time constraints, so I turned to the sales and tech support teams. </p><p>I conducted multiple mini-workshops to identify the most common onboarding issues they had heard directly from our customers. This led to a huge “aha” moment: most users dropped off before the document capture process. They may have been struggling with a lack of instruction, not knowing the required time, or not understanding the steps involved in completing the onboarding process. </p><p>That insight reframed my approach, and we ultimately redesigned the flow to prioritize orientation and clear instructions before proceeding to the setup steps. Below is an example of one of the screen designs, including some of the instructions we added. </p><p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png" /></p><p>This kind of collaboration <em>is</em> user research. It’s not a substitute for talking to users directly, but it’s a <strong>powerful proxy</strong> when you have limited options.</p>But What About Using AI?<p>Glad you asked! Even AI tools, which are increasingly being used for idea generation, pattern recognition, or rapid prototyping, don’t replace collaboration; they just change the shape of it.</p><p>AI can help you explore design patterns, draft user flows, or generate multiple variations of a layout in seconds. It’s fantastic for getting past creative blocks or pressure-testing your assumptions. But let’s be clear: these tools are accelerators, not oracles. As an innovation and strategy consultant <a href="https://www.linkedin.com/pulse/team-collaboration-does-ai-help-hinder-nathan-waterhouse-canse/">Nathan Waterhouse points out</a>, AI can point you in a direction, but it can’t tell you which direction is the <em>right</em> one in your specific context. That still requires human judgment, empathy, and an understanding of the messy realities of users and business goals.</p><p>You still need people, especially those closest to your users, to validate, challenge, and evolve any AI-generated idea. For instance, you might use ChatGPT to brainstorm onboarding flows for a SaaS tool, but if you’re not involving customer support reps who regularly hear <em>“I didn’t know where to start”</em> or <em>“I couldn’t even log in,”</em> you’re just working with assumptions. The same applies to engineers who know what is technically feasible or PMs who understand where the business is headed.</p><p>AI can generate ideas, but only collaboration turns those ideas into something usable, valuable, and real. Think of it as a powerful ingredient, but not the whole recipe.</p>How To Strengthen Your UX Collaboration Skills?<p>If collaboration doesn’t come naturally or hasn’t been a focus, that’s okay. Like any skill, it can be practiced and improved. Here are a few ways to level up:</p><ol><li><strong>Cultivate curiosity about your teammates.</strong><br />Ask engineers what keeps them up at night. Learn what metrics your PMs care about. Understand the types of tickets the support team handles most frequently. The more you care about their challenges, the more they'll care about yours.</li><li><strong>Get comfortable facilitating.</strong><br />You don’t need to be a certified Design Sprint master, but learning how to run a structured conversation, align stakeholders, or synthesize different points of view is hugely valuable. Even a simple “What’s working? What’s not?” retro can be an amazing starting point in identifying where you need to focus next.</li><li><strong>Share early, share often.</strong><br />Don’t wait until your designs are polished to get input. Messy sketches and rough prototypes invite collaboration. When others feel like they’ve helped shape the work, they’re more invested in its success.</li><li><strong>Practice active listening.</strong><br />When someone critiques your work, don’t immediately defend. Pause. Ask follow-up questions. Reframe the feedback. Collaboration isn’t about consensus; it’s about finding a shared direction that can honour multiple truths.</li><li><strong>Co-own the outcome.</strong><br />Let go of your ego. The best UX work isn’t “your” work. It’s the result of many voices, skill sets, and conversations converging toward a solution that helps users. It’s not “I”, it’s “we” that will solve this problem together. </li></ol>Conclusion: UX Is A Team Sport<p>Great design doesn’t emerge from a vacuum. It comes from <strong>open dialogue</strong>, <strong>cross-functional understanding</strong>, and a <strong>shared commitment</strong> to solving real problems for real people.</p><p>If there’s one thing I wish every early-career designer knew, it’s this:</p><p>Collaboration is not a side skill. It’s the engine behind every meaningful design outcome. And for seasoned professionals, it’s the superpower that turns good teams into great ones.</p><p>So next time you’re tempted to go heads-down and just “crank out a design,” pause to reflect. Ask who else should be in the room. And invite them in, not just to review your work, but to help create it.</p><p>Because in the end, the best UX isn’t just what you make. It’s what you make <em>together</em>.</p><h3>Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2024/06/presenting-ux-research-design-stakeholders/">Presenting UX Research And Design To Stakeholders: The Power Of Persuasion</a>,” Victor Yocco</li><li>“<a href="https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/">Transforming The Relationship Between Designers And Developers</a>,” Chris Day</li><li>“<a href="https://www.smashingmagazine.com/2022/10/effective-communication-everyday-meetings/">Effective Communication For Everyday Meetings</a>,” Andrii Zhdan</li><li>“<a href="https://www.smashingmagazine.com/2022/04/ux-integrated-design-workflows/">Preventing Bad UX Through Integrated Design Workflows</a>,” Ceara Crawshaw</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Carrie Webster)</author> <enclosure url="http://files.smashing.media/articles/collaboration-most-underrated-ux-skill/collaboration-most-underrated-ux-skill.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Smashing Animations Part 4: Optimising SVGs]]></title> <link>https://smashingmagazine.com/2025/06/smashing-animations-part-4-optimising-svgs/</link> <guid>https://smashingmagazine.com/2025/06/smashing-animations-part-4-optimising-svgs/</guid> <pubDate>Wed, 04 Jun 2025 08:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like <em>Wacky Races</em>, <em>The Perils of Penelope Pitstop</em>, and, of course, <a href="https://en.wikipedia.org/wiki/Yogi_Bear"><em>Yogi Bear</em></a>. They inspired me to lovingly recreate some classic <a href="https://stuffandnonsense.co.uk/toon-titles">Toon Titles</a> using CSS, SVG, and SMIL animations.</p><p>But getting animations to load quickly and work smoothly needs more than nostalgia. It takes clean design, lean code, and a process that makes complex SVGs easier to animate. Here’s how I do it.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/1-toon-titles.png" /></p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/2-yogi-bear-bewitched-bear.png" /></p>Start Clean And Design With Optimisation In Mind<p>Keeping things simple is key to making SVGs that are optimised and ready to animate. Tools like Adobe Illustrator convert bitmap images to vectors, but the output often contains too many extraneous groups, layers, and masks. Instead, I start cleaning in Sketch, work from a reference image, and use the Pen tool to create paths.</p><blockquote><strong>Tip</strong>: <a href="https://affinity.serif.com/en-gb/designer/">Affinity Designer</a> (UK) and <a href="https://www.sketch.com">Sketch</a> (Netherlands) are alternatives to Adobe Illustrator and Figma. Both are independent and based in Europe. Sketch has been my default design app since Adobe killed Fireworks.</blockquote> Beginning With Outlines<p>For these Toon Titles illustrations, I first use the Pen tool to draw black outlines with as few anchor points as possible. The more points a shape has, the bigger a file becomes, so simplifying paths and reducing the number of points makes an SVG much smaller, often with no discernible visual difference.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/3-outlines-anchor-points.png" /></p><p>Bearing in mind that parts of this Yogi illustration will ultimately be animated, I keep outlines for this Bewitched Bear’s body, head, collar, and tie separate so that I can move them independently. The head might nod, the tie could flap, and, like in those classic cartoons, Yogi’s collar will hide the joins between them.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/4-separate-outlines.png" /></p>Drawing Simple Background Shapes<p>With the outlines in place, I use the Pen tool again to draw new shapes, which fill the areas with colour. These colours sit behind the outlines, so they don’t need to match them exactly. The fewer anchor points, the smaller the file size.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/5-simple-background-shapes.png" /></p><p>Sadly, neither Affinity Designer nor Sketch has tools that can simplify paths, but if you have it, using Adobe Illustrator can shave a few extra kilobytes off these background shapes.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/6-adobe-illustrator-simplify-paths.png" /></p>Optimising The Code<p>It’s not just metadata that makes SVG bulkier. The way you export from your design app also affects file size.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/7-vector-artwork-ready-optimisation.png" /></p><p>Exporting just those simple background shapes from Adobe Illustrator includes unnecessary groups, masks, and bloated path data by default. Sketch’s code is barely any better, and there’s plenty of room for improvement, even in its SVGO Compressor code. I rely on Jake Archibald’s <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>, which uses SVGO v3 and consistently delivers the best optimised SVGs.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/8-jake-archibald-svgomg-online-optimisation-tool.png" /></p>Layering SVG Elements<p>My process for preparing SVGs for animation goes well beyond drawing vectors and optimising paths — it also includes how I <strong>structure the code</strong> itself. When every visual element is crammed into a single SVG file, even optimised code can be a nightmare to navigate. Locating a specific path or group often feels like searching for a needle in a haystack.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/9-yogi-bear-title-card-toon-titles-recreation.png" /></p><p>That’s why I develop my SVGs in layers, exporting and optimising one set of elements at a time — always in the order they’ll appear in the final file. This lets me build the master SVG gradually by pasting it in each cleaned-up section. For example, I start with backgrounds like this gradient and title graphic.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/10-gradient-background-title-graphic.png" /></p><p>Instead of facing a wall of SVG code, I can now easily identify the background gradient’s path and its associated <code>linearGradient</code>, and see the group containing the title graphic. I take this opportunity to add a comment to the code, which will make editing and adding animations to it easier in the future:</p><pre><code><svg ...> <defs> <!-- ... --> </defs> <path fill="url(#grad)" d="…"/> <!-- TITLE GRAPHIC --> <g> <path … /> <!-- ... --> </g></svg></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/11-trail-gaussian-blur.png" /></p><p>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:</p><pre><code><svg ...> <defs> <linearGradient id="grad" …>…</linearGradient> <filter id="trail" …>…</filter> </defs> <!-- GRADIENT --> <!-- TRAIL --> <path filter="url(#trail)" …/> <!-- TITLE GRAPHIC --></svg></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/12-yogi-bear-magical-stars.png" /></p><p>Then come the magical stars, added in the same sequential fashion:</p><pre><code><svg ...> <!-- GRADIENT --> <!-- TRAIL --> <!-- STARS --> <!-- TITLE GRAPHIC --></svg></code></pre> <p>To keep everything organised and animation-ready, I create an empty group that will hold all the parts of Yogi:</p><pre><code><g id="yogi">...</g></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/13-yogi-bear-component-parts.png" /></p><p>Then I build Yogi from the ground up — starting with background props, like his broom:</p><pre><code><g id="broom">...</g></code></pre> <p>Followed by grouped elements for his body, head, collar, and tie:</p><pre><code><g id="yogi"> <g id="broom">…</g> <g id="body">…</g> <g id="head">…</g> <g id="collar">…</g> <g id="tie">…</g></g></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/14-yogi-bear-title-card-toon-titles-recreation.png" /></p><p>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 <strong>clean</strong>, <strong>readable</strong>, and <strong>ordered logically</strong> by layering elements this way. It also makes animating smoother, as each component is easier to identify.</p>Reusing Elements With <code><use></code><p>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:</p><pre><code><g id="stars"> <path class="star-small" fill="#eae3da" d="..."/> <path class="star-medium" fill="#eae3da" d="..."/> <path class="star-large" fill="#eae3da" d="..."/> <!-- ... --></g></code></pre> <p>Moving the stars’ <code>fill</code> attribute values to their parent group reduces the overall weight a little:</p><pre><code><g id="stars" fill="#eae3da"> <path class="star-small" d="…"/> <path class="star-medium" d="…"/> <path class="star-large" d="…"/> <!-- ... --></g></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/15-yogi-bear-sparkling-stars.png" /></p><p>But a more efficient and manageable option is to define each star size as a reusable template:</p><div><pre><code><defs> <path id="star-large" fill="#eae3da" fill-rule="evenodd" d="…"/> <path id="star-medium" fill="#eae3da" fill-rule="evenodd" d="…"/> <path id="star-small" fill="#eae3da" fill-rule="evenodd" d="…"/></defs></code></pre></div> <p>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 <code><use></code> and position them with <code>x</code> and <code>y</code> attributes:</p><pre><code><g id="stars"> <!-- Large stars --> <use href="#star-large" x="1575" y="495"/> <!-- ... --> <!-- Medium stars --> <use href="#star-medium" x="1453" y="696"/> <!-- ... --> <!-- Small stars --> <use href="#star-small" x="1287" y="741"/> <!-- ... --></g></code></pre> <p>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 <strong>without compromising on flexibility or performance</strong>.</p>Adding Animations<p>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 <code>opacity</code> levels:</p><pre><code>@keyframes sparkle { 0%, 100% { opacity: .1; } 50% { opacity: 1; }}</code></pre> <p>Next, I applied this looping animation to every <code>use</code> element inside my stars group:</p><pre><code>#stars use { animation: sparkle 10s ease-in-out infinite;}</code></pre> <p>The secret to creating a convincing twinkle lies in <strong>variation</strong>. I staggered animation delays and durations across the stars using <code>nth-child</code> selectors, starting with the quickest and most frequent sparkle effects:</p><pre><code>/* Fast, frequent */#stars use:nth-child(n + 1):nth-child(-n + 10) { animation-delay: .1s; animation-duration: 2s;}</code></pre> <p>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:</p><pre><code>/* Medium */#stars use:nth-child(n + 11):nth-child(-n + 20) { ... } /* Slow, dramatic */#stars use:nth-child(n + 21):nth-child(-n + 30) { ... } /* Random */#stars use:nth-child(3n + 2) { ... } /* Alternating */#stars use:nth-child(4n + 1) { ... } /* Scattered */#stars use:nth-child(n + 31) { ... }</code></pre> <p>By thoughtfully structuring the SVG and reusing elements, I can build complex-looking animations without bloated code, making even a simple effect like changing <code>opacity</code> sparkle. </p><p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/16-subtle-movements-yogi-bear.png" /></p><p>Then, for added realism, I make Yogi’s head wobble:</p><div><pre><code>@keyframes headWobble { 0% { transform: rotate(-0.8deg) translateY(-0.5px); } 100% { transform: rotate(0.9deg) translateY(0.3px); }} #head { animation: headWobble 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite alternate;}</code></pre></div> <p>His tie waves:</p><div><pre><code>@keyframes tieWave { 0%, 100% { transform: rotateZ(-4deg) rotateY(15deg) scaleX(0.96); } 33% { transform: rotateZ(5deg) rotateY(-10deg) scaleX(1.05); } 66% { transform: rotateZ(-2deg) rotateY(5deg) scaleX(0.98); }} #tie { transform-style: preserve-3d; animation: tieWave 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;}</code></pre></div> <p>His broom swings:</p><div><pre><code>@keyframes broomSwing { 0%, 20% { transform: rotate(-5deg); } 30% { transform: rotate(-4deg); } 50%, 70% { transform: rotate(5deg); } 80% { transform: rotate(4deg); } 100% { transform: rotate(-5deg); }} #broom { animation: broomSwing 4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;}</code></pre></div> <p>And, finally, Yogi himself gently rotates as he flies on his magical broom:</p><div><pre><code>@keyframes yogiWobble { 0% { transform: rotate(-2.8deg) translateY(-0.8px) scale(0.998); } 30% { transform: rotate(1.5deg) translateY(0.3px); } 100% { transform: rotate(3.2deg) translateY(1.2px) scale(1.002); }} #yogi { animation: yogiWobble 3.5s cubic-bezier(.37, .14, .3, .86) infinite alternate;}</code></pre></div> <p>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.</p><p>Try this yourself:</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/bNdwJBN">Bewitched Bear CSS/SVG animation [forked]</a> by <a href="https://codepen.io/malarkey">Andy Clarke</a>.</p>Conclusion<p>Whether you’re recreating a classic title card or animating icons for an interface, the principles are the same:</p><ol><li>Start clean,</li><li>Optimise early, and</li><li>Structure everything with animation in mind.</li></ol><p>SVGs offer incredible creative freedom, but only if kept <strong>lean</strong> and <strong>manageable</strong>. 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. </p>]]></content:encoded> <author>hello@smashingmagazine.com (Andy Clarke)</author> <enclosure url="http://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/smashing-animations-part-4-optimising-svgs.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Why Designers Get Stuck In The Details And How To Stop]]></title> <link>https://smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/</link> <guid>https://smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/</guid> <pubDate>Tue, 03 Jun 2025 14:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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: <em>“Looks cool, but the idea doesn’t work.”</em> Sound familiar?</p><p>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.</p>Reason #1 You’re Afraid To Show Rough Work<p>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.</p><p>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.</p><p>The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief. </p><p>The real problem here is the <strong>habit</strong>: we open Figma and start perfecting the UI before we’ve even solved the problem.</p><p>So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid <strong>psychological reasons</strong> behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychology (like the <a href="https://positivepsychology.com/perfectionism/">research by Hewitt and Flett</a>) shows there are a couple of flavors driving this:</p><ul><li><strong>Socially prescribed perfectionism</strong><br />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.</li><li><strong>Self-oriented perfectionism</strong><br />Where you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off.</li></ul><p>Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback.</p><p>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:</p><blockquote>Treat early sketches as disposable tools for thinking and actively share them to get feedback faster.</blockquote> <p><img src="https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png" /></p>Reason #2: You Fix The Symptom, Not The Cause<p>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, <em>“What data suggests they aren’t noticing it?”</em> 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.</p><p>From my experience, here are several reasons why users might not be clicking that coveted button:</p><ul><li>Users don’t understand that this step is for payment.</li><li>They understand it’s about payment but expect order confirmation first.</li><li>Due to incorrect translation, users don’t understand what the button means.</li><li>Lack of trust signals (no security icons, unclear seller information).</li><li>Unexpected additional costs (hidden fees, shipping) that appear at this stage.</li><li>Technical issues (inactive button, page freezing).</li></ul><p>Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly. </p><p>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.</p><p>Psychologically, taking on this bigger role isn’t easy. It means overcoming the <a href="https://positivepsychology.com/fear-of-failure/">fear of making mistakes</a> and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as <strong>partners who create value</strong> — even if it means fighting a hesitation to question product managers (which might come from a fear of speaking up or a desire to <a href="https://ideasforleaders.com/Ideas/overcoming-our-evolutionary-fears-to-speak-up-to-authority/">avoid challenging authority</a>) — and understanding that using our <strong>product logic expertise</strong> proactively is crucial for modern designers.</p><p>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.</p>Reason #3: You’re Solving The Wrong Problem<p>Before solving anything, ask whether the problem even deserves your attention.</p><p>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.</p><p>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:</p><blockquote>Without the right context, any visual tweak is lipstick on a pig.</blockquote> <p>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 <a href="https://en.wikipedia.org/wiki/Sunk_cost#Loss_aversion_and_the_sunk_cost_fallacy">sunk cost fallacy</a> kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising.</p><p>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 <em>when results stalled</em> was: <em>“Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?”</em> That alone might have saved hours.</p>Reason #4: You’re Drowning In Unactionable Feedback<p>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.</p><p>What matters here are two things:</p><ol><li>The <strong>question</strong> you ask,</li><li>The <strong>context</strong> you give.</li></ol><p>That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it.</p><p>For instance:</p><blockquote>“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?”</blockquote> <p>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?”</p><p>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.</p><p>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, <em>“Have you considered other ways to organize this section?”</em> or <em>“Perhaps explore a different structure for this part?”</em> can instantly morph in our minds into <em>“You completely messed up the structure. You’re a bad designer.”</em> <a href="https://www.psychologytoday.com/us/basics/imposter-syndrome">Imposter syndrome</a>, in all its glory.</p><p>So, to wrap up this point, here are two recommendations:</p><ol><li><strong>Prepare for every design discussion.</strong><br />A couple of focused questions will yield far more valuable input than a vague <em>“So, what do you think?”</em>.</li><li><strong>Actively work on separating feedback on your design from your self-worth.</strong><br />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.</li></ol>Reason #5 You’re Just Tired<p>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: <strong>decision fatigue</strong>. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing. </p><p>A striking example comes from a New York Times article titled “<a href="https://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html">Do You Suffer From Decision Fatigue?</a>.” 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.</p><p><strong>What helps here:</strong></p><ul><li><strong>Swap tasks.</strong><br />Trade tickets with another designer; novelty resets your focus.</li><li><strong>Talk to another designer.</strong><br />If NDA permits, ask peers outside the team for a sanity check.</li><li><strong>Step away.</strong><br />Even a ten‑minute walk can do more than a double‑shot espresso.</li></ul><p>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.</p><p><img src="https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png" /></p><p>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, <em>“Wait, weren’t we working?”</em> Funny how that kind of nudge saves a ton of time.</p>Four Steps I Use to Avoid Drowning In Detail<p>Knowing these potential traps, here’s the practical process I use to stay on track:</p><h3>1. Define the Core Problem & Business Goal</h3><p>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: <em>“What metric am I moving, and do we have data to prove this is the right lever?”</em> 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.</p><h3>2. Choose the Mechanic (Solution Principle)</h3><p>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.</p><h3>3. Wireframe the Flow & Get Focused Feedback</h3><p>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.</p><h3>4. Polish the Visuals (Mindfully)</h3><p>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.</p><p>Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering.</p>Wrapping Up<p>Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, <strong>pause and ask what you might be avoiding</strong>. 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.</p><p>Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Nikita Samutin)</author> <enclosure url="http://files.smashing.media/articles/why-designers-get-stuck-in-details/why-designers-get-stuck-in-details.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Designing For Neurodiversity]]></title> <link>https://smashingmagazine.com/2025/06/designing-for-neurodiversity/</link> <guid>https://smashingmagazine.com/2025/06/designing-for-neurodiversity/</guid> <pubDate>Mon, 02 Jun 2025 08:00:00 GMT</pubDate> <description><![CDATA[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?]]></description> <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://tetralogical.com/">TetraLogical</a></p><p>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.</p><p>But <strong>people aren’t edge cases</strong>. Every person is just a different person, performing tasks and navigating the web in a different way. So how can we design better, <strong>more inclusive experiences</strong> that cater to different needs and, ultimately, benefit everyone? Let’s take a closer look.</p><p><img src="https://files.smashing.media/articles/designing-for-neurodiversity/1-neurodiversity-practical-guides.jpeg" /></p>Neurodiversity Or Neurodivergent?<p>There is quite a bit of confusion about both terms on the web. Different people think and experience the world differently, and <strong>neurodiversity</strong> sees differences as natural variations, not deficits. It distinguishes between <strong>neurotypical</strong> and <strong>neurodivergent</strong> people.</p><ul><li><strong>Neurotypical</strong> people see the world in a “typical” and widely perceived as expected way.</li><li><strong>Neurodivergent</strong> people experience the world differently, for example, people with ADHD, dyslexia, dyscalculia, synesthesia, and hyperlexia.</li></ul><p>According to various sources, around <strong>15–40% of the population</strong> 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 <strong>autism is not neurodiverse</strong> — they are neurodivergent.</p><p>One of the main strengths of neurodivergent people is how <strong>imaginative and creative</strong> 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.</p><p>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 <strong>high levels of empathy</strong>.</p>Design With People, Not For Them<p>As a designer, I often see myself as a <strong>path-maker</strong>. I’m designing reliable paths for people to navigate to their goals comfortably. Without being blocked. Or confused. Or locked out.</p><p>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 <strong>early in the process</strong>.</p><p>Better accessibility is better for everyone. Instead of making decisions that need to be reverted or refined to be compliant, we can bring a <strong>diverse group of people</strong> — with accessibility needs, with neurodiversity, frequent and infrequent users, experts, newcomers — in the process, and design with them, rather than for them.</p>Neurodiversity & Inclusive Design Resources<p>A wonderful resource that helps us design for cognitive accessibility is Stéphanie Walter’s <a href="https://stephaniewalter.design/blog/neurodiversity-and-ux-essential-resources-for-cognitive-accessibility/"><strong>Neurodiversity and UX toolkit</strong></a>. It includes <strong>practical guidelines</strong>, tools, and resources to better understand and design for dyslexia, dyscalculia, autism, and ADHD.</p><p><img src="https://files.smashing.media/articles/designing-for-neurodiversity/2-neurodiversity-and-ux-essential-resources-for-cognitive-accessibility.png" /></p><p>Another fantastic resource is Will Soward’s <a href="https://neurodiversity.design/"><strong>Neurodiversity Design System</strong></a>. It combines neurodiversity and user experience design into a set of design standards and principles that you can use to design accessible learning interfaces.</p><p>Last but not least, I’ve been putting together a few summaries about <strong>neurodiversity and inclusive design</strong> over the last few years, so you might find them helpful, too:</p><ul><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-accessibility-activity-7188133636985028608-JEtj/">ADHD</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7099294629887397888-L1d0/">Autism</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7156651715486732288-RvW7/">Children</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7087333591906430976-PHsN">Colorblindness</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-accessibility-activity-7178702360649547778-4JtQ">Deafness</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7111249864855810048-5qup">Dyscalculia</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7079355423534784512-3R4C">Dyslexia</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-typography-activity-7095664890727526400-ECAH">Legibility</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7132292750355378176-ZMkL">Left-Handed Users</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-designpatterns-activity-7088778491109720064-im2_">Mental Health</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-learning-activity-7105272692919914496-Q2-y/">Motivation</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7089866429016989696-JRAq">Older Adults</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_how-screen-readers-work-and-how-activity-7130472748371341312-i0PW">Screen Readers</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7160904166075232256-mNMc">Teenagers</a></li></ul><p>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. 👏🏼👏🏽👏🏾</p>]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/designing-for-neurodiversity/designing-for-neurodiversity.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Prelude To Summer (June 2025 Wallpapers Edition)]]></title> <link>https://smashingmagazine.com/2025/05/desktop-wallpaper-calendars-june-2025/</link> <guid>https://smashingmagazine.com/2025/05/desktop-wallpaper-calendars-june-2025/</guid> <pubDate>Sat, 31 May 2025 08:00:00 GMT</pubDate> <description><![CDATA[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!]]></description> <content:encoded><![CDATA[<p>There’s an artist in everyone. Some <strong>bring their ideas to life</strong> 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.</p> <p>For more than 14 years already our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> has been the perfect opportunity to do just that: to break out of your daily routine and get <strong>fully immersed in a creative little project</strong>. This month is no exception, of course.</p> <p>For this post, artists and designers from across the globe once again put their creative skills to the test and designed beautiful, unique, and <strong>inspiring desktop wallpapers</strong> 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 <em>smashing</em>!</p> <p>If you, too, would like to <strong>get featured</strong> in one of our next wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">submit your design</a>. We can’t wait to see what you’ll come up with!</p> <ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> 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.</li></ul> <p></p>June Is For Nature<p></p><p></p><p>“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 <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/june-25-june-is-for-nature-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-june-is-for-nature-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/june-25-june-is-for-nature-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Tastes Of June<p></p><p></p><p>“A vibrant June wallpaper featuring strawberries and fresh oranges, capturing the essence of early summer with bright colors and seasonal charm.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/june-25-tastes-of-june-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-tastes-of-june-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/june-25-tastes-of-june-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>A Bibliophile’s Shelf<p></p><p></p><p>“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 <a href="https://mu-art.org/ceceliaotis/">Cecelia Otis</a> from the United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/june-25-a-bibliophiles-shelf-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-a-bibliophiles-shelf-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/june-25-a-bibliophiles-shelf-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Solana<p></p><p></p><p>“Spanish origin, meaning ‘sunshine’.” — Designed by <a href="https://www.designstudiouiux.com/">Bhabna Basak</a> from India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/june-25-solana-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-solana-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/june-25-solana-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Here Comes The Sun<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/june-25-here-comes-the-sun-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-here-comes-the-sun-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/june-25-here-comes-the-sun-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Nature’s Melody<p></p><p></p><p>“With eyes closed and music on, she blends into the rhythm of the earth, where every note breathes nature.” — Designed by <a href="https://www.designstudiouiux.com/">Design Studio</a> from India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/june-25-natures-melody-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-natures-melody-preview.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/june-25-natures-melody-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Silent Glimmer<p></p><p></p><p>“In the hush of shadows, a single amber eye pierces the dark — silent, watchful, eternal.” — Designed by <a href="https://dribbble.com/KasturipalmaL2">Kasturi Palmal</a> from India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/june-25-silent-glimmer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silent-glimmer-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/june-25-silent-glimmer-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Ice Cream<p></p><p></p><p>“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 <a href="https://mu-art.org/daniellemay/">Danielle May</a> from Pennsylvania, United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/june-25-ice-cream-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-ice-cream-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/june-25-ice-cream-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Silly Cats<p></p><p></p><p>“I really loved the fun content aware effect and wanted to play around with it for this wallpaper with some cute cats.” — Designed by <a href="https://wherecreativityworks.com/bloggers/italia/">Italia Storey</a> from the United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/june-25-silly-cats-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silly-cats-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/june-25-silly-cats-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>In Case Of Nothing To Do<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/june-25-in-case-of-nothing-to-do-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-in-case-of-nothing-to-do-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/june-25-in-case-of-nothing-to-do-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Pink Hours<p></p><p></p><p>“With long-lasting days, it is pleasant to spend hours walking at dusk. This photo was taken in an illuminated garden.” — Designed by <a href="https://www.philippebrouard.fr">Philippe Brouard</a> from France.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/june-25-pink-hours-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-pink-hours-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/june-25-pink-hours-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2880x1800.jpg">2880x1800</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2880x1800.jpg">2880x1800</a></li></ul> <p></p>What’s The Best That Could Happen?<p></p><p></p><p>Designed by <a href="https://gracecdphotography.mypixieset.com">Grace DiNella</a> from Doylestown, PA, United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/june-25-whats-the-best-that-could-happen-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-whats-the-best-that-could-happen-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/june-25-whats-the-best-that-could-happen-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Purrsuit<p></p><p></p><p>“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 <a href="https://mu-art.org/liliannadamian/">Lilianna Damian</a> from Scranton, PA, United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/june-25-purrsuit-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-purrsuit-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/june-25-purrsuit-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Happy Best Friends Day!<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/june-25-happy-best-friends-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-happy-best-friends-day-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/june-25-happy-best-friends-day-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Travel Time<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1fa14b29-e470-4b7d-b73d-1dd94d32bdf8/june-18-travel-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Summer Coziness<p></p><p></p><p>“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 <a href="https://cozystream.com/">Kate Jameson</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa7facf5-395f-44a4-a0da-05a2b1a5bd23/june-20-summer-coziness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Deep Dive<p></p><p></p><p>“Summer rains, sunny days, and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc6e8288-e0fc-4db9-8193-a75d34cf964b/june-17-deep-dive-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>All-Seeing Eye<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Join The Wave<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8fa3266b-d36c-49dc-9ff2-324f6087cb0d/june-16-join-the-wave-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Create Your Own Path<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/ux-design.html">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Oh, The Places You Will Go!<p></p><p></p><p>“In celebration of high school and college graduates ready to make their way in the world!” — Designed by <a href="https://bloeschcreative.etsy.com">Bri Loesch</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46f6cae6-a2aa-468c-ba2f-ecf40e375055/june-14-oh-the-places-you-will-go-full-opt.png"><img src="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" /></a><p></p><ul><li><a href="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">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Merry-Go-Round<p></p><p></p><p>Designed by <a href="https://www.behance.com/xenialatii">Xenia Latii</a> from Germany.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ad15efe-32d0-4a13-9f98-0fbc19ad0e30/june-17-merry-go-round-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Summer Surf<p></p><p></p><p>“Summer vibes…” — Designed by <a href="https://www.facebook.com/Hirs-Design-148950788515251/?timeline_context_item_type=intro_card_work&timeline_context_item_source=100002085435433">Antun Hirsman</a> from Croatia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/718103fa-7136-4f8c-a4d7-9cd1d2866c88/june-18-summer-surf-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-2650x1440.jpg">2650x1440</a></li></ul> <p></p>Expand Your Horizons<p></p><p></p><p>“It’s summer! Go out, explore, expand your horizons!” — Designed by <a href="https://dorvandavoudi.com">Dorvan Davoudi</a> from Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/03f98df0-bf1a-43b1-8058-a4ca522ab709/june-16-expand-your-horizons-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Gravity<p></p><p></p><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35d4d25a-1e3c-4651-ad45-40b1aef31618/june-15-gravity-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c087db08-a5f6-414f-a827-e2be4acb421d/june-15-gravity-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c087db08-a5f6-414f-a827-e2be4acb421d/june-15-gravity-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Yoga Is A Light, Which Once Lit, Will Never Dim<p></p><p></p><p>“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 <a href="https://acodez.in/">Acodez IT Solutions</a> from India.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-17-yoga-is-a-light-which-once-lit-will-never-dim-full-opt.png"><img src="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" /></a><p></p><ul><li><a href="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">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Evolution<p></p><p></p><p>“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.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-768x1024.png">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Summer Party<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6d0cb175-acd5-400c-b34d-9ffb094261ab/june-21-summer-party-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Splash<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Reef Days<p></p><p></p><p>“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.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-480x800.png">480x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1280x1024.png">1280x1024</a></li></ul> <p></p>Solstice Sunset<p></p><p></p><p>“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 <a href="https://www.behance.net/jamesmitchell23">James Mitchell</a> from the United Kingdom.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/492124f6-1b46-441b-a52b-2bbcf4372536/june-17-solstice-sunset-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2880x1800.png">2880x1800</a></li></ul> <p></p>Wildlife Revival<p></p><p></p><p>“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 <a href="https://www.librafire.com/">LibraFire</a> from Serbia.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-2560x1440.png">2560x1440</a> </li></ul> <p></p>Pineapple Summer Pop<p></p><p></p><p>“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.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d050c6-791c-4043-af11-3624e87054fe/june-16-pineapple-summer-pop-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1152x720.jpg">1152x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Handmade Pony Gone Wild<p></p><p></p><p>“This piece was inspired by the <em>My Little Pony</em> cartoon series. Because those ponies irritated me so much as a kid, I always wanted to create a bad-ass pony.” — Designed by <a href="https://zedduo.com/">Zaheed Manuel</a> from South Africa.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ecba7a4-ccdd-4eb3-9795-995efcb317a8/june-14-hand-made-pony-gone-wild-full-opt.png"><img src="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" /></a><p></p><ul><li><a href="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">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2880x1800.jpg">2880x1800</a></li></ul> <p></p>Window Of Opportunity<p></p><p></p><p>“‘Look deep into nature and then you will understand everything better,’ A.E.” — Designed by <a href="https://hirsdesign.com/">Antun Hiršman</a> from Croatia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45b3e801-54a5-4b2b-9fc7-73f10bf965c6/june-17-window-of-opportunity-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cf7e3de-ab36-4ce9-92f0-5d2535e74db1/june-17-window-of-opportunity-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cf7e3de-ab36-4ce9-92f0-5d2535e74db1/june-17-window-of-opportunity-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Viking Meat War<p></p><p></p><p>Designed by <a href="https://ricardogimenes.com">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1600x1050.png">1600x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-2880x1800.png">2880x1800</a></li></ul> ]]></content:encoded> <author>hello@smashingmagazine.com (Cosima Mielke)</author> <enclosure url="http://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png" length="0" type="image/png"/> </item> <item> <title><![CDATA[Reliably Detecting Third-Party Cookie Blocking In 2025]]></title> <link>https://smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/</link> <guid>https://smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/</guid> <pubDate>Wed, 28 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>The web is beginning to part ways with third-party cookies, a technology it once heavily relied on. <a href="https://en.wikipedia.org/wiki/HTTP_cookie">Introduced in 1994 by Netscape</a> to support features like virtual shopping carts, cookies have long been a staple of web functionality. However, concerns over <strong>privacy</strong> and <strong>security</strong> have led to a concerted effort to eliminate them. The World Wide Web Consortium Technical Architecture Group (W3C TAG) <a href="https://w3ctag.github.io/web-without-3p-cookies/">has been vocal in advocating</a> for the complete removal of third-party cookies from the web platform.</p><p>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.</p>Don’t Let Silent Failures Win: Why Cookie Detection Still Matters<p>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.</p><p>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.</p><p>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.</p><p>Detecting third-party cookie blocking isn’t just good technical hygiene but a frontline defense for user experience.</p>Why It’s Hard To Tell If Third-Party Cookies Are Blocked<p>Detecting whether third-party cookies are supported isn’t as simple as calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/cookieEnabled"><code>navigator.cookieEnabled</code></a>. Even a well-intentioned check like this one may look safe, but it still won’t tell you what you actually need to know:</p><div><pre><code>// DOES NOT detect third-party cookie blockingfunction areCookiesEnabled() { if (navigator.cookieEnabled === false) { return false; } try { document.cookie = "test_cookie=1; SameSite=None; Secure"; const hasCookie = document.cookie.includes("test_cookie=1"); document.cookie = "test_cookie=; Max-Age=0; SameSite=None; Secure"; return hasCookie; } catch (e) { return false; }}</code></pre></div> <p>This function only confirms that cookies work in the current (first-party) context. <strong>It says nothing about third-party scenarios</strong>, like an iframe on another domain. Worse, it’s misleading: in some browsers, <code>navigator.cookieEnabled</code> may still return <code>true</code> inside a third-party iframe even when cookies are blocked. Others might behave differently, leading to inconsistent and unreliable detection.</p><p>These cross-browser inconsistencies — combined with the limitations of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie"><code>document.cookie</code></a> — make it clear that there is <strong>no shortcut for detection</strong>. To truly detect third-party cookie blocking, we need to understand <em>how</em> different browsers actually behave in embedded third-party contexts.</p>How Modern Browsers Handle Third-Party Cookies<p>The behavior of modern browsers directly affects which detection methods will work and which ones silently fail.</p><h3>Safari: Full Third-Party Cookie Blocking</h3><p>Since <a href="https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/">version 13.1</a>, 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 <a href="https://webkit.org/tracking-prevention/#intelligent-tracking-prevention-itp">Intelligent Tracking Prevention (ITP)</a>.</p><p>For embedded content (such as an SSO iframe) that requires cookie access, Safari exposes the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>, 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.</p><h3>Firefox: Cookie Partitioning By Design</h3><p>Firefox’s <a href="https://support.mozilla.org/en-US/kb/total-cookie-protection-and-website-breakage-faq#w_what-is-total-cookie-protection">Total Cookie Protection</a> 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 <em>siteA.com</em> and <em>siteB.com</em> is stored separately and cannot be shared.</p><p>As of <a href="https://support.mozilla.org/en-US/kb/introducing-total-cookie-protection-standard-mode">Firefox 102</a>, this behavior is enabled by default in the Standard (default) mode of <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop">Enhanced Tracking Protection</a>. Unlike the Strict mode — which <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop#w_strict-enhanced-tracking-protection">blocks third-party cookies entirely</a>, similar to Safari — the Standard mode does not block them outright. Instead, it neutralizes their tracking capability by isolating them per site.</p><p>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 <strong>partitioning</strong>. Detection logic needs to account for that.</p><h3>Chrome: From Deprecation Plans To Privacy Sandbox (And Industry Pushback)</h3><p>Chromium-based browsers still allow third-party cookies by default — but the story is changing. Starting with <a href="https://blog.chromium.org/2019/10/developers-get-ready-for-new.html">Chrome 80</a>, third-party cookies must be explicitly marked with <code>SameSite=None; Secure</code>, or they will be rejected.</p><p>In <a href="https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html">January 2020</a>, <strong>Google announced their intention</strong> to phase out third-party cookies by 2022. <strong>However, the timeline was updated multiple times</strong>, first in <a href="https://blog.google/products/chrome/updated-timeline-privacy-sandbox-milestones/?utm_source=chatgpt.com">June 2021</a> when the company pushed the rollout to begin in mid-2023 and conclude by the end of that year. Additional postponements followed in <a href="https://blog.google/products/chrome/update-testing-privacy-sandbox-web/">July 2022</a>, <a href="https://blog.google/products/chrome/privacy-sandbox-tracking-protection/">December 2023</a>, and <a href="https://privacysandbox.com/intl/en_us/news/update-on-the-plan-for-phase-out-of-third-party-cookies-on-chrome/">April 2024</a>.</p><p>In <a href="https://privacysandbox.com/news/privacy-sandbox-update/">July 2024</a>, <strong>Google has clarified that there is no plan to unilaterally deprecate third-party cookies or force users into a new model without consent</strong>. Instead, Chrome is shifting to a <strong>user-choice interface</strong> that will allow individuals to decide whether to block or allow third-party cookies globally.</p><p>This change was influenced in part by <a href="https://www.businessinsider.com/googles-plan-to-replace-tracking-cookies-faces-big-new-hurdles-2024-7">substantial pushback from the advertising industry</a>, as well as ongoing regulatory oversight, including <a href="https://www.gov.uk/cma-cases/investigation-into-googles-privacy-sandbox-browser-changes">scrutiny by the UK Competition and Markets Authority (CMA)</a> into <a href="https://privacysandbox.google.com">Google’s Privacy Sandbox initiative</a>. The CMA confirmed in a 2025 update that there is no intention to force a deprecation or trigger automatic prompts for cookie blocking.</p><p>As for now, <strong>third-party cookies remain enabled by default in Chrome</strong>. The new user-facing controls and the broader Privacy Sandbox ecosystem are still in various stages of experimentation and limited rollout.</p><h3>Edge (Chromium-Based): Tracker-Focused Blocking With User Configurability</h3><p>Edge (which is a Chromium-based browser) <a href="https://learn.microsoft.com/en-us/microsoftteams/platform/resources/samesite-cookie-update#samesite-cookie-attribute-2020-release">shares Chrome’s handling of third-party cookies</a>, including the <code>SameSite=None; Secure</code> requirement. Additionally, Edge introduces <a href="https://learn.microsoft.com/en-us/microsoft-edge/web-platform/tracking-prevention">Tracking Prevention</a> 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.</p><h3>Other Browsers: What About Them?</h3><p>Privacy-focused browsers, like Brave, <a href="https://support.brave.com/hc/en-us/articles/360054509991-How-do-I-manage-Cookies-and-Site-data-in-Brave-on-Android?utm_source=chatgpt.com">block third-party cookies by default</a> as part of their strong anti-tracking stance.</p><p>Internet Explorer (IE) 11 <a href="https://support.microsoft.com/en-us/topic/description-of-cookies-ad01aa7e-66c9-8ab2-7898-6652c100999d">allowed third-party cookies depending on user privacy settings</a> and the presence of <a href="https://www.w3.org/P3P/">Platform for Privacy Preferences (P3P)</a> headers. However, IE usage is now negligible. Notably, the default “Medium” privacy setting in IE could block third-party cookies unless a valid P3P policy was present.</p><p>Older versions of Safari had partial third-party cookie restrictions (such as <em>“Allow from websites I visit”</em>), but, as mentioned before, this was replaced with full blocking via ITP.</p><p><strong>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.</strong></p><p>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.</p>Overview Of Detection Techniques<p>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.</p><h3>Basic JavaScript API Checks (Misleading)</h3><p>As mentioned earlier, the <code>navigator.cookieEnabled</code> or setting <code>document.cookie</code> on the main page doesn’t reflect cross-site cookie status:</p><ul><li>In third-party iframes, <code>navigator.cookieEnabled</code> often returns <code>true</code> even when cookies are blocked.</li><li>Setting <code>document.cookie</code> in the parent doesn’t test the third-party context.</li></ul><p>These checks are first-party only. <strong>Avoid using them for detection.</strong></p><h3>Storage Hacks Via <code>localStorage</code> (Obsolete)</h3><p>Previously, some developers inferred cookie support by checking if <code>window.localStorage</code> worked inside a third-party iframe — which is especially useful against older Safari versions that blocked all third-party storage.</p><p>Modern browsers often allow <code>localStorage</code> even when cookies are blocked. <strong>This leads to false positives and is no longer reliable.</strong></p><h3>Server-Assisted Cookie Probe (Heavyweight)</h3><p>One classic method involves setting a cookie from a third-party domain via HTTP and then checking if it comes back:</p><ol><li>Load a script/image from a third-party server that sets a cookie.</li><li>Immediately load another resource, and the server checks whether the cookie was sent.</li></ol><p>This works, but it:</p><ul><li>Requires custom server-side logic,</li><li>Depends on HTTP caching, response headers, and cookie attributes (<code>SameSite=None; Secure</code>), and</li><li>Adds development and infrastructure complexity.</li></ul><p>While this is <strong>technically valid</strong>, it is not suitable for a front-end-only approach, which is our focus here.</p><h3>Storage Access API (Supplemental Signal)</h3><p>The <code>document.hasStorageAccess()</code> method allows embedded third-party content to check if it has access to unpartitioned cookies:</p><ul><li><strong>Chrome</strong><br />Supports <code>hasStorageAccess()</code> and <code>requestStorageAccess()</code> starting from <a href="https://privacysandbox.google.com/cookies/storage-access-api#top-level_page_access">version 119</a>. Additionally, <code>hasUnpartitionedCookieAccess()</code> is available as an alias for <code>hasStorageAccess()</code> from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/hasUnpartitionedCookieAccess#browser_compatibility">version 125</a> onwards.</li><li><strong>Firefox</strong><br /><a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API#browser_compatibility">Supports</a> both <code>hasStorageAccess()</code> and <code>requestStorageAccess()</code> methods.</li><li><strong>Safari</strong><br /><a href="https://webkit.org/blog/11545/updates-to-the-storage-access-api/">Supports the Storage Access API</a>. However, <strong>access must always be triggered by a user interaction</strong>. For example, even calling <code>requestStorageAccess()</code> without a direct user gesture (like a click) is ignored.</li></ul><p>Chrome and Firefox also support the API, and in those browsers, it may work automatically or based on browser heuristics or site engagement.</p><p>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 <strong>supplemental signal</strong>, rather than a standalone check.</p><h3>iFrame + <code>postMessage</code> (Best Practice)</h3><p>Despite the existence of the Storage Access API, <strong>at the time of writing, this remains the most reliable and browser-compatible method</strong>:</p><ol><li>Embed a hidden iframe from a third-party domain.</li><li>Inside the iframe, attempt to set a test cookie.</li><li>Use <code>window.postMessage</code> to report success or failure to the parent.</li></ol><p>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. </p><p>We’ll implement this step-by-step next.</p><h3>Bonus: <code>Sec-Fetch-Storage-Access</code></h3><p>Chrome (starting in <a href="https://privacysandbox.google.com/blog/storage-access-headers-133">version 133</a>) is introducing <code>Sec-Fetch-Storage-Access</code>, an HTTP request header sent with cross-site requests to indicate whether the iframe has access to unpartitioned cookies. <strong>This header is only visible to servers and cannot be accessed via JavaScript.</strong> It’s useful for back-end analytics but not applicable for client-side cookie detection.</p><p>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.</p>Step-by-Step: Detecting Third-Party Cookies Via iFrame<p>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:</p><ul><li>You must serve the test page from a different domain or public subdomain, e.g., <code>example.com</code> and <code>cookietest.example.com</code>,</li><li>The domain needs HTTPS (for <code>SameSite=None; Secure</code> cookies to work), and</li><li>You’ll need to host a simple static file (the test page), even if no server code is involved.</li></ul><p>Once that’s set up, the rest of the logic is fully client-side.</p><h3>Step 1: Create A Cookie Test Page (On A Third-Party Domain)</h3><p>Minimal version (e.g., <code>https://cookietest.example.com/cookie-check.html</code>):</p><div><pre><code><!DOCTYPE html><html> <body> <script> document.cookie = "thirdparty_test=1; SameSite=None; Secure; Path=/;"; const cookieFound = document.cookie.includes("thirdparty_test=1"); const sendResult = (status) => window.parent?.postMessage(status, "*"); if (cookieFound && document.hasStorageAccess instanceof Function) { document.hasStorageAccess().then((hasAccess) => { sendResult(hasAccess ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED"); }).catch(() => sendResult("TP_COOKIE_BLOCKED")); } else { sendResult(cookieFound ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED"); } </script> </body></html></code></pre></div> <p>Make sure the page is served over HTTPS, and the cookie uses <code>SameSite=None; Secure</code>. Without these attributes, modern browsers will silently reject it.</p><h3>Step 2: Embed The iFrame And Listen For The Result</h3><p>On your main page:</p><div><pre><code>function checkThirdPartyCookies() { return new Promise((resolve) => { const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = "<a href="https://cookietest.example.com/cookie-check.html"">https://cookietest.example.com/cookie-check.html"</a>; // your subdomain document.body.appendChild(iframe); let resolved = false; const cleanup = (result, timedOut = false) => { if (resolved) return; resolved = true; window.removeEventListener('message', onMessage); iframe.remove(); resolve({ thirdPartyCookiesEnabled: result, timedOut }); }; const onMessage = (event) => { if (["TP_COOKIE_SUPPORTED", "TP_COOKIE_BLOCKED"].includes(event.data)) { cleanup(event.data === "TP_COOKIE_SUPPORTED", false); } }; window.addEventListener('message', onMessage); setTimeout(() => cleanup(false, true), 1000); });}</code></pre></div> <p>Example usage:</p><div><pre><code>checkThirdPartyCookies().then(({ thirdPartyCookiesEnabled, timedOut }) => { if (!thirdPartyCookiesEnabled) { someCookiesBlockedCallback(); // Third-party cookies are blocked. if (timedOut) { // No response received (iframe possibly blocked). // Optional fallback UX goes here. someCookiesBlockedTimeoutCallback(); }; }});</code></pre></div> <h3>Step 3: Enhance Detection With The Storage Access API</h3><p>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.</p><p>Here’s how you could implement that in your iframe test page:</p><div><pre><code><button id="enable-cookies">This embedded content requires cookie access. Click below to continue.</button> <script> document.getElementById('enable-cookies')?.addEventListener('click', async () => { if (document.requestStorageAccess && typeof document.requestStorageAccess === 'function') { try { const granted = await document.requestStorageAccess(); if (granted !== false) { window.parent.postMessage("TP_STORAGE_ACCESS_GRANTED", "*"); } else { window.parent.postMessage("TP_STORAGE_ACCESS_DENIED", "*"); } } catch (e) { window.parent.postMessage("TP_STORAGE_ACCESS_FAILED", "*"); } } });</script></code></pre></div> <p>Then, on the parent page, you can listen for this message and retry detection if needed: </p><div><pre><code>// Inside the same <code>onMessage</code> listener from before:if (event.data === "TP_STORAGE_ACCESS_GRANTED") { // Optionally: retry the cookie test, or reload iframe logic checkThirdPartyCookies().then(handleResultAgain);}</code></pre></div> (Bonus) A Purely Client-Side Fallback (Not Perfect, But Sometimes Necessary)<p>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.</p><p>When that’s the case, your best option is to <strong>combine multiple signals</strong> — basic cookie checks, <code>hasStorageAccess()</code>, <code>localStorage</code> fallbacks, and maybe even passive indicators like load failures or timeouts — to <strong>infer</strong> whether third-party cookies are likely blocked.</p><p>The important caveat: <strong>This will never be 100% accurate.</strong> But, in constrained environments, “better something than nothing” may still improve the UX.</p><p>Here’s a basic example:</p><div><pre><code>async function inferCookieSupportFallback() { let hasCookieAPI = navigator.cookieEnabled; let canSetCookie = false; let hasStorageAccess = false; try { document.cookie = "testfallback=1; SameSite=None; Secure; Path=/;"; canSetCookie = document.cookie.includes("test_fallback=1"); document.cookie = "test_fallback=; Max-Age=0; Path=/;"; } catch (_) { canSetCookie = false; } if (typeof document.hasStorageAccess === "function") { try { hasStorageAccess = await document.hasStorageAccess(); } catch (_) {} } return { inferredThirdPartyCookies: hasCookieAPI && canSetCookie && hasStorageAccess, raw: { hasCookieAPI, canSetCookie, hasStorageAccess } };}</code></pre></div> <p>Example usage:</p><div><pre><code>inferCookieSupportFallback().then(({ inferredThirdPartyCookies }) => { if (inferredThirdPartyCookies) { console.log("Cookies likely supported. Likely, yes."); } else { console.warn("Cookies may be blocked or partitioned."); // You could inform the user or adjust behavior accordingly }});</code></pre></div> <p>Use this fallback when:</p><ul><li>You’re building a JavaScript-only widget embedded on unknown sites,</li><li>You don’t control a second domain (or the team refuses to add one), or</li><li>You just need <em>some</em> visibility into user-side behavior (e.g., debugging UX issues).</li></ul><p><strong>Don’t rely on it for security-critical logic (e.g., auth gating)!</strong> 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.</p>Fallback Strategies When Third-Party Cookies Are Blocked<p>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:</p><h3>Redirect-Based Flows</h3><p>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.</p><h3>Request Storage Access</h3><p>Prompt the user using <code>requestStorageAccess()</code> after a clear UI gesture (Safari requires this). Use this to re-enable cookies <strong>without leaving the page</strong>.</p><h3>Token-Based Communication</h3><p>Pass session info directly from parent to iframe via:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><code>postMessage</code></a> (with required <a href="https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/11-Client-side_Testing/11-Testing_Web_Messaging"><code>origin</code></a>);</li><li>Query params (e.g., signed JWT in iframe URL).</li></ul><p>This avoids reliance on cookies entirely but requires coordination between both sides:</p><div><pre><code>// Parentconst iframe = document.getElementById('my-iframe'); iframe.onload = () => { const token = getAccessTokenSomehow(); // JWT or anything else iframe.contentWindow.postMessage( { type: 'AUTH_TOKEN', token }, '<a href="https://iframe.example.com'">https://iframe.example.com'</a> // Set the correct origin! );}; // iframewindow.addEventListener('message', (event) => { if (event.origin !== '<a href="https://parent.example.com'">https://parent.example.com'</a>) return; const { type, token } = event.data; if (type === 'AUTH_TOKEN') { validateAndUseToken(token); // process JWT, init session, etc }});</code></pre></div> <h3>Partitioned Cookies (CHIPS)</h3><p>Chrome (since version 114) and other Chromium-based browsers now support cookies with the Partitioned attribute (known as <a href="https://privacysandbox.google.com/cookies/chips">CHIPS</a>), allowing per-top-site cookie isolation. This is useful for widgets like chat or embedded forms where cross-site identity isn’t needed.</p><blockquote><strong>Note</strong>: Firefox and Safari don’t support the <code>Partitioned</code> cookie attribute. Firefox enforces cookie partitioning by default using a different mechanism (Total Cookie Protection), while Safari blocks third-party cookies entirely.</blockquote> <p>But be careful, as they are treated as “blocked” by basic detection. Refine your logic if needed.</p>Final Thought: Transparency, Transition, And The Path Forward<p>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:</p><ul><li><strong>Keep an eye on the standards.</strong><br />APIs like <a href="https://privacysandbox.google.com/cookies/fedcm">FedCM</a> and Privacy Sandbox features (<a href="https://privacysandbox.google.com/private-advertising/topics?hl=en">Topics</a>, <a href="https://privacysandbox.google.com/private-advertising/attribution-reporting">Attribution Reporting</a>, <a href="https://privacysandbox.google.com/private-advertising/fenced-frame">Fenced Frames</a>) are reshaping how we handle identity and analytics without relying on cross-site cookies.</li><li><strong>Combine detection with graceful fallback.</strong><br />Whether it’s offering a redirect flow, using <code>requestStorageAccess()</code>, or falling back to token-based messaging — every small UX improvement adds up.</li><li><strong>Inform your users.</strong><br />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.</li></ul><p>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.</p><p>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.</p><p>And don’t forget: <em>having something is better than nothing</em>.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Mikhail Prosmitskiy)</author> <enclosure url="http://files.smashing.media/articles/reliably-detecting-third-party-cookie-blocking-2025/reliably-detecting-third-party-cookie-blocking-2025.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Data Vs. Findings Vs. Insights In UX]]></title> <link>https://smashingmagazine.com/2025/05/data-vs-findings-vs-insights-ux/</link> <guid>https://smashingmagazine.com/2025/05/data-vs-findings-vs-insights-ux/</guid> <pubDate>Tue, 27 May 2025 13:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>In many companies, <strong>data, findings, and insights</strong> are all used interchangeably. Slack conversations circle around convincing data points, statistically significant findings, reliable insights, and emerging trends. Unsurprisingly, conversations often <strong>mistake sporadic observations</strong> for consistent patterns.</p><p>But how impactful is the weight that each of them carries? And how do we <strong>turn raw data into meaningful insights</strong> to make better decisions? Well, let’s find out.</p><p><img src="https://files.smashing.media/articles/mailing-94-data-findings-insights/1-mailing-94-data-findings-insights.jpg" /></p>Why It All Matters<p>At first, it may seem that the differences are very nuanced and merely technical. But when we <strong>review inputs and communicate the outcomes of our UX work</strong>, we need to be careful not to conflate terminology — to avoid wrong assumptions, wrong conclusions, and early dismissals.</p><p><img src="https://files.smashing.media/articles/mailing-94-data-findings-insights/2-mailing-94-data-findings-insights.jpg" /></p><p>When <strong>strong recommendations and bold statements</strong> 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.</p><p>As UX designers, we need to be prepared for it. The last thing we want is to have a <strong>weak line of thinking</strong>, easily dismantled under the premise of “weak research”, “unreliable findings”, “poor choice of users” — and hence dismissed straight away.</p>Data ≠ Findings ≠ Insights<p>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:</p><ul><li><strong>Data</strong> is raw observations (logs, notes, survey answers) (<em>what was recorded</em>).</li><li><strong>Findings</strong> describe emerging patterns in data but aren’t actionable (<em>what happened</em>).</li><li><strong>Insights</strong> are business opportunities (<em>what happened + why + so what</em>).</li><li><strong>Hindsights</strong> are reflections of past actions and outcomes (<em>what we learned in previous work</em>).</li><li><strong>Foresights</strong> are informed projections, insights with extrapolation (<em>what could happen next</em>).</li></ul><p><img src="https://files.smashing.media/articles/mailing-94-data-findings-insights/3-mailing-94-data-findings-insights.jpg" /></p><p>Here’s what it then looks like in real life:</p><ul><li><strong>Data ↓</strong><br /> Six users were looking for ”Money transfer” in “Payments”, and <strong>4 users discovered</strong> the feature in their personal dashboard.</li><li><strong>Finding ↓</strong><br /> 60% of users <strong>struggled to find</strong> the “Money transfer” feature on a dashboard, often confusing it with the “Payments” section.</li><li><strong>Insight ↓</strong><br /> Navigation doesn’t match users’ mental models for money transfers, causing confusion and delays. We recommend <strong>renaming sections or reorganizing the dashboard</strong> to prioritize “Transfer Money”. It could make task completion more intuitive and efficient.</li><li><strong>Hindsight ↓</strong><br /> After renaming the section to “Transfer Money” and moving it to the main dashboard, <strong>task success increased by 12%</strong>. User confusion dropped in follow-up tests. It proved to be an effective solution.</li><li><strong>Foresight ↓</strong><br /> As our financial products become more complex, users will expect simpler <strong>task-oriented navigation</strong> (e.g., “Send Money”, “Pay Bills“) instead of categories like “Payments”. We should evolve the dashboard towards action-driven IA to meet user expectations.</li></ul><p><strong>Only insights create understanding</strong> 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 <strong>findings are reliable</strong>.</p><p>That’s when, eventually, the big question about <strong>statistical significance</strong> comes along. And that’s when ideas and recommendations often get dismissed without a chance to be explored or explained.</p>But Is It Statistically Significant?<p>Now, for UX designers, that’s an incredibly difficult question to answer. As Nikki Anderson <a href="https://www.linkedin.com/posts/nikkianderson-ux_is-this-statistically-significant-every-activity-7307757817434697729-qZk5/">pointed out</a>, statistical significance <strong>was never designed for qualitative research</strong>. And with UX work, we’re not trying to publish academic research or prove universal truths.</p><p>What we <em>are</em> trying to do is reach <strong>theoretical saturation</strong>, 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.</p><p><img src="https://files.smashing.media/articles/mailing-94-data-findings-insights/4-mailing-94-data-findings-insights.jpg" /></p><p>Here are some <strong>useful talking points</strong> to handle the question:</p><ul><li><strong>Five users per segment</strong> often <strong>surface major issues</strong>, and 10–15 users per segment usually reach saturation. If we’re still getting new insights after that, our scope is too broad.</li><li>“If five people hit the same pothole and wreck their car, how many more do you need before fixing the road?”</li><li>“If three enterprise customers say onboarding is confusing, that’s a <strong>churn risk</strong>.”</li><li>“If two usability tests expose a checkout issue, that’s <strong>abandoned revenue</strong>.”</li><li>“If one customer interview reveals a security concern, that’s a <strong>crisis waiting to happen</strong>.”</li><li>“How many user complaints exactly do we need to take this seriously?”</li><li>“How much revenue exactly are we willing to lose before fixing this issue?”</li></ul><p>And: it might not be necessary to focus on the number of participants, but instead, argue about <strong>users consistently struggling with a feature</strong>, mismatch of expectations, and a clear pattern emerging around a particular pain point.</p>How To Turn Findings Into Insights<p>Once we notice patterns emerging, we need to turn them into actionable recommendations. Surprisingly, this isn’t always easy — we need to <strong>avoid easy guesses and assumptions</strong> as far as possible, as they will invite wrong conclusions.</p><p>To do that, you can rely on a very simple but effective framework to turn findings into insights: <strong>What Happened + Why + So What</strong>:</p><ul><li><strong>“What happened”</strong> covers observed behavior and patterns.</li><li><strong>“Why”</strong> includes beliefs, expectations, or triggers.</li><li><strong>“So What”</strong> addresses impact, risk, and business opportunity.</li></ul><p>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 <strong>hesitation and inaction</strong>.</p><p>I can wholeheartedly recommend exploring <strong>Findings → Insights Cheatsheet</strong> in <a href="https://www.linkedin.com/posts/nikkianderson-ux_stop-calling-it-an-insight-if-its-just-activity-7317547275021344770-hiZI/">Nikki Anderson’s wonderful slide deck</a>, which has examples and prompts to use to turn findings into insights.</p>Stop Sharing Findings — Deliver Insights<p>When presenting the outcomes of your UX work, focus on <strong>actionable recommendations and business opportunities</strong> rather than patterns that emerged during testing.</p><p>To me, it’s all about telling a <strong>good damn story</strong>. 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.</p>How To Measure UX And Design Impact<p>Meet <a href="https://measure-ux.com/">Measure UX & Design Impact</a> (8h), a <strong>practical guide for designers and UX leads</strong> to shape, measure, and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 <strong><code>IMPACT</code></strong> to <strong>save 20% off</strong> today. <a href="https://measure-ux.com">Jump to the details</a>.</p> <a href="https://measure-ux.com/"> <img src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png" /> </a> <div><div><ul><li><a href="#">Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 799.00<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">Get Video + UX Training<div></div></a><p>25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br />100 days money-back-guarantee.</p></div><div><h3>Video only</h3><div>$ 250.00$ 395.00</div><a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630">Get the video course<div></div></a><p>25 video lessons (8h). Updated yearly.<br />Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p></div></div></div> <h3>Further Reading on Smashing Magazine</h3><ul><li>“<a href="https://www.smashingmagazine.com/2025/02/human-element-using-research-psychology-elevate-data-storytelling/">The Human Element: Using Research And Psychology To Elevate Data Storytelling</a>,” Victor Yocco & Angelica Lo Duca</li><li>“<a href="https://www.smashingmagazine.com/2025/02/integrations-from-simple-data-transfer-to-composable-architectures/">Integrations: From Simple Data Transfer To Modern Composable Architectures</a>,” Edoardo Dusi</li><li>“<a href="https://www.smashingmagazine.com/2024/06/scaling-success-key-insights-pratical-takeaways/">Scaling Success: Key Insights And Practical Takeaways</a>,” Addy Osmani</li><li>“<a href="https://www.smashingmagazine.com/2024/09/embracing-introversion-in-ux/">Embracing Introversion In UX</a>,” Victor Yocco</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/data-vs-findings-vs-insights-ux/data-vs-findings-vs-insights-ux.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[What Zen And The Art Of Motorcycle Maintenance Can Teach Us About Web Design]]></title> <link>https://smashingmagazine.com/2025/05/what-zen-art-motorcycle-maintenance-teach-web-design/</link> <guid>https://smashingmagazine.com/2025/05/what-zen-art-motorcycle-maintenance-teach-web-design/</guid> <pubDate>Fri, 23 May 2025 11:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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 <a href="https://www.smashingmagazine.com/2020/06/vitruvius-web-design/">architecture</a>, <a href="https://www.smashingmagazine.com/2019/11/newspapers-teach-web-design/">newspapers</a>, and the occasional <a href="https://www.smashingmagazine.com/2023/03/leonardo-da-vinci-teach-web-design/">polymath</a>. Today, we stumble blindly into the world of <strong>philosophy</strong>. Bear with me. I think there’s something to it.</p><p>In 1974, the American philosopher Robert M. Pirsig published a book called <em>Zen and the Art of Motorcycle Maintenance</em>. A flowing blend of autobiography, road trip diary, and philosophical musings, the book’s <a href="https://en.wikipedia.org/wiki/Chautauqua">‘chautauqua’</a> is an <strong>interplay between art, science, and self</strong>. Its outlook on life has stuck with me since I read it. </p><p>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.</p><p>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.</p>Buddha In The Machine<p><em>Zen</em> 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.</p><p>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.</p><p>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.</p><p>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 <strong>deeply inhuman place</strong>. Something cold, calculating, and relentless, yet without a fire in its belly. Impersonal, mechanical, inhuman.</p><p>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 <em>“Flight from and hatred of technology is self-defeating.”</em> To throw our hands up and step away from tech is to concede to the power of its more sinister forces.</p><blockquote>“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.”<br /><br />— Robert M. Pirsig</blockquote> <p>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.</p><p><img src="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" /></p><p>Where design and development are concerned, that means <strong>residing in the technology without losing our sense of self</strong> — 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. </p><p>So, with the Godhead in mind, to business.</p>Classical And Romantic<p>A core concern of <em>Zen and the Art of Motorcycle Maintenance</em> 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.</p><blockquote>“A classical understanding sees the world primarily as the underlying form itself. A romantic understanding sees it primarily in terms of immediate appearance.”<br /><br />— Robert M. Pirsig</blockquote> <p>If we were to characterize the two as bickering siblings, familiar adjectives might start to appear:</p><table> <thead> <tr> <th>Classical</th> <th>Romantic</th> </tr> </thead> <tbody> <tr> <td>Dull</td> <td>Frivolous</td> </tr> <tr> <td>Awkward</td> <td>Irrational</td> </tr> <tr> <td>Ugly</td> <td>Erratic</td> </tr> <tr> <td>Mechanical</td> <td>Untrustworthy</td> </tr> <tr> <td>Cold</td> <td>Fleeting</td> </tr> </tbody></table> <p>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?</p><p>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 <strong>they are bound</strong>.</p><p>Steve Jobs was a famous advocate of this.</p><blockquote>“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.”<br /><br />— <a href="https://www.nexxworks.com/blog/why-liberal-arts-and-the-humanities-are-as-important-as-engineering-guest-blog#:~:text=Steve%20Jobs%20touted%20the%20importance,that%20more%20true%20than%20in">Steve Jobs</a></blockquote> <p>Whatever you may feel about Jobs himself, I think this sentiment is watertight. No one field holds all the keys. <a href="https://www.smashingmagazine.com/2023/03/leonardo-da-vinci-teach-web-design/">Leonardo da Vinci</a> 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. <strong>Excellence is a question of harmony.</strong></p><p>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. </p><p><img src="https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/4-motorcycle.png" /></p><p>Just by reframing the relationship in this way, the kinds of adjectives that come to mind naturally shift toward more harmonious territory.</p><table> <thead> <tr> <th>Classical</th> <th>Romantic</th> </tr> </thead> <tbody> <tr> <td>Organized</td> <td>Vibrant</td> </tr> <tr> <td>Scaleable</td> <td>Evocative</td> </tr> <tr> <td>Reliable</td> <td>Playful</td> </tr> <tr> <td>Efficient</td> <td>Fun</td> </tr> <tr> <td>Replicable</td> <td>Expressive</td> </tr> </tbody></table> <p>And, of course, when we try thinking this way, the distinction itself starts feeling fuzzier. There is so much that they share.</p><p>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 <strong>monism</strong>, not dualism, is the way. </p><p>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.</p><p><img src="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" /></p><p>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. </p><p>What is this place? Well, that brings us to a core concept of Pirsig’s book: <strong>Quality</strong>.</p>Quality<p>The central concern of <em>Zen and the Art of Motorcycle Maintenance</em> is the ‘Metaphysics of Quality’. Pirsig argues that ‘Quality’ is where subjective and objective experience meet. Quality is at the <strong>knife edge of experience</strong>.</p><blockquote>“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.”<br /><br />— Robert M. Pirsig</blockquote> <p>Pirsig's writings overlap a lot with Taoism and Eastern philosophy, to the extent that he likens Quality to the Tao. Quality is similarly <strong>undefinable</strong>, with Pirsig himself making a point of not defining it. Like the Tao, Plato’s Form of the Good, or the <a href="https://blog.gitbutler.com/why-github-actually-won/">‘good taste’</a> to which GitHub cofounder Scott Chacon recently attributed the platform’s success, it simply is.</p><p><img src="https://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/6-metaphysics-quality.png" /></p><p>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. </p><p>We are drawn to Quality, to the <strong>point at which subjective and objective, romantic and classical, meet</strong>. There is no map, there isn’t a bullet point list of instructions for finding it, but we know it when we’re there.</p>A Quality Web<p>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?</p><p>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.</p><p>Here are a few habits that I think work in the service of more Quality on the web.</p><h3>Seek To Understand How Things Work</h3><p>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 <em>Zen and the Art of Motorcycle Maintenance</em> 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 <em>understanding</em>.</p><p>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 <strong>perspective</strong> and <strong>clarity</strong>. 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.</p><p>“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. </p><p>So, in concrete terms:</p><ul><li><strong>Read the documentation</strong>, for the love of god.<br />Sometimes we don’t understand how things work because the manual’s bad; more often, it’s because we haven’t looked at it.</li><li><strong>Follow pipelines from their start to their finish.</strong><br />How does data get from point A to point Z? What functions does it pass through, and how do they work? </li><li><strong>Do health work</strong>.<br />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.</li><li><strong>Always be studying</strong>.<br />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. </li></ul><p>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.</p><h3>Reframe The Questions</h3><p>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.</p><p>The highest Quality solution isn’t always the same as the solution that performed best in A/B tests. <em>The Dark Side of the Moon</em> doesn’t exist because of focus groups. The <a href="https://www.latimes.com/entertainment-arts/movies/story/2024-04-18/david-fincher-seven-imax-tcm-classic-film-festival-interview">test screenings</a> for <em>Se7en</em> were dreadful. Reducing any given task to a single metric — or even a handful of metrics — hamstrings the entire process.</p><p>Rory Sutherland suggests much the same thing in <a href="https://behavioralscientist.org/are-we-too-impatient-to-be-intelligent/"><em>Are We Too Impatient to Be Intelligent?</em></a> when he talks about looking at <strong>things as open-ended questions</strong> 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?</p><p><strong>Challenge metrics.</strong> 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, <em>Does this improve the Quality of what I’m working on?</em> Not the bottom line. Not the conversion rate. Not egos. The Quality. Quality pulls us away from <a href="https://arstechnica.com/tech-policy/2024/09/sony-ubisoft-scandals-prompt-calif-ban-on-deceptive-sales-of-digital-goods/">dark patterns</a> and towards the delightful.</p><p>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.</p><h3>Seek To Wed Art With Science (And Whatever Else Fits The Bill)</h3><p>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 <em>Zen</em>.</p><p>In a lot of ways, the main underlying theme in my <em>What X Can Teach Us About Web Design</em> pieces over the years has been <strong>how connected seemingly disparate worlds are</strong>. 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.</p><p>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. </p><p>The best outcomes are harmonies of seemingly disparate worlds. Cling to nothing and throw nothing away.</p><h3>Make Time For Doing Nothing</h3><p>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.</p><p>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.</p><ul><li><strong>Get away from the screen.</strong><br />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!</li><li><strong>Work on side projects.</strong><br />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.</li></ul><p>As I go into more detail in “<a href="https://www.smashingmagazine.com/2025/01/ode-to-side-project-time/">An Ode to Side Project Time</a>,” 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.</p><p>From time to time, let go of your sense of urgency. </p>Spirit Of Play<p>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.</p><p><em>Zen and the Art of Motorcycle Maintenance</em> 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.</p><p>Be inspired. So much of the web is beautiful. The <a href="https://www.awwwards.com/winner-list/">highest-rated Awwwards profiles</a> 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.</p><p>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.</p><p>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.</p><h3>Other Resources</h3><ul><li><a href="https://en.wikipedia.org/wiki/Zen_and_the_Art_of_Motorcycle_Maintenance"><em>Zen and the Art of Motorcycle Maintenance</em></a> by Robert M. Pirsig</li><li><a href="https://www.amazon.co.uk/Beauty-Everyday-Things-Penguin-Classics/dp/0241366356"><em>The Beauty of Everyday Things</em></a> by Soetsu Yanagi</li><li><a href="https://terebess.hu/english/tao/mitchell.html">Tao Te Ching</a></li><li>“<a href="https://www.theguardian.com/books/2023/jan/10/the-creative-act-a-way-of-being-by-rick-rubin-review-thoughts-of-the-bearded-beat-master">The Creative Act</a>” by Rick Rubin</li><li>“<a href="https://philosophynow.org/issues/122/Robert_Pirsig_and_His_Metaphysics_of_Quality">Robert Pirsig & His Metaphysics of Quality</a>” by Anthony McWatt</li><li>“<a href="https://medium.com/design-bootcamp/dark-patterns-in-ux-how-to-identify-and-avoid-unethical-design-practices-4bfa6d5fcd3e">Dark Patterns in UX: How to Identify and Avoid Unethical Design Practices</a>” by Daria Zaytseva</li></ul><h3>Further Reading on Smashing Magazine</h3><ul><li>“<a href="https://www.smashingmagazine.com/2024/12/three-approaches-amplify-design-projects/">Three Approaches To Amplify Your Design Projects</a>,” Olivia De Alba</li><li>“<a href="https://www.smashingmagazine.com/2024/11/ai-transformative-impact-web-design-supercharging-productivity/">AI’s Transformative Impact On Web Design: Supercharging Productivity Across The Industry</a>,” Paul Boag</li><li>“<a href="https://www.smashingmagazine.com/2024/10/how-bottom-up-design-approach-enhances-site-accessibility/">How A Bottom-Up Design Approach Enhances Site Accessibility</a>,” Eleanor Hecks</li><li>“<a href="https://www.smashingmagazine.com/2024/02/accessibility-standards-empower-better-chart-visual-design/">How Accessibility Standards Can Empower Better Chart Visual Design</a>,” Kent Eisenhuth</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Frederick O’Brien)</author> <enclosure url="http://files.smashing.media/articles/zen-and-art-of-motorcycle-maintenance-teach-us-about-web-design/what-zen-art-motorcycle-maintenance-teach-web-design.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead]]></title> <link>https://smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/</link> <guid>https://smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/</guid> <pubDate>Wed, 21 May 2025 08:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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.</p><p>Now, you might’ve heard that <a href="https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features">SMIL is dead</a>. 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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/1-yogi-bear-show.png" /></p><p><strong>Tip</strong>: <em>There’s now a website where you can see all my <a href="https://stuffandnonsense.co.uk/toon-titles">Toon Titles</a>.</em></p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/2-mike-worth-website.png" /></p><p>Mike loves ’90s animation — especially <a href="https://en.wikipedia.org/wiki/DuckTales_(1987_TV_series">Disney’s</a>) <a href="https://en.wikipedia.org/wiki/DuckTales_(1987_TV_series"><em>Duck Tales</em></a>). Unsurprisingly, my taste in cartoons stretches back a little further to <a href="https://en.wikipedia.org/wiki/Hanna-Barbera">Hanna-Barbera</a> shows like Dastardly and Muttley in <em>Their Flying Machines</em>, <em>Scooby-Doo</em>, <em>The Perils of Penelope Pitstop</em>, <em>Wacky Races</em>, and, of course, <a href="https://en.wikipedia.org/wiki/Yogi_Bear"><em>The Yogi Bear Show</em></a>. 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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/3-yogi-bear-show.png" /></p><p>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. </p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/4-yogi-bear-title-card.png" /></p><p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/5-yogi-bear-title-card-design.png" /></p><p>Scaling makes an element grow, shrink, or stretch, which can add drama, create perspective, or simulate depth.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/6-yogi-bear-title-card.png" /></p><p>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.</p><p>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.</p><p>Animations can be embedded within any SVG element, including <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes">primitive shapes</a> like circles, ellipses, and rectangles. They can also be encapsulated into groups, paths, and polygons:</p><pre><code><circle ...> <animate>...</animate></circle></code></pre> <p>Animations can also be defined outside an element, elsewhere in an SVG, and connected to it using an <code>xlink</code> attribute:</p><pre><code><g id="yogi">...</g> ...<animate xlink:href="#yogi">…</animate></code></pre> Building An Animation<p><code><animate></code> is just one of several animation elements in SVG. Together with an <code>attributeName</code> value, it enables animations based on one or more of an element’s attributes.</p><p>Most animation explanations start by moving a primitive shape, like this exciting circle:</p><pre><code><circle r="50" cx="50" cy="50" fill="#062326" opacity="1"/></code></pre> <p>Using this <code>attributeName</code> property, I can define which of this circle’s attributes I want to animate, which, in this example, is its <code>cx</code> (x-axis center point) position:</p><pre><code><circle ... > <animate attributename="cx"></animate></circle></code></pre> <p>On its own, this does precisely nothing until I define three more values. The <code>from</code> keyword specifies the circle’s initial position, <code>to</code>, its final position, and the <code>dur</code>-ation between those two positions:</p><pre><code><circle ... > <animate attributename="cx" from="50" to="500" dur="1s"> </animate></circle></code></pre> <p>If I want more precise control, I can replace <code>from</code> and <code>to</code> with a set of <code>values</code> separated by semicolons:</p><pre><code><circle ... > <animate attributename="cx" values="50; 250; 500; 250;" dur="1s"> </animate></circle></code></pre> <p>Finally, I can define how many times the animation repeats (<code>repeatcount</code>) and even after what period that repeating should stop (<code>repeatdur</code>):</p><pre><code><circle ... > <animate attributename="cx" values="50; 250; 500; 250;" dur="1s" repeatcount="indefinite" repeatdur="180s"></circle></code></pre> <p>Most SVG elements have attributes that can be animated. This title card from 1959’s <a href="https://yogibear.fandom.com/wiki/Brainy_Bear">“Brainy Bear” episode</a> shows Yogi in a crazy scientist‘s brain experiment. Yogi’s head is under the dome, and energy radiates around him.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/7-yogi-bear-show.png" /></p><p>To create the buzz around Yogi, my SVG includes three <code>path</code> elements, each with <code>opacity</code>, <code>stroke</code>, and <code>stroke-width</code> attributes, which can all be animated:</p><pre><code><path opacity="1" stroke="#fff" stroke-width="5" ... /></code></pre> <p>I animated each path’s <code>opacity</code>, changing its value from <code>1</code> to <code>.5</code> and back again:</p><pre><code><path opacity="1" ... > <animate attributename="opacity" values="1; .25; 1;" dur="1s" repeatcount="indefinite"> </animate></path></code></pre> <p>Then, to radiate energy from Yogi, I specified when each animation should <code>begin</code>, using a different value for each <code>path</code>:</p><pre><code><path ... > <animate begin="0" … ></path> <path ... > <animate begin=".5s" … ></path> <path ... > <animate begin="1s" … ></path></code></pre> <p>I’ll explain more about the <code>begin</code> property and how to start animations after this short commercial break.</p><p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/8-yogi-bear-show.png" /></p><p>I needed two types of transform animations to generate the effect of Yogi drifting gently downwards: <code>translate</code>, and <code>rotate</code>. I first added an <code>animatetransform</code> element to the group, which contains Yogi and his chute. I defined his initial vertical position — <code>1200</code> off the top of the <code>viewBox</code> — then translated his descent to <code>1000</code> over a 15-second duration:</p><pre><code><g transform="translate(1200, -1200)"> ... <animateTransform attributeName="transform" type="translate" values="500,-1200; 500,1000" dur="15s" repeatCount="1" /></g></code></pre> <p>Yogi appears to fall from the sky, but the movement looks unrealistic. So, I added a second <code>animatetransform</code> element, this time with an indefinitely repeating +/- 5-degree rotation to swing Yogi from side to side during his descent:</p><pre><code><animateTransform attributeName="transform" type="rotate" values="-5; 5; -5" dur="14s" repeatCount="indefinite" additive="sum" /></code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/9-yogi-bear-show.png" /></p><p>By default, the arrow is set loose when the page loads. Blink, and you might miss it. To build some anticipation, I can <code>begin</code> the animation two seconds later:</p><pre><code><animatetransform attributename="transform" type="translate" from="0 0" to="750 0" dur=".25s" begin="2s" fill="freeze"/></code></pre> <p>Or, I can let the viewer take the shot when they click the arrow:</p><pre><code><animatetransform ... begin="click"/></code></pre> <p>And I can combine the click event and a delay, all with no JavaScript, just a smattering of SMIL:</p><pre><code><animatetransform ... begin="click + .5s"/></code></pre> <p>Try this yourself by clicking the arrow:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/10-yogi-bear-show.png" /></p><p>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 <code>viewBox</code>:</p><pre><code><g class="dog" transform="translate(-1000, 0)"> ...</g> <g class="yogi" transform="translate(-1000, 0)"> ...</g></code></pre> <p>Then, I applied an <code>animatetransform</code> element to both groups, which moves them back into view:</p><pre><code><!-- yogi --><animateTransform attributeName="transform" type="translate" from="-1000,0" to="0,0" dur="2s" fill="freeze"/> <!-- dog --><animateTransform attributeName="transform" type="translate" from="-1000,0" to="0,0" dur=".5s" fill="freeze"/></code></pre> <p>This sets up the action, but the effect feels flat, so I added another pair of animations that bounce both characters:</p><pre><code><!-- yogi --><animateTransform attributeName="transform" type="rotate" values="-1,0,450; 1,0,450; -1,0,450" dur=".25s" repeatCount="indefinite"/> <!-- dog --><animateTransform attributeName="transform" type="rotate" values="-1,0,450; 1,0,450; -1,0,450" dur="0.5s" repeatCount="indefinite"/></code></pre> <p>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.</p><p>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 <code>translate</code> animation:</p><pre><code><animateTransform id="yogi" type="translate" .../></code></pre> <blockquote><strong>Watch out</strong>: 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.</blockquote> <p>Then, I applied a <code>begin</code> to his <code>rotate</code> animation, which starts playing a half-second after the <code>#yogi</code> animation ends:</p><pre><code><animateTransform type="rotate" begin="yogi.end + .5s" .../></code></pre> <p>I can build sophisticated sets of synchronised animations using the <code>begin</code> property and whether a named animation begins or ends. The bulldog chasing Yogi enters the frame two seconds after Yogi begins his entrance:</p><pre><code><animateTransform id="dog" type="translate" begin="yogi.begin + 2s" fill="freeze" .../></code></pre> <p>One second after the dog has caught up with Yogi, a <code>rotate</code> transformation makes him bounce, too:</p><pre><code><animateTransform type="rotate" ... begin="dog.begin + 1s" repeatCount="indefinite" /></code></pre> <p>The background rectangles whizzing past are also synchronised, this time to one second before the bulldog ends his run:</p><pre><code><rect ...> <animateTransform begin="dog.end + -1s" /></rect></code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/11-yogi-bear-show.png" /></p><p>In <a href="https://yogibear.fandom.com/wiki/The_Runaway_Bear">“The Runaway Bear”</a> 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.</p><p>I first added a <code>path</code> property, using its coordinate data to give Yogi a route to follow, and specified a two-second duration for my animation:</p><pre><code><g> <animateMotion dur="2s" path="..." > </animateMotion></g></code></pre> <p>Alternatively, I could add a <code>path</code> element, leave it visible, or prevent it from being rendered by placing it inside a <code>defs</code> element:</p><pre><code><defs> <path id="yogi" d="..." /></defs></code></pre> <p>I can then reference that by using a <code>mpath</code> element inside my <code>animateMotion</code>:</p><pre><code><animateMotion ... <mpath href="#yogi" /></animateMotion></code></pre> <p>I experimented with several paths before settling on the one that delivered the movement shape I was looking for:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/12-yogi-bear-title-card-recreations.png" /></p><p>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.</p><p>The <code>keyPoints</code> 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 <code>0</code> and <code>1</code>:</p><pre><code><animateMotion ... keyPoints="0; .35; .5; .65; 1;"></animateMotion></code></pre> <p>Then I added the same number of <code>keyTimes</code> values, separated by semicolons, to control the pacing of this animation:</p><pre><code><animateMotion ... keyTimes="0; .1; .5; .95; 1;"></animateMotion></code></pre> <p>Now, Yogi rushes through the first three <code>keyPoints</code>, slows down as he passes the title text, then speeds up again as he exits the <code>viewBox</code>.</p><p>Try this yourself:</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/oggryox">Runaway Bear SVG animation [forked]</a> by <a href="https://codepen.io/malarkey">Andy Clarke</a>.</p>SMIL’s Not Dead, Baby. SMIL’s Not Dead<p>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.</p><p>SMIL includes the <code>begin</code> 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. </p><p>Don’t let the misconception that SMIL is “dead” stop you from using this fantastic tool.</p><p>Google reversed its decision to deprecate SMIL almost a decade ago, so it remains a terrific choice for designers and developers who want <strong>simple</strong>, <strong>semantic ways</strong> to add animations to their designs.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Andy Clarke)</author> <enclosure url="http://files.smashing.media/articles/smashing-animations-part-3-smil-not-dead/smashing-animations-part-3-smil-not-dead.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Design System In 90 Days]]></title> <link>https://smashingmagazine.com/2025/05/design-system-in-90-days/</link> <guid>https://smashingmagazine.com/2025/05/design-system-in-90-days/</guid> <pubDate>Mon, 19 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[Helpful PDF worksheets and tools to get the design system effort up and running — and adopted! Kindly powered by <a href="https://measure-ux.com">How To Measure UX and Design Impact</a>, a friendly course on how to show the impact of your incredible UX work on business.]]></description> <content:encoded><![CDATA[<p>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 <strong>critical conversations</strong> we need to have early to avoid problems down the line?</p><p>Fortunately, there are a few <strong>useful little helpers</strong> to get started — and they are the ones I tend to rely on quite a bit when initiating any design system projects.</p>Design System In 90 Days Canvas<p><a href="https://www.figma.com/community/file/1275210165201477676"><strong>Design System in 90 Days Canvas (FigJam template)</strong></a> is a handy set of <strong>useful questions</strong> 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.</p><p><img src="https://files.smashing.media/articles/mailing-91-design-system-90-days/1-mailing-91-design-system-90-days.jpg" /></p><p>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.</p>Practical Design System Tactics<p><a href="https://redesigningdesign.systems/tactics/all-tactics"><strong>Design System Tactics</strong></a> is a practical overview of tactics to help designers <strong>make progress with a design system at every stage</strong> — 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.</p><p><img src="https://files.smashing.media/articles/mailing-91-design-system-90-days/2-mailing-91-design-system-90-days.jpg" /></p>Design System Worksheet (PDF)<p><a href="https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742"><strong>Design System Checklist</strong></a> by Nathan Curtis (<a href="https://drive.google.com/file/d/1qXMUXKHaEXnLDOu99GCzTMY2XW6NnPe_/view">download the PDF</a>) is a <strong>practical 2-page worksheet</strong> for a 60-minute team activity, designed to choose the right parts, products, and people for your design system.</p><p><img src="https://files.smashing.media/articles/mailing-91-design-system-90-days/3-mailing-91-design-system-90-days.jpg" /></p><p>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 <strong>being useful enough</strong> to help designers produce quality work faster and being flexible enough to help designers make decisions rather than make decisions for them.</p>Useful Questions To Get Started With<p>The value of a design system lies in it <strong>being useful and applicable</strong> — for a large group of people in the organization. And <a href="https://www.linkedin.com/pulse/26-design-system-questions-answer-design-system-university/">according to Dan</a>, a good start is to identify where exactly that value would be most helpful to tackle the company’s <strong>critical challenges and goals</strong>:</p><ol><li>What is <strong>important to our organization</strong> at the highest level?</li><li>Who is important to our design system effort?</li><li>What unofficial systems already exist in design and code?</li><li>Which teams have <strong>upcoming needs</strong> that a system could solve?</li><li>Which teams have <strong>immediate needs</strong> that can grow our system?</li><li>Which teams should we and have we talked to?</li><li>Which <strong>stakeholders</strong> should we and have we talked to?</li><li>What <strong>needs, desires, and concerns</strong> do our stakeholders have?</li><li>What components do product or feature teams need now or soon?</li><li>What <strong>end-user problems/opportunities</strong> could a system address?</li><li>What did we learn about using other design systems?</li><li>What is our <strong>repeatable process</strong> for working on products?</li><li>What components will we start with?</li><li>What needs, desires, and concerns do our stakeholders share?</li><li>Where are <strong>our components</strong> currently being used or planned for?</li></ol>Useful Resources<p>Here are a few other useful little helpers that might help you in your design system efforts:</p><ul><li><a href="https://www.linkedin.com/pulse/26-design-system-questions-answer-design-system-university/">Design System Questions To Answer In First 90 Days</a>, by Dan Mall</li><li><a href="https://designsystemcanvas.com/">Design System Canvas (PDF / Figjam)</a>, by Paavan Buddhdev</li><li><a href="https://www.figma.com/community/file/1360306476090347707/leands-framework">LeanDS Framework (Figma)</a>, by Marianne Ashton-Booth</li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-figma-activity-7262738783358304257-uooc/">Useful UX Templates For Designers (Figma Kits)</a>, by yours truly, Vitaly Friedman</li><li><a href="https://thedesignsystem.guide/">Design System Guide</a>, by Romina Kavcic</li></ul>Wrapping Up<p>A canvas often acts as a <strong>great conversation starter</strong>. 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 <strong>moving in the right direction</strong> to turn a design system effort into a success.</p><p>Happy crossing off the right tick boxes!</p>How To Measure UX And Design Impact<p>Meet <a href="https://measure-ux.com/">Measure UX & Design Impact</a> (8h), a <strong>practical guide for designers and UX leads</strong> to shape, measure, and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 <strong><code>IMPACT</code></strong> to <strong>save 20% off</strong> today. <a href="https://measure-ux.com">Jump to the details</a>.</p> <a href="https://measure-ux.com/"> <img src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png" /> </a> <div><div><ul><li><a href="#">Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 799.00<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">Get Video + UX Training<div></div></a><p>25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br />100 days money-back-guarantee.</p></div><div><h3>Video only</h3><div>$ 250.00$ 395.00</div><a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630">Get the video course<div></div></a><p>25 video lessons (8h). Updated yearly.<br />Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p></div></div></div> <h3>Further Reading on Smashing Magazine</h3><ul><li>“<a href="https://www.smashingmagazine.com/2024/07/build-design-systems-penpot-components/">Build Design Systems With Penpot Components</a>,” Mikołaj Dobrucki</li><li>“<a href="https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/">How To Turn Your Figma Designs Into Live Apps With Anima Playground</a>,” Anima Team</li><li>“<a href="https://www.smashingmagazine.com/2025/04/ux-design-files-organization-template/">UX And Design Files Organization Template</a>,” Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2025/01/digital-playbook-crucial-counterpart-design-system/">The Digital Playbook: A Crucial Counterpart To Your Design System</a>,” Paul Boag</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/design-system-in-90-days/design-system-in-90-days.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Building A Practical UX Strategy Framework]]></title> <link>https://smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/</link> <guid>https://smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/</guid> <pubDate>Fri, 16 May 2025 11:00:00 GMT</pubDate> <description><![CDATA[Learn how to create and implement a UX strategy framework that shapes work and drives real business value.]]></description> <content:encoded><![CDATA[<p>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.</p><p>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 <strong>proactively identify opportunities</strong> that deliver genuine business value. <strong>A strategic approach</strong> also helps educate stakeholders about UX’s full potential while building credibility through measurable results.</p>Strategy And The Fat Smoker<p><a href="https://boagworld.com/ux-strategy/">When I guide teams on creating a UX strategy</a>, I like to keep things simple. I borrow an approach from the book <a href="https://davidmaister.com/books/strategyfatsmoker/"><em>Strategy and the Fat Smoker</em></a> and break strategy into three clear parts:</p><ol><li>First, we diagnose where we are today.</li><li>Then, we set guiding policies to steer us.</li><li>Finally, we outline actions to get us where we want to go.</li></ol><p>Let me walk you through each part so you can shape a UX strategy that feels both <strong>practical</strong> and <strong>powerful</strong>.</p>Diagnosis: Know Your Starting Point<p>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.</p><h3>Identify Status Quo Failures</h3><p>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.</p><p>Once you have a list of failures, ask yourself:</p><blockquote>What outcome does each failure hurt?</blockquote> <p>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.</p><h3>Map The Aspirational Experience</h3><p>Next, visualize <a href="https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/">what an improved journey would look like</a>. 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 <strong>discovery</strong>, <strong>sign‑up</strong>, <strong>onboarding</strong>, and <strong>support</strong>. Then ask:</p><blockquote>How will this new journey help meet our business goals?</blockquote> <p>Maybe faster onboarding can cut support costs. Or a streamlined checkout can boost average order value.</p><p>Let me share a real-world example. When working with <a href="https://www.samaritans.org/">the Samaritans</a>, 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.</p><p><img src="https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png" /></p><p>We then created an <strong>aspirational journey map</strong> 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.</p><p><img src="https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png" /></p><p>This vision gives everyone something to rally around. It also guides your later actions by showing the <strong>target state</strong>.</p><h3>Audit Resources And Influence</h3><p>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.</p><p>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.</p><h3>Spot Your Constraints</h3><p>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 <strong>boosts your credibility</strong>. It also <strong>forces creativity</strong>.</p><p>With the diagnosis complete, we know where we stand. Next, let’s look at how to steer our efforts.</p>Guiding Policies: Set the North Star<p>Guiding policies give you guardrails. They help you decide which opportunities to chase and which to skip. These policies reflect your <strong>priorities</strong> and the best path forward.</p><h3>Choose A Tactical Or Strategic Approach</h3><p>Early on, you must pick how your UX team will operate. You have two broad options:</p><ul><li><strong>Tactical</strong><br />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.</li><li><strong>Strategic</strong><br />You act as a <a href="https://en.wikipedia.org/wiki/Center_of_excellence">center of excellence</a>. You advise other teams. You build guidelines, run workshops, and offer tools. This needs fewer hands but a broader influence.</li></ul><p>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.</p><h3>Define A Prioritization Method</h3><p>You’ll face many requests for UX work. A clear way to sort them saves headaches. Over the years, I’ve used a simple <a href="https://boagworld.com/audio/introducing-digital-triage/">digital triage</a>. You score each request based on <strong>impact</strong>, <strong>effort</strong>, and <strong>risk</strong>. 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.</p><h3>Create A Playbook Of Principles</h3><p><a href="https://www.smashingmagazine.com/2025/01/digital-playbook-crucial-counterpart-design-system/">A playbook</a> holds your core design principles, standard operating procedures, and templates. It might include:</p><ul><li>A design system for UI patterns;</li><li>Standards around accessibility or user research;</li><li>Guides for key tasks such as writing for the web;</li><li>Templates for common activities like user interviews.</li></ul><p>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.</p><p><img src="https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png" /></p><h3>Plan Your Communication</h3><p>Strategy fails when people don’t know about it. You need a plan to engage stakeholders. I find it helpful to use a <a href="https://www.forbes.com/advisor/business/raci-chart/">RACI chart</a> — who is <strong>Responsible</strong>, <strong>Accountable</strong>, <strong>Consulted</strong>, and <strong>Informed</strong>. Then decide:</p><ul><li>How often will you send updates?</li><li>Which channels should you use (email, Slack, weekly demos)?</li><li>Who leads each conversation?</li></ul><p>Clear, regular communication keeps everyone looped in. It also surfaces concerns early so you can address them.</p><p>With guiding policies in place, you have a clear way to decide what to work on. Now, let’s turn to making things happen.</p>Action Plan: Bring Strategy To Life<p>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.</p><h3>Outline Key Projects And Services</h3><p>Start by listing the projects you’ll tackle. These might be:</p><ul><li>Running a discovery phase for a new product.</li><li>Building a design system for your marketing team.</li><li>Conducting user tests on your main flow.</li></ul><p>For each project, note <em>what</em> you will deliver and <em>when</em>. 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.</p><h3>Offer Training And Tools</h3><p>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: </p><ul><li>Prototyping apps,</li><li>Research platforms,</li><li>Analytics dashboards.</li></ul><p>Make these resources easy to find in your playbook.</p><h3>Assign Stakeholder Roles</h3><p>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.</p><h3>Manage Risks and Barriers</h3><p>No plan goes off without a hitch. List your biggest risks, such as:</p><ul><li>A hiring freeze delays tactical hires;</li><li>Key stakeholders lose interest;</li><li>Technical debt slows down new releases.</li></ul><p>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.</p><p>Before we wrap up, let’s talk about making strategy stick.</p>Embedding UX Into The Culture<p>A strategy shines only if you deeply embed it into your organization’s culture. Here’s how to make that happen:</p><ul><li><strong>Build awareness and enthusiasm</strong><ul><li>Run regular “lunch and learn” sessions to showcase UX wins.</li><li>Host an annual UX day or mini-conference to boost visibility.</li><li>Create a monthly UX salon where teams share challenges and victories.</li></ul></li><li><strong>Make UX visible and tangible</strong><ul><li>Display personas and journey maps in office spaces.</li><li>Add design principles to everyday items like mousepads and mugs.</li><li>Share success metrics and improvements in company communications.</li></ul></li><li><strong>Embed UX into processes</strong><ul><li>Establish clear UX policies and best practices.</li><li>Review and update procedures that might hinder a good user experience.</li><li>Create a healthy competition between teams through UX metrics.</li></ul></li></ul><p>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.</p>Implementing Your UX Strategy: From Plan To Practice<p>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.</p><p>However, creating a strategy is the easy part — implementing it is where the real challenge lies. This is precisely why the book <em>Strategy and the Fat Smoker</em> 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.</p><p>Success requires <strong>consistent engagement</strong> and <strong>persistence</strong> in the face of setbacks. As Winston Churchill wisely noted, </p><blockquote>“Success is going from failure to failure with no loss of enthusiasm.”</blockquote> <p>This perfectly captures the mindset needed to implement a successful UX strategy — staying committed to your vision even when faced with obstacles and setbacks.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Paul Boag)</author> <enclosure url="http://files.smashing.media/articles/building-practical-ux-strategy-framework/building-practical-ux-strategy-framework.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Fewer Ideas: An Unconventional Approach To Creativity]]></title> <link>https://smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/</link> <guid>https://smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/</guid> <pubDate>Thu, 15 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>What do the Suez Canal, the Roman Goddess Libertas, and ancient Egyptian sculptures have in common? The Statue of Liberty.</p><p>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 <em>Hidden Brain</em>.</p><p>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. </p><p>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. </p><p>Bartholdi’s unorthodox yet methodical approach yielded one of the most famous sculptures in the world. </p><p>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? </p>The Problem<p>“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 <em>“there are no bad ideas”</em> and <em>“more ideas are better.”</em> Practiced and repeated so often, this approach to creativity must work, right?</p><p>Wrong, says Iyengar. <strong>Too many ideas hinder creativity</strong> because the human brain can only manage a few ideas at once.</p><blockquote>“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.”<br /><br />— Hidden Brain, “<a href="https://hiddenbrain.org/podcast/how-to-be-more-creative/">How to be more creative</a>”</blockquote> <p>Evidence for this view includes <a href="https://journals.sagepub.com/doi/abs/10.1509/jmr.10.0407?journalCode=mrja">a study published by Anne-Laure Sellier of HEC Paris and Darren W. Dahl of British Columbia</a>. The authors compared knitting and crafting in two experimental studies. The results suggested that <strong>restricting the number of materials and other creative inputs enhanced the creativity</strong> of study participants. The reason was the participants’ ability to enjoy the creative process more, which enhanced their creative output.</p><p>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.</p><p><img src="https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png" /></p><p>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.</p>The Solution: Three Ways To Enhance Creativity<p>Just as Bartholdi approached his designs methodically, designers today can benefit from limits and structure. </p><p>In this article, I’ll shed light on three techniques that enhance creativity:</p><ul><li><a href="#tip-1-controlled-curiosity">Controlled curiosity</a></li><li><a href="#tip-2-imposing-constraints-and-making-a-plan">Imposing constraints and making a plan</a></li><li><a href="#tip-3-look-to-other-domains">Look to other domains</a></li></ul><h3>Tip 1: Controlled Curiosity</h3><p>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. </p><p>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. </p><blockquote>When you’re curious, you don’t just passively take in information; you actively seek it with a <strong>purpose</strong>.</blockquote> <p>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.</p><p>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?</p><p>Faced with a tight deadline and mounting stress, I paused to reassess. To avoid spiraling, I asked: <em>What are the core objectives of this research review?</em> I then defined three key goals:</p><ol><li>Extract three to five themes to present to several internal teams.</li><li>Craft a research plan pegged to these themes.</li><li>Leverage these themes to inform a series of screens that the design team would create to test with real users.</li></ol><p>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.</p><p>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. </p><p>The key lies in transforming curiosity into focused exploration. It’s less about the volume of information absorbed and more about the intent behind the inquiry, the depth of engagement, and the strategic application of acquired knowledge.</p><p>Purposeful curiosity is the difference between drowning in a sea of knowledge and navigating it with mastery.</p><h3>Tip 2: Imposing Constraints And Making A Plan</h3><p>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.</p><blockquote>“Some people think that having constraints means they can’t be creative. The research shows that people are more creative when there are constraints.”<br /><br />— Dr. Susan Weinschenk, “<a href="https://www.smashingmagazine.com/2018/12/role-of-creativity-ux-design/">The Role of Creativity in Design</a>”</blockquote> <p>The point is not to limit creativity and innovation but to <strong>nurture it with structure</strong>. Establishing constraints enhances creativity by focusing idea generation around a few key themes.</p><p>Here are two ways to focus on idea generation:</p><ol><li>During meetings and workshops, <strong>how might we (HMW) statements</strong> help concentrate discussion while still leaving room for a variety of ideas? For example, <em>“How might we condense this 15-step workflow without omitting essential information?”</em></li><li><strong>Identify the problem and conduct two exercises to test solutions.</strong> 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.<ul><li>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.</li><li>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.</li></ul></li></ol><p>“Constraint” can be negative, such as a restriction or limitation, but it can also refer to exhibiting control and restraint.</p><p>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. </p><p>By channeling this concentrated energy towards well-defined challenges, your team can then effectively pursue innovative solutions for two closely related issues.</p><h3>Tip 3: Look To Other Domains</h3><p>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. </p><p>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?</p><p><img src="https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png" /></p><p>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.</p><p>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.</p><p>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.</p><p>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.</p><p>On its face, seeking inspiration from other disciplines would seem to contradict <a href="#tip-2-imposing-constraints-and-making-a-plan">Tip 2 above</a> — impose constraints. Examined from another angle, however, <strong>imposing constraints and exploring domains are complementary techniques</strong>. </p><p>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. </p><p>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. </p><p>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 <strong>all of my source material,</strong> 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.</p><p>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. </p>Conclusion<p>Yet these moments alone are not enough. You must channel inspiration by applying <strong>practical techniques</strong> 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.</p><p>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.</p><p><strong>Controlled curiosity.</strong></p><p>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. </p><p>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.</p><p><strong>Imposing constraints.</strong></p><p>Brainstorming long lists of ideas might seem creative, but can actually prove more distracting than energizing.</p><p>The solution is to nurture creativity with structure by limiting the number of ideas under consideration. </p><p>This structure enhances creativity by focusing idea generation around a few key themes.</p><p><strong>Look beyond your immediate domain.</strong></p><p>Otto Lilienthal’s fatal glider crash shows what can happen when solutions are examined through the single lens of one subject area.</p><p>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.</p><h3>Resources</h3><ul><li><a href="https://hiddenbrain.org/podcast/how-to-be-more-creative/">How to be More Creative</a>, Hidden Brain Media</li><li>“<a href="https://journals.sagepub.com/doi/abs/10.1509/jmr.10.0407?journalCode=mrja">Focus Creative Success is Enjoyed through Restricted Choice</a>” by Annie Laure-Sellier and Darren W. Dahl</li></ul><h3>Further Reading on Smashing Magazine</h3><ul><li>“<a href="https://www.smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/">Boosting Up Your Creativity Without Endless Reference Scrolling</a>,” Marina Chernyshova</li><li>“<a href="https://www.smashingmagazine.com/2025/04/ux-design-files-organization-template/">UX And Design Files Organization Template</a>,” Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2024/06/scent-ux-unrealized-potential-olfactory-design/">The Scent Of UX: The Unrealized Potential Of Olfactory Design</a>,” Kristian Mikhel</li><li>“<a href="https://www.smashingmagazine.com/2025/04/fostering-accessibility-culture/">Fostering An Accessibility Culture</a>,” Daniel Devesa Derksen-Staats</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Eric Olive)</author> <enclosure url="http://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/fewer-ideas-unconventional-approach-creativity.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension]]></title> <link>https://smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/</link> <guid>https://smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/</guid> <pubDate>Wed, 14 May 2025 13:00:00 GMT</pubDate> <description>< will show you how masking can unlock new creative possibilities for CSS animations, making them feel more fluid, layered, and cinematic. ]]></description> <content:encoded><![CDATA[<p>Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in <a href="https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/">Part 1</a>, they remind me of the 1960s <a href="https://en.wikipedia.org/wiki/Hanna-Barbera">Hanna-Barbera</a> animated series I grew up watching on TV. Shows like Dastardly and Muttley in <em>Their Flying Machines</em>, <em>Scooby-Doo</em>, <em>The Perils of Penelope Pitstop</em>, <em>Wacky Races</em>, and, of course, <a href="https://en.wikipedia.org/wiki/Yogi_Bear">Yogi Bear</a>.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/1-yogi-bear-show.jpg" /></p><p>Mike loves ’90s animation — especially <a href="https://en.wikipedia.org/wiki/DuckTales_(1987_TV_series">Disney’s <em>Duck Tales</em></a>). So, that is the aesthetic applied throughout the design.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/2-yogi-bear-design-andy-clarke.png" /></p><p>I used animations throughout and have recently added an extra dimension to them using <strong>masking</strong>. So, to explain how this era of animation relates to masking in CSS, I’ve chosen an episode of <em>The Yogi Bear Show</em>, “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! </p><p>What could <em>possibly</em> go wrong?</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/3-yogi-bear-disguise-gals.jpg" /></p>What’s A Mask?<p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/4-yogi-bear-masking-example.jpg" /></p><p>In CSS, <strong>masking controls visibility using a bitmap, vector, or gradient mask image</strong>. 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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/5-yogi-bear-andy-clarke-recreation.jpg" /></p><p>A <code>clip-path</code> functions similarly to a <code>mask</code> 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.”</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/6-yogi-bear-show.png" /></p><p>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. </p><blockquote>How do I choose when to use <code>clip path</code> and when to choose <code>mask</code>?</blockquote> <p>I’ll explain my reasons in each example.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/7-yogi-bear-show.png" /></p><p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/8-mike-worth-website.png" /></p>Masking Using A Clipping Path<p>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:</p><pre><code><figure> <svg viewBox="0 0 1400 960" id="cave"> <g class="background">…</g> <g class="foreground">…</g> </svg></figure></code></pre> <p>I defined a keyframe animation that moves the character from <code>2000px</code> on the right to its natural position in the center of the frame by altering its <code>translate</code> value:</p><pre><code>@keyframes foreground { 0% { opacity: .75; translate: 2000px 0; } 60% { opacity: 1; translate: 0 0; } 80% { opacity: 1; translate: 50px 0; } 100% { opacity: 1; translate: 0 0; }}</code></pre> <p>Then, I applied that animation to the foreground group:</p><pre><code>.foreground { opacity: 0; animation: foreground 5s 2s ease-in-out infinite;}</code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/9-masking-using-clipping-path.png" /></p><p>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 <code>clip-path</code>.</p><p>There are several ways to define a <code>clip-path</code> in CSS. I could use a primitive shape like a rectangle, where each of the first four values specifies its corner positions. The <code>round</code> keyword and the value that follows define any rounded corners:</p><pre><code>clip-path: rect(0px 150px 150px 0px round 5px);</code></pre> <p>Or <code>xywh</code> (x, y, width, height) values, which I find easier to read:</p><pre><code>clip-path: xywh(0 0 150px 150px round 5px);</code></pre> <p>I could use a <code>circle</code>:</p><pre><code>clip-path: circle(60px at center);</code></pre> <p>Or an <code>ellipse</code>:</p><pre><code>clip-path: ellipse(50% 40% at 50% 50%);</code></pre> <p>I could use a <code>polygon</code> shape:</p><pre><code>clip-path: polygon(...);</code></pre> <p>Or even the points from a path I created in a graphics app like Sketch:</p><pre><code>clip-path: path("M ...");</code></pre> <p>Finally — and my choice for this example — I might use a mask that I defined using paths from an SVG file:</p><pre><code>clip-path: url(#mask-cave);</code></pre> <p>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:</p><pre><code><figure> <svg viewBox="0 0 1400 960" id="cave">...</svg> <svg height="0" width="0" id="mask">...</svg></figure></code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/10-svg-clippath.png" /></p><p>This contains a single SVG <code>clipPath</code>. By placing this inside the <code>defs</code> element, this path isn’t rendered, but it will be available to create my CSS <code>clip-path</code>:</p><pre><code><svg height="0" width="0" id="mask"> <defs> <clipPath id="mask-cave">...</clipPath> </defs></svg></code></pre> <p>I applied the <code>clipPath</code> URL to my illustration, and now Mike’s mascot only becomes visible when he enters the cave:</p><pre><code>#cave { clip-path: url(#mask-cave);}</code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/11-altered-illustrations.png" /></p><p>While a <code>clipPath</code> 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 <code>mask</code> as its properties have been baseline and highly usable since 2023.</p><p>The <code>mask</code> property is a shorthand and can include values for <code>mask-clip</code>, <code>mask-mode</code>, <code>mask-origin</code>, <code>mask-position</code>, <code>mask-repeat</code>, <code>mask-size</code>, and <code>mask-type</code>. I find it’s best to learn these properties individually to grasp the concept of masks more easily.</p><p>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:</p><pre><code>mask-image: url(mask.webp);</code></pre> <p>I could apply a mask using a vector graphic:</p><pre><code>mask-image: url(mask.svg);</code></pre> <p>Or generate an image using a conical, linear, or radial gradient:</p><pre><code>mask-image: linear-gradient(#000, transparent); </code></pre> <p>…or:</p><div><pre><code>mask-image: radial-gradient(circle, #ff104c 0%, transparent 100%);</code></pre></div> <p>I might apply more than one mask to an element and mix several image types using what should be a familiar syntax:</p><pre><code>mask-image: image(url(mask.webp)), linear-gradient(#000, transparent);</code></pre> <p><code>mask</code> shares the same syntax as CSS backgrounds, which makes remembering its properties much easier. To apply a <code>background-image</code>, add its URL value:</p><pre><code>background-image: url("background.webp");</code></pre> <p>To apply a mask, swap the <code>background-image</code> property for <code>mask-image</code>:</p><pre><code>mask-image: url("mask.webp");</code></pre> <p>The <code>mask</code> property also shares the same browser styles as CSS backgrounds, so by default, a mask will repeat horizontally and vertically unless I specify otherwise:</p><div><pre><code>/* Options: repeat, repeat-x, repeat-y, round, space, no-repeat */mask-repeat: no-repeat;</code></pre></div> <p>It will be placed at the top-left corner unless I alter its position:</p><pre><code>/* Options: Keywords, units, percentages */mask-position: center;</code></pre> <p>Plus, I can specify <code>mask-size</code> in the same way as <code>background-size</code>:</p><div><pre><code>/* Options: Keywords (auto, contain, cover), units, percentages */mask-size: cover;</code></pre></div> <p>Finally, I can define where a mask starts:</p><pre><code>mask-origin: content-box;mask-origin: padding-box;mask-origin: border-box;</code></pre> Using A Mask Image<p>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 <code>mask-image</code> which defines the visible area and applied it to the figure element:</p><pre><code>figure { mask-image: url(mask.svg);}</code></pre> <p>To ensure the mask matched the illustration’s dimensions, I also set the <code>mask-size</code> to always <code>cover</code> its content:</p><pre><code>figure { mask-size: cover;}</code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/12-mask-image.png" /></p><p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/13-mike-worth-review-page-illustration.png" /></p><pre><code>figure { clip-path: ellipse(45% 35% at 50% 50%);}</code></pre> <p>However, the hard edges of a clip <code>clip-path</code> don’t create the effect I was aiming to achieve:</p><p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/14-layering-multiple-masks.png" /></p><p>Finally, to add an extra touch of realism, I added a keyframe animation — which changes the <code>mask-size</code> and creates the effect that the lamp light is flickering — and applied it to the figure:</p><pre><code>@keyframes lamp-flicker { 0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% { mask-size: 90%, auto; } 20%, 21.9%, 63%, 63.9%, 65%, 69.9% { mask-size: 90%, 0px; }} figure { animation: lamp-flicker 3s 3s linear infinite;}</code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/15-binocular-shaped-mask.png" /></p><p>I started by creating the binocular shape, complete with some viewfinder markers.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/16-binocular-shape.png" /></p><p>Then, I applied that image as a mask, setting its position, repeat, and size values to place it in the center of the figure element:</p><pre><code>figure { mask-image: url(mask.svg); mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: 85%;}</code></pre> <p>Try this yourself:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/17-masking-animation.png" /></p><p>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:</p><pre><code><figure> <svg>…</svg></figure></code></pre> <p>I created a circular <code>clip-path</code> and set its default size to <code>75%</code>. 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:</p><pre><code>@keyframes error { 0% { clip-path: circle(75%); } 100% { clip-path: circle(15%); }} figure { clip-path: circle(75%); animation: error 1s 3s ease-in forwards;}</code></pre> <p>The animation now focuses someone’s attention on the hapless hero, before he sinks lower and lower into the bubblingly hot lava.</p><p>Try this yourself:</p><p>See the Pen <a href="https://codepen.io/smashingmag/pen/qEEgdxy">Mike Worth’s error page [forked]</a> by <a href="https://codepen.io/malarkey">Andy Clarke</a>.</p>Bringing It All To Life<p>Masking adds an <strong>extra dimension to web animation</strong> 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.</p><p>The end. Or is it? …</p><p>Mike Worth’s website will launch in June 2025, but you can <a href="https://codepen.io/collection/YwMKPb">see examples from this article on CodePen</a> now.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Andy Clarke)</author> <enclosure url="http://files.smashing.media/articles/smashing-animations-part-2-css-masking-add-extra-dimension/smashing-animations-part-2-css-masking-add-extra-dimension.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Integrating Localization Into Design Systems]]></title> <link>https://smashingmagazine.com/2025/05/integrating-localization-into-design-systems/</link> <guid>https://smashingmagazine.com/2025/05/integrating-localization-into-design-systems/</guid> <pubDate>Mon, 12 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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.</p><p>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 <strong>usability issues</strong> for SAS customers. This highlights the need to prioritize <strong>localization</strong> from the start of the design process.</p><p>With the introduction of Figma Variables, alongside the advancements in design tokens, we saw an opportunity for designers. We imagined a system where a Figma design could dynamically switch between themes, densities, and even languages.</p><p>This would allow us to design and test multilingual capabilities more effectively, ensuring our design system was both <strong>flexible</strong> and <strong>adaptable</strong>.</p><p>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.</p><p>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.</p><p>But before we start, it’s essential to understand the distinction between Localization (L10n) and Internationalization (I18n).</p><p><strong>Localization (L10n)</strong> refers to the process of adapting designs for specific languages, regions, or cultures and involves the following:</p><ul><li>Translating text;</li><li>Adjusting layouts to accommodate language-specific requirements, such as longer or shorter text strings or right-to-left (RTL) text for languages like Arabic;</li><li>Ensuring visual elements are culturally appropriate and resonate with the target audience.</li></ul><p><strong>Internationalization (I18n)</strong> is the preparation phase, ensuring designs are flexible and adaptable to different languages and regions. Key considerations in Figma include:</p><ul><li>Using placeholder text to represent dynamic content;</li><li>Setting up constraints for dynamic resizing to handle text expansion or contraction;</li><li>Supporting bi-directional text for languages that require RTL layouts.</li></ul><p>These concepts are not only foundational to multilingual design but also integral to delivering inclusive and accessible experiences to global users.</p>Pre-Figma Setup: Building A Framework<h3>Understanding Our Design Token System</h3><p>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.</p><p>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.</p><p><strong>It’s important to note</strong> that our design token values are directly tied to CSS-based values.</p><h3>Initial Setup: Theme Switching And Localization</h3><p>In 2022, we took on the massive task of refactoring all our token names to be more <strong>semantic</strong>. At that time, we were only concerned with theme switching in our products.</p><p>Our tokens were re-categorized into the following groups:</p><ul><li>Color<ul><li>Brand colors (SAS brand colors)</li><li>Base colors (references to Brand colors)</li></ul></li><li>Typography (e.g., fonts, spacing, styles)</li><li>Space (e.g., padding, margins)</li><li>Size (e.g., icons, borders)</li><li>Style (e.g., focus styles)</li><li>Motion (e.g., animations)</li><li>Shadow.</li></ul><p><img src="https://files.smashing.media/articles/integrating-localization-into-design-systems/token-categories.png" /></p><p><strong>In our early setup:</strong></p><ul><li>A core folder contained JSON files for values unaffected by theme or brand.</li><li>Brand folders included three JSON files (one for each theme). These were considered “English” by default.</li><li>A separate languages folder contained overrides for other locales, stacked on top of brand files to replace specific token values.</li></ul><p>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.</p><p>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.</p><h3>Introducing Density Switching</h3><p>The introduction of <strong>density switching</strong> 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:</p><p><strong>Tokens Impact By Theme And Density</strong></p><p><strong><em>Unaffected by Theme or Density:</em></strong></p><ul><li>Color</li><li>Brand colors</li><li>Base colors</li><li>Motion</li><li>Shadow</li><li>Size</li><li>Border size</li><li>Outline size</li><li>Typography</li><li>Base font size</li><li>Letter spacing and word spacing</li><li>Overflow, text, and word style tokens.</li></ul><p><strong><em>Tokens Impacted by Density:</em></strong></p><ul><li>Typography</li><li>Font sizes</li><li>Line Height</li><li>Font spacing</li><li>Size</li><li>Border radius</li><li>Icon sizes</li><li>Space</li><li>Base spacing.</li></ul><p><strong><em>Tokens Impacted by Theme:</em></strong></p><ul><li>Colors</li><li>Action, body, container, dataviz, display, heading, highlight, icon, label, status, syntax, tag, text, thumbnail, and zero-stat</li><li>Size</li><li>Border size</li><li>Typography</li><li>Font-family</li><li>Style</li><li>Action (focus styles).</li></ul><p>With density, we expanded locale-specific value changes beyond font-family, letter spacing, font-style, and font-variant tokens to additionally include:</p><ul><li>Font sizes</li><li>Icon sizes</li><li>Line height</li><li>Spacing</li><li>Border radius.</li></ul><p>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 <strong>restructuring of our JSON files</strong> effectively.</p><p><img src="https://files.smashing.media/articles/integrating-localization-into-design-systems/tokens-impacted.png" /></p><h3>JSON File Restructuring</h3><p>In our token repository, we:</p><ol><li>Updated the tokens in the core folder.</li><li>Added a density folder and a language folder in each brand.</li></ol><p>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:</p><p><strong>Language Categories</strong></p><ul><li>Western European and Slavic Languages<ul><li>Polish, English, French, German, and Spanish</li></ul></li><li>Chinese Languages<ul><li>Simplified and traditional scripts</li></ul></li><li>Middle Eastern and East Asian Languages<ul><li>Arabic, Hebrew, Japanese, Korean, Thai, and Vietnamese</li></ul></li><li>Global Diverse<ul><li>Africa, South Asia, Pacific, and Indigenous languages, Uralic, and Turkic groups.</li></ul></li></ul><p>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.</p><p><img src="https://files.smashing.media/articles/integrating-localization-into-design-systems/language-groups.png" /></p><p>In addition, we added a folder containing JSON files per locale, overriding core values and theme folders, such as font-family.</p>Figma Setup: Bridging Tokens And Design<h3>Token Studio Challenges</h3><p>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.</p><p>Our first challenge was navigating the <strong>complexity of the import process</strong>. The <code>$metadata.json</code> and <code>$themes.json</code> 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 <code>$metadata.json</code> and <code>$themes.json</code> 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.</p><p>Once we successfully migrated our tokens from JSON files into Figma using the Tokens Studio plugin, we encountered our next challenge.</p><p>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.</p><p><strong>Typography variables, though promising in concept, were underwhelming in practice.</strong> 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.</p><p>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.</p><p><strong>Examples:</strong></p><ul><li>For CJK locales, medium and low density use a base font size of 16px, while high density uses 18px.</li><li>Western European and Slavic languages use 14px for medium density, 16px for high, and 12px for low density.</li></ul><h3>Additional Challenges</h3><ul><li><strong>Figma vs. Web Rendering</strong><br />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 <code>leading-trim</code>.</li><li><strong>Letter-Spacing Issues</strong><br />While CSS defaults to “normal” for letter-spacing, Figma requires numeric values. Locale-specific resets to “normal” couldn’t utilize variables, complicating implementation.</li><li><strong>Font-Family Stacks</strong><ul><li>Example stack for Chinese:<br /><code>font-family-primary: 'AnovaUI'</code>, <code>'微软雅黑体'</code>, <code>'Microsoft YaHei New'</code>, <code>'微软雅黑'</code>, <code>'Microsoft Yahei'</code>, <code>'宋体'</code>, <code>'SimSun'</code>, <code>'Helvetica Neue'</code>, <code>'Helvetica'</code>, <code>'Arial'</code>, <code>sans-serif</code>.</li></ul></li></ul><p>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.</p><p>Finally, as we prepared to publish our new library, we encountered yet another challenge: Figma Ghosts.</p><h3>What Are Figma Ghost Variables?</h3><blockquote>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.</blockquote> <p>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.</p><p><img src="https://files.smashing.media/articles/integrating-localization-into-design-systems/ghost-variables.png" /></p><p>Why They Cause Issues for Designers:</p><ul><li><strong>Clutter and Confusion</strong><br />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.</li><li><strong>Redundant Work</strong><br />Designers might accidentally try to use these variables, leading to inefficiencies or design inconsistencies when the ghost variables don’t function as expected.</li><li><strong>Export and Sync Problems</strong><br />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.</li><li><strong>Increased Maintenance Overhead</strong><br />Detecting and manually deleting ghost variables can be time-consuming, particularly in large-scale projects with extensive variable sets.</li><li><strong>Thematic Inconsistencies</strong><br />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.</li></ul><p>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.</p><h3>Cleaning Up Ghost Variables</h3><p>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.</p><p>If we had not completed the clean-up step, designers would not be able to access the overrides for theme, density, and locale.</p><h3>Designing Symbols For Localization</h3><p>To ensure Figma symbols support language swapping, we linked all text layers to our new variables, including font-family, font-size, and line height.</p><p>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.</p><p>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 <strong>testing</strong> our symbols for unforeseen layout issues.</p><p><img src="https://files.smashing.media/articles/integrating-localization-into-design-systems/translator-plugin.png" /></p><p>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.</p><h3>Delivering The System</h3><p>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.</p><p><strong>Multilingual Design Cheat Sheet:</strong></p><ol><li><strong>General Principles</strong><ul><li>Design flexible layouts that can handle text wrapping and language-specific requirements such as right-to-left orientations.</li><li>Use real content during design and development to identify localization issues such as spacing and wrapping.</li><li>Research the cultural expectations of your target audience to avoid faux pas.</li></ul></li><li><strong>Text & Typography</strong><ul><li>Use Filament Design Systems fonts to ensure support of all languages.</li><li>Avoid custom fonts that lack bold or italic styles for non-Latin scripts like CJK languages.</li><li>Reserve additional space for languages like German or Finnish.</li><li>Avoid hardcoded widths for text containers and use auto-layout to ensure long text strings are readable.</li><li>The Filament Design System tokens adjust line height per language; make sure you are using variables for line-height.</li><li>Use bold sparingly, as Filament tokens override bold styling in some languages. Instead, opt for alternative emphasis methods (e.g., color or size).</li></ul></li><li><strong>Layout & Design</strong><ul><li>Mirror layouts for RTL languages (e.g., Arabic, Hebrew). Align text, icons, and navigation appropriately for the flow of the language.</li><li>Use auto-layout to accommodate varying text lengths.</li><li>Avoid embedding text in images to simplify localization.</li><li>Allow ample spacing around text elements to prevent crowding.</li></ul></li><li><strong>Language-Specific Adjustments</strong> <ul><li>Adapt formats based on locale (e.g., YYYY/MM/DD vs. MM/DD/YYYY).</li><li>Use metric or imperial units based on the region.</li><li>Test alignments and flows for LTR and RTL languages.</li></ul></li><li><strong>Localization Readiness</strong> <ul><li>Avoid idioms, cultural references, or metaphors that may not translate well.</li><li>Provide space for localized images, if necessary.</li><li>Use Figma translation plug-ins to test designs for localization readiness and use real translations rather than Lorem Ipsum.</li><li>Test with native speakers for language-specific usability issues.</li><li>Check mirrored layouts and interactions for usability in RTL languages.</li></ul></li></ol>Lessons Learned And Future Directions<p><strong>Lessons Learned</strong></p><p>In summary, building a localization-ready design system was a complex yet rewarding process that taught Mark and me several critical lessons:</p><ul><li><strong>Localization and internationalization must be prioritized early.</strong><br />Ignoring multilingual principles in the early stages of design creates cascading issues that are costly to fix later.</li><li><strong>Semantic tokens are key.</strong><br />Refactoring our tokens to be more semantic streamlined the localization process, reducing complexity and improving maintainability.</li><li><strong>Figma variables are promising but limited.</strong><br />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.</li><li><strong>Automation is essential.</strong><br />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.</li><li><strong>Collaboration is crucial.</strong><br />Close coordination with front-end developers ensured that our JSON restructuring efforts aligned with performance and usability goals.</li><li><strong>Testing with real content is non-negotiable.</strong><br />Design issues like text wrapping, RTL mirroring, and font compatibility only became apparent when testing with real translations and flexible layouts.</li></ul><p><strong>Future Directions</strong></p><p>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:</p><ul><li><strong>Automatic mirrored layouts for RTL languages.</strong><br />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.</li><li><strong>Improved figma integration.</strong><br />Advocacy for Figma enhancements, such as percentage-based line-height support and better handling of variable imports, will remain a priority.</li><li><strong>Advanced automation tools.</strong><br />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.</li><li><strong>Scalable localization testing framework.</strong><br />Establishing a framework for native speaker testing and real-world content validation will help us identify localization issues earlier in the design process.</li><li><strong>Expanding the multilingual design cheat sheet.</strong><br />We will continue to refine and expand the cheat sheet, incorporating feedback from designers to ensure it remains a valuable resource.</li><li><strong>Community engagement.</strong><br />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.</li></ul><p>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.</p><h3>Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/">Internationalization And Localization For Static Sites</a>,” Sam Richard</li><li>“<a href="https://www.smashingmagazine.com/2014/06/css-driven-internationalization-in-javascript/">CSS-Driven Internationalization In JavaScript</a>,” Maksim Chemerisuk</li><li>“<a href="https://www.smashingmagazine.com/2014/12/how-to-conduct-website-localization/">How To Conduct Website Localization: Don’t Get Lost In Translation</a>,” Julia Rozwens</li><li>“<a href="https://www.smashingmagazine.com/2012/07/12-commandments-software-localization/">12 Commandments Of Software Localization</a>,” Zack Grossbart</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Rebecca Hemstad & Mark Malek)</author> <enclosure url="http://files.smashing.media/articles/integrating-localization-into-design-systems/integrating-localization-into-design-systems.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Integrating Design And Code With Native Design Tokens In Penpot]]></title> <link>https://smashingmagazine.com/2025/05/integrating-design-code-native-design-tokens-penpot/</link> <guid>https://smashingmagazine.com/2025/05/integrating-design-code-native-design-tokens-penpot/</guid> <pubDate>Thu, 08 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://penpot.app/penpot-2.0?utm_source=SmashingMag&utm_medium=Article&utm_id=Components">Penpot</a></p><p>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 <strong>open-source</strong> and developed in active dialogue with the community. Rather than relying on closed formats and gated solutions, Penpot embraces <strong>open web standards</strong> and commonly used technologies — ensuring it works seamlessly across platforms and integrates naturally with code.</p><p>Their latest release is another great example of that approach. It’s also one of the most impactful. Let me introduce you to <a href="https://www.google.com/url?q=https://penpot.app/collaboration/design-tokens?utm_source%3DSmashingMag%26utm_medium%3DArticle%26utm_campaign%3DDesignTokens&sa=D&source=docs&ust=1746545302545630&usg=AOvVaw3RHC5kveiwwmzlV6aYzNof">design tokens in Penpot</a>.</p><p>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.</p>About Design Tokens<p>Design tokens can be understood as a <strong>framework to document and organize your design decisions</strong>. 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.</p><p>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.</p><p>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.</p><p>Design tokens create a semantic layer between the values, the tools used to define them, and the software that implements them.</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/1-schema-design-system.png" /></p><p>On top of maintainability benefits, a common reason to use design tokens is <strong>theming</strong>. 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.</p>Implementation Challenges<p>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.</p><p>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 <strong>open standard for products and design tools to handle design tokens</strong>. 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.</p><p>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.</p>Design Tokens In Practice<p>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:</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/2-login-screen-acme.png" /></p><p>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. </p><p>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:</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/3-login-screen-design-grid.png" /></p><p>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. </p><p>This is where design tokens come to the rescue. They allow you to effectively <strong>maintain all the variants</strong> and <strong>test all the possible combinations</strong>, even hundreds of them, while still building a single design without repetitive work.</p><p>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.</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/4-layers-penpot.png" /></p><p>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:</p><ul><li><a href="https://www.smashingmagazine.com/2024/07/build-design-systems-penpot-components/">Build Design Systems With Penpot Components</a></li><li><a href="https://www.smashingmagazine.com/2024/04/penpot-css-grid-layout-designing-superpowers/">Penpot’s CSS Grid Layout: Designing With Superpowers</a></li><li><a href="https://www.smashingmagazine.com/2023/06/penpot-flex-layout-building-css-layouts-design-tool/">Penpot’s Flex Layout: Building CSS Layouts In A Design Tool</a></li></ul><p>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.</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/5-tokens-structure.png" /></p><p>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.</p><p><img src="https://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/6-tokens-structure.png" /></p><p>This allows us to switch between brands and modes and test all the possible combinations.</p>What’s Next?<p>I hope you enjoyed following this example. If you’d like to check out the file presented above before creating your own, you can <a href="https://github.com/mikolajdobrucki/penpot-files/raw/refs/heads/main/Design%20Tokens%20%E2%80%93%20Smashing%20Magazine%20Article.penpot">duplicate it here</a>. </p><p>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. </p><p>The benefits of the <strong>native approach to design tokens</strong> implemented by Penpot go beyond ease of use and standardization. It also <strong>makes the tokens more powerful</strong>. For example, they already support math operations using the <code>calc()</code> function you might recognize from CSS. It means you can use math to add, multiply, subtract, etc., token values.</p><p>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 <a href="https://www.linkedin.com/company/penpotdesign/posts/?feedView=all">LinkedIn</a>, <a href="https://bsky.app/profile/penpot.app">BlueSky</a>, and <a href="https://penpot.app/">other social media</a> 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 <strong>gradients</strong>, <strong>composite tokens</strong> (tokens that store multiple values), and more.</p><p>To learn more about design tokens and how to use them, check out the following links:</p><ul><li><a href="https://penpot.app/collaboration/design-tokens?utm_source=SmashingMag&utm_medium=Article&utm_campaign=DesignTokens">Design Token Overview</a>, Penpot website</li><li><a href="https://penpot.app/blog/what-are-design-tokens-a-complete-guide/">What are design tokens? A complete guide</a>, Penpot Blog</li><li><a href="https://help.penpot.app/user-guide/design-tokens/">Design Tokens</a>, Penpot Docs</li><li><a href="https://tr.designtokens.org/format/">Design tokens format module</a>, W3C Community Group Draft Report</li></ul>Conclusion<p>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.</p><p>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.</p><p><strong>Tried it already? Share your thoughts!</strong> The Penpot team is active on social media, or just share your feedback in the comments section below.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Mikołaj Dobrucki)</author> <enclosure url="http://files.smashing.media/articles/integrating-design-code-native-design-tokens-penpot/integrating-design-code-native-design-tokens-penpot.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS]]></title> <link>https://smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/</link> <guid>https://smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/</guid> <pubDate>Wed, 07 May 2025 08:00:00 GMT</pubDate> <description>< 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.]]></description> <content:encoded><![CDATA[<p>Browser makers didn’t take long to add the movement capabilities to CSS. The simple <code>:hover</code> pseudo-class came first, and a bit later, the <code>transition</code>s between two states. Then came the ability to change states across a set of <code>@keyframes</code> and, most recently, scroll-driven animations that link keyframes to the scroll position. </p><p>Even with these added capabilities, <strong>CSS animations have remained relatively rudimentary</strong>. They remind me of the <a href="https://en.wikipedia.org/wiki/Hanna-Barbera">Hanna-Barbera</a> animated series I grew up watching on TV.</p><p>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. </p><p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/3-yogi-bear-show.png" /></p><p>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 <code>opacity</code>, <code>position</code>, and <code>visibility</code>. But what are some reasons for doing this?</p><p>Animations bring static experiences to life. They can <strong>improve usability</strong> 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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/4-andy-clarke-design.png" /></p>Introducing Mike Worth<p>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.</p><p>Mike loves ’80s and ’90s animation — especially Disney’s <a href="https://en.wikipedia.org/wiki/DuckTales_(1987_TV_series"><em>Duck Tales</em></a>). Unsurprisingly, my taste in cartoons stretches back a little further to the 1960s <a href="https://en.wikipedia.org/wiki/Hanna-Barbera">Hanna-Barbera</a> shows like Dastardly and Muttley in <em>Their Flying Machines</em>, <em>Scooby-Doo</em>, <em>The Perils of Penelope Pitstop</em>, <em>Wacky Races</em>, and, of course, <a href="https://en.wikipedia.org/wiki/Yogi_Bear">Yogi Bear</a>. </p><p>So, to explain how this era of animation relates to CSS, I’ve chosen an episode of <em>The Yogi Bear Show</em>, “<a href="https://www.youtube.com/watch?v=CPnmzcmKgA0">Home Sweet Jellystone</a>,” first broadcast in 1961. In this story, Ranger Smith inherits a mansion and (spoiler alert) leaves Jellystone.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/5-yogi-bear-show-home-sweet-jellystone.png" /></p>Dissecting Movement<p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/6-yogi-bear-show-author-recreation.png" /></p><p>The background loops when a scene lasts longer than a single pan of Robert Gentle’s landscape painting, with bushes and trees appearing repeatedly.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/7-yogi-bear-dissecting-movement.png" /></p><p>This can be recreated using a single element and an animation that changes the position of its background image:</p><pre><code>@keyframes background-scroll { 0% { background-position: 2750px 0; } 100% { background-position: 0 0; }} div { overflow: hidden; width: 100vw; height: 540px; background-image: url("…"); background-size: 2750px 540px; background-repeat: repeat-x; animation: background-scroll 5s linear infinite;}</code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/8-robert-gentle-background-painting.png" /></p><p><strong>The economy of movement</strong> 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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/9-yogi-bear-sequence-shortened.png" /></p><p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/10-yogi-bear-sequence-shortened.png" /></p><p>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.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/11-mike-worth-website.png" /></p><p>I drew directly from <strong>Hanna-Barbera’s bouncing and scrolling technique</strong> for this scene by using two keyframe animations: <code>background-scroll</code> and <code>bumpy-ride</code>. The infinitely scrolling background works just like before:</p><pre><code>@keyframes background-scroll { 0% { background-position: 960px 0; } 100% { background-position: 0 0; }}</code></pre> <p>I created the appearance of his bumpy ride by animating changes to the keyframes’ <code>translate</code> values:</p><pre><code>@keyframes bumpy-ride { 0% { translate: 0 0; } 10% { translate: 0 -5px; } 20% { translate: 0 3px; } 30% { translate: 0 -3px; } 40% { translate: 0 5px; } 50% { translate: 0 -10px; } 60% { translate: 0 4px; } 70% { translate: 0 -2px; } 80% { translate: 0 7px; } 90% { translate: 0 -4px; } 100% { translate: 0 0; }} figure { /* ... */ animation: background-scroll 5s linear infinite;} img { /* ... */ animation: bumpy-ride 1.5s infinite ease-in-out;}</code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/12-yogi-bear-background-painting.png" /></p><p>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:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/1-yogi-bear-show-reusing-elements.png" /></p><p>The animators also frequently <strong>layered foreground elements onto these background paintings</strong> to create a variety of new scenes: </p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/2-layered-foreground-elements.png" /></p><p>In my deleted scene from Mike Worth’s website, I introduced these rocks into the foreground to add depth to the animation:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/13-layered-foreground-elements.png" /></p><p>If I were using bitmap images, this would require just one additional image:</p><pre><code><figure> <img id="bumpy-ride" src="..." alt="" /> <img id="apes-rock" src="..." alt="" /></figure></code></pre> <pre><code>figure { position: relative; #bumpy-ride { ... } #apes-rock { position: absolute; width: 960px; left: calc(50% - 480px); bottom: 0; }}</code></pre> <p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/14-looping-frames.png" /></p><p>Likewise, when the ranger reads his telegram, only his eyes and mouth move:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/15-looping-frames-movement.png" /></p><p>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:</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/16-yogi-bear.png" /></p><p>SVG delivers incredible performance and also offers fantastic flexibility when animating elements. The ability to embed one SVG inside another and to manipulate groups and other elements using CSS makes it ideal for animations.</p><p>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:</p><pre><code><svg> <!-- static elements --> <g>...</g> <!-- animation frames --> <g class="frame-1">...</g> <g class="frame-2">...</g> <g class="frame-3">...</g> <g class="frame-4">...</g> <g class="frame-5">...</g> <g class="frame-6">...</g></svg></code></pre> <p>I used CSS custom properties to define the speed at which characters’ mouths move and how many frames are in the animation:</p><pre><code>:root { --animation-duration: 1s; --frame-count: 6;}</code></pre> <p>Then, I applied a keyframe animation to show and hide each frame:</p><pre><code>@keyframes ranger-talking { 0% { visibility: visible; } 16.67% { visibility: hidden; } 100% { visibility: hidden; }} [class*="frame"] { visibility: hidden; animation: ranger-talking var(--animation-duration) infinite;}</code></pre> <p>Before finally setting a delay, which makes each frame visible at the correct time:</p><div><pre><code>.frame-1 { animation-delay: calc(var(--animation-duration) * 0 / var(--frame-count));} /* ... */ .frame-6 { animation-delay: calc(var(--animation-duration) * 5 / var(--frame-count));}</code></pre></div> <p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/17-yogi-bear.png" /></p><p>In my design for Mike Worth’s website, <strong>animation isn’t just for decoration; it tells a compelling story about him and his work</strong>. Every movement reflects his brand identity and makes his website an extension of his creative world.</p><p>Think beyond movement the next time you reach for a CSS animation. Consider emotions, identity, and mood, too. After all, a well-considered animation can do more than catch someone’s eye. It can capture their imagination.</p><p><img src="https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/18-the-end-painting.png" /></p><p>Mike Worth’s website will launch in June 2025, but you can <a href="https://codepen.io/collection/YwMKPb">see examples from this article on CodePen</a> now.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Andy Clarke)</author> <enclosure url="http://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/smashing-animations-part-1-classic-cartoons-inspire-css.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?]]></title> <link>https://smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/</link> <guid>https://smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/</guid> <pubDate>Tue, 06 May 2025 13:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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 <code>display: grid</code> 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?</p><p>Maybe there is. The CSS grid layout has an <strong>experimental masonry value</strong> for <code>grid-template-rows</code>. 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.</p><p>Maybe there isn’t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like <a href="https://masonry.desandro.com">Masonry.js</a>. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with <a href="https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/">Rachel</a> highlighting that <strong>masonry’s organic flow contrasts with Grid’s strict two-dimensional structure</strong>, potentially confusing developers expecting Grid-like behaviour or <a href="https://ishadeed.com/article/should-masonry-be-part-of-css-grid/">Ahmad Shadeed</a> 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. <a href="https://css-tricks.com/css-masonry-css-grid/">Geoff</a> also echoes Rachel Andrew’s concern that <em>“teaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,”</em> complicating education for designers and developers who rely on clear mental models.</p><p>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.</p><p>Given these complaints and criticisms — and a new guy in the game — the question is:</p><blockquote>Should CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should <code>item-flow</code> just take the reins?</blockquote> The State Of Masonry In CSS Today<p>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 <code>grid-auto-rows</code> trick paired with JavaScript to fake the flow. It works — sort of — but the cracks show fast. </p><p>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 <code>grid-row-end</code> dynamically, and use event listeners to adjust the layout upon page load and window resize.</p><div><pre><code>/* HTML */<div class="masonry-grid"> <div class="masonry-item"><img src="image1.jpg" alt="Image 1"></div> <div class="masonry-item"><p>Short text content here.</p></div> <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div> <div class="masonry-item"><p>Longer text content that spans multiple lines to show height variation.</p></div></div></code></pre></div> <div><pre><code>/* CSS */.masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */ grid-auto-rows: 10px; /* Small row height for precise spanning */ grid-auto-flow: column; /* Fills columns left-to-right */ gap: 10px; /* Spacing between items */} .masonry-item { /* Ensure content doesn’t overflow */ overflow: hidden;} .masonry-item img { width: 100%; height: auto; display: block;} .masonry-item p { margin: 0; padding: 10px;}</code></pre></div> <div><pre><code>// JavaScript function applyMasonry() { const grid = document.querySelector('.masonry-grid'); const items = grid.querySelectorAll('.masonry-item'); items.forEach(item => { // Reset any previous spans item.style.gridRowEnd = 'auto'; // Calculate the number of rows to span based on item height const rowHeight = 10; const gap = 10; const itemHeight = item.getBoundingClientRect().height; const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap)); // Apply the span item.style.gridRowEnd = <code>span ${rowSpan}</code>; });} // Run on load and resizewindow.addEventListener('load', applyMasonry);window.addEventListener('resize', applyMasonry);</code></pre></div> <p>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 <code>grid-template-rows: masonry</code> (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 <a href="https://css-tricks.com/native-css-masonry-layout-in-css-grid/">Chris Coyier</a> noted in his critique of similar hacks, this can lead to lag on complex pages.</p><p>Also, the logical DOM order might not match the visual flow, a concern <a href="https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/">Rachel Andrew</a> 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.</p><p>Developers need a smooth experience, and ergonomically speaking, hacking Grid with scripts is a mental juggling act. It forces you to switch between CSS and JavaScript to tweak a layout. A native solution, whether Grid-powered or a new module, has to nail effortless responsiveness, neat rendering, and a workflow that does not make you break your tools.</p><p>That’s why this debate matters — our daily grind demands it.</p>Option 1: Extending CSS Grid For Masonry<p>One way forward is to strengthen the CSS Grid with masonry powers. As of this writing, CSS grids have been extended to accommodate masonry. <code>grid-template-rows: masonry</code> 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.</p><p>This option leaves Grid as your go-to layout system but allows it to handle the flowing, gap-filling stacks we crave.</p><div><pre><code>.masonry-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: masonry;}</code></pre></div> <p>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 <code>grid-template-columns</code> or <code>grid-area</code>, 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.</p><p>Not so fast: there are limitations. Grid’s specifications already include properties like <code>align-content</code> and <code>grid-auto-flow</code>. Stacking masonry on the list risks turning it into a labyrinth.</p><p>Then there are <strong>the edge cases</strong>. 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. <strong>The browser compatibility issue</strong> 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? </p>Option 2: A Standalone Masonry Module<p>What if we had a <code>display: masonry</code> 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, <em>how</em> it might work, and <em>what</em> it gains or loses in the process.</p><p>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 <strong>prioritise fluidity over structure</strong>, giving designers a tool that feels as intuitive as the layouts they’re chasing. Think Pinterest but without JavaScript scaffolding.</p><p>Here’s the pitch: a <code>display</code> value named <code>masonry</code> 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:</p><pre><code>.masonry { display: masonry; masonry-direction: column; gap: 1rem;}</code></pre> <p>Want more control? Hypothetical extras like <code>masonry-columns: auto</code> could mimic Grid’s <code>repeat(auto-fill, minmax())</code>, while <code>masonry-align: balance</code> 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: <strong>Grid for order, Masonry for flow</strong>. No more wrestling with Grid properties that don’t quite fit; you get a system tailored to the job.</p><p>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 <strong>confusion of choice</strong>, with developers asking questions like: <em>“Do I use Grid or Masonry for this gallery?”</em> 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.</p>Item Flow: A Unified Layout Resolution<p>In March 2025, <a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/">Apple’s WebKit team proposed Item Flow</a>, 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 <code>flex-flow</code> and <code>grid-auto-flow</code> with a shorthand called <code>item-flow</code>. This system introduces four longhand properties:</p><ul><li><code>item-direction</code><br />Controls flow direction (e.g., <code>row</code>, <code>column</code>, <code>row-reverse</code>).</li><li><code>item-wrap</code><br />Manages wrapping behaviour (e.g., <code>wrap</code>, <code>nowrap</code>, <code>wrap-reverse</code>).</li><li><code>item-pack</code><br />Determines packing density (e.g., <code>sparse</code>, <code>dense</code>, <code>balance</code>).</li><li><code>item-slack</code><br />Adjusts tolerance for layout adjustments, allowing items to shrink or shift to fit.</li></ul><p>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:</p><pre><code>.container { display: grid; /* or flex */ item-flow: column wrap dense; /* long hand version */ item-direction: column; item-wrap: wrap; item-pack: dense; gap: 1rem;}</code></pre> <p>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 <code>auto-flow: dense</code>, reorders items to minimise gaps, while <code>item-slack</code> could fine-tune spacing for visual balance.</p><p>Item Flow’s promise lies in its <strong>wide use case</strong>. It enhances Grid and Flexbox with features like <code>nowrap</code> for Grid or <code>balance</code> packing for Flexbox, addressing long-standing developer wishlists. However, the proposal is still in discussion, and <a href="https://grok.com/chat/caeffa67-49d2-478e-834d-611d9a7bf204">properties like <code>item-slack</code> face naming debates due to clarity issues for non-native English speakers</a>.</p><p>The downside? Item Flow is a <strong>future-facing concept</strong>, 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.</p>What’s The Right Path?<p>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 <strong>overcomplicating</strong> an already robust system. A standalone <code>display: masonry</code> module offers clarity but <strong>adds to CSS’s learning curve.</strong> 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.</p><p>Each approach has trade-offs:</p><ul><li><strong>Grid with Masonry</strong>: Familiar but potentially clunky, with accessibility and spec concerns.</li><li><strong>New Module</strong>: Clean and purpose-built, but requires learning new syntax.</li><li><strong>Item Flow</strong>: Elegant and versatile but not yet available, with ongoing debates over naming and implementation.</li></ul><p>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.</p>Conclusion<p>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, <strong>will CSS finally free us from JavaScript for masonry</strong>, or are we still dreaming?</p><p>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.</p><h3>References</h3><ul><li>“<a href="https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/">Native CSS Masonry Layout in CSS Grid</a>” by Rachel Andrew</li><li>“<a href="https://ishadeed.com/article/css-grid-masonry/">Should Masonry be part of CSS Grid?</a>” by Ahmad Shadeed</li><li>“<a href="https://css-tricks.com/css-masonry-css-grid/">CSS Masonry & CSS Grid</a>” by Geoff Graham</li><li>“<a href="https://css-irl.info/masonry-in-css/">Masonry? In CSS?!</a>” by Michelle Barker</li><li>“<a href="https://css-tricks.com/native-css-masonry-layout-in-css-grid/">Native CSS Masonry Layout in CSS Grids</a>” by Chris Coyier</li><li>“<a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/">Item Flow Part 1: A Unified Concept for Layout</a>” by WebKit</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Gabriel Shoyombo)</author> <enclosure url="http://files.smashing.media/articles/masonry-css-should-grid-evolve-stand-aside-new-module/masonry-css-should-grid-evolve-stand-aside-new-module.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[How To Launch Big Complex Projects]]></title> <link>https://smashingmagazine.com/2025/05/how-launch-big-complex-projects/</link> <guid>https://smashingmagazine.com/2025/05/how-launch-big-complex-projects/</guid> <pubDate>Mon, 05 May 2025 10:00:00 GMT</pubDate> <description><![CDATA[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 <a href="https://measure-ux.com">How To Measure UX and Design Impact</a> by yours truly.]]></description> <content:encoded><![CDATA[<p>Think about your past projects. Did they finish <strong>on time and on budget</strong>? 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?</p><p>Chances are high that your recent project was <strong>over schedule and over budget</strong> — just like a vast majority of other complex UX projects. Especially if it entailed at least some sort of <strong>complexity</strong>, 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, <strong>shipping on time is an exception</strong> rather than the rule.</p><p>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.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png" /></p>99.5% Of Big Projects Overrun Budgets And Schedules<p>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.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png" /></p><p><a href="https://www.globalleadersinstitute.org/blog-post/hofstadters-law-as-a-strategic-tool-for-cultural-institutions/">Hofstadter’s Law</a> 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 <em>always</em> takes longer than you expect, however cautious you might be.</p><p>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”.</p><p>And there, overruns of 60–500% are typical and turn big projects into <strong>big disasters</strong>.</p>Reference-Class Forecasting (RCF)<p>We often assume that if we just thoroughly <strong>collect all the costs</strong> 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.</p><p>Complex projects have <strong>plenty of unknown unknowns</strong>. 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 <em>anchor</em> — for time, costs, and benefits — from similar projects done in the past.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png" /></p><p>Reference-class forecasting follows a <strong>very simple process</strong>:</p><ul><li>First, we find the reference projects that have the most similarities to our project.</li><li>If the distribution follows the Bell curve, use the mean value + <strong>10–15% contingency</strong>.</li><li>If the distribution is fat-tailed, invest in profound <strong>risk management</strong> to prevent big challenges down the line.</li><li>Tweak the mean value only if you have very good reasons to do so.</li><li><strong>Set up a database</strong> to track past projects in your company (for cost, time, benefits).</li></ul>Mapping Out Users’ Success Moments<p>Over the last few years, I’ve been using the technique called “Event Storming,” suggested by <a href="https://www.linkedin.com/in/matteo-cavucci/">Matteo Cavucci</a> many years back. The idea is to <strong>capture users’ experience moments through the lens of business needs</strong>. 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.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png" /></p><p>The image above shows the process in action — with <strong>different lanes representing different points of interest</strong>, 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.</p><p>Throughout that journey, we identify key milestones and break users’ events into two main buckets:</p><ol><li>User’s <strong>success moments</strong> (which we want to dial up ↑);</li><li>User’s <strong>pain points</strong> or <strong>frustrations</strong> (which we want to dial down ↓).</li></ol><p>We then break out into groups of 3–4 people to separately prioritize these events and estimate their impact and effort on <a href="https://cutlefish.substack.com/p/tbm-220-effort-vs-value-curves">Effort vs. Value curves</a> by <a href="https://www.linkedin.com/in/johnpcutler?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAABkgVcByXwZ4Zke2hKjaekv4qJxDWQeqsY&lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3BLaY9r%2FVvSwSjIb5%2B1j9PVw%3D%3D">John Cutler</a>.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png" /></p><p>The next step is <strong>identifying key stakeholders</strong> 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.</p><p>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.</p><p>When speaking to businesses, I usually speak about better <strong>discovery and scoping as the best way to mitigate risk</strong>. 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.</p>Black Swan Management<p>Every other project encounters what's called a <strong>Black Swan</strong> — 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.</p><p>Little problems have an incredible capacity to <strong>compound large, disastrous problems</strong> — 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.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png" /></p><p>So we make projects smaller and shorter. We mitigate risks by involving stakeholders early. We provide <strong>less surface</strong> for Black Swans to emerge. One good way to get there is to always start every project with a simple question: <em>“Why are we actually doing this project?”</em> The answers often reveal not just motivations and ambitions, but also the challenges and dependencies hidden between the lines of the brief.</p><p>And as we plan, we could follow a <strong>“right-to-left thinking”</strong>. 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.</p>Manage Deficit Of Experience<p>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 <strong>as repetitive as possible</strong> — with smaller “work modules” repeated by teams over and over again.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg" /></p><p>🚫 <strong>Beware of unchecked optimism</strong> → unrealistic forecasts.<br />🚫 <strong>Beware of “cutting-edge”</strong> → untested technology spirals risk.<br />🚫 <strong>Beware of “unique”</strong> → high chance of exploding costs.<br />🚫 <strong>Beware of “brand new”</strong> → rely on tested and reliable.<br />🚫 <strong>Beware of “the biggest”</strong> → build small things, then compose.</p><p>It also means relying on reliable: from well-tested tools to <strong>stable teams</strong> that have worked well together in the past. Complex projects <strong>aren’t a good place</strong> to innovate processes, mix-n-match teams, and try out more affordable vendors.</p><p>Typically, these are <strong>extreme costs in disguise</strong>, skyrocketing delivery delays, and unexpected expenses.</p>Think Slow, Act Fast<p>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 <strong>planning</strong> before designing a single pixel on the screen.</p><p>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 <strong>how we reduce risks</strong> and how we mitigate risks when something unexpected (but frequent in other similar projects) happens.</p><p><img src="https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png" /></p>Good Design Is Good Risk Management<p>When speaking about design and research to senior management, position it as a <strong>powerful risk management tool</strong>. Good design that involves concept testing, experimentation, user feedback, iterations, and refinement of the plan is cheap and safe.</p><p>Eventually it might need more time than expected, but it’s much — <em>MUCH!</em> — cheaper than delivery. Delivery is <strong>extremely cost-intensive</strong>, 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.</p>Wrapping Up<p>The insights above come from a wonderful book on <a href="https://sites.prh.com/how-big-things-get-done-book"><em>How Big Things Get Done</em></a> 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 <strong>plan and estimate better</strong>.</p><p>Not every team will work on a large, complex project, but sometimes these projects <strong>become inevitable</strong> — when dealing with legacy, projects with high visibility, layers of politics, or an entirely new domain where the company moves.</p><p>Good projects that succeed have one thing in common: they dedicate a majority of time to <strong>planning and managing risks</strong> and unknown unknowns. They avoid big-bang revelations, but instead test continuously and repeatedly. That’s your <strong>best chance to succeed</strong> — work around these unknowns, as you won’t be able to prevent them from emerging entirely anyway.</p>New: How To Measure UX And Design Impact <p>Meet <a href="https://measure-ux.com/">Measure UX & Design Impact</a> (8h), a <strong>practical guide for designers and UX leads</strong> to shape, measure and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 <strong><code>IMPACT</code></strong> to <strong>save 20% off</strong> today. <a href="https://measure-ux.com">Jump to the details</a>.</p> <a href="https://measure-ux.com/"> <img src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png" /> </a> <div><div><ul><li><a href="#">Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 799.00<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">Get Video + UX Training<div></div></a><p>25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br />100 days money-back-guarantee.</p></div><div><h3>Video only</h3><div>$ 250.00$ 395.00</div><a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630">Get the video course<div></div></a><p>25 video lessons (8h). Updated yearly.<br />Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p></div></div></div> ]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/how-launch-big-complex-projects/how-launch-big-complex-projects.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation]]></title> <link>https://smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/</link> <guid>https://smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/</guid> <pubDate>Fri, 02 May 2025 11:00:00 GMT</pubDate> <description><![CDATA[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?]]></description> <content:encoded><![CDATA[<p>Since their introduction in <a href="https://www.w3.org/TR/WAI-WEBCONTENT/">1999</a>, the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> (WCAG) have shaped how we design and develop inclusive digital products. The WCAG 2.x series, released in <a href="https://www.w3.org/TR/WCAG20/">2008</a>, 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 <strong>“all-or-nothing” nature</strong> often fails to reflect the nuance of actual user experience (UX).</p><p>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?</p><p><a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/">WCAG 3.0</a> is still in <a href="https://www.w3.org/TR/wcag-3.0/#sotd">draft</a>, but is evolving — and it represents a <a href="https://www.w3.org/TR/wcag-3.0/#about-wcag-3-0">fundamental rethinking</a> 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 <a href="https://www.w3.org/TR/wcag-3.0-explainer/#additional-concepts">flexible scoring system</a> that <strong>prioritizes usability over compliance</strong>, shifting focus toward the quality of access rather than the mere presence of features.</p>Draft Status: Ambitious, But Still Evolving<p>WCAG 3.0 was first introduced as a public working draft by the <a href="https://www.w3.org/">World Wide Web Consortium</a> (W3C) <a href="https://www.w3.org/WAI/about/groups/agwg/">Accessibility Guidelines Working Group</a> in early <a href="https://www.w3.org/TR/2021/WD-wcag-3.0-20210121/">2021</a>. The draft is still under active development and is not expected to reach <a href="https://www.w3.org/standards/about/#what-are-web-standards">W3C Recommendation status</a> for <a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/#timeline">several years, if not decades</a>, by some accounts. This extended timeline reflects both the complexity of the task and the ambition behind it:</p><blockquote>WCAG 3.0 isn’t just an update — it’s a paradigm shift.</blockquote> <p>Unlike WCAG 2.x, which focused primarily on web pages, WCAG 3.0 aims to cover a much <a href="https://www.w3.org/TR/wcag-3.0-requirements/#wcag-3-0-scope">broader ecosystem</a>, including applications, tools, connected devices, and emerging interfaces like voice interaction and extended reality. It also <a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/#wcag-3-name">rebrands itself</a> as the W3C Accessibility Guidelines (while the WCAG acronym remains the same), signaling that <strong>accessibility is no longer a niche concern</strong> — it’s a baseline expectation across the digital world.</p><p>Importantly, WCAG 3.0 <a href="https://www.w3.org/TR/wcag-3.0-explainer/#intro">will not immediately replace 2.x</a>. 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.</p><p>This expansion isn’t just technical.</p><p>WCAG 3.0 reflects a deeper philosophical shift: accessibility is moving from a model of compliance toward a model of effectiveness.</p><p>Rules alone can’t capture whether a system truly works for someone. That’s why WCAG 3.0 leans into <strong>flexibility</strong> and <strong>future-proofing</strong>, aiming to support evolving technologies and real-world use over time. It formalizes a principle long understood by practitioners:</p><blockquote>Inclusive design isn’t about passing a test; it’s about enabling people.</blockquote> A New Structure: From Success Criteria To Outcomes And Methods<p>WCAG 2.x is structured around <a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/">four foundational principles</a> — Perceivable, Operable, Understandable, and Robust (aka POUR) — and testable success criteria organized into <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance#levels">three conformance levels</a> (A, AA, AAA). While technically precise, these criteria often emphasize implementation over impact.</p><p>WCAG 3.0 <a href="https://www.w3.org/TR/wcag-3.0/#conformance-0">reorients this structure</a> toward user needs and real outcomes. Its hierarchy is built on:</p><ul><li><a href="https://www.w3.org/TR/wcag-3.0/#guidelines"><strong>Guidelines</strong></a>: High-level accessibility goals tied to specific user needs.</li><li><a href="https://www.w3.org/TR/wcag-3.0-explainer/#guidelines"><strong>Outcomes</strong></a>: Testable, user-centered statements (e.g., “Users have alternatives for time-based media”).</li><li><a href="https://www.w3.org/TR/wcag-3.0-explainer/#requirements-and-methods"><strong>Methods</strong></a>: Technology-specific or agnostic techniques that help achieve the outcomes, including code examples and test instructions.</li><li><a href="https://www.w3.org/TR/wcag-3.0-explainer/#structure"><strong>How-To Guides</strong></a>: Narrative documentation that provides practical advice, user context, and design considerations.</li></ul><p>This shift is more than organizational. It reflects a deeper commitment to aligning technical implementation with UX. Outcomes speak <a href="https://www.w3.org/TR/wcag-3.0-requirements/#readability">the language of capability</a>, which is about what users should be able to do (rather than just technical presence).</p><p>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, <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">the process may fail AA conformance entirely</a>. However, under WCAG 3.0, that same flow might be evaluated <a href="https://www.w3.org/TR/wcag-3.0-explainer/#conformance-models">across multiple outcomes</a> (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.</p>From Binary Checks To Graded Scores<p>Rather than relying on pass or fail outcomes, WCAG 3.0 <a href="https://www.w3.org/TR/wcag-3.0-explainer/#additional-concepts">introduces a scoring model</a> that reflects how well accessibility is supported. This shift allows teams to <strong>recognize partial successes</strong> and prioritize real improvements.</p><h3>How Scoring Works</h3><p>Each outcome in WCAG 3.0 is evaluated through <a href="https://www.w3.org/TR/wcag-3.0-explainer/#types-of-tests">one or more atomic tests</a>. These can include the following:</p><ul><li><strong>Binary tests</strong>: “Yes” and “no” outcomes (e.g., does every image have alternative text?)</li><li><strong>Percentage-based tests</strong>: Coverage-based scoring (e.g., what percentage of form fields have labels?)</li><li><strong>Qualitative tests</strong>: Rated judgments based on criteria (e.g., how descriptive is the alternative text?)</li></ul><p>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.</p><p>This allows teams to measure progress, not just compliance. A product that improves from “Fair” to “Good” over time shows real <strong>evolution</strong> — <a href="https://www.w3.org/TR/wcag-3.0-requirements/#broad-disability-support">a concept</a> that doesn’t exist in WCAG 2.x.</p><h3>Critical Errors: A Balancing Mechanism</h3><p>To ensure that severity still matters, WCAG 3.0 introduces <a href="https://www.w3.org/TR/wcag-3.0-explainer/#additional-concepts">critical errors</a>, which are high-impact accessibility failures that can override an otherwise positive score.</p><p>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.</p><p>But if a user cannot complete a core action, like submitting the form, making a purchase, or logging in, that constitutes a <strong>critical error</strong>. These failures directly block task completion and significantly reduce the overall score, regardless of how polished the rest of the experience is.</p><p>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.</p>Conformance Levels: Bronze, Silver, Gold<p>In place of categorizing conformance in tiers of Level A, Level AA, and Level AAA, WCAG 3.0 proposes <a href="https://www.w3.org/TR/wcag-3.0-explainer/#additional-concepts">three different conformance tiers</a>:</p><ul><li><strong>Bronze</strong>: The new minimum. It is <a href="https://www.w3.org/TR/wcag-3.0-explainer/#conformance-models">comparable to WCAG 2.2 Level AA</a>, but based on scoring and foundational outcomes. The requirements are considered achievable via automated and guided manual testing.</li><li><strong>Silver</strong>: This is a higher standard, requiring broader coverage, higher scores, and <a href="https://www.w3.org/TR/wcag-3.0-requirements/#design_principles">usability validation from people with disabilities</a>.</li><li><strong>Gold</strong>: The highest tier. Represents exemplary accessibility, likely requiring inclusive design processes, innovation, and extensive user involvement.</li></ul><p>Unlike in WCAG 2.2, where Level AAA is often seen as aspirational and inconsistent, these levels are intended to <strong>incentivize progression</strong>. They can also <a href="https://www.w3.org/TR/wcag-3.0/#defining-conformance-scope">be scoped</a> in the sense that teams can claim conformance for a checkout flow, mobile app, or specific feature, allowing iterative improvement.</p>What You Should Do Now<p>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:</p><ul><li><strong>Continue pursuing WCAG 2.2 Level AA.</strong> <a href="https://www.w3.org/TR/wcag-3.0/#about-wcag-3-0">It remains</a> the most robust, recognized standard.</li><li><a href="https://www.w3.org/TR/wcag-3.0-explainer/#abstract"><strong>Familiarize yourself</strong></a> <strong>with WCAG 3.0 drafts</strong>, especially the outcomes and scoring model.</li><li><a href="https://www.w3.org/TR/wcag-3.0-requirements/#oppotunities_usability"><strong>Start thinking in outcomes.</strong></a> Focus on what users need to accomplish, not just what features are present.</li><li><strong>Embed accessibility into workflows.</strong> Shift left. Don’t test at the end — design and build with access in mind.</li><li><a href="https://www.w3.org/TR/wcag-3.0-requirements/#design_principles"><strong>Involve</strong></a> <strong>users</strong> with disabilities early and regularly.</li></ul><p>These practices won’t just make your product more inclusive; they’ll position your team to excel under WCAG 3.0.</p>Potential Downsides<p>Even though WCAG 3.0 presents a bold step toward more <strong>holistic accessibility</strong>, 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.</p><h3>Subjective Scoring</h3><p>The move from binary pass or fail criteria to scored evaluations introduces room for <strong>subjective interpretation</strong>. 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.</p><h3>Reduced Compliance Clarity</h3><p>That same subjectivity leads to a second concern: <strong>the erosion of clear compliance thresholds</strong>. 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.</p><h3>Legal and Policy Misalignment</h3><p>As clarity around compliance blurs, so does alignment with existing legal frameworks. Many current laws explicitly reference WCAG 2.x and its A, AA, and AAA levels (e.g. <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508 of the Rehabilitation Act of 1973</a>, <a href="https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en">European Accessibility Act</a>, <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018</a>).</p><p>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.</p><h3>Risk Of Minimum Viable Accessibility</h3><p>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.</p><p>For example, a mobile app with strong keyboard support but missing audio transcripts could still achieve a passing tier, leaving some users excluded.</p>Conclusion<p>WCAG 3.0 marks a <strong>new era in accessibility</strong> — one that better reflects the diversity and complexity of real users. By shifting from checklists to scored evaluations and from rigid technical compliance to <a href="https://www.w3.org/TR/wcag-3.0-requirements/#broad-disability-support">practical usability</a>, it encourages teams to prioritize real-world impact over theoretical perfection.</p><p>As one might say, <em>“It’s not about the score. It’s about who can use the product.”</em> 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 <a href="https://www.w3.org/TR/wcag-3.0-explainer/#goals">functionality and inclusion</a>.</p><p>At the same time, WCAG 3.0’s proposed scoring models introduce new responsibilities. Without clear calibration, stronger enforcement patterns, and a cultural shift away from “good enough,” we risk losing the very clarity that made WCAG 2.x enforceable and actionable. The promise of flexibility only works if we use it to aim higher, not to settle earlier.</p><p>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.</p><p>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.</p><h3>Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2023/10/roundup-wcag-explainers/">A Roundup Of WCAG 2.2 Explainers</a>,” Geoff Graham</li><li>“<a href="https://www.smashingmagazine.com/2024/07/getting-bottom-minimum-wcag-conformant-interactive-element-size/">Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size</a>,” Eric Bailey</li><li>“<a href="https://www.smashingmagazine.com/2024/06/how-make-strong-case-accessibility/">How To Make A Strong Case For Accessibility</a>,” Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2024/02/web-designer-accessibility-advocacy-toolkit/">A Designer’s Accessibility Advocacy Toolkit</a>,” Yichan Wang</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Mikhail Prosmitskiy)</author> <enclosure url="http://files.smashing.media/articles/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/wcag-3-proposed-scoring-model-shift-accessibility-evaluation.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Make Every Day Count (May 2025 Wallpapers Edition)]]></title> <link>https://smashingmagazine.com/2025/04/desktop-wallpaper-calendars-may-2025/</link> <guid>https://smashingmagazine.com/2025/04/desktop-wallpaper-calendars-may-2025/</guid> <pubDate>Wed, 30 Apr 2025 10:00:00 GMT</pubDate> <description><![CDATA[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!]]></description> <content:encoded><![CDATA[<p>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 <strong>spark some fresh ideas on a busy day</strong>. And if that doesn’t do the trick, we have a little extra inspiration boost for you: desktop wallpapers!</p> <p>For this post, artists and designers from across the globe once again <strong>challenged their creative skills</strong> and designed desktop wallpapers to cater for some fresh inspiration this May — just like it has been a <a href="https://www.smashingmagazine.com/category/wallpapers">monthly tradition</a> 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!</p> <p>If <em>you</em> too would like to <strong>get featured</strong> in one of our upcoming wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We can’t wait to see what you’ll come up with! Happy May!</p> <ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> 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.</li></ul> <p></p>Squeeze The Day<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/may-25-squeeze-the-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-squeeze-the-day-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/may-25-squeeze-the-day-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/cal/may-25-squeeze-the-day-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/squeeze-the-day/nocal/may-25-squeeze-the-day-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>My Crazy Thoughts<p></p><p></p><p>“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.
We have forgotten how to simply be with ourselves, to connect with nature.” — Designed by <a href="https://www.designstudiouiux.com/">Design Studio</a> from India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/may-25-my-crazy-thoughts-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-my-crazy-thoughts-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/may-25-my-crazy-thoughts-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/cal/may-25-my-crazy-thoughts-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/my-crazy-thoughts/nocal/may-25-my-crazy-thoughts-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Lily Of The Valley<p></p><p></p><p>“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 <a href="https://gaae.design/">Caroline Boire</a> from France.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/may-25-lily-of-the-valley-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-lily-of-the-valley-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/may-25-lily-of-the-valley-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/cal/may-25-lily-of-the-valley-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/lily-of-the-valley/nocal/may-25-lily-of-the-valley-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>May The Fourth Be With You<p></p><p></p><p>“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 <a href="https://www.chloe-mills.com">Chloe Mills</a> from Texas, United States.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/may-25-may-the-fourth-be-with-you-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-may-the-fourth-be-with-you-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/may-25-may-the-fourth-be-with-you-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/cal/may-25-may-the-fourth-be-with-you-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/may-the-fourth-be-with-you/nocal/may-25-may-the-fourth-be-with-you-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Ladies And Gentlemen<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/may-25-ladies-and-gentlemen-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-ladies-and-gentlemen-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/may-25-ladies-and-gentlemen-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/cal/may-25-ladies-and-gentlemen-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/ladies-and-gentlemen/nocal/may-25-ladies-and-gentlemen-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Through The Castle’s Eye<p></p><p></p><p>“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 <a href="https://www.librafire.com/">LibraFire</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/may-25-through-the-castles-eye-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-through-the-castles-eye-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/may-25-through-the-castles-eye-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/cal/may-25-through-the-castles-eye-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/through-the-castles-eye/nocal/may-25-through-the-castles-eye-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Crayfish Party<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/may-25-crayfish-party-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-crayfish-party-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/may-25-crayfish-party-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/cal/may-25-crayfish-party-cal-3840x2160.png">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/crayfish-party/nocal/may-25-crayfish-party-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Under The Flower Moon<p></p><p></p><p>“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 <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/may-25-under-the-flower-moon-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-under-the-flower-moon-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/may-25-under-the-flower-moon-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/cal/may-25-under-the-flower-moon-cal-2560x1440.png">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/under-the-flower-moon/nocal/may-25-under-the-flower-moon-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>International Labour Day<p></p><p></p><p>“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 <a href="https://www.designstudiouiux.com/">Design Studio</a> from India.</p><p></p><p></p><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/may-25-international-labour-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-25-international-labour-day-preview-opt.png" /></a><p></p><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/may-25-international-labour-day-preview.png">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1400x900.jpg">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/cal/may-25-international-labour-day-cal-2560x1440.jpg">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1400x900.jpg">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-25/international-labour-day/nocal/may-25-international-labour-day-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Hello May<p></p><p></p><p>“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 <a href="https://www.popwebdesign.net/logo-design-novisad.html">PopArt Studio</a> from Serbia.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/hello-may/nocal/may-22-hello-may-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Navigating The Amazon<p></p><p></p><p>“We are in May, the spring month par excellence, and we celebrate it in the Amazon jungle.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela Jimenez</a> from Spain.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-navigating-the-amazon-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-navigating-the-amazon-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-navigating-the-amazon-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/navigating-the-amazon/nocal/may-24-navigating-the-amazon-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Bat Traffic<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-bat-traffic-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-bat-traffic-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-bat-traffic-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/bat-traffic/nocal/may-24-bat-traffic-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Understand Yourself<p></p><p></p><p>“Sunsets in May are the best way to understand who you are and where you are heading. Let’s think more!” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17fac211-eec5-4c00-975c-3f08f521948d/may-16-understand-yourself-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a44c529-60bb-4ad2-812d-fd3d7b6347a6/may-16-understand-yourself-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6a44c529-60bb-4ad2-812d-fd3d7b6347a6/may-16-understand-yourself-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/understand-yourself/nocal/may-16-understand-yourself-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Poppies Paradise<p></p><p></p><p>Designed by <a href="https://www.nathalieouederni.com">Nathalie Ouederni</a> from France.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a9c5cbab-479f-456f-acc7-bd58a731ff93/may-16-poppies-paradise-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf91eec5-9d10-4290-96ae-c4261ace5321/may-16-poppies-paradise-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf91eec5-9d10-4290-96ae-c4261ace5321/may-16-poppies-paradise-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/poppies-paradise/nocal/may-16-poppies-paradise-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>The Mushroom Band<p></p><p></p><p>“My daughter asked me to draw a band of mushrooms. Here it is!” — Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-the-mushroom-band-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1024x600.jpg">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1440x960.jpg">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1600x900.jpg">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-3072x1920.jpg">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-3840x2160.jpg">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/the-mushroom-band/nocal/may-23-the-mushroom-band-nocal-5120x2880.jpg">5120x2880</a></li></ul> <p></p>April Showers Bring Magnolia Flowers<p></p><p></p><p>“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 <a href="https://www.instagram.com/sarmas23/">Sarah Masucci</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee13fc1e-616a-4805-9d29-f9b8ed28ff1b/may-19-april-showers-bring-magnolia-flowers-full-opt.png"><img src="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" /></a><p></p><ul><li><a href="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">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-19/april-showers-bring-magnolia-flowers/nocal/may-19-april-showers-bring-magnolia-flowers-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>ARRR2-D2<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-arrr2-d2-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/arrr2-d2/nocal/may-23-arrr2-d2-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Add Color To Your Life!<p></p><p></p><p>“This month is dedicated to flowers, to join us and brighten our days giving a little more color to our daily life.” — Designed by <a href="https://www.silocreativo.com/en/">Verónica Valenzuela</a> from Spain.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4255684a-cead-4db8-90c5-e891a148a79f/may-16-add-color-to-your-life-full-opt.png"><img src="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" /></a><p></p><ul><li><a href="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">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/add-color-to-your-life/nocal/may-16-add-color-to-your-life-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Lake Deck<p></p><p></p><p>“I wanted to make a big painterly vista with some mountains and a deck and such.” — Designed by <a href="https://www.ultravulture.xyz">Mike Healy</a> from Australia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5a8bed12-4cbc-4b8c-bc6a-29f06546b065/may-18-lake-deck-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bf65a30-3cc8-4130-a166-9da219b32153/may-18-lake-deck-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bf65a30-3cc8-4130-a166-9da219b32153/may-18-lake-deck-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/lake-deck/nocal/may-18-lake-deck-nocal-2880x1800.jpg">2880x1800</a></li></ul> <p></p>Tentacles<p></p><p></p><p>Designed by <a href="https://www.datcha.ca/la_datcha/">Julie Lapointe</a> from Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/90635f36-74f1-40b0-9e50-89f58797b569/may-12-tentacles-36-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dd1179a-2295-4645-b45b-5d0c4dfa185a/may-12-tentacles-36-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dd1179a-2295-4645-b45b-5d0c4dfa185a/may-12-tentacles-36-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-12/may-12-tentacles__36-nocal-1920x1200.jpg">1920x1200</a></li></ul> <p></p>Today, Yesterday, Or Tomorrow<p></p><p></p><p>Designed by <a href="https://instagram.com/almahoffmann">Alma Hoffmann</a> from the United States.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-20-today-yesterday-or-tomorrow-nocal-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-20/today-yesterday-or-tomorrow/nocal/may-20-today-yesterday-or-tomorrow-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>The Monolith<p></p><p></p><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-the-monolith-nocal-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/the-monolith/nocal/may-22-the-monolith-nocal-3840x2160.png">3840x2160</a></li></ul> <p></p>Asparagus Say Hi!<p></p><p></p><p>“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 <a href="https://www.elainechen.com">Elaine Chen</a> from Toronto, Canada.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aabebe55-e761-464a-89cb-50e01f7d7e1a/may-16-asparagus-say-hi-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4645119c-bad7-4818-8942-d15ca3f9a1f8/may-16-asparagus-say-hi-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4645119c-bad7-4818-8942-d15ca3f9a1f8/may-16-asparagus-say-hi-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-16/asparagus-say-hi/nocal/may-16-asparagus-say-hi-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Spring Gracefulness<p></p><p></p><p>“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 <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f44085ec-427f-43b2-9e3d-f0073d21486e/may-17-spring-gracefulness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1feda6da-f329-496d-8aab-94d38cd68b90/may-17-spring-gracefulness-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1feda6da-f329-496d-8aab-94d38cd68b90/may-17-spring-gracefulness-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Blooming May<p></p><p></p><p>“In spring, especially in May, we all want bright colors and lightness, which was not there in winter.” — Designed by <a href="https://masterbundles.com/">MasterBundles</a> from Ukraine.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-blooming-may-nocal-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-22/blooming-may/nocal/may-22-blooming-may-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Enjoy May!<p></p><p></p><p>“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.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec15f840-7895-49f3-9792-ac409bb8119c/may-15-enjoy-may-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b2b9d54-a7e9-4848-ba1b-2e0bbea22e95/may-15-enjoy-may-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b2b9d54-a7e9-4848-ba1b-2e0bbea22e95/may-15-enjoy-may-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/enjoy-may/nocal/may-15-enjoy-may-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Geo<p></p><p></p><p>Designed by Amanda Focht from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e6aad900-2c45-4d09-8d8f-63d3a7e6c4d6/may-18-geo-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb0c1df9-2698-41a7-9234-8ce0a987121f/may-18-geo-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb0c1df9-2698-41a7-9234-8ce0a987121f/may-18-geo-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-18/geo/nocal/may-18-geo-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Be On Your Bike!<p></p><p></p><p>“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 <a href="https://www.codesign.cc/">Karen Frolo</a> from the United States.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/43e8ce22-bbe5-4111-bc9b-251371b5d371/may-17-be-on-your-bike-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e76c8b69-c631-447f-b8ae-d35ab9cf365e/may-17-be-on-your-bike-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e76c8b69-c631-447f-b8ae-d35ab9cf365e/may-17-be-on-your-bike-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Duck<p></p><p></p><p>Designed by <a href="https://www.instagram.com/scott.m1089?igsh=endod2drNGMzMW9m&utm_source=qr">Madeline Scott</a> from the United States.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-duck-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-duck-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-duck-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/duck/nocal/may-24-duck-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Flying In The Air<p></p><p></p><p>“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 <a href="https://www.monksoftware.it/">Monk Software</a> from Italy.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1050f50b-0064-4247-aa2a-f474b65eb191/may-14-monkgolfier-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b554f32a-777c-420b-9381-2a3ad1c8ca6d/may-14-monkgolfier-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b554f32a-777c-420b-9381-2a3ad1c8ca6d/may-14-monkgolfier-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-960x640.png">960x640</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/monkgolfier/nocal/may-14-monkgolfier-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>May Your May Be Magnificent<p></p><p></p><p>“May should be as bright and colorful as this calendar! That’s why our designers chose these juicy colors.” — Designed by <a href="https://masterbundles.com/">MasterBundles</a> from Ukraine.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2024/may-23-may-your-may-be-magnificent-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-23/may-your-may-be-magnificent/nocal/may-23-may-your-may-be-magnificent-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Popping Into Spring<p></p><p></p><p>“Spring has sprung, and what better metaphor than toast popping up and out of a fun-colored toaster!” — Designed by <a href="https://mu-art.org/stephanieklemick/">Stephanie Klemick</a> from Emmaus Pennsylvania, USA.</p><p></p><p></p><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-popping-into-spring-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-popping-into-spring-preview-opt.png" /></a><p></p><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-may-2025/may-24-popping-into-spring-preview-opt.png">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/may-24/popping-into-spring/nocal/may-24-popping-into-spring-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Make A Wish<p></p><p></p><p>Designed by <a href="https://www.behance.net/juliaversinina">Julia Versinina</a> from Chicago, USA.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77e2fb80-d494-4601-93a7-d109072e502a/may-15-make-a-wish-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c0be6e7-ec80-4da9-b230-fdf54d63a878/may-15-make-a-wish-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c0be6e7-ec80-4da9-b230-fdf54d63a878/may-15-make-a-wish-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-15/make-a-wish/nocal/may-15-make-a-wish-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>The Green Bear<p></p><p></p><p>Designed by Pedro Rolo from Portugal.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d792a713-a97f-419a-b0e6-0a1243710ce9/may-13-green-bear-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4fb947b-c824-4176-b4aa-e93416466ffa/may-13-green-bear-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d4fb947b-c824-4176-b4aa-e93416466ffa/may-13-green-bear-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-13/the-green-bear/may-13-Green Bear-nocal-2560x1440.jpg">2560x1440</a></li></ul> <p></p>Birds Of May<p></p><p></p><p>“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 <a href="https://www.iwantclarity.com">Clarity Creative Group</a> from Orlando, FL.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd072497-e15f-4edc-bd47-ea121d7b2a45/may-14-bird-day-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fe8b679-631f-4f87-916c-8858285564cb/may-14-bird-day-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2fe8b679-631f-4f87-916c-8858285564cb/may-14-bird-day-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x960.png">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-640x1136.png">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/bird-day/nocal/may-14-bird-day-nocal-2560x1440.png">2560x1440</a></li></ul> <p></p>Beautiful Things<p></p><p></p><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><p></p><p></p><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21469886-771c-4077-ba84-0df129aa7133/may-14-beautiful-things-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85846408-9120-44a1-b754-bc3c57b062e2/may-14-beautiful-things-preview-opt.png" /></a><p></p><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85846408-9120-44a1-b754-bc3c57b062e2/may-14-beautiful-things-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/may-14/beautiful-things/nocal/may-14-beautiful-things-nocal-2560x1440.jpg">2560x1440</a></li></ul> ]]></content:encoded> <author>hello@smashingmagazine.com (Cosima Mielke)</author> <enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-may-2023/may-22-hello-may-nocal-preview-opt.png" length="0" type="image/png"/> </item> <item> <title><![CDATA[How To Turn Your Figma Designs Into Live Apps With Anima Playground]]></title> <link>https://smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/</link> <guid>https://smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/</guid> <pubDate>Tue, 29 Apr 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>This article is a sponsored by <a href="https://www.animaapp.com/">Anima App</a></p><p>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.</p><p>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.</p><p>But what if you could just… skip the painful part? </p><p>That’s where <a href="https://dev.animaapp.com/">Anima Playground</a> 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.</p>What Is Anima Playground?<p>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.</p><p>In short: it's not just a handoff tool. It's where design becomes a working app.</p><p><strong>Here’s what you can do with Anima Playground:</strong></p><ul><li>Import Figma designs exactly as they were created — layouts, styles, responsiveness, and all.</li><li>Generate React components instantly, with support for libraries like MUI and shadcn/ui.</li><li>Use AI prompts to add logic — from button clicks to dynamic lists and form validation.</li><li>Customize everything, with full code access and live previews.</li></ul>How It Works<p>Easily sync your Figma designs with Anima Playground. All it takes is four quick steps.</p><h3>1. Import Your Figma Designs</h3><p>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.</p><p>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.”</p><h3>2. Convert Designs Into React Components</h3><p>Once imported, your Figma designs are instantly transformed into React components. This includes:</p><ul><li>Clean JSX structure</li><li>Tailwind, MUI, or shadcn/ui styling (you choose!)</li><li>Nested component trees</li><li>Auto-handling of responsive layouts</li></ul><p>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.</p><h3>3. Add Logic With AI-Powered Prompts</h3><p>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.</p><p>Just describe what you want using natural language — for example:</p><blockquote><p>“Make this button open a signup modal.”</p></blockquote> <p>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.</p><p>This turns design into functional UI with a level of speed that traditional front-end workflows just can’t match.</p><p><img src="https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png" /></p><h3>4. See Live Changes Instantly</h3><p>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.</p><p>This live feedback loop means less context-switching and faster iterations. Whether you’re testing animations, layout tweaks, or new features, you get to <em>see it</em> before you commit to anything.</p>More Than Just Design-to-Code<p>While many tools promise “Figma to code,” <strong>Anima Playground goes beyond static conversion</strong>. It’s a fully interactive environment where real apps are born — with logic, data, and interactivity.</p><p><strong>Some powerful features include:</strong></p><ul><li><strong>One-click AI suggestions</strong> to enhance your UI with logic.</li><li><strong>Custom component support</strong>, allowing teams to inject their own building blocks.</li><li><strong>Component reuse</strong>, letting you structure apps in a scalable way.</li><li><strong>Flexible framework support</strong>, starting with React and planning to support more in the future.</li></ul><p>It’s not just for prototyping — it’s for building.</p>Why It Matters<p>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:</p><ul><li>🚀 Speed<br />What used to take days now takes minutes. You skip the repetitive coding, layout guesswork, and context switching.</li><li>🎯 Accuracy<br />Your designs stay true to the original. No more pixel-matching or guessing which font size the designer used.</li><li>🧩 Flexibility<br />Developers get full access to the code. It's not a black box — it's fully transparent and editable.</li><li>🤝 Collaboration<br />Designers and developers finally share the same playground — literally. This tightens feedback loops and shortens build cycles.</li></ul><p>By making the workflow smarter, <strong>Anima Playground helps teams build better products, faster</strong>, and with fewer headaches.</p>Who Is It For?<p>Whether you’re a <strong>designer</strong>, <strong>developer</strong>, <strong>startup founder</strong>, or <strong>PM</strong>, Anima Playground removes the barriers between your ideas and real products.</p><ul><li><strong>Designers</strong> can see their visions come to life, exactly as imagined.</li><li><strong>Developers</strong> can skip the grunt work and focus on logic, architecture, and business needs.</li><li><strong>Teams</strong> can work together in a unified environment — no more waiting for the “handoff.”</li></ul><p>It’s perfect for building landing pages, dashboards, internal tools, MVPs, and more.</p><h3>Are You Ready To Try It?</h3><p>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.</p><p>If you’re tired of the endless design-to-development grind, <a href="https://projects.animaapp.com/signup">it’s time to give Anima Playground a spin</a>. 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.</p><p>Let your designs do more than look good — let them <em>work</em>!</p>]]></content:encoded> <author>hello@smashingmagazine.com (Anima Team)</author> <enclosure url="http://files.smashing.media/articles/anima-playground-figma-designs-live-apps/anima-playground-figma-designs-live-apps.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[UX And Design Files Organization Template]]></title> <link>https://smashingmagazine.com/2025/04/ux-design-files-organization-template/</link> <guid>https://smashingmagazine.com/2025/04/ux-design-files-organization-template/</guid> <pubDate>Mon, 28 Apr 2025 13:00:00 GMT</pubDate> <description><.]]></description> <content:encoded><![CDATA[<p>Are you also <strong>getting lost</strong> 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?</p><p>It’s too easy to lose important assets and too difficult to find them just when you need them. While we often speak about <a href="https://www.linkedin.com/posts/vitalyfriedman_design-figma-activity-7152988603072020480-uQrb/">how to neatly organize Figma files</a>, we rarely discuss a <strong>sensible folder structure</strong> for all our UX assets. Well, let’s change that.</p><p>(If you're looking for more insights into design patterns or measuring UX, take a look at <a href="https://smart-interface-design-patterns.com">Smart Interface Design Patterns</a> and <a href="https://measure-ux.com">How To Measure UX</a>, <strong>friendly video courses on design patterns and UX</strong>, with a <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">live UX training</a> coming up in a few weeks.)</p><p><img src="https://files.smashing.media/articles/ux-design-files-organization-template/1-ux-design-files-orginization-template.jpg" /></p>Organization Starter Kit (Free Template)<p>A while back, I stumbled upon a neat <a href="https://medium.com/design-bootcamp/how-to-organize-internal-design-documents-so-you-can-manage-projects-with-precision-bf658c9d0e7">organizational starter kit</a> by Courtney Pester. It’s an incredibly thorough <strong>setup template</strong> to get started with and build upon. Surely your projects will require a customized setup, but it will get you running fairly quickly.</p><ul><li><a href="https://miro.medium.com/v2/1*LkE90fMfEEvbg5jUsfiHoQ.png">Full structure preview</a> (PNG)</li><li><a href="https://docs.google.com/document/d/1C6bAxUEu0KWOzlKjoofR9eVQuKDh2KM5lbcqd9ISzPk/edit?tab=t.0">Google Doc template</a></li><li><a href="https://drive.google.com/file/d/1g6YBwtbbd4ImBhozpSEIzXBbH82JhKdT/view">Compressed .zip file folder structure</a></li></ul><p>In the article, Courtney suggests breaking down all assets and resources into <strong>7 main categories</strong> — all representing distinct parts of the project lifecycle, and neatly broken down into sub-folders:</p><ol><li>Client resources,</li><li>Research & synthesis,</li><li>Concept ideation & testing,</li><li>Wireframes & prototypes,</li><li>Meeting artifacts,</li><li>Final deliverables,</li><li>UI + Dev handoffs.</li></ol><p><img src="https://files.smashing.media/articles/ux-design-files-organization-template/2-table-of-contents.png" /></p><p>Every project starts by duplicating the same main <strong>folder template</strong> and adjusting it for the needs of the project. Most importantly, we choose a <strong>central place</strong> 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.</p><p>I really can’t emphasize enough the importance of having a <strong>shared understanding</strong> about where the files will be stored and how they will be accessed. Proper organization of assets <strong>will not happen automatically</strong> — 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.</p><p>Now, when we bring all documents and artefacts together, we end up with a quite lengthy but also <strong>comprehensive folder structure</strong>:</p><p><img src="https://files.smashing.media/articles/ux-design-files-organization-template/4-comprehensive-folder-structure.png" /></p><p>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. </p>Beware Of Duplications<p>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.</p><p>These are typically the questions I would be raising:</p><ul><li><strong>Do we need to restrict access</strong> to some sections of the folder (e.g., sensitive data)?</li><li><strong>What naming conventions</strong> do we use for files/folders (e.g,. semantic versioning, V1, V2, --FINAL)</li><li><strong>How do we manage deprecated or outdated files?</strong> Do we archive or delete them?</li><li><strong>What would be the main communication channel</strong> for stakeholders/clients?</li><li><strong>Are there any legal requirements</strong> for storing and sharing some specific files?</li><li><strong>What will happen to the shared space</strong> once the project has finished?</li></ul><p>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 <strong>communication channels</strong> and <strong>raise awareness</strong>. 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.</p>Secure But Easy To Access<p>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.</p><p>The shared space has to be <strong>easily accessible</strong> 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.</p><p>For most situations, a <strong>password/passkey + 2FA</strong> (2-Factor-Authentication) would be perfectly enough.</p>The Drawbacks Of The Tree Structure<p>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 <strong>break down by time</strong> or at least <strong>tag by milestones</strong>.</p><p>For example, we might want to <strong>look up research insights</strong> 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.</p><p>When organizing artefacts, I try to follow one single principle: <strong>put things that belong together close to each other</strong>. 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 (<em>not uploaded .fig files!</em>).</p><p><img src="https://files.smashing.media/articles/ux-design-files-organization-template/3-templates-ux-research-work.png" /></p>Useful Tools To Organize UX Work<p>There are plenty of wonderful tools to help you organize and share your UX work as well:</p><ul><li><a href="http://dovetail.com/">Dovetail</a> to gather customer insights in one place,</li><li><a href="https://www.userinterviews.com/">UserInterviews</a> for recruiting and research work,</li><li><a href="https://maze.co/">Maze</a> is another great UX research platform,</li><li><a href="https://glean.ly/">Glean.ly</a> to use as an atomic research repository,</li><li><a href="https://www.notion.so/">Notion</a> and <a href="https://www.airtable.com/">AirTable</a> for quick look-ups of all files.</li></ul><p>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. <strong>What works for you works for you.</strong> There is really no perfect and universal way that works out of the box.</p><p>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.</p><p>Happy organizing, everyone!</p>Useful Resources<ul><li><a href="https://www.linkedin.com/posts/vitalyfriedman_design-figma-activity-7152988603072020480-uQrb/">How To Organize Figma Files</a> by Lee Munroe</li><li><a href="https://odettejansen.medium.com/utilising-notion-as-your-ux-research-repository-005c7dc36726">How To Build A User Research Database (Notion Template)</a> by Odette Jansen</li><li><a href="https://uxinsight.org/how-to-build-a-ux-research-role-practice-from-scratch/">How To Build Up UX Research From Scratch (+ Templates)</a> by Ori Dar</li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7218878275027116032-33UX/">Starter Kits For Design Leads</a> </li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-templates-notion-activity-7039900781004607488-eyVa/">Useful Notion Templates</a></li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-miro-activity-7030171852110995456-aowy/">Useful Miro Templates</a> </li><li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-figma-activity-7206915952234369025-SzYm/">Useful Figjam Templates</a></li></ul>New: How To Measure UX And Design Impact<p>Meet <a href="https://measure-ux.com/">Measure UX & Design Impact</a> (8h), a new practical guide for designers and UX leads to measure, track, show and report the <strong>impact of your incredible UX work</strong> on business. Use the code <a href="https://measure-ux.com/">IMPACT</a> 🎟 to <strong>save 20% off today</strong>. <a href="https://measure-ux.com/">Jump to the details</a>.</p> <a href="https://measure-ux.com/"> <img src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png" /> </a> <div><div><ul><li><a href="#">Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 799.00<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">Get Video + UX Training<div></div></a><p>25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br />100 days money-back-guarantee.</p></div><div><h3>Video only</h3><div>$ 250.00$ 395.00</div><a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630">Get the video course<div></div></a><p>25 video lessons (8h). Updated yearly.<br />Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p></div></div></div> ]]></content:encoded> <author>hello@smashingmagazine.com (Vitaly Friedman)</author> <enclosure url="http://files.smashing.media/articles/ux-design-files-organization-template/ux-design-files-organization-template.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio]]></title> <link>https://smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/</link> <guid>https://smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/</guid> <pubDate>Fri, 25 Apr 2025 13:00:00 GMT</pubDate> <description><![CDATA[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. ]]></description> <content:encoded><![CDATA[<p>When building digital products, thinking in terms of single features and urgent client needs can lead to a large portfolio of products with <strong>high maintenance costs</strong>. 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:</p><ol><li>Your product portfolio should cater to your core customer segments and meet their needs.</li><li>Your product portfolio should balance the short-term benefits of bespoke solutions against long-term maintenance costs while aligning with your business strategy.</li></ol><p>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.</p><p>This article highlights the <strong>benefits of going through a clean-up exercise</strong> and explains how to conduct a <strong>“Product Kondo” exercise</strong> 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 <em>how</em> to simplify and organize them into <strong>customer-centric portfolios</strong>, with stakeholder buy-in throughout the process.</p>Overflowing Product Cupboards<p>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 <strong>need to be maintained</strong>, and that gets ever more <strong>costly</strong> and <strong>complex</strong> over time.</p><p>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, <em>“In a messy cupboard, it’s impossible to find the pieces that truly bring you joy.”</em> In this context, joy translates into:</p><ol><li>Value for the customer,</li><li>Revenue for the business.</li></ol><p>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.</p><p>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). </p><blockquote>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?</blockquote> <p>As part of the wider organizational transformation, one consideration was to <strong>simplify the product portfolio</strong> in order to reduce maintenance costs and the technical effort required for a planned migration to a new platform. Another important concern was to <strong>align future development with the newly developed business strategy</strong>. Therefore, reducing costs and planning for the future were the key drivers.</p>The “Product Kondo” Portfolio Clean-up<p>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.</p><p>To do that, it’s useful to go in with two ideas: </p><ul><li>Transparency about the need to simplify;</li><li>Transparency about how decisions will be made, so teams are on board and able to contribute.</li></ul><p>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.</p><blockquote>If you’re unclear about the state of your current portfolio, how do you know where to focus next strategically?</blockquote> <p>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.</p><p>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:</p><ol><li>Define the <strong>FOR WHOM</strong> (By building a user segmentation matrix).</li><li>Establish the <strong>STATUS QUO</strong> (By auditing previous attempts to map the portfolio).</li><li>Agree the <strong>HOW</strong> (By defining evaluation criteria & prioritisation).</li><li>Ensuring <strong>BUY-IN</strong> (through deep dives with key stakeholders and experts).</li></ol><p><strong>Note</strong>: <em>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.</em></p><h3>1. For Whom? Building A User Segmentation Matrix</h3><p>First things first, if you’re not clear about your <strong>primary and secondary customer segments</strong>, 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. </p><p>Apart from establishing the key jobs-to-be-done, goals, and pain points for each customer segment, it fosters transparency around the following factors:</p><ul><li>Thinking from a customer perspective.</li><li>Considering measurable data like user numbers, size of accounts, and revenue.</li><li>The fact that some user groups are more valuable to an organization than others, hence should be ranked higher in a prioritization effort.</li></ul><p>How to define user segments, with different levels of relevance to the organization and its future strategy, <a href="https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/">is described in more detail here</a>. It was the initial mental model shared across teams prior to starting this portfolio simplification effort.</p><p>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.</p><h3>2. Status Quo: Auditing And Defining What To Measure</h3><p>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. </p><p>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.</p><p>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.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png" /></p><h3>3. How? Doing The Audit</h3><p>In order to be transparent about decision-making, it was important to agree on the <strong>evaluation criteria and scoring</strong> 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.</p><p>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.</p><p><strong>Note</strong>: <em>While not technically perfect, we decided that moving forward with assumptions grounded in subject matter expertise, rather than completely missing data, would be preferable.</em></p><p>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.</p><p>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.</p> <h4>3.1. Scoring</h4><p>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: <strong>to reduce cost, maintenance, and prepare for future growth</strong>. </p><p>The image below illustrates the three stages that led to the prioritized list and score for each item.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png" /></p><p>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. </p><p>At least that was the theory, and this is where it met reality.</p><h4>Dealing With Change Reality</h4><p>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.</p><p>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. </p><p>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.</p><h4>What To Do?</h4><p>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. </p><p>Next, we proposed to work with key product owners and leaders to help <strong>categorize the portfolio correctly</strong>, in order to determine how best to handle each item going forward.</p><p>We used the following five buckets to enable sorting, with the intention of keeping the “other” category as small as possible.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png" /></p><p>Aside from simplifying the terminology used, this categorization meant that each category could be handled differently in terms of future work.</p><p>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.</p><h3>4. Getting Buy-in: Building Product Trees</h3><p>To get buy-in and allow for active contributions from subject matter experts, we planned <strong>workshops per customer segment</strong> (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.</p><p>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.</p><p><strong>The “product tree” concept</strong>, developed as an innovation game called “prune the product tree” by <a href="https://www.lukehohmann.com/innovation-games/prune-the-product-tree">Luke Hohmann</a> 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.</p><p>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. </p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png" /></p><p>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.</p><p>The tree metaphor worked well here, despite being used in a different way from its original context, as it provided <strong>a mental model for categorization</strong>. 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.</p>Findings<p>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:</p><ul><li>Mapping out the product tree by swimlanes (as introduced in the workshops).</li><li>Layering in usage across multiple segments (through color-coding).</li><li>Adding the level of dependencies (through the type of frame around each item).</li><li>Then, add the quantitative assessment and ranking through numbering and color-coding.</li></ul><p>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.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png" /></p><p>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.</p><blockquote>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.</blockquote> <p>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.</p><p>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.</p>Learnings<p>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 <strong>categorization</strong>, i.e., separating and organizing the portfolio into different swimlanes and introducing the product tree metaphor. <strong>The product tree visualisation</strong> 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.</p><p>Similarly, <strong>the categorization into swimlanes</strong> 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.</p><p>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.</p><p>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 <em>why</em> and <em>when</em> 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.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png" /></p><h3>Shared Terminology Matters</h3><p>In all this, our biggest learning was that</p><p>Terminology matters because simply referring to things as “products” doesn’t make them so. Comparing like for like is a key factor when assessing a product portfolio.</p><p>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.</p><h3>When Theory Meets Reality</h3><p>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 <strong>a clustering or mapping exercise</strong> right from the start.</p>Product Kondo: The Groundwork For Transformation<p>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.</p><p>It’s often necessary and needed to focus on the next shiny thing, but if you don’t balance that with cleaning up your existing portfolio, your organization will eventually become slow. Overgrown product portfolios can’t be sustained forever.</p><p>Particularly in organizations bound by various contractual obligations, this is the groundwork that enables product teams to iterate.</p><p>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 <strong>transparency</strong> and in <strong>an evidence-guided way</strong> ensures that you are bringing people along.</p><p><img src="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png" /></p><p>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?</p><p><strong>Upside</strong>: 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.</p><p><strong>Reality check</strong>: 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.</p><h3>Further Reading</h3><ul><li>“<a href="https://medium.com/@userpilot/product-led-growth-the-ultimate-guide-for-software-companies-b9fa0779ef8f">Product-Led Growth: The Ultimate Guide for Software Companies</a>,” Userpilot</li><li>“<a href="https://itamargilad.com/book-evidence-guided/">Evidence-Guided: Creating High-Impact Products in the Face of Uncertainty</a>,” Itamar Gilad</li><li>“<a href="https://beyondthebacklog.com/2025/01/07/innovation-games/">Innovation Games: Exploring Luke Hohmann’s Game-Changing Approach</a>,” Matt Hicks</li><li>“<a href="https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/">Building A User Segmentation Matrix To Foster Cross-Org Alignment</a>,” Talke Hoppmann-Walton</li><li>“<a href="https://www.savio.io/blog/how-to-create-a-product-portfolio-roadmap/">What Is A Product Portfolio Roadmap?</a>,” Kareem Mayan</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Talke Hoppmann-Walton)</author> <enclosure url="http://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/product-kondo-guide-evaluating-organizational-product-portfolio.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Boosting Up Your Creativity Without Endless Reference Scrolling]]></title> <link>https://smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/</link> <guid>https://smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/</guid> <pubDate>Thu, 24 Apr 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>The work of a designer largely consists of inventing new things, which requires creativity that is generally believed to depend on <strong>inspiration</strong>, 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?</p><p>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: <strong>how to boost creativity and “lure” inspiration with the help of neuroscience</strong>. </p><p>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.</p>How Our Brain Works<p>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: </p><table> <thead> <tr> <th>Left Hemisphere</th> <th>Right Hemisphere</th> </tr> </thead> <tbody> <tr> <td><strong>Language and Speech</strong>: Language-related activities like speaking, writing, and comprehension </td> <td><strong>Creativity and Artistic Abilities</strong>: Imagination, creative thinking, music, visual arts, etc. </td> </tr> <tr> <td><strong>Analytical Thinking</strong>: Mathematical operations, sequential processing, and problem-solving </td> <td><strong>Emotional Processing</strong>: Emotion recognition, facial expressions, tone of voice, gestures </td> </tr> <tr> <td><strong>Linear Thinking</strong>: Step-by-step way of information processing </td> <td><strong>Holistic Thinking</strong>: Looking at the big picture rather than focusing on details </td> </tr> </tbody></table> <p>While each part of the brain is responsible for certain functions, they work together to process information. For some activities (<em>analyzing data, solving equations, and working with precise calculations</em>), it might be more important to rely on the left hemisphere, while for others (<em>composing music, acting</em>), the right hemisphere.</p><p>However, when it comes to the design process and design thinking, <strong>it’s essential to stimulate both hemispheres</strong> and not limit the role of a product designer to being either predominantly left- or right-brained.</p>Interhemispheric Interaction In Product Design: Why Are Both Equally Important?<p>In product design, the need for well-established <strong>interhemispheric interaction</strong> is especially noticeable since this work requires <strong>a balance between logic and creativity</strong>. 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.</p><p>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.</p><p>A harmonious interaction between the two hemispheres allows product designers to seamlessly integrate both practical functionality and creative innovation. This balance results in products that not only meet technical and user requirements but also deliver an enjoyable, intuitive, and visually captivating user experience.</p>The Relevance Of This Subject<p>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 <em>Experiences in Visual Thinking</em> 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. </p><p>In the context of the brain’s left and right hemispheres, the author explains and demonstrates through a range of experiments that, to achieve <strong>productive thinking</strong> — 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 <em>“integrate the artist and scientist within each one of us.”</em></p><p>He offers a series of exercises (<em>“3-1/Food for Thought,” “3-2/Dominant Eye,” “3-3/Internal Transfer”</em>) 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”. </p><p>One of the simplest exercises offered by McKim is the <em>“3-2/Dominant Eye”</em>. Look at the picture and try to describe what you see: </p><p><img src="https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/1-neuroscience-designers-boost-creativity-endless-reference-scrolling.png" /></p><p>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.</p><p>In his work, Professor H. McKim not only demonstrates how to activate the left or right hemisphere but also explains the <strong>complementary modes of thought</strong>, 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.</p><p>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 <strong>“relaxed attention”</strong> — 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. </p><p>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. </p>What Helps Creativity<p>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. </p>Physical Activity<p>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. </p><blockquote>Sports that combine the need to develop a strategy while also requiring active movement may work best for turning up creativity.</blockquote> <p>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, <strong>movement is essential to learning</strong>. (<em>Source: Anne Green Gilbert. Brain-Compatible Dance Education, 2019</em>)</p><p>Here are the top activities that positively impact creativity, and I will explain why they have this effect. </p><h3>Tennis</h3><p>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.</p><p>Table tennis also develops <strong>concentration</strong>. 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.</p><p>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:</p><blockquote>“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.<br /><br />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.”<br /><br />— Ilia Kanazin, Product Designer with 7+ years of experience working in SaaS</blockquote> <p><img src="https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/2-neuroscience-designers-boost-creativity-endless-reference-scrolling.jpg" /></p><h3>Dance</h3><p>Dance challenges the brain by requiring the integration of movement, rhythm, coordination, and memory, which promotes <strong>neuroplasticity</strong>, 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.</p><p>At the same time, <strong>cognitive flexibility</strong> 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.</p><h3>Balance Exercises</h3><p>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.</p><p>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.</p><p>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.</p><h3>Case Study</h3><blockquote>“By training your body to move more creatively, you train your mind to think more creatively.”<br /><br />— Jennifer Heisz. Move The Body, Heal The Mind, 2022</blockquote> <p>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.</p><p>For example, Charles Darwin’s <em>“Thinking Path”</em>. The scientist developed his most famous works, <em>“On the Origin of Species”</em> and <em>“The Descent of Man,”</em> at Down House, where he took daily walks. This activity is known as <a href="https://www.philipmandel.com/darwin-s-thinking-path">Darwin’s Thinking Path</a>, and it is well-documented how his walking routine influenced the way he contemplated his scientific theories.</p><p>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.</p><p>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, <strong>strategic thinking</strong> 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 <a href="https://www.nuvancehealth.org/health-tips-and-news/the-neuroscience-of-tennis-for-brain-health#:~:text=Learning%20and%20mastering%20tennis%20techniques,neural%20networks%20during%20formative%20years">cognitive benefits of physical exercise</a>.</p><p>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.</p><blockquote>“It’s not specific activities but individuals’ experiences of them that determine their effect.”<br /><br />— <a href="https://www.theguardian.com/lifeandstyle/2024/mar/04/all-it-takes-is-a-quick-walk-how-a-few-minutes-exercise-can-unleash-creativity-even-if-you-hate-it">Amir-Homayoun Javadi, Associate Professor at the University of Kent</a></blockquote> <p>Another study goes further, explaining that not all sports impact creativity to the same extent. </p><blockquote>“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.”</blockquote> <p>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 <strong>learn to act instinctively</strong>. As we train physically, our brain also adapts, becoming more flexible — particularly in terms of cognitive flexibility. This, in turn, enhances our creativity. (<em>Source: Jennifer Heisz. Move The Body, Heal The Mind, 2022</em>)</p>Mental Activity<p>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. </p><h3>Learning Foreign Languages</h3><p>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. </p><p>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 <em>“Oh, great!”</em> 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.</p><p>Learning a second language exposes people to <strong>new methods of expressing the same thoughts</strong>, which promotes creativity. Finding synonyms, understanding idiomatic terms, and gaining the ability to flip between languages all promote <strong>divergent thinking</strong>, which is the ability to generate several solutions to a given problem. </p><p>In parallel, learning foreign languages helps to develop <strong>storytelling</strong> and <strong>self-presentation skills</strong>, which are also very useful in a designer’s work.</p><blockquote>“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.<br /><br />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.<br /><br />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.<br /><br />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.”<br /><br />— Maxence Akodjenou, Senior Growth Designer (working on complex B2B apps)</blockquote> <p><img src="https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/3-neuroscience-designers-boost-creativity-endless-reference-scrolling.png" /></p><h3>Board Games</h3><p>Table games develop <strong>strategic thinking</strong>, require players to anticipate opponents’ moves, solve problems in real-time, and sometimes think outside the box. Traditional games like chess encourage <strong>critical thinking</strong>, as players must analyze the current situation, weigh potential outcomes, and decide on the best course of action. This improves the <strong>brain’s executive functions</strong>, including decision-making, planning, and strategic thinking.</p><p>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.</p><p>Board games also train <strong>communication skills</strong>, 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 <strong>collaboration skills</strong>, such as finding compromises, negotiating, and making concessions.</p><h3>Music Lessons</h3><p>Playing a musical instrument has been a widely researched topic in neuroscience in recent decades. It has been proven that music lessons <strong>improve cognitive abilities</strong> 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.</p><p>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, <strong>a person is better able to process complex information</strong>. 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.</p><p>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.</p> <h3>A Lesson From Paul Klee</h3><p>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.</p><p>In the book <em>Enchanted Neurons</em>, 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). </p><blockquote>“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.<br /><br />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.”<br /><br />— Pierre Boulez, Jean-Pierre Changeux, Philippe Manoury. Enchanted Neurons, 2020</blockquote> <p>This lesson shared by Pierre Boulez demonstrates how <strong>interdisciplinary inspiration</strong> — such as the course of visual artist Paul Klee — shaped his creative process and how concepts from outside music can lead to new solutions.</p><p>In my opinion, the reverse can also be true: music and its principles can inspire creativity in other disciplines.</p><blockquote>“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; <strong>success in music develops my design skills</strong>. Design helps me make more complex music.<br /><br />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.”<br /><br />— Sergei Diuzhev, Design Leader at <a href="http://musescore.com/">MuseScore</a></blockquote> <p><img src="https://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/4-neuroscience-designers-boost-creativity-endless-reference-scrolling.png" /></p>Tips For Incorporating A Routine That Sustains Designer’s Creativity<p>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. </p><ol><li><strong>Find something you genuinely enjoy or have always wanted to try and implement in small steps.</strong><br />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.</li><li><strong>Constantly explore new things, even small ones.</strong><br />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.</li><li><strong>Meet new people.</strong><br />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.</li></ol><p>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.</p>Conclusion<p>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 <strong>activities that not only promote creativity but also improve your mental and physical health</strong>. </p><p>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.</p><p>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 <strong>catharsis</strong>, or a release of emotion that leaves you feeling more connected to yourself and others afterward. (<em>Source: Susan Magsamen, Ivy Ross. Your Brain on Art, 2023</em>)</p><h4>Further Reading on Smashing Magazine</h4><ul><li>“<a href="https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/">Why Perceived Performance Matters: The Perception Of Time</a>,” Denys Mishunov</li><li>“<a href="https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/">Why Performance Matters: Perception Management</a>,” Denys Mishunov</li><li>“<a href="https://www.smashingmagazine.com/2019/03/biometrics-neuro-measurements-user-testing/">Biometrics And Neuro-Measurements For User Testing</a>,” Susan Weinschenk</li><li>“<a href="https://www.smashingmagazine.com/2019/04/designers-guide-better-decisions/">A Designer’s Guide To Better Decisions</a>,” Eric Olive</li></ul>]]></content:encoded> <author>hello@smashingmagazine.com (Marina Chernyshova)</author> <enclosure url="http://files.smashing.media/articles/neuroscience-designers-boost-creativity-endless-reference-scrolling/neuroscience-designers-boost-creativity-endless-reference-scrolling.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Building An Offline-Friendly Image Upload System]]></title> <link>https://smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/</link> <guid>https://smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/</guid> <pubDate>Wed, 23 Apr 2025 10:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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. <strong>Poor network connectivity</strong> can lead you to spend an unreasonable amount of time trying to upload files successfully.</p><p>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.</p><p>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 — <strong>eliminating the need for a reliable network connection</strong>, and then having the system retry the upload process when the network becomes stable, without the user intervening.</p><p>This article is going to focus on explaining how to build <strong>an offline-friendly image upload system</strong> using PWA (progressive web application) technologies such as <code>IndexedDB</code>, service workers, and the Background Sync API. We will also briefly cover tips for improving the user experience for this system.</p>Planning The Offline Image Upload System<p>Here’s a flow chart for an offline-friendly image upload system.</p><p><img src="https://files.smashing.media/articles/building-offline-friendly-image-upload-system/1-upload-system-flow-chart.png" /></p><p>As shown in the flow chart, the process unfolds as follows:</p><ol><li><strong>The user selects an image.</strong><br />The process begins by letting the user select their image.</li><li><strong>The image is stored locally in <code>IndexedDB</code>.</strong><br />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 <code>IndexedDB</code>.</li><li><strong>The service worker detects when the network is restored.</strong><br />With the image stored in <code>IndexedDB</code>, the system waits to detect when the network connection is restored to continue with the next step.</li><li><strong>The background sync processes pending uploads.</strong><br />The moment the connection is restored, the system will try to upload the image again.</li><li><strong>The file is successfully uploaded</strong>.<br />The moment the image is uploaded, the system will remove the local copy stored in <code>IndexedDB</code>.</li></ol>Implementing The System<p>The first step in the system implementation is allowing the user to select their images. There are different ways you can achieve this:</p><ul><li>You can use a simple <code><input type="file"></code> element;</li><li>A drag-and-drop interface.</li></ul><p>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 <code><input type="file"></code> 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. </p><h3>Registering The Service Worker</h3><p>At the heart of this solution is the <a href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/">service worker</a>. Our service worker is going to be responsible for retrieving the image from the <code>IndexedDB</code> store, uploading it when the internet connection is restored, and clearing the <code>IndexedDB</code> store when the image has been uploaded.</p><p>To use a service worker, you first have to register one:</p><div><pre><code>if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(reg => console.log('Service Worker registered', reg)) .catch(err => console.error('Service Worker registration failed', err));}</code></pre></div> <h3>Checking For Network Connectivity</h3><p>Remember, the problem we are trying to solve is caused by <strong>unreliable network connectivity</strong>. 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 <code>IndexedDB</code>.</p><pre><code>function uploadImage() { if (navigator.onLine) { // Upload Image } else { // register Sync Event // Store Images in IndexedDB }}</code></pre> <p><strong>Note</strong>: I’m only using the <code>navigator.onLine</code> property here to demonstrate how the system would work. The <code>navigator.onLine</code> property is <strong>unreliable</strong>, 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.</p><h3>Registering The Sync Event</h3><p>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.</p><pre><code>async function registerSyncEvent() { if ('SyncManager' in window) { const registration = await navigator.serviceWorker.ready; await registration.sync.register('uploadImages'); console.log('Background Sync registered'); }}</code></pre> <p>After registering the sync event, you need to listen for it in the service worker.</p><pre><code>self.addEventListener('sync', (event) => { if (event.tag === 'uploadImages') { event.waitUntil(sendImages()); }});</code></pre> <p>The <code>sendImages</code> function is going to be an asynchronous process that will retrieve the image from <code>IndexedDB</code> and upload it to the server. This is what it’s going to look like:</p><pre><code>async function sendImages() { try { // await image retrieval and upload } catch (error) { // throw error }}</code></pre> <h3>Opening The Database</h3><p>The first thing we need to do in order to store our image locally is to open an <code>IndexedDB</code> store. As you can see from the code below, we are creating <strong>a global variable to store the database instance</strong>. The reason for doing this is that, subsequently, when we want to retrieve our image from <code>IndexedDB</code>, we wouldn’t need to write the code to open the database again.</p><div><pre><code>let database; // Global variable to store the database instance function openDatabase() { return new Promise((resolve, reject) => { if (database) return resolve(database); // Return existing database instance const request = indexedDB.open("myDatabase", 1); request.onerror = (event) => { console.error("Database error:", event.target.error); reject(event.target.error); // Reject the promise on error }; request.onupgradeneeded = (event) => { const db = event.target.result; // Create the "images" object store if it doesn't exist. if (!db.objectStoreNames.contains("images")) { db.createObjectStore("images", { keyPath: "id" }); } console.log("Database setup complete."); }; request.onsuccess = (event) => { database = event.target.result; // Store the database instance globally resolve(database); // Resolve the promise with the database instance }; });}</code></pre></div> <h3>Storing The Image In IndexedDB</h3><p>With the <code>IndexedDB</code> store open, we can now store our images.</p><blockquote>Now, you may be wondering why an easier solution like <code>localStorage</code> wasn’t used for this purpose.<br /><br />The reason for that is that <code>IndexedDB</code> operates asynchronously and doesn’t block the main JavaScript thread, whereas <code>localStorage</code> runs synchronously and can block the JavaScript main thread if it is being used.</blockquote> <p>Here’s how you can store the image in <code>IndexedDB</code>:</p><div><pre><code>async function storeImages(file) { // Open the IndexedDB database. const db = await openDatabase(); // Create a transaction with read and write access. const transaction = db.transaction("images", "readwrite"); // Access the "images" object store. const store = transaction.objectStore("images"); // Define the image record to be stored. const imageRecord = { id: IMAGE_ID, // a unique ID image: file // Store the image file (Blob) }; // Add the image record to the store. const addRequest = store.add(imageRecord); // Handle successful addition. addRequest.onsuccess = () => console.log("Image added successfully!"); // Handle errors during insertion. addRequest.onerror = (e) => console.error("Error storing image:", e.target.error);}</code></pre></div> <p>With the images stored and the background sync set, the system is ready to upload the image whenever the network connection is restored.</p><h3>Retrieving And Uploading The Images</h3><p>Once the network connection is restored, the sync event will fire, and the service worker will retrieve the image from <code>IndexedDB</code> and upload it.</p><div><pre><code>async function retrieveAndUploadImage(IMAGE_ID) { try { const db = await openDatabase(); // Ensure the database is open const transaction = db.transaction("images", "readonly"); const store = transaction.objectStore("images"); const request = store.get(IMAGE_ID); request.onsuccess = function (event) { const image = event.target.result; if (image) { // upload Image to server here } else { console.log("No image found with ID:", IMAGE_ID); } }; request.onerror = () => { console.error("Error retrieving image."); }; } catch (error) { console.error("Failed to open database:", error); }}</code></pre></div> <h3>Deleting The IndexedDB Database</h3><p>Once the image has been uploaded, the <code>IndexedDB</code> store is no longer needed. Therefore, it should be deleted along with its content to free up storage.</p><div><pre><code>function deleteDatabase() { // Check if there's an open connection to the database. if (database) { database.close(); // Close the database connection console.log("Database connection closed."); } // Request to delete the database named "myDatabase". const deleteRequest = indexedDB.deleteDatabase("myDatabase"); // Handle successful deletion of the database. deleteRequest.onsuccess = function () { console.log("Database deleted successfully!"); }; // Handle errors that occur during the deletion process. deleteRequest.onerror = function (event) { console.error("Error deleting database:", event.target.error); }; // Handle cases where the deletion is blocked (e.g., if there are still open connections). deleteRequest.onblocked = function () { console.warn("Database deletion blocked. Close open connections and try again."); };}</code></pre></div> <p>With that, the entire process is complete!</p>Considerations And Limitations<p>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.</p><ul><li><strong>No Reliable Internet Connectivity Detection</strong><br />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.</li><li><strong>Chromium-Only Solution</strong><br />The Background Sync API is currently <a href="https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API#browser_compatibility">limited to Chromium-based browsers</a>. 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.</li><li><strong><code>IndexedDB</code> Storage Policies</strong><br />Browsers impose storage limitations and eviction policies for <code>IndexedDB</code>. For instance, in Safari, data stored in <code>IndexedDB</code> 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.</li></ul>Enhancing The User Experience<p>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 <strong>UI elements</strong> 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.</p>Wrapping Up<p>Poor internet connectivity can disrupt the user experience of a web application. However, by leveraging PWA technologies such as <code>IndexedDB</code>, 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.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Amejimaobari Ollornwi)</author> <enclosure url="http://files.smashing.media/articles/building-offline-friendly-image-upload-system/building-offline-friendly-image-upload-system.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[What Does It Really Mean For A Site To Be Keyboard Navigable]]></title> <link>https://smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable/</link> <guid>https://smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable/</guid> <pubDate>Fri, 18 Apr 2025 13:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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 <a href="https://www.ama-assn.org/delivering-care/public-health/what-doctors-wish-patients-knew-about-carpal-tunnel-syndrome">10 million American adults</a> 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 <strong>keyboard navigable</strong> to achieve universal appeal and accessibility.</p>Understanding Keyboard Navigation<p>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.</p><p>There are <a href="https://www.geeksforgeeks.org/computer-shortcut-keys/">more than 500 keyboard shortcuts</a> 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.</p><p><strong>Single-button navigation</strong> 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.</p><p><img src="https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/1-washington-post-homepage.png" /></p><p>The <a href="https://www.washingtonpost.com/">Washington Post homepage</a> 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 <strong>keyboard navigability is a matter of accessibility</strong>. </p><p>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. </p>Why Keyboard Navigation Matters In Web Design<p>Keyboard navigability is crucial for a few reasons. Most notably, it makes your site more accessible. In the U.S. alone, <a href="https://www.cdc.gov/media/releases/2024/s0716-Adult-disability.html">over one in four people</a> 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.</p><p>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 <a href="https://winfosoft.com/about-us/blogs-insights/benefits-of-implementing-erp-system/">nearly a third of their workweek</a> looking for information, any obstacles to efficiency can be highly disruptive.</p><p>Falling short in these areas may lead to legal complications. Regulations like the <strong>Americans with Disabilities Act</strong> necessitate tech accessibility. While the ADA <a href="https://www.congress.gov/crs-product/LSB10845">has no binding rules</a> 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.</p><p>In 2023, Kitchenaid <a href="https://topclassactions.com/disability-class-action-lawsuit/whirlpool-class-action-alleges-kitchenaid-website-not-accessible-to-visually-impaired-blind-visitors/">faced a class-action lawsuit</a> 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 <strong>potential legal and financial repercussions of overlooking inclusivity</strong>. </p><p>Outside the law, an inaccessible site presents <strong>ethical concerns</strong>, 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.</p>Elements Of A Keyboard-Navigable Site<p>Thankfully, ensuring <strong>keyboard navigability</strong> is a straightforward user experience design practice. Because navigation is standard across OSes and browsers, keyboard-accessible sites employ a few consistent elements.</p><h3>Focus Indicators</h3><p>Web Accessibility In Mind states that sites <a href="https://webaim.org/techniques/keyboard/">must provide a visual indicator</a> of elements currently in focus when users press Tab. Focus indicators are typically a simple box around the highlighted icon.</p><p>These are standard in CSS, but some designers hide them, so avoid using <code>outline:0</code> or <code>outline:none</code> to limit their visibility. You can also increase the contrast or change the indicator’s color in CSS.</p><p><img src="https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/3-cnn-homepage.png" /></p><p>The <a href="https://www.cnn.com/">CNN Breaking News homepage</a> is a good example of <strong>a strong focus indicator</strong>. 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.</p><h3>Logical Tab Order</h3><p>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.</p><p>A few errors can stand in the way. Disabled buttons <a href="https://designerly.com/disabled-buttons/">disrupt keyboard navigation flow</a> 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.</p><p><img src="https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/4-sutton-maddock-vehicle-rental-site.png" /></p><p>The <a href="https://www.suttonmaddock.co.uk/">Sutton Maddock Vehicle Rental</a> 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.</p><h3>Skip Navigation Links</h3><p>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.</p><p><img src="https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/5-hsbc-group-homepage.png" /></p><p>The <a href="https://www.hsbc.com/">HSBC Group homepage</a> has a few skip navigation links. Pressing Tab pulls up three options, letting users quickly jump to whichever part of the site interests them.</p><h3>Keyboard-Accessible Interactive Elements</h3><p>Finally, all interactive elements on a keyboard-navigable site should be accessible via <strong>keystrokes</strong>. 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.</p><p><img src="https://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/6-arizona-state-university-keyboard-accessibility.png" /></p><p>Appropriately, this <a href="https://accessibility.asu.edu/articles/keyboard">Arizona State University page on keyboard accessibility</a> 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.</p>How to Test for Keyboard Navigability<p>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.</p><table> <thead> <tr> <th></th> <th>Keyboard Navigable</th> <th>Not Keyboard Navigable</th> </tr> </thead> <tbody> <tr> <td><strong>Clickable Elements</strong></td> <td>All elements are reachable through the keyboard and open when you press Enter.</td> <td>Only some elements are possible to reach through the keyboard. Some links may be broken or not open when you press Enter.</td> </tr> <tr> <td><strong>Focus Indicators</strong></td> <td>Pressing Tab, Space, or Enter brings up a focus indicator that is easy to see in all browsers.</td> <td>Focus indicators may not appear when pressing all buttons. The box may be hard to see or only appear in some browsers.</td> </tr> <tr> <td><strong>Skip Navigation Links</strong></td> <td>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.</td> <td>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.</td> </tr> <tr> <td><strong>Screen Reader Support</strong></td> <td>Screen readers can read each element when highlighted with the focus indicator.</td> <td>Some elements may not encourage any action from screen readers when highlighted.</td> </tr> </tbody></table> <p>The <strong>Web Content Accessibility Guidelines</strong> <a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html">outline two test rules</a> to verify keyboard navigability:</p><ol><li>The first ensures all interactive elements are accessible via the Tab key,</li><li>The second checks for keyboard scroll functionality.</li></ol><p>Employ both standards to review your UX before making a site live.</p><p>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 <a href="https://www.boia.org/">use the Bureau of Internet Accessibility</a> for a basic WCAG audit.</p>Make Your Site Keyboard Navigable Today<p>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.</p><p>WCAG provides several techniques you can employ to meet keyboard accessibility standards and enhance your users’ experience:</p><ul><li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G90">Technique G90</a>, for keyboard-triggered event handlers</li><li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G202">Technique G202</a>, for general keyboard functionality</li><li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91">Technique H91</a>, for forming controls and links in HTML</li></ul><p>Follow these guidelines and use WCAG’s test rules to create an accessible site. Remember to re-check it every time you add elements or change your UX.</p><p>Additionally, consider the following recommended reads to learn more about keyboards and their role in accessibility:</p><ul><li>“<a href="https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/">A Guide To Keyboard Accessibility: HTML And CSS (Part 1)</a>,” Cristian Díaz</li><li>“<a href="https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/">A Guide To Keyboard Accessibility: JavaScript (Part 2)</a>,” Cristian Díaz</li><li>“<a href="https://www.smashingmagazine.com/2020/05/complete-guide-mechanical-keyboards/">A Complete Guide To Mechanical Keyboards</a>,” Ben Frain</li><li>“<a href="https://www.smashingmagazine.com/2019/07/ux-improvements-keyboard-accessibility/">UX Improvements For Keyboard Accessibility</a>,” Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/">I Used The Web For A Day With Just A Keyboard</a>,” Chris Ashton</li></ul><p>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.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Eleanor Hecks)</author> <enclosure url="http://files.smashing.media/articles/what-mean-site-be-keyboard-navigable/what-mean-site-be-keyboard-navigable.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Fostering An Accessibility Culture]]></title> <link>https://smashingmagazine.com/2025/04/fostering-accessibility-culture/</link> <guid>https://smashingmagazine.com/2025/04/fostering-accessibility-culture/</guid> <pubDate>Thu, 17 Apr 2025 08:00:00 GMT</pubDate> <description><![CDATA[While there’s no definitive playbook for building an accessibility culture, Dani shares lessons from his experience in shaping it through habits rather than mandates.]]></description> <content:encoded><![CDATA[<p>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?</p><p>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.</p><p>Around the same time, I started listening to <a href="https://jamesclear.com/atomic-habits">“Atomic Habits” by James Clear</a>. The connection was immediate. Habits and culture are tightly linked concepts, and fostering an accessibility culture was really about <strong>embedding accessibility habits into everyone’s processes</strong>. 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.</p><p><strong>Before we dive in, here’s a quick note</strong>: <em>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.</em></p>Goals Vs. Systems<p>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.</p><p>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.</p><p>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. </p><p>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 <a href="https://www.browserstack.com/guide/what-is-shift-left-testing">it becomes increasingly expensive the later accessibility issues are addressed in the process</a>. It can also feel demoralizing when accessibility becomes synonymous with a long list of last-minute tickets when you are busiest.</p><p><img src="https://files.smashing.media/articles/fostering-accessibility-culture/bug-fix-cost.jpg" /></p><p>Despite this, companies constantly focus on the goal rather than the systems.</p><blockquote>“Accessibility is both a state and a practice.”<br /><br />— Sommer Panage, SwiftTO talk, “<a href="https://youtu.be/sb_fhIa3PKg?si=YUKpoxB31-yhv7yD">Building Accessibility into Your Company, Team, and Culture</a>”</blockquote> <p>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.</p><p>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.</p>What Is Your Actual Goal?<p>That doesn’t mean goals are useless — they’re very effective in setting up direction. </p><p>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: <strong>accessibility is a cross-organizational responsibility</strong>, not the task of a single person or team.</p><p>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.</p><p>The real goal should be to build <strong>a user-centric culture</strong> 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 <strong>meaningful and inclusive experiences</strong> to all users.</p>How Do We Get There?<p>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.</p><h3>Design Systems</h3><p>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.</p><p>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.</p><p>For a deeper dive, I recommend Feli Bernutz’s excellent talk, “<a href="https://youtu.be/tHYtjAXnQcI?si=FpkSxJ3QQ86aaOu6">Designing APIs: How to Ensure Accessibility in Design Systems</a>.”</p> <p><img src="https://files.smashing.media/articles/fostering-accessibility-culture/inforgraphic-showing-stats-purple-pound.jpg" /></p><p>Still, I would encourage everyone to strive to change that mindset.</p><p>Doing accessibility for economic or legal reasons is valid, but it can lead to perverse incentives, where the bare minimum and compliance become the strategy, or where teams constantly need to prove their return on investment.</p><p>It is better to do it for the “wrong” reasons than not to do it at all. But ultimately, those aren’t the reasons we should be doing it. </p><p>The “<a href="https://www.bemyeyes.com/podcasts/who-invented-voiceover/">13 Letters</a>” podcast opened with an incredibly interesting two-part episode featuring Mike Shebanek. In it, Mike explains how Apple eventually renewed its commitment to accessibility because, in the state of Maine, schools were providing Macs and needed a screen reader for students who required one. It seems like a somewhat business-driven decision. But years later, Tim Cook famously stated, “<a href="https://www.forbes.com/sites/stevedenning/2014/03/07/why-tim-cook-doesnt-care-about-the-bloody-roi/">When we work on making our devices accessible by the blind, I don’t consider the bloody ROI.</a>” He also remarked, “<a href="https://x.com/tim_cook/status/624584736862679040">Accessibility rights are human rights.</a>”</p><p>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.</p>The Good News<p>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.</p><p>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.</p><p>But it’s important not to fall into complacency. Cultures can be taken for granted, but they need constant <strong>nurturing</strong> and <strong>protection</strong>. 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.</p>Wrapping Up<p>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.</p><p>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 <strong>exclusion</strong>, too, when we talk about accessibility.</p><blockquote>“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.”<br /><br />— <a href="https://www.campaignlive.com/article/recognizing-exclusion-key-inclusive-design-conversation-kat-holmes/1488872">Kat Holmes</a></blockquote> <p>Something that might help: always assume goodwill and try to meet people where they are. I need to remind myself of this quite often.</p><blockquote>“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?”<br /><br />— <a href="https://www.linkedin.com/posts/bencongleton_ndeam-goodjobsforall-inclusionworks-activity-7257013809737789440-CRwS?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAddFqsBZwIBQzaaJzWCPkPlL5CFAxXi5Rc">Jennison Asuncion</a></blockquote> <p>I’d encourage you to:</p><ul><li>If you haven’t, just start. No matter what.</li><li>Play the long game, and focus more on systems and processes than just goals.</li><li>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.</li><li>Shift left and be strategic: reflect on where your limited resources can have the biggest, most lasting impact.</li><li>Be persistent. Be resilient.</li></ul><p>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!</p><p>Accessibility: This is the way!</p>]]></content:encoded> <author>hello@smashingmagazine.com (Daniel Devesa Derksen-Staats)</author> <enclosure url="http://files.smashing.media/articles/fostering-accessibility-culture/fostering-accessibility-culture.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Inclusive Dark Mode: Designing Accessible Dark Themes For All Users]]></title> <link>https://smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/</link> <guid>https://smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/</guid> <pubDate>Tue, 15 Apr 2025 13:00:00 GMT</pubDate> <description><![CDATA[Dark mode isn’t just a trendy aesthetic. It’s a gateway to more inclusive digital experiences, but only if designed thoughtfully. 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.]]></description> <content:encoded><![CDATA[<p>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. </p><p>However, its design often misses the mark on an important element — accessibility. For users with visual impairments or sensitivities, <a href="https://builtin.com/articles/myths-realities-dark-mode-ui">dark mode can introduce significant challenges</a> if not thoughtfully implemented.</p><p>Hence, designing themes with these users in mind can improve user comfort in low-light settings while creating <strong>a more equitable digital experience</strong> for everyone. Let’s take a look at exactly how this can be done. </p>The Pros And Cons Of Dark Modes In Terms Of Accessibility<p>Dark mode can offer tangible accessibility benefits when implemented with care. For many users, especially those who experience <strong>light sensitivity</strong>, 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 <a href="https://www.nngroup.com/articles/dark-mode-users-issues/">help lessen fatigue and improve visual focus</a>.</p><p>However, these benefits are not universal. For some users, particularly those with conditions such as <a href="https://www.boia.org/blog/dark-mode-can-improve-text-readability-but-not-for-everyone">astigmatism or low contrast sensitivity</a>, 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. </p>The Role Of Contrast In Dark Mode Accessibility<p>When you’re designing, <a href="https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/">contrast isn’t just another design element</a>, 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 <strong>a more immersive experience</strong> and drawing users into the content.</p><p><img src="https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/6-contrast-in-dark-mode.png" /></p><p>First and foremost, cleverly executing your site’s dark mode will result in a lower bounce rate (<a href="https://web.dev/case-studies/terra-dark-mode">as much as 70%, according to one case study from Brazil</a>). You can then further hack this statistic and greet visitors with a deep black, <a href="https://bluetree.digital/paid-vs-organic-search/">reinforcing your rankings in organic search results</a> by sending positive signals to Google. </p><p>How is this possible? Well, the <a href="https://link.springer.com/chapter/10.1007/978-3-030-49282-3_13">darker tones can hold attention longer</a>, especially in low-light settings, leading to <strong>higher interaction rates</strong> 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. </p>Designing For Contrast In Dark Mode<p>Instead of using pure black backgrounds, which can cause eye strain and make text harder to read, opt for <strong>dark grays</strong>. These <a href="https://www.canva.com/learn/contrasting-colors/">softer tones help reduce harsh contrast</a> and provide a modern look. </p><p>However, it’s important to note that color adjustments alone don’t solve technical challenges like <strong>anti-aliasing</strong>. In dark mode, anti-aliasing has the problem of <strong>halo effects</strong>, 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth">CSS properties</a> to improve text clarity. </p><p><strong>Real-world user testing</strong>, especially with individuals who have visual impairments, is essential to fine-tune these details and ensure an accessible experience for all users.</p><p>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:</p><ul><li>Try to choose high-contrast color combinations for improved readability.</li><li>Make sure you avoid overly saturated colors, as they can strain the eyes in dark mode.</li><li>Use <a href="https://webaim.org/resources/contrastchecker/">contrast checker tools like WebAIM</a> to evaluate your design choices and ensure accessibility.</li></ul><p>These simple adjustments make a big difference in creating a dark mode that everyone can use comfortably.</p>The Importance Of Readability In Dark Themes<p>While dark themes provide a sleek and visually appealing interface, some features still require lighter colors to remain functional and readable. </p><p>Certain interactive elements like buttons or form fields <a href="https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/">need to be easily distinguishable</a>, especially if it involves transactions or providing personal information. Simply put, no one <a href="https://apryse.com/capabilities/digital-signature">wants to sign documents digitally</a> if they have to look for the right field, nor do they want to make a transaction <a href="https://britepayments.com/resources/article/drivers-and-solutions-of-e-commerce-checkout-friction/">if there is friction</a>. </p><p>In addition to human readability, <a href="https://www.smashingmagazine.com/2020/10/developing-semantic-web/">machine readability is equally important</a> 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, <a href="https://www.xbrl.org/news/the-value-of-structured-machine-readable-data-in-training-generative-ai/">machine readability is essential</a>. Machine learning relies on accurate, quality data and effective interaction between different modules and systems, which makes machine readability critical to make it effective.</p><p>You can help ensure your dark mode interface is machine-readable in the following ways:</p><ul><li><strong>Use clear, semantic markup.</strong><br />Write your HTML so that it naturally describes the structure of the page. This means using proper tags (like <code><header></code>, <code><nav></code>, <code><main></code>, and <code><footer></code>) 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.</li><li><strong>Keep the structure consistent across themes.</strong><br />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.</li><li><strong>Maintain good color contrast.</strong><br />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.</li><li><strong>Implement responsive styles with media queries.</strong><br />Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">CSS media queries like ‘prefers-color-scheme’</a> 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.</li></ul><p>Making sure that data, especially in automated systems, is clear and accessible prevents functionality breakdowns and guarantees seamless workflows.</p>Best Strategies For Designing Accessible Dark Themes<p>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, <strong>practicality is what matters</strong>. Fortunately, the strategies below fit the description to a tee. </p><h3>Strengthen Contrast For Usability</h3><p>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:</p><ul><li><strong>Rethink background choices.</strong><br />Instead of pure black, which can cause harsh contrast and eye strain, <a href="https://www.color-hex.com/color/121212">use dark gray shades like #121212</a>. These tones offer a softer, more adaptable visual experience.</li><li><strong>Prioritize key elements.</strong><br />Ensure interactive elements like buttons and links <a href="https://www.w3.org/TR/WCAG20-TECHS/G18.html">have contrast ratios exceeding 4.5:1</a>. This not only aids readability but also emphasizes functionality.</li><li><strong>Test in real environments.</strong><br />Simulate low-light and high-glare conditions to see how contrast performs in real-life scenarios.</li></ul><h3>Pay Special Attention To Typography In Dark Themes</h3><p>The <a href="https://www.smashingmagazine.com/2012/04/when-typography-speaks-louder-than-words/">use of effective typography is vital</a> 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. </p><p><img src="https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/2-darkmode-font.png" /></p><p>Thus, when designing dark themes, it’s essential to prioritize text clarity without sacrificing aesthetics. You can do this by prioritizing:</p><ul><li><strong>Sans-serif fonts</strong><br />They are often <a href="https://www.kimp.io/sans-serif-fonts/">the best option for dark mode</a>, as they offer a clean, modern look and remain highly readable when paired with a well-balanced contrast. </li><li><strong>Strategic use of light elements</strong><br />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.</li><li><strong>Proper font metrics and stylization</strong><br />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.</li></ul><h3>Make Sure Your Color Integration Is Thoughtful</h3><p>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. </p><p>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:</p><ul><li><strong>Low vision</strong>: Ensure text is clear with strong contrast and scalable fonts. Avoid thin typefaces and cluttered layouts for better readability.</li><li><strong>Light sensitivity</strong> (photophobia): Minimize bright elements against dark backgrounds to reduce eye strain. Provide brightness and contrast adjustment options for comfort.</li><li><strong>Glaucoma</strong>: Use bold, clear fonts and simplify layouts to minimize visual confusion. Focus on reducing clutter and enhancing readability.</li><li><strong>Macular degeneration</strong>: Provide large text and high-contrast visuals to aid users with central vision loss. Refrain from relying on centrally aligned, intricate elements.</li><li><strong>Diabetic retinopathy</strong>: Keep designs simple, avoiding patterns or textures that obscure content. Use high-contrast and well-spaced elements for clarity.</li><li><strong>Retinitis pigmentosa</strong>: Place essential elements centrally with high contrast for those with peripheral vision loss. Avoid spreading critical information across wide areas.</li><li><strong>Cataracts</strong>: Reduce glare by using dark gray backgrounds instead of pure black. Incorporate soft, muted colors, and avoid sharp contrasts.</li><li><strong>Night blindness</strong>: Provide bright, legible text with balanced contrast against dark themes. Steer clear of overly dim elements that can strain vision.</li></ul><p>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 <strong>make it as accessible as possible for as many users as possible</strong>, and you can always make adjustments in later iterations if there are major issues for a segment of users.</p><p><img src="https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/3-examples-different-dark-mode-apps.png" /></p>Understanding Color Perception And Visual Impairments To Get The Ideal Dark Mode<p>Even though dark mode doesn’t target only users with visual impairments, their input and ease of use are perhaps the most important. </p><p>The <a href="https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/">role of color perception</a> 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.</p><p>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 <a href="https://www.smashingmagazine.com/2018/03/guide-user-testing/">testing your color palette across different displays and lighting conditions</a> 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.</p><p>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.</p><p><img src="https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/4-slack-visual-impairments.png" /></p><p>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. </p>Making Dark Mode A User Choice<p>Dark mode is often celebrated for its ability to reduce screen glare and blue light, making it more comfortable for users <a href="https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/">who experience certain visual sensitivities</a>, like eye strain or discomfort from bright screens. </p><p>For many, this creates a more pleasant browsing experience, particularly in low-light environments. However, dark mode isn’t a perfect solution for everyone.</p><p><img src="https://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/5-light-mode-vs-dark-mode.png" /></p><p>Users with astigmatism, for instance, <a href="https://www.boia.org/blog/dark-mode-can-improve-text-readability-but-not-for-everyone">may find it difficult to read light text on a dark background</a>. 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.</p><p>These different factors mean that <strong>adaptability</strong> is important to better accommodate users who may have certain visual sensitivities. You can <a href="https://stackoverflow.com/questions/73693983/add-button-to-switch-between-light-and-dark-mode-using-two-prefers-color-scheme">allow users to toggle between dark and light modes</a> based on their preferences. For even greater comfort, think of providing options to customize text colors and background shades.</p><p>Switching between dark and light modes should also be <strong>smooth</strong> and <strong>unobtrusive</strong>. Whether you’re working in a bright office or relaxing in a dimly lit room, the transition should never disrupt your workflow. </p><p>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.</p>Conclusion<p>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 <a href="https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/">designs are inclusive and user-friendly</a> for all of your users.</p><p>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. </p>]]></content:encoded> <author>hello@smashingmagazine.com (Alex Williams)</author> <enclosure url="http://files.smashing.media/articles/inclusive-dark-mode-designing-accessible-dark-themes/inclusive-dark-mode-designing-accessible-dark-themes.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Gild Just One Lily]]></title> <link>https://smashingmagazine.com/2025/04/gild-just-one-lily/</link> <guid>https://smashingmagazine.com/2025/04/gild-just-one-lily/</guid> <pubDate>Thu, 10 Apr 2025 15:00:00 GMT</pubDate> <description><![CDATA[“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.]]></description> <content:encoded><![CDATA[<p>The phrase “gild the lily” implies <a href="https://grammarist.com/usage/gild-the-lily/">unnecessary ornamentation</a>, 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 <em>unnecessary</em> ornamentation in design is exactly what you need.</p><p>When your design is solid, and you’ve nailed the fundamentals, adding <em>one</em> layer of decoration can help communicate <strong>a level of care</strong> and <strong>attention</strong>.</p>First, You Need A Lily<p>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 <em>already great</em>. If not, you don’t have a lily. Get back to work on the fundamentals and check back in later (or keep reading anyhow).</p><p>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 <em>lily</em> part of the metaphor). A touch of metaphorical gold foil on the surface can send a message of delight with <strong>a hint of decadence</strong>.</p><p>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.</p>Gild Sparingly<blockquote>If we go too far with our gilding, we can communicate indulgence and excess rather than a hint of decadence.</blockquote> <p>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.</p>Wink At The Audience (Once)<p>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 <em>fun</em> to notice and appreciate a great design.</p><p>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 (<strong><code>#FFFFFF</code></strong>) 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, <strong><code>#CCCCCC</code></strong>). It’s so clear from the general level of refinement and production quality on the Apple site that the white background is a deliberate <em>choice</em>.</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/1-apple-wwebsite.png" /></p><p>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.</p><p>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.</p><blockquote>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.</blockquote> <p>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.</p>Digital Lilies<p>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:</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/2-supabase-site.png" /></p><p><strong>Not-quite black and not-quite white</strong>: Instead of solid black (<strong><code>#000000</code></strong>) and solid white (<strong><code>#FFFFFF</code></strong>) colors on the web, <a href="https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/">find subtle variations</a>. 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 <a href="https://www.a11yproject.com/checklist/#color-contrast">preserve enough contrast to ensure accessible text</a>.</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/3-comeau-example.png" /></p><p><strong>Layered and color-hinted shadows</strong>: <a href="https://www.joshwcomeau.com/css/designing-shadows/">Josh Comeau writes about bringing color into shadows</a>, including a <a href="https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/">tool to help generate shadows</a> that just feel better.</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/4-chart-utopia-blog.png" /></p><p><strong>Comfortable lettering</strong>: Find a comfortable line height and letter spacing for the font family you’re using. A responsive type system like <a href="https://utopia.fyi/">Utopia</a> can help define spacing that looks and feels comfortable across a variety of device sizes.</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/5-one-react-framework-site.png" /></p><p><strong>A touch of color</strong>: 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 <a href="https://onestack.dev/">site for the One React web framework</a> 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.</p><p><img src="https://files.smashing.media/articles/gild-just-one-lily/6-a-list-apart-site.png" /></p><p><strong>Illustration and photography</strong>: 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 <em>must</em> have been crafted just for this case. <a href="https://alistapart.com/article/the-wax-and-the-wane-of-the-web/"><em>A List Apart</em></a> has commissioned a unique illustration in a consistent style for each of their articles for <em>decades</em>. You don’t have to be a gifted illustrator. There may be charm in your amateur scribbles. If not, <a href="https://hicks.design/">hire a great artist</a>.</p>Beware, Cheap Gilding<p>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.</p><p>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.</p><p>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.</p><p>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.</p><p>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.</p>Does Anyone Care?<p>Is everyone going to notice that the drop shadows on your website have a hint of color? No. Is <em>anyone</em> going to notice? Maybe not. If you get the details right, though, people will <em>feel</em> it. These levels of polish are <strong>cumulative</strong>, contributing one percent here and there to the overall experience. They may not notice the hue of your drop shadow, but they may <strong>impart some trust</strong> from a sense of the care that went into the design.</p><p>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 <em>feel</em> the difference.</p><p>On that next project, allow yourself to gild just one lily.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Steven Garrity)</author> <enclosure url="http://files.smashing.media/articles/gild-just-one-lily/gild-just-one-lily.jpg" length="0" type="image/jpg"/> </item> <item> <title><![CDATA[Using Manim For Making UI Animations]]></title> <link>https://smashingmagazine.com/2025/04/using-manim-making-ui-animations/</link> <guid>https://smashingmagazine.com/2025/04/using-manim-making-ui-animations/</guid> <pubDate>Tue, 08 Apr 2025 15:00:00 GMT</pubDate> <description><![CDATA[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.]]></description> <content:encoded><![CDATA[<p>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 <strong>“a variable stores a value.”</strong> That sounds straightforward, but if you are a beginner just starting, then it can also be a bit confusing. <em>How</em> does a variable store or hold something? <em>What</em> happens when we assign a new value to it?</p><p>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.</p><p>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. </p><p><img src="https://files.smashing.media/articles/using-manim-making-ui-animations/1-create-account-replit.png" /></p><h3>2. Click “Create App”</h3><p>You’ll see three options:</p><ol><li>“Create With Replit Agent”,</li><li>“Choose a Template”,</li><li>“Import from GitHub”.</li></ol><p><img src="https://files.smashing.media/articles/using-manim-making-ui-animations/2-replit-create-app.png" /></p><h3>3. Select “Choose a Template”</h3><p>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 <code>main.py</code> file, a media folder, and all of the required dependencies).</p><p><img src="https://files.smashing.media/articles/using-manim-making-ui-animations/3-replit-choose-template.png" /></p><p><em>Voilà!</em> Now you can start coding your animations right away!</p>Using Manim For Math, Code, And UI/UX Visuals<p>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. </p><h3>1. Math & Geometry Visuals</h3><p>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 <strong>derivatives</strong> or <strong>transformations</strong>. </p><a href="https://files.smashing.media/articles/using-manim-making-ui-animations/4-manim-graphs.gif"><img src="https://files.smashing.media/articles/using-manim-making-ui-animations/4-manim-graphs-800px.gif" /></a>(<a href="https://files.smashing.media/articles/using-manim-making-ui-animations/4-manim-graphs.gif">Large preview</a>) <p>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.</p><a href="https://files.smashing.media/articles/using-manim-making-ui-animations/5-manim-triangle.gif"><img src="https://files.smashing.media/articles/using-manim-making-ui-animations/5-manim-triangle.gif" /></a> <h3>2. Coding & Algorithms</h3><p>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. </p><p>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 <a href="https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm">Dijkstra’s shortest path</a> become clearer when you watch the path being calculated in real time, even if you may not have a background in math.</p><h3>3. UI/UX Concepts & Motion Design</h3><p>Although Manim is not a UI/UX design tool, it can be useful for <strong>demonstrating designs</strong>. 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.</p><p>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.</p>Let’s Manim!<p>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:</p><ul><li>Mobjects,</li><li>Animations,</li><li>Scenes.</li></ul><h3>1. Mobjects (Mathematical Objects)</h3><p>Everything you display in Manim is a Mobject (short for “mathematical object”). There are different types:</p><ul><li>Basic shapes like <strong><code>Circle()</code></strong>, <strong><code>Rectangle()</code></strong>, and <strong><code>Arrow()</code></strong>,</li><li>Text elements for adding labels, and</li><li>Advanced structures like graphs, axes, and bar charts.</li></ul><p>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: </p><pre><code>from manim import * class MobjectExample(Scene): def construct(self): circle = Circle() # Create a circle circle.set_fill(BLUE, opacity=0.5) # Set color and transparency self.add(circle) # Add to the scene self.wait(2)</code></pre> <p>A blue circle will appear for about two seconds when you run this:</p><h3>2. Animations</h3><p>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 <strong><code>Animation</code></strong> <code>class</code>. </p><p>If we use the same circle example from earlier, we can add animations to see how it works and compare the visual differences: </p><pre><code>from manim import * class AnimationExample(Scene): def construct(self): circle = Circle() circle.set_fill(BLUE, opacity=0.5) self.play(FadeIn(circle)) self.play(circle.animate.shift(RIGHT * 2)) self.play(circle.animate.scale(1.5)) self.play(Rotate(circle, angle=PI/4)) self.wait(2)</code></pre> <p>Here, we are making a move, scaling up, and rotating. The <code>play()</code> method is what makes animations run. For example, <code>FadeIn(circle)</code> makes the circle gradually appear, and <code>circle.animate.shift(RIGHT * 2)</code> moves it two units to the right. If you want to slow things down, you can add <code>run_time</code> to control the duration, like the following: </p><pre><code>self.play(circle.animate.scale(2), run_time=3),</code></pre> <p>This makes the scaling take three more seconds instead of the default amount of time:</p><h3>3. Scenes</h3><p>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 <code>Scene</code>, and it contains a <code>construct()</code> method. This is where we write our animation logic. For example,</p><pre><code>class SimpleScene(Scene): def construct(self): text = Text("Hello, Manim!") self.play(Write(text)) self.wait(2)</code></pre> <p>This creates a simple text animation where the words appear as if being written.</p>Bringing Manim To Design<p>As we discussed earlier, Manim is a great tool for UI/UX designers and front-end developers to <strong>visualize user interactions</strong> or to <strong>explain UI concepts</strong>. 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.</p><p>With this in mind, let’s create a simple flow where a user clicks a button, leading to a new page: </p><div><pre><code>from manim import * class UIInteraction(Scene): def construct(self): # Create a homepage screen homepage = Rectangle(width=6, height=3, color=BLUE) homepage_label = Text("Home Page").scale(0.8) homepage_group = VGroup(homepage, homepage_label) # Create a button button = RoundedRectangle(width=1.5, height=0.6, color=RED).shift(DOWN * 1) button_label = Text("Click Me").scale(0.5).move_to(button) button_group = VGroup(button, button_label) # Add homepage and button self.add(homepage_group, button_group) # Simulating a button click self.play(button.animate.set_fill(RED, opacity=0.5)) # Button press effect self.wait(0.5) # Pause to simulate user interaction # Create a new page (simulating navigation) new_page = Rectangle(width=6, height=3, color=GREEN) new_page_label = Text("New Page").scale(0.8) new_page_group = VGroup(new_page, new_page_label) # Animate transition to new page self.play(FadeOut(homepage_group, shift=UP), # Move old page up FadeOut(button_group, shift=UP), # Move button up FadeIn(new_page_group, shift=DOWN)) # Bring new page from top self.wait(2)</code></pre></div> <p>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. </p><p>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: </p><div><pre><code>from manim import * class ScrollEffect(Scene): def construct(self): # Create three sections to simulate a webpage section1 = Rectangle(width=6, height=3, color=BLUE).shift(UP*3) section2 = Rectangle(width=6, height=3, color=GREEN) section3 = Rectangle(width=6, height=3, color=RED).shift(DOWN*3) # Add text to each section text1 = Text("Welcome", font_size=32).move_to(section1) text2 = Text("About Us", font_size=32).move_to(section2) text3 = Text("Contact", font_size=32).move_to(section3) self.add(section1, section2, section3, text1, text2, text3) self.wait(1) # Simulate scrolling down self.play( section1.animate.shift(DOWN*6), section2.animate.shift(DOWN*6), section3.animate.shift(DOWN*6), text1.animate.shift(DOWN*6), text2.animate.shift(DOWN*6), text3.animate.shift(DOWN*6), run_time=3 ) self.wait(1)</code></pre></div> <p>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.</p>Wrapping Up<p>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.</p><p>But what I hope you take away from all of this is that <strong>subtle animations can help communicate and clarify concepts</strong> 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.</p>]]></content:encoded> <author>hello@smashingmagazine.com (Joas Pambou)</author> <enclosure url="http://files.smashing.media/articles/using-manim-making-ui-animations/using-manim-making-ui-animations.jpg" length="0" type="image/jpg"/> </item> </channel></rss>If you would like to create a banner that links to this page (i.e. this validation result), do the following:
Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):
If you would like to create a text link instead, here is the URL you can use:
http://www.feedvalidator.org/check.cgi?url=http%3A//rss1.smashingmagazine.com/feed/
