<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 highlight const moveHighlight = () =&gt; { 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 highlight const moveHighlight = () =&gt; { // ... } // display the highlight when the page loads moveHighlight(); </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>&lt;nav&gt; - &lt;div id="highlight"&gt;&lt;/div&gt; &lt;a href="#" class="active"&gt;Home&lt;/a&gt; &lt;a href="#services"&gt;Services&lt;/a&gt; &lt;a href="#about"&gt;About&lt;/a&gt; &lt;a href="#contact"&gt;Contact&lt;/a&gt; &lt;/nav&gt; </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 click navbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } document.startViewTransition(() =&gt; { 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 applied const setActiveElement = (elem) =&gt; { document.querySelector('nav a.active').classList.remove('active'); elem.classList.add('active'); } // Start view transition and pass in a callback on click navbar.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(() =&gt; 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>

<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>&lt;text&gt;</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>&lt;text&gt;</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>&lt;path&gt;</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>&lt;line&gt;</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>&lt;path d="M 10 55 H 100" /&gt; &lt;line x1="10" y1="55" x2="100" y2="55" /&gt; </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>&lt;line&gt;</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>&lt;path d="M0 0 L86.6 50 L0 100 Z" /&gt; &lt;polygon points="0,0 86.6,50 0,100" /&gt; &lt;path d="M0 0 L86.6 50 L0 100" /&gt; &lt;polyline points="0,0 86.6,50 0,100" /&gt; </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>&lt;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"&gt;&lt;/path&gt; </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>

<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>

<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>&lt;svg ...&gt; &lt;defs&gt; &lt;!-- ... --&gt; &lt;/defs&gt; &lt;path fill="url(#grad)" d="…"/&gt; &lt;!-- TITLE GRAPHIC --&gt; &lt;g&gt; &lt;path … /&gt; &lt;!-- ... --&gt; &lt;/g&gt; &lt;/svg&gt; </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>&lt;svg ...&gt; &lt;defs&gt; &lt;linearGradient id="grad" …&gt;…&lt;/linearGradient&gt; &lt;filter id="trail" …&gt;…&lt;/filter&gt; &lt;/defs&gt; &lt;!-- GRADIENT --&gt; &lt;!-- TRAIL --&gt; &lt;path filter="url(#trail)" …/&gt; &lt;!-- TITLE GRAPHIC --&gt; &lt;/svg&gt; </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>&lt;svg ...&gt; &lt;!-- GRADIENT --&gt; &lt;!-- TRAIL --&gt; &lt;!-- STARS --&gt; &lt;!-- TITLE GRAPHIC --&gt; &lt;/svg&gt; </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>&lt;g id="yogi"&gt;...&lt;/g&gt; </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>&lt;g id="broom"&gt;...&lt;/g&gt; </code></pre> <p>Followed by grouped elements for his body, head, collar, and tie:</p> <pre><code>&lt;g id="yogi"&gt; &lt;g id="broom"&gt;…&lt;/g&gt; &lt;g id="body"&gt;…&lt;/g&gt; &lt;g id="head"&gt;…&lt;/g&gt; &lt;g id="collar"&gt;…&lt;/g&gt; &lt;g id="tie"&gt;…&lt;/g&gt; &lt;/g&gt; </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>&lt;use&gt;</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>&lt;g id="stars"&gt; &lt;path class="star-small" fill="#eae3da" d="..."/&gt; &lt;path class="star-medium" fill="#eae3da" d="..."/&gt; &lt;path class="star-large" fill="#eae3da" d="..."/&gt; &lt;!-- ... --&gt; &lt;/g&gt; </code></pre> <p>Moving the stars’ <code>fill</code> attribute values to their parent group reduces the overall weight a little:</p> <pre><code>&lt;g id="stars" fill="#eae3da"&gt; &lt;path class="star-small" d="…"/&gt; &lt;path class="star-medium" d="…"/&gt; &lt;path class="star-large" d="…"/&gt; &lt;!-- ... --&gt; &lt;/g&gt; </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>&lt;defs&gt; &lt;path id="star-large" fill="#eae3da" fill-rule="evenodd" d="…"/&gt; &lt;path id="star-medium" fill="#eae3da" fill-rule="evenodd" d="…"/&gt; &lt;path id="star-small" fill="#eae3da" fill-rule="evenodd" d="…"/&gt; &lt;/defs&gt; </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>&lt;use&gt;</code> and position them with <code>x</code> and <code>y</code> attributes:</p> <pre><code>&lt;g id="stars"&gt; &lt;!-- Large stars --&gt; &lt;use href="#star-large" x="1575" y="495"/&gt; &lt;!-- ... --&gt; &lt;!-- Medium stars --&gt; &lt;use href="#star-medium" x="1453" y="696"/&gt; &lt;!-- ... --&gt; &lt;!-- Small stars --&gt; &lt;use href="#star-small" x="1287" y="741"/&gt; &lt;!-- ... --&gt; &lt;/g&gt; </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>

<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 &amp; 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 &amp; 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>

<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 &amp; 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>

<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&amp;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>

<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 blocking function 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>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script&gt; document.cookie = "thirdparty_test=1; SameSite=None; Secure; Path=/;"; const cookieFound = document.cookie.includes("thirdparty_test=1"); const sendResult = (status) =&gt; window.parent?.postMessage(status, "*"); if (cookieFound &amp;&amp; document.hasStorageAccess instanceof Function) { document.hasStorageAccess().then((hasAccess) =&gt; { sendResult(hasAccess ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED"); }).catch(() =&gt; sendResult("TP_COOKIE_BLOCKED")); } else { sendResult(cookieFound ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED"); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </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) =&gt; { const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = "<a href="https://cookietest.example.com/cookie-check.html%22">https://cookietest.example.com/cookie-check.html"</a>; // your subdomain document.body.appendChild(iframe); let resolved = false; const cleanup = (result, timedOut = false) =&gt; { if (resolved) return; resolved = true; window.removeEventListener('message', onMessage); iframe.remove(); resolve({ thirdPartyCookiesEnabled: result, timedOut }); }; const onMessage = (event) =&gt; { if (["TP_COOKIE_SUPPORTED", "TP_COOKIE_BLOCKED"].includes(event.data)) { cleanup(event.data === "TP_COOKIE_SUPPORTED", false); } }; window.addEventListener('message', onMessage); setTimeout(() =&gt; cleanup(false, true), 1000); }); } </code></pre> </div> <p>Example usage:</p> <div> <pre><code>checkThirdPartyCookies().then(({ thirdPartyCookiesEnabled, timedOut }) =&gt; { 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>&lt;button id="enable-cookies"&gt;This embedded content requires cookie access. Click below to continue.&lt;/button&gt; &lt;script&gt; document.getElementById('enable-cookies')?.addEventListener('click', async () =&gt; { if (document.requestStorageAccess &amp;&amp; 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", "*"); } } }); &lt;/script&gt; </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 &amp;&amp; canSetCookie &amp;&amp; hasStorageAccess, raw: { hasCookieAPI, canSetCookie, hasStorageAccess } }; } </code></pre> </div> <p>Example usage:</p> <div> <pre><code>inferCookieSupportFallback().then(({ inferredThirdPartyCookies }) =&gt; { 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>// Parent const iframe = document.getElementById('my-iframe'); iframe.onload = () =&gt; { 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! ); }; // iframe window.addEventListener('message', (event) =&gt; { 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>

<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 &amp; 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="https://www.smashingmagazine.com/#"> Video + UX Training</a></li> <li><a href="https://www.smashingmagazine.com/#">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 &amp; 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>

<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 &amp; 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>