FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 2895, column 128: title should not contain HTML: code (4 occurrences) [help]

... o Browser-Native Internationalization]]></title>
                                             ^

line 3410, column 3: content:encoded should not contain relative URL references: # (31 occurrences) [help]
```
]]></content:encoded>
   ^
```

line 6000, column 0: description should not contain data-product-sku attribute [help]

            <description><![CDATA[Meet “Accessible UX Research,” our upcomin ...

line 6000, column 0: description should not contain data-component attribute [help]

            <description><![CDATA[Meet “Accessible UX Research,” our upcomin ...

line 6000, column 0: description should not contain data-product-path attribute [help]

            <description><![CDATA[Meet “Accessible UX Research,” our upcomin ...

line 6000, column 0: description should not contain data-silent attribute [help]

            <description><![CDATA[Meet “Accessible UX Research,” our upcomin ...

line 6000, column 514: description should not contain relative URL references: /printed-books/accessible-ux-research/ [help]

... silent="true">Pre-order the book.</a>]]></description>
                                             ^

Source: http://rss1.smashingmagazine.com/feed/

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Articles on Smashing Magazine — For Web Designers And Developers</title>
<link>https://www.smashingmagazine.com/</link>
<description>Recent content in Articles on Smashing Magazine — For Web Designers And Developers</description>
<lastBuildDate>Fri, 19 Sep 2025 00:33:03 GMT</lastBuildDate>
<docs>https://validator.w3.org/feed/docs/rss2.html</docs>
<generator>manual</generator>
<language>en</language>
<image>
<title>Articles on Smashing Magazine — For Web Designers And Developers</title>
<url>https://www.smashingmagazine.com/images/favicon/app-icon-512x512.png</url>
<link>https://www.smashingmagazine.com/</link>
</image>
<copyright>All rights reserved 2025, Smashing Media AG</copyright>
<category>Development</category>
<category>Design</category>
<category>UX</category>
<category>Mobile</category>
<category>Front-end</category>
<atom:link href="https://www.smashingmagazine.com/feed/" rel="self" type="application/rss+xml"/>
<item>
<title><![CDATA[How To Minimize The Environmental Impact Of Your Website]]></title>
<link>https://smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/</link>
<guid>https://smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/</guid>
<pubDate>Thu, 18 Sep 2025 10:00:00 GMT</pubDate>
<description><![CDATA[As responsible digital professionals, we are becoming increasingly aware of the environmental impact of our work and need to find effective and pragmatic ways to reduce it. James Chudley shares a new decarbonising approach that will help you to minimise the environmental impact of your website, benefiting people, profit, purpose, performance, and the planet.]]></description>
<content:encoded><![CDATA[Climate change is the single biggest health threat to humanity, accelerated by human activities such as the burning of fossil fuels, which generate greenhouse gases that trap the sun’s heat.
The average temperature of the earth’s surface is now <a href="https://www.un.org/en/climatechange/what-is-climate-change">1.2°C warmer than it was in the late 1800’s, and projected to more than double by the end of the century.</a> 
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/1-climate-stripes.png" />
The consequences of climate change include intense droughts, water shortages, severe fires, melting polar ice, catastrophic storms, and declining biodiversity. 
The Internet Is A Significant Part Of The Problem
Shockingly, the <a href="https://www.wholegraindigital.com/blog/new-sustainable-web-design-model-changes-the-context-of-internet-emissions/">internet is responsible for higher global greenhouse emissions than the aviation industry</a>, and is <a href="https://climateproductleaders.org/">projected to be responsible for 14% of all global greenhouse gas emissions by 2040</a>.
If the internet were a country, it would be <a href="https://www.sustainablewebmanifesto.com/">the 4th largest polluter in the world</a> and represents the <a href="https://www.mozillafoundation.org/en/blog/internet-climate-change-fixes/">largest coal-powered machine on the planet</a>.
But how can something digital like the internet produce harmful emissions?
Internet emissions come from powering the infrastructure that drives the internet, such as the vast data centres and data transmission networks that consume huge amounts of electricity.
Internet emissions also come from the global manufacturing, distribution, and usage of the estimated 30.5 billion devices (phones, laptops, etc.) that we use to access the internet.
Unsurprisingly, internet related emissions are increasing, <a href="https://www.nature.com/articles/s41467-024-47621-w">given that 60% of the world’s population spend, on average, 40% of their waking hours online</a>.
We Must Urgently Reduce The Environmental Impact Of The Internet
As responsible digital professionals, we must act quickly to minimise the environmental impact of our work. 
It is encouraging to see the UK government encourage action by adding “<a href="https://www.gov.uk/guidance/government-design-principles#minimise-environmental-impact">Minimise environmental impact</a>” to their best practice design principles, but there is still too much talking and not enough corrective action taking place within our industry.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/politicians-discussing-climate-change.jpg" />
The reality of many tightly constrained, fast-paced, and commercially driven web projects is that minimising environmental impact is far from the agenda.
So how can we make the environment more of a priority and talk about it in ways that stakeholders will listen to?
A eureka moment on a recent web optimisation project gave me an idea.
My Eureka Moment
I led a project to optimise the mobile performance of <a href="http://www.talktofrank.com">www.talktofrank.com</a>, a government drug advice website that aims to keep everyone safe from harm.
Mobile performance is critically important for the success of this service to ensure that users with older mobile devices and those using slower network connections can still access the information they need.
Our work to minimise page weights focused on purely technical changes that our developer made following recommendations from tools such as <a href="https://developer.chrome.com/docs/lighthouse/overview">Google Lighthouse</a> that reduced the size of the webpages of a key user journey by up to 80%. This resulted in pages downloading up to 30% faster and the carbon footprint of the journey being reduced by 80%.
We hadn’t set out to reduce the carbon footprint, but seeing these results led to my eureka moment. 
<blockquote>I realised that by minimising page weights, you improve performance (which is a win for users and service owners) and also consume less energy (due to needing to transfer and store less data), creating additional benefits for the planet — so everyone wins.</blockquote>
This felt like a breakthrough because business, user, and environmental requirements are often at odds with one another. By focussing on minimising websites to be as simple, lightweight and easy to use as possible you get benefits that extend beyond the <a href="https://online.hbs.edu/blog/post/what-is-the-triple-bottom-line">triple bottom line</a> of people, planet and profit to include performance and purpose.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/2-minimising-benefits.png" />
So why is ‘minimising’ such a great digital sustainability strategy?
<ul>
<li>Profit Website providers win because their website becomes more efficient and more likely to meet its intended outcomes, and a lighter site should also lead to lower hosting bills.</li>
<li>People People win because they get to use a website that downloads faster, is quick and easy to use because it's been intentionally designed to be as simple as possible, enabling them to complete their tasks with the minimum amount of effort and mental energy.</li>
<li>Performance Lightweight webpages download faster so perform better for users, particularly those on older devices and on slower network connections. </li>
<li>Planet The planet wins because the amount of energy (and associated emissions) that is required to deliver the website is reduced.</li>
<li>Purpose We know that we do our best work when we feel a sense of purpose. It is hugely gratifying as a digital professional to know that our work is doing good in the world and contributing to making things better for people and the environment.</li>
</ul>
In order to prioritise the environment, we need to be able to speak confidently in a language that will resonate with the business and ensure that any investment in time and resources yields the widest range of benefits possible.
So even if you feel that the environment is a very low priority on your projects, focusing on minimising page weights to improve performance (which is generally high on the agenda) presents the perfect trojan horse for an environmental agenda (should you need one).
Doing the right thing isn’t always easy, but we’ve done it before when managing to prioritise issues such as usability, accessibility, and inclusion on digital projects. 
Many of the things that make websites easier to use, more accessible, and more effective also help to minimise their environmental impact, so the things you need to do will feel familiar and achievable, so don’t worry about it all being another new thing to learn about!
So this all makes sense in theory, but what’s the master plan to use when putting it into practice?
The Masterplan
The masterplan for creating websites that have minimal environmental impact is to focus on offering the maximum value from the minimum input of energy.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/3-sustainability-masterplan.png" />
It’s an adaptation of <a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">Buckminister Fuller’s</a> <a href="https://en.wikipedia.org/wiki/Dymaxion">‘Dymaxion’</a> principle, which is one of his many progressive and groundbreaking sustainability strategies for living and surviving on a planet with finite resources.
Inputs of energy include both the electrical energy that is required to operate websites and also the mental energy that is required to use them. 
You can achieve this by minimising websites to their core content, features, and functionality, ensuring that everything can be justified from the perspective of meeting a business or user need. This means that anything that isn’t adding a proportional amount of value to the amount of energy it requires to provide it should be removed.
So that’s the masterplan, but how do you put it into practice?
Decarbonise Your Highest Value User Journeys
I’ve developed a new approach called ‘Decarbonising User Journeys’ that will help you to minimise the environmental impact of your website and maximise its performance.
Note: The approach deliberately focuses on optimising key user journeys and not entire websites to keep things manageable and to make it easier to get started. 
The secret here is to start small, demonstrate improvements, and then scale.
The approach consists of five simple steps:
<ol>
<li>Identify your highest value user journey,</li>
<li>Benchmark your user journey,</li>
<li>Set targets,</li>
<li>Decarbonise your user journey,</li>
<li>Track and share your progress.</li>
</ol>
Here’s how it works.
<h3>Step 1: Identify Your Highest Value User Journey</h3>
Your highest value user journey might be the one that your users value the most, the one that brings you the highest revenue, or the one that is fundamental to the success of your organisation. 
You could also focus on a user journey that you know is performing particularly badly and has the potential to deliver significant business and user benefits if improved.
You may have lots of important user journeys, and it’s fine to decarbonise multiple journeys in parallel if you have the resources, but I’d recommend starting with one first to keep things simple.
To bring this to life, let’s consider a hypothetical example of a premiership football club trying to decarbonise its online ticket-buying journey that receives high levels of traffic and is responsible for a significant proportion of its weekly income.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/ticket-user-journey.jpg" />
<h3>Step 2: Benchmark Your User Journey</h3>
Once you’ve selected your user journey, you need to benchmark it in terms of how well it meets user needs, the value it offers your organisation, and its carbon footprint. 
<blockquote>It is vital that you understand the job it needs to do and how well it is doing it before you start to decarbonise it. There is no point in removing elements of the journey in an effort to reduce its carbon footprint, for example, if you compromise its ability to meet a key user or business need.</blockquote>
You can benchmark how well your user journey is meeting user needs by conducting user research alongside analysing existing customer feedback. Interviews with business stakeholders will help you to understand the value that your journey is providing the organisation and how well business needs are being met.
You can benchmark the carbon footprint and performance of your user journey using online tools such as <a href="https://cardamon.io/">Cardamon</a>, <a href="https://ecograder.com/">Ecograder</a>, <a href="https://www.websitecarbon.com/">Website Carbon Calculator</a>, <a href="https://developer.chrome.com/docs/lighthouse/overview">Google Lighthouse</a>, and <a href="https://bioscore.com/">Bioscore</a>. Make sure you have your analytics data to hand to help get the most accurate estimate of your footprint.
To use these tools, simply add the URL of each page of your journey, and they will give you a range of information such as page weight, energy rating, and carbon emissions. <a href="https://developer.chrome.com/docs/lighthouse/overview">Google Lighthouse</a> works slightly differently via a browser plugin and generates a really useful and detailed performance report as opposed to giving you a carbon rating. 
A great way to bring your benchmarking scores to life is to visualise them in a similar way to how you would present a customer journey map or service blueprint. 
This example focuses on just communicating the carbon footprint of the user journey, but you can also add more swimlanes to communicate how well the journey is performing from a user and business perspective, too, adding user pain points, quotes, and business metrics where appropriate. 
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/5-carbon-footprint-user-journey.png" />
I’ve found that adding the energy efficiency ratings is really effective because it’s an approach that people recognise from their household appliances. This adds a useful context to just showing the weights (such as grams or kilograms) of CO2, which are generally meaningless to people.
Within my benchmarking reports, I also add a set of benchmarking data for every page within the user journey. This gives your stakeholders a more detailed breakdown and a simple summary alongside a snapshot of the benchmarked page.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/6-page-level-breakdowns.png" />
Your benchmarking activities will give you a really clear picture of where remedial work is required from an environmental, user, and business point of view. 
In our football user journey example, it’s clear that the ‘News’ and ‘Tickets’ pages need some attention to reduce their carbon footprint, so they would be a sensible priority for decarbonising.
<h3>Step 3: Set Targets</h3>
Use your benchmarking results to help you set targets to aim for, such as a carbon budget, energy efficiency, maximum page weight, and minimum Google Lighthouse performance targets for each individual page, in addition to your existing UX metrics and business KPIs. 
There is no right or wrong way to set targets. Choose what you think feels achievable and viable for your business, and you’ll only learn how reasonable and achievable they are when you begin to decarbonise your user journeys.
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/7-carbon-footprint-targets.png" />
Setting targets is important because it gives you something to aim for and keeps you focused and accountable. The quantitative nature of this work is great because it gives you the ability to quickly demonstrate the positive impact of your work, making it easier to justify the time and resources you are dedicating to it.
<h3>Step 4: Decarbonise Your User Journey</h3>
Your objective now is to decarbonise your user journey by minimising page weights, improving your Lighthouse performance rating, and minimising pages so that they meet both user and business needs in the most efficient, simple, and effective way possible.
It’s up to you how you approach this depending on the resources and skills that you have, you can focus on specific pages or addressing a specific problem area such as heavyweight images or videos across the entire user journey.
Here’s a list of activities that will all help to reduce the carbon footprint of your user journey:
<ul>
<li>Work through the recommendations in the ‘diagnostics’ section of your <a href="https://developer.chrome.com/docs/lighthouse/overview">Google Lighthouse</a> report to help optimise page performance.</li>
<li>Switch to a green hosting provider if you are not already using one. Use the <a href="https://www.thegreenwebfoundation.org/tools/directory/">Green Web Directory</a> to help you choose one.</li>
<li>Work through the <a href="https://w3c.github.io/sustainableweb-wsg/">W3C Web Sustainability Guidelines</a>, implementing the most relevant guidelines to your specific user journey.</li>
<li>Remove anything that is not adding any user or business value.</li>
<li>Reduce the amount of information on your webpages to make them easier to read and less overwhelming for people.</li>
<li>Replace content with a lighter-weight alternative (such as swapping a video for text) if the lighter-weight alternative provides the same value.</li>
<li>Optimise assets such as photos, videos, and code to reduce file sizes.</li>
<li>Remove any barriers to accessing your website and any distractions that are getting in the way.</li>
<li>Re-use familiar components and design patterns to make your websites quicker and easier to use. </li>
<li>Write simply and clearly in plain English to help people get the most value from your website and to help them avoid making mistakes that waste time and energy to resolve.</li>
<li>Fix any usability issues you identified during your benchmarking to ensure that your website is as easy to use and useful as possible.</li>
<li>Ensure your user journey is as <a href="https://aaardvarkaccessibility.com/wcag-plain-english/">accessible</a> as possible so the widest possible audience can benefit from using it, offsetting the environmental cost of providing the website.</li>
</ul>
<h3>Step 5: Track And Share Your Progress</h3>
As you decarbonise your user journeys, use the benchmarking tools from step 2 to track your progress against the targets you set in step 3 and share your progress as part of your wider sustainability reporting initiatives.
All being well at this point, you will have the numbers to demonstrate how the performance of your user journey has improved and also how you have managed to reduce its carbon footprint. 
Share these results with the business as soon as you have them to help you secure the resources to continue the work and initiate similar work on other high-value user journeys.
You should also start to communicate your progress with your users.
It’s important that they are made aware of the carbon footprint of their digital activity and empowered to make informed choices about the environmental impact of the websites that they use. 
Ideally, every website should communicate the emissions generated from viewing their pages to help people make these informed choices and also to encourage website providers to minimise their emissions if they are being displayed publicly. 
Often, people will have no choice but to use a specific website to complete a specific task, so it is the responsibility of the website provider to ensure the environmental impact of using their website is as small as possible.
You can also help to raise awareness of the environmental impact of websites and what you are doing to minimise your own impact by publishing a digital sustainability statement, such as Unilever’s, as shown below. 
<img src="https://files.smashing.media/articles/how-minimize-environmental-impact-website/8-unilever-digital-sustainability-statement.png" />
A good digital sustainability statement should acknowledge the environmental impact of your website, what you have done to reduce it, and what you plan to do next to minimise it further.
As an industry, we should normalise publishing digital sustainability statements in the same way that accessibility statements have become a standard addition to website footers.
Useful Decarbonising Principles
Keep these principles in mind to help you decarbonise your user journeys:
<ul>
<li>More doing and less talking. Start decarbonising your user journeys as soon as possible to accelerate your learning and positive change.</li>
<li>Start small. Starting small by decarbonising an individual journey makes it easier to get started and generates results to demonstrate value faster.</li>
<li>Aim to do more with less. Minimise what you offer to ensure you are providing the maximum amount of value for the energy you are consuming.</li>
<li>Make your website as useful and as easy to use as possible. Useful websites can justify the energy they consume to provide them, ensuring they are net positive in terms of doing more good than harm.</li>
<li>Focus on progress over perfection. Websites are never finished or perfect but they can always be improved, every small improvement you make will make a difference.</li>
</ul>
Start Decarbonising Your User Journeys Today
Decarbonising user journeys shouldn’t be done as a one-off, reserved for the next time that you decide to redesign or replatform your website; it should happen on a continual basis as part of your broader <a href="https://docs.google.com/document/d/1adM94O0u-YMoFgkFg0FwoPASYevw_Xa6wCYKJL8Ni34/edit?usp=sharing">digital sustainability strategy</a>.
We know that websites are never finished and that the best websites continually improve as both user and business needs change. I’d like to encourage people to adopt the same mindset when it comes to minimising the environmental impact of their websites.
Decarbonising will happen most effectively when digital professionals challenge themselves on a daily basis to ‘minimise’ the things they are working on.
This avoids building ‘carbon debt’ that consists of compounding technical and design debt within our websites, which is always harder to retrospectively remove than avoid in the first place.
By taking a pragmatic approach, such as optimising high-value user journeys and aligning with business metrics such as performance, we stand the best possible chance of making digital sustainability a priority. 
You’ll have noticed that, other than using website carbon calculator tools, this approach doesn’t require any skills that don’t already exist within typical digital teams today. This is great because it means you’ve already got the skills that you need to do this important work.
I would encourage everyone to raise the issue of the environmental impact of the internet in their next team meeting and to try this decarbonising approach to create better outcomes for people, profit, performance, purpose, and the planet.
Good luck!
]]></content:encoded>
<author>hello@smashingmagazine.com (James Chudley)</author>
<enclosure url="http://files.smashing.media/articles/how-minimize-environmental-impact-website/how-minimize-environmental-impact-website.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[SerpApi: A Complete API For Fetching Search Engine Data]]></title>
<link>https://smashingmagazine.com/2025/09/serpapi-complete-api-fetching-search-engine-data/</link>
<guid>https://smashingmagazine.com/2025/09/serpapi-complete-api-fetching-search-engine-data/</guid>
<pubDate>Tue, 16 Sep 2025 17:00:00 GMT</pubDate>
<description><![CDATA[From competitive SEO research and monitoring prices to training AI and parsing local geographic data, real-time search results power smarter apps. Tools like SerpApi make it easy to pull, customize, and integrate this data directly into your app or website.]]></description>
<content:encoded><![CDATA[This article is a sponsored by <a href="https://serpapi.com/">SerpApi</a>
SerpApi leverages the power of search engine giants, like Google, DuckDuckGo, Baidu, and more, to put together the most pertinent and accurate search result data for your users from the comfort of your app or website. It’s customizable, adaptable, and offers an easy integration into any project.
What do you want to put together?
<ul>
<li>Search information on a brand or business for <a href="https://serpapi.com/use-cases/seo?utm_source=smashingmagazine">SEO purposes</a>;</li>
<li>Input data to <a href="https://serpapi.com/use-cases/machine-learning-and-artificial-intelligence?utm_source=smashingmagazine">train AI models</a>, such as the Large Language Model, for a customer service chatbot;</li>
<li>Top <a href="https://serpapi.com/use-cases/news-monitoring?utm_source=smashingmagazine">news</a> and websites to pick from for a subscriber newsletter;</li>
<li><a href="https://serpapi.com/google-flights-api?utm_source=smashingmagazine">Google Flights API</a>: collect flight information for your travel app;</li>
<li><a href="https://serpapi.com/use-cases/price-monitoring?utm_source=smashingmagazine">Price</a> comparisons for the same product across different platforms;</li>
<li>Extra definitions and examples for words that can be offered along a language learning app.</li>
</ul>
The list goes on. 
In other words, you get to leverage the most comprehensive source of data on the internet for any number of needs, from <a href="https://serpapi.com/use-cases/seo?utm_source=smashingmagazine">competitive SEO research</a> and <a href="https://serpapi.com/use-cases/news-monitoring?utm_source=smashingmagazine">tracking news</a> to <a href="https://serpapi.com/use-cases/local-seo?utm_source=smashingmagazine">parsing local geographic data</a> and even <a href="https://serpapi.com/use-cases/background-check-automation?utm_source=smashingmagazine">completing personal background checks</a> for employment.
Start With A Simple GET Request
The results from the <a href="https://serpapi.com?utm_source=smashingmagazine/#integrationsMountPoint">search API</a> are only a URL request away for those who want a super quick start. Just add your search details in the URL parameters. Say you need the search result for “Stone Henge” from the location “Westminster, England, United Kingdom” in language “en-GB”, and country of search origin “uk” from the domain “google.co.uk”. Here’s how simple it is to put the GET request together:
<div>
<pre><code><a href="https://serpapi.com/search.json?q=Stone+Henge&location=Westminster,+England,+United+Kingdom&hl=en-GB&gl=uk&google_domain=google.co.uk&api_key=your_api_key">https://serpapi.com/search.json?q=Stone+Henge&location=Westminster,+England,+United+Kingdom&hl=en-GB&gl=uk&google_domain=google.co.uk&api_key=your_api_key</a>
</code></pre>
</div>
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/1-get-request.png" />
Then there’s the impressive list of libraries that seamlessly integrate the APIs into mainstream programming languages and frameworks such as JavaScript, Ruby, .NET, and more. 
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/2-javascript-integration-code-serpapi.png" />
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/3-table-serpapi-libraries.png" />
Give It A Quick Try
Want to give it a spin? <a href="https://serpapi.com/users/sign_up?utm_source=smashingmagazine">Sign up and start for free</a>, or tinker with the SerpApi’s <a href="https://serpapi.com/playground?utm_source=smashingmagazine">live playground</a> without signing up. The playground allows you to choose which search engine to target, and you can fill in the values for all the basic parameters available in the chosen API to customize your search. On clicking “Search”, you get the search result page and its extracted JSON data.
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/4-serpapi-google-flights-api.png" />
If you need to get a feel for the full API first, you can explore their easy-to-grasp <a href="https://serpapi.com/search-api?utm_source=smashingmagazine">web documentation</a> before making any decision. You have the chance to work with all of the APIs to your satisfaction before committing to it, and when that time comes, SerpApi’s multiple <a href="https://serpapi.com/pricing?utm_source=smashingmagazine">price plans</a> tackle anywhere between an economic few hundred searches a month and bulk queries fit for large corporations.
What Data Do You Need?
Beyond the rudimentary search scraping, SerpApi provides a range of configurations, features, and additional APIs worth considering. 
<h3>Geolocation</h3>
Capture the global trends, or refine down to more localized particulars by names of locations or Google’s place identifiers. SerpApi’s optimized routing of requests ensures accurate retrieval of search result data from any location worldwide. If locations themselves are the answers to your queries — say, a cycle trail to be suggested in a fitness app — those can be extracted and presented as maps using SerpApi’s <a href="https://serpapi.com/google-maps-api?utm_source=smashingmagazine">Google Maps API</a>.
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/5-serpapi-geolocation.png" />
<h3>Structured JSON</h3>
Although search engines reveal results in a tidy user interface, deriving data into your application could cause you to end up with a large data dump to be sifted through — but not if you’re using SerpApi.
SerpApi pulls data in a well-structured JSON format, even for the popular kinds of enriched search results, such as knowledge graphs, review snippets, sports league stats, ratings, product listings, AI overview, and more.
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/6-serpapi-data-json-format.png" />
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/7-types-search-engine-results.png" />
<h3>Speedy Results</h3>
SerpApi’s baseline performance can take care of timely search data for real-time requirements. But what if you need more? SerpApi’s <a href="https://serpapi.com/ludicrous-speed">Ludicrous Speed</a> option, easily enabled from the dashboard with an upgrade, provides a super-fast response time. More than twice as fast as usual, thanks to twice the server power. 
There’s also <a href="https://serpapi.com/ludicrous-speed-max">Ludicrous Speed Max</a>, which allocates four times more server resources for your data retrieval. Data that is time-sensitive and for monitoring things in real-time, such as sports scores and tracking product prices, will lose its value if it is not handled in a timely manner. Ludicrous Speed Max guarantees no delays, even for a large-scale enterprise haul.
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/8-list-flight-prices.png" />
You can also use a relevant SerpApi API to hone in on your relevant category, like <a href="https://serpapi.com/google-flights-api?utm_source=smashingmagazine">Google Flights API</a>, <a href="https://serpapi.com/amazon-search-api?utm_source=smashingmagazine">Amazon API</a>, <a href="https://serpapi.com/google-news-api?utm_source=smashingmagazine">Google News API</a>, etc., to get fresh and apt results. 
If you don’t need the full depth of the <a href="https://serpapi.com?utm_source=smashingmagazine/#integrationsMountPoint">search</a> <a href="https://serpapi.com?utm_source=smashingmagazine/#integrationsMountPoint">API</a>, there’s a Light version available for Google Search, Google Images, Google Videos, Google News, and DuckDuckGo Search APIs. 
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/9-serpapi-api-list.png" />
<h3>Search Controls & Privacy</h3>
Need the results asynchronously picked up? Want a refined output using advanced <a href="https://serpapi.com?utm_source=smashingmagazine/#integrationsMountPoint">search</a> <a href="https://serpapi.com?utm_source=smashingmagazine/#integrationsMountPoint">API</a> parameters and a JSON Restrictor? Looking for search outcomes for specific devices? Don’t want auto-corrected query results? There’s no shortage of ways to configure SerpApi to get exactly what you need.
Additionally, if you prefer not to have your search metadata on their servers, simply turn on the <a href="https://serpapi.com/zero-trace-mode?utm_source=smashingmagazine">“ZeroTrace” mode</a> that’s available for selected plans. 
<h3>The X-Ray</h3>
Save yourself a headache, literally, trying to play match between what you see on a search result page and its extracted data in JSON. SerpApi’s <a href="https://serpapi.com/xray?utm_source=smashingmagazine">X-Ray tool</a> shows you where what comes from. It’s available and free in all plans.
<img src="https://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/10-serpapi-x-ray.png" />
<h3>Inclusive Support</h3>
If you don’t have the expertise or resources for tackling the validity of scraping search results, here’s what SerpApi says:
<blockquote>“SerpApi, LLC assumes scraping and parsing liabilities for both domestic and foreign companies unless your usage is otherwise illegal”.</blockquote>
You can reach out and have a conversation with them regarding the legal protections they offer, as well as inquire about anything else you might want to know about, including SerpApi in your project, such as pricing, performance expected, on-demand options, and technical support. Just drop a message at their <a href="https://serpapi.com/#contact">contact page</a>.
In other words, the SerpApi team has your back with the support and expertise to get the most from your fetched data.
<h3>Try SerpApi Free</h3>
That’s right, you can get your hands on SerpApi today and start fetching data with absolutely no commitment, thanks to a free starter plan that gives you up to 250 free search queries. Give it a try and then bump up to one of the reasonably-priced monthly subscription plans with generous search limits.
<ul>
<li><a href="https://serpapi.com/users/sign_up?utm_source=smashingmagazine">Try SerpApi</a></li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Preethi Sam)</author>
<enclosure url="http://files.smashing.media/articles/serpapi-complete-api-fetching-search-engine-data/serpapi-complete-api-fetching-search-engine-data.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Functional Personas With AI: A Lean, Practical Workflow]]></title>
<link>https://smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/</link>
<guid>https://smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/</guid>
<pubDate>Tue, 16 Sep 2025 08:00:00 GMT</pubDate>
<description><![CDATA[For too long, personas have been created with considerable effort, only to offer limited value. Paul Boag shows how to breathe new life into this stale UX asset and demonstrates that it’s possible to create truly useful functional personas in a lightweight way.]]></description>
<content:encoded><![CDATA[Traditional personas suck for UX work. They obsess over marketing metrics like age, income, and job titles while missing what actually matters in design: what people are trying to accomplish. 
<a href="https://boagworld.com/usability/personas/">Functional personas</a>, on the other hand, focus on what people are trying to do, not who they are on paper. With a simple AI‑assisted workflow, you can build and maintain personas that actually guide design, content, and conversion decisions.
<ul>
<li>Keep users front of mind with task‑driven personas,</li>
<li>Skip fragile demographics; center on goals, questions, and blockers,</li>
<li>Use AI to process your messy inputs fast and fill research gaps,</li>
<li>Validate lightly, ship confidently, and keep them updated.</li>
</ul>
In this article, I want to breathe new life into a stale UX asset.
<img src="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png" />
For too long, personas have been something that many of us just created, despite the considerable work that goes into them, only to find they have limited usefulness.
I know that many of you may have given up on them entirely, but I am hoping in this post to encourage you that it is possible to create truly useful personas in a lightweight way.
Why Personas Still Matter
Personas give you a shared lens. When everyone uses the same reference point, you cut debate and make better calls. For UX designers, developers, and digital teams, that shared lens keeps you from designing in silos and helps you prioritize work that genuinely improves the experience.
I use personas as a quick test: Would this change help this user complete their task faster, with fewer doubts? If the answer is no (or a shrug), it’s probably a sign the idea isn’t worth pursuing.
From Demographics To Function
Traditional personas tell you someone’s age, job title, or favorite brand. That makes a nice poster, but it rarely changes design or copy.
Functional personas flip the script. They describe:
<ul>
<li>Goals & tasks: What the person is here to achieve.</li>
<li>Questions & objections: What they need to know before they act.</li>
<li>Touchpoints: How the person interacts with the organization.</li>
<li>Service gaps: How the company might be letting this persona down.</li>
</ul>
When you center on tasks and friction, you get direct lines from user needs to UI decisions, content, and conversion paths. 
<img src="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png" />
But remember, this list isn’t set in stone — adapt it to what’s actually useful in your specific situation.
One of the biggest problems with traditional personas was following a rigid template regardless of whether it made sense for your project. We must not fall into that same mistake with functional personas.
The Benefits of Functional Personas
For small startups, functional personas reduce wasted effort. For enterprise teams, they keep sprawling projects grounded in what matters most. 
However, because of the way we are going to produce our personas, they provide certain benefits in either case:
<ul>
<li>Lighten the load: They’re easier to update without large research cycles.</li>
<li>Stay current: Because they are easy to produce, we can update them more often.</li>
<li>Tie to outcomes: Tasks, objections, and proof points map straight to funnels, flows, and product decisions.</li>
</ul>
We can deliver these benefits because we are going to use AI to help us, rather than carrying out a lot of time-consuming new research.
How AI Helps Us Get There
Of course, doing fresh research is always preferable. But in many cases, it is not feasible due to time or budget constraints. I would argue that using AI to help us create personas based on existing assets is preferable to having no focus on user attention at all.
AI tools can chew through the inputs you already have (surveys, analytics, chat logs, reviews) and surface patterns you can act on. They also help you scan public conversations around your product category to fill gaps. 
I therefore recommend using AI to:
<ul>
<li>Synthesize inputs: Turn scattered notes into clean themes.</li>
<li>Spot segments by need: Group people by jobs‑to‑be‑done, not demographics.</li>
<li>Draft quickly: Produce first‑pass personas and sample journeys in minutes.</li>
<li>Iterate with stakeholders: Update on the fly as you get feedback.</li>
</ul>
AI doesn’t remove the need for traditional research. Rather, it is a way of extracting more value from the scattered insights into users that already exist within an organization or online.
The Workflow
Here’s how to move from scattered inputs to usable personas. Each step builds on the last, so treat it as a cycle you can repeat as projects evolve.
<h3>1. Set Up A Dedicated Workspace</h3>
Create a dedicated space within your AI tool for this work. Most AI platforms offer project management features that let you organize files and conversations:
<ul>
<li>In ChatGPT and Claude, use “Projects” to store context and instructions.</li>
<li>In Perplexity, Gemini and CoPilot similar functionality is referred to as “Spaces.”</li>
</ul>
This project space becomes your central repository where all uploaded documents, research data, and generated personas live together. The AI will maintain context between sessions, so you won’t have to re-upload materials each time you iterate. This structured approach makes your workflow more efficient and helps the AI deliver more consistent results.
<img src="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png" />
<h3>2. Write Clear Instructions</h3>
Next, you can brief your AI project so that it understands what it wants from you. For example:
<blockquote>“Act as a user researcher. Create realistic, functional personas using the project files and public research. Segment by needs, tasks, questions, pain points, and goals. Show your reasoning.”</blockquote>
Asking for a rationale gives you a paper trail you can defend to stakeholders.
<h3>3. Upload What You’ve Got (Even If It’s Messy)</h3>
This is where things get really powerful. 
Upload everything (and I mean everything) you can put your hands on relating to the user. Old surveys, past personas, analytics screenshots, FAQs, support tickets, review snippets; dump them all in. The more varied the sources, the stronger the triangulation.
<h3>4. Run Focused External Research</h3>
Once you have done that, you can supplement that data by getting AI to carry out “deep research” about your brand. Have AI scan recent (I often focus on the last year) public conversations for your brand, product space, or competitors. Look for:
<ul>
<li>Who’s talking and what they’re trying to do;</li>
<li>Common questions and blockers;</li>
<li>Phrases people use (great for copywriting).</li>
</ul>
Save the report you get back into your project.
<h3>5. Propose Segments By Need</h3>
Once you have done that, ask AI to suggest segments based on tasks and friction points (not demographics). Push back until each segment is distinct, observable, and actionable. If two would behave the same way in your flow, merge them.
This takes a little bit of trial and error and is where your experience really comes into play. 
<h3>6. Generate Draft Personas</h3>
Now you have your segments, the next step is to draft your personas. Use a simple template so the document is read and used. If your personas become too complicated, people will not read them. Each persona should:
<ul>
<li>State goals and tasks,</li>
<li>List objections and blockers,</li>
<li>Highlight pain points,</li>
<li>Show touchpoints,</li>
<li>Identify service gaps.</li>
</ul>
Below is a sample template you can work with:
<pre><code># Persona Title: e.g. Savvy Shopper
- Person's Name: e.g. John Smith.
- Age: e.g. 24
- Job: e.g. Social Media Manager
"A quote that sums up the persona's general attitude"
## Primary Goal
What they’re here to achieve (1–2 lines).
## Key Tasks
• Task 1
• Task 2
• Task 3
## Questions & Objections
• What do they need to know before they act?
• What might make them hesitate?
## Pain Points
• Where do they get stuck?
• What feels risky, slow, or confusing?
## Touchpoints
• What channels are they most commonly interacting with?
## Service Gaps
• How is the organization currently failing this persona?
</code></pre>
Remember, you should customize this to reflect what will prove useful within your organization.
<h3>7. Validate</h3>
It is important to validate that what the AI has produced is realistic. Obviously, no persona is a true representation as it is a snapshot in time of a Hypothetical user. However, we do want it to be as accurate as possible. 
Share your drafts with colleagues who interact regularly with real users — people in support cells or research teams. Where possible, test with a handful of users. Then cut anything that you can’t defend or correct any errors that are identified.
Troubleshooting & Guardrails
As you work through the above process, you will encounter problems. Here are common pitfalls and how to avoid them:
<ul>
<li>Too many personas? Merge until each one changes a design or copy decision. Three strong personas beat seven weak ones.</li>
<li>Stakeholder wants demographics? Only include details that affect behavior. Otherwise, leave them out. Suggest separate personas for other functions (such as marketing).</li>
<li>AI hallucinations? Always ask for a rationale or sources. Cross‑check with your own data and customer‑facing teams.</li>
<li>Not enough data? Mark assumptions clearly, then validate with quick interviews, surveys, or usability tests.</li>
</ul>
Making Personas Useful In Practice
The most important thing to remember is to actually use your personas once they’ve been created. They can easily become forgotten PDFs rather than active tools. Instead, personas should shape your work and be referenced regularly. Here are some ways you can put personas to work:
<ul>
<li>Navigation & IA: Structure menus by top tasks.</li>
<li>Content & Proof: Map objections to FAQs, case studies, and microcopy.</li>
<li>Flows & UI: Streamline steps to match how people think.</li>
<li>Conversion: Match CTAs to personas’ readiness, goals, and pain points.</li>
<li>Measurement: Track KPIs that map to personas, not vanity metrics.</li>
</ul>
With this approach, personas evolve from static deliverables into dynamic reference points your whole team can rely on.
Keep Them Alive
Treat personas as a living toolkit. Schedule a refresh every quarter or after major product changes. Rerun the research pass, regenerate summaries, and archive outdated assumptions. The goal isn’t perfection; it’s keeping them relevant enough to guide decisions.
Bottom Line
Functional personas are faster to build, easier to maintain, and better aligned with real user behavior. By combining AI’s speed with human judgment, you can create personas that don’t just sit in a slide deck; they actively shape better products, clearer interfaces, and smoother experiences.
]]></content:encoded>
<author>hello@smashingmagazine.com (Paul Boag)</author>
<enclosure url="http://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/functional-personas-ai-lean-practical-workflow.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Creating Elastic And Bounce Effects With Expressive Animator]]></title>
<link>https://smashingmagazine.com/2025/09/creating-elastic-bounce-effects-expressive-animator/</link>
<guid>https://smashingmagazine.com/2025/09/creating-elastic-bounce-effects-expressive-animator/</guid>
<pubDate>Mon, 15 Sep 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Elastic and bounce effects have long been among the most desirable but time-consuming techniques in motion design. Expressive Animator streamlines the process, making it possible to produce lively animations in seconds, bypassing the tedious work of manual keyframe editing.]]></description>
<content:encoded><![CDATA[This article is a sponsored by <a href="https://expressive.app/">Expressive</a>
In the world of modern web design, SVG images are used everywhere, from illustrations to icons to background effects, and are universally prized for their crispness and lightweight size. While static SVG images play an important role in web design, most of the time their true potential is unlocked only when they are combined with motion.
Few things add more life and personality to a website than a well-executed SVG animation. But not all animations have the same impact in terms of digital experience. For example, elastic and bounce effects have a unique appeal in motion design because they bring a sense of realism into movement, making animations more engaging and memorable. 
<a href="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/grumpy-egg.gif"><img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/grumpy-egg-800.gif" /></a>(<a href="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/grumpy-egg.gif">Large preview</a>)
However, anyone who has dived into animating SVGs knows <a href="https://www.smashingmagazine.com/2023/02/putting-gears-motion-animating-cars-with-html-svg/">the technical hurdles involved</a>. Creating a convincing elastic or bounce effect traditionally requires handling complex CSS keyframes or wrestling with JavaScript animation libraries. Even when using an SVG animation editor, it will most likely require you to manually add the keyframes and adjust the easing functions between them, which can become a time-consuming process of trial and error, no matter the level of experience you have.
This is where Expressive Animator shines. It allows creators to apply elastic and bounce effects in seconds, bypassing the tedious work of manual keyframe editing. And the result is always exceptional: animations that feel alive, produced with a fraction of the effort.
Using Expressive Animator To Create An Elastic Effect
Creating an elastic effect in Expressive Animator is remarkably simple, fast, and intuitive, since the effect is built right into the software as an easing function. This means you only need two keyframes (start and end) to make the effect, and the software will automatically handle the springy motion in between. Even better, the elastic easing can be applied to any animatable property (e.g., position, scale, rotation, opacity, morph, etc.), giving you a consistent way to add it to your animations.
Before we dive into the tutorial, take a look at the video below to see what you will learn to create and the entire process from start to finish.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/01-create-dialog.png" />
Once you hit the “Create project” button, you can use the <a href="https://expressive.app/expressive-animator/docs/v1/tools/pen-tool/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Pen</a> and <a href="https://expressive.app/expressive-animator/docs/v1/tools/ellipse-tool/">Ellipse</a> tools to create the artwork that will be animated, or you can simply copy and paste the artwork below.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/02-prepare-scene.png" />
Press the A key on your keyboard to switch to the <a href="https://expressive.app/expressive-animator/docs/v1/tools/node-tool/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Node tool</a>, then select the String object and move its handle to the center-right point of the artboard. Don’t worry about precision, as the snapping will do all the heavy lifting for you. This will bend the shape and add keyframes for the Morph animator.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/03-string.png" />
Next, press the V key on your keyboard to switch to the <a href="https://expressive.app/expressive-animator/docs/v1/tools/selection-tool/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Selection tool</a>. With this tool enabled, select the Ball, move it to the right, and place it in the middle of the string. Once again, snapping will do all the hard work, allowing you to position the ball exactly where you want to, while auto-recording automatically adds the appropriate keyframes.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/04-ball.png" />
You can now replay the animation and disable auto-recording by clicking on the Auto-Record button again.
As you can see when replaying, the direction in which the String and Ball objects are moving is wrong. Fortunately, we can fix this extremely easily just by reversing the keyframes. To do this, select the keyframes in the timeline and right-click to open the context menu and choose Reverse. This will reverse the keyframes, and if you replay the animation, you will see that the direction is now correct.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/05-reverse.png" />
With this out of the way, we can finally add the elastic effect. Select all the keyframes in the timeline and click on the Custom easing button to open a dialog with easing options. From the dialog, choose Elastic and set the oscillations to 4 and the stiffness to 2.5.
That’s it! Click anywhere outside the easing dialog to close it and replay the animation to see the result.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/06-effect.png" />
<a href="https://expressive.app/expressive-animator/docs/v1/export/svg/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">The animation can be exported as well.</a> Press Cmd/Ctrl + E on your keyboard to open the export dialog and choose from various export options, ranging from vectorized formats, such as <a href="https://expressive.app/expressive-animator/docs/v1/export/svg/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">SVG</a> and <a href="https://expressive.app/expressive-animator/docs/v1/export/lottie/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Lottie</a>, to rasterized formats, such as <a href="https://expressive.app/expressive-animator/docs/v1/export/image/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">GIF</a> and <a href="https://expressive.app/expressive-animator/docs/v1/export/video/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">video</a>.
For this specific animation, we’re going to choose the SVG export format. Expressive Animator allows you to choose between three different types of SVG, depending on the technology used for animation: <a href="https://expressive.app/expressive-animator/docs/v1/export/svg/smil/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">SMIL</a>, <a href="https://expressive.app/expressive-animator/docs/v1/export/svg/css/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">CSS</a>, or <a href="https://expressive.app/expressive-animator/docs/v1/export/svg/js/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">JavaScript</a>.
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/07-export.png" />
Each of these technologies has different strengths and weaknesses, but for this tutorial, we are going to choose SMIL. This is because SMIL-based animations are widely supported, even on Safari browsers, and can be used as background images or embedded in HTML pages using the <code><img></code> tag. In fact, <a href="https://www.smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/">Andy Clarke recently wrote all about SMIL animations here at Smashing Magazine</a> if you want a full explanation of how it works.
You can visualize the exported SVG in the following CodePen demo:
<img src="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/08-easing-functions.png" />
Conclusion
Elastic and bounce effects have long been among the most desirable but time-consuming techniques in motion design. By integrating them directly into its easing functions, Expressive Animator removes the complexity of manual keyframe manipulation and transforms what used to be a technical challenge into a creative opportunity.
The best part is that getting started with Expressive Animator comes with zero risk. The software offers a full 7–day free trial without requiring an account, so you can download it instantly and begin experimenting with your own designs right away. After the trial ends, you can buy Expressive Animator with a one-time payment, no subscription required. This will give you a perpetual license covering both Windows and macOS.
To help you get started even faster, I’ve prepared some extra resources for you. You’ll find the source files for the animations created in this tutorial, along with a curated list of useful links that will guide you further in exploring Expressive Animator and SVG animation. These materials are meant to give you a solid starting point so you can learn, experiment, and build on your own with confidence.
<ul>
<li>Grumpy Egg: The <a href="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/grumpy-egg.eaf"><code>.eaf</code></a> source file for the sample animation presented at the beginning of this article.</li>
<li>Elastic Effect: Another <a href="https://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/elastic-effect.eaf"><code>.eaf</code></a> file, this time for the animation we made in this tutorial.</li>
<li><a href="https://expressive.app/expressive-animator/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Get started with Expressive Animator</a></li>
<li>Expressive Animator <a href="https://expressive.app/expressive-animator/docs/v1/?utm_source=smashingmagazine&utm_medium=blog&utm_campaign=elastic_effect">Documentation</a></li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Marius Sarca)</author>
<enclosure url="http://files.smashing.media/articles/creating-elastic-bounce-effects-expressive-animator/creating-elastic-bounce-effects-expressive-animator.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[From Data To Decisions: UX Strategies For Real-Time Dashboards]]></title>
<link>https://smashingmagazine.com/2025/09/ux-strategies-real-time-dashboards/</link>
<guid>https://smashingmagazine.com/2025/09/ux-strategies-real-time-dashboards/</guid>
<pubDate>Fri, 12 Sep 2025 15:00:00 GMT</pubDate>
<description><![CDATA[Real-time dashboards are decision assistants, not passive displays. In environments like fleet management, healthcare, and operations, the cost of a delay or misstep is high. Karan Rawal explores strategic UX patterns that shorten time-to-decision, reduce cognitive overload, and make live systems trustworthy.]]></description>
<content:encoded><![CDATA[I once worked with a fleet operations team that monitored dozens of vehicles in multiple cities. Their dashboard showed fuel consumption, live GPS locations, and real-time driver updates. Yet the team struggled to see what needed urgent attention. The problem was not a lack of data but a lack of clear indicators to support decision-making. There were no priorities, alerts, or context to highlight what mattered most at any moment.
Real-time dashboards are now critical decision-making tools in industries like logistics, manufacturing, finance, and healthcare. However, many of them fail to help users make timely and confident decisions, even when they show live data.
<blockquote>Designing for real-time use is very different from designing static dashboards. The challenge is not only presenting metrics but enabling decisions under pressure. Real-time users face limited time and a high cognitive load. They need clarity on actions, not just access to raw data.</blockquote>
This requires interface elements that support quick scanning, pattern recognition, and guided attention. Layout hierarchy, alert colors, grouping, and motion cues all help, but they must be driven by a deeper strategy: understanding what the user must decide in that moment.
This article explores practical UX strategies for real-time dashboards that enable real decisions. Instead of focusing only on visual best practices, it looks at how user intent, personalization, and cognitive flow can turn raw data into meaningful, timely insights.
Designing for Real-Time Comprehension: Helping Users Stay Focused Under Pressure
A GPS app not only shows users their location but also helps them decide where to go next. In the same way, a real-time dashboard should go beyond displaying the latest data. Its purpose is to help users quickly understand complex information and make informed decisions, especially in fast-paced environments with short attention spans.
<h3>How Users Process Real-Time Updates</h3>
Humans have limited cognitive capacity, so they can only process a small amount of data at once. Without proper context or visual cues, rapidly updating dashboards can overwhelm users and shift attention away from key information.
To address this, I use the following approaches:
<ul>
<li>Delta Indicators and Trend Sparklines <a href="https://in.tradingview.com/scripts/delta/">Delta indicators</a> show value changes at a glance, while sparklines are small line charts that reveal trends over time in a compact space. For example, a sales dashboard might show a green upward arrow next to revenue to indicate growth, along with a sparkline displaying sales trends over the past week.</li>
<li>Subtle Micro-Animations <a href="https://www.youtube.com/watch?v=MZjV27K2KR4">Small animations</a> highlight changes without distracting users. Research in cognitive psychology shows that such animations effectively draw attention, helping users notice updates while staying focused. For instance, a soft pulse around a changing metric can signal activity without overwhelming the viewer.</li>
<li>Mini-History Views Showing a short history of recent changes reduces reliance on memory. For example, a dashboard might let users scroll back a few minutes to review updates, supporting better understanding and verification of data trends.</li>
</ul>
<h3>Common Challenges In Real-Time Dashboards</h3>
<blockquote>Many live dashboards fail when treated as static reports instead of dynamic tools for quick decision-making.</blockquote>
In my early projects, I made this mistake, resulting in cluttered layouts, distractions, and frustrated users.
Typical errors include the following:
<ul>
<li>Overcrowded Interfaces: Presenting too many metrics competes for users’ attention, making it hard to focus.</li>
<li>Flat Visual Hierarchy: Without clear emphasis on critical data, users might focus on less important information.</li>
<li>No Record of Changes: When numbers update instantly with no explanation, users can feel lost or confused.</li>
<li>Excessive Refresh Rates: Not all data needs constant updates. Updating too frequently can create unnecessary motion and cognitive strain.</li>
</ul>
<img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png" />
<h3>Managing Stress And Cognitive Overload</h3>
Under stress, users depend on intuition and focus only on immediately relevant information. If a dashboard updates too quickly or shows conflicting alerts, users may delay actions or make mistakes. It is important to:
<ul>
<li>Prioritize the most important data first to avoid overwhelming the user.</li>
<li>Offer snapshot or pause options so users can take time to process information.</li>
<li>Use clear indicators to show if an action is required or if everything is operating normally.</li>
</ul>
In real-time environments, the best dashboards balance speed with calmness and clarity. They are not just data displays but tools that promote live thinking and better decisions.
<h3>Enabling Personalization For Effective Data Consumption</h3>
Many analytics tools let users build custom dashboards, but these design principles guide layouts that support decision-making. Personalization options such as custom metric selection, alert preferences, and update pacing help manage cognitive load and improve data interpretation.
<table>
<thead>
<tr>
<th>Cognitive Challenge</th>
<th>UX Risk in Real-Time Dashboards</th>
<th>Design Strategy to Mitigate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Users can’t track rapid changes</td>
<td>Confusion, missed updates, second-guessing</td>
<td>Use delta indicators, change animations, and trend sparklines</td>
</tr>
<tr>
<td>Limited working memory</td>
<td>Overload from too many metrics at once</td>
<td>Prioritize key KPIs, apply progressive disclosure</td>
</tr>
<tr>
<td>Visual clutter under stress</td>
<td>Tunnel vision or misprioritized focus</td>
<td>Apply a clear visual hierarchy, minimize non-critical elements</td>
</tr>
<tr>
<td>Unclear triggers or alerts</td>
<td>Decision delays, incorrect responses</td>
<td>Use thresholds, binary status indicators, and plain language</td>
</tr>
<tr>
<td>Lack of context/history</td>
<td>Misinterpretation of sudden shifts</td>
<td>Provide micro-history, snapshot freeze, or hover reveal</td>
</tr>
</tbody>
</table>
Common Cognitive Challenges in Real-Time Dashboards and UX Strategies to Overcome Them.
Designing For Focus: Using Layout, Color, And Animation To Drive Real-Time Decisions
Layout, color, and animation do more than improve appearance. They help users interpret live data quickly and make decisions under time pressure. Since users respond to rapidly changing information, these elements must reduce cognitive load and highlight key insights immediately.
<ul>
<li>Creating a Visual Hierarchy to Guide Attention. A clear hierarchy directs users’ eyes to key metrics. Arrange elements so the most important data stands out. For example, place critical figures like sales volume or system health in the upper left corner to match common scanning patterns. Limit visible elements to about five to prevent overload and ease processing—group related data into cards to improve scannability and help users focus without distraction.</li>
<li>Using Color Purposefully to Convey Meaning. Color communicates meaning in data visualization. Red or orange indicates critical alerts or negative trends, signaling urgency. Blue and green represent positive or stable states, offering reassurance. Neutral tones like gray support background data and make key colors stand out. Ensure accessibility with strong contrast and pair colors with icons or labels. For example, bright red can highlight outages while muted gray marks historical logs, keeping attention on urgent issues.</li>
<li>Supporting Comprehension with Subtle Animation. Animation should clarify, not distract. Smooth transitions of 200 to 400 milliseconds communicate changes effectively. For instance, upward motion in a line chart reinforces growth. Hover effects and quick animations provide feedback and improve interaction. Thoughtful motion makes changes noticeable while maintaining focus.</li>
</ul>
<img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png" />
Layout, color, and animation create an experience that enables fast, accurate interpretation of live data. Real-time dashboards support continuous monitoring and decision-making by reducing mental effort and highlighting anomalies or trends. Personalization allows users to tailor dashboards to their roles, improving relevance and efficiency. For example, operations managers may focus on system health metrics while sales directors prioritize revenue KPIs. This adaptability makes dashboards dynamic, strategic tools.
<table>
<thead>
<tr>
<th>Element</th>
<th>Placement & Visual Weight</th>
<th>Purpose & Suggested Colors</th>
<th>Animation Use Case & Effect</th>
</tr>
</thead>
<tbody>
<tr>
<td>Primary KPIs</td>
<td>Center or top-left; bold, large font</td>
<td>Highlight critical metrics; typically stable states</td>
<td>Value updates: smooth increase (200–400 ms)</td>
</tr>
<tr>
<td>Controls</td>
<td>Top or left panel; light, minimal visual weight</td>
<td>Provide navigation/filtering; neutral color schemes</td>
<td>User actions: subtle feedback (100–150 ms)</td>
</tr>
<tr>
<td>Charts</td>
<td>Middle or right; medium emphasis</td>
<td>Show trends and comparisons; use blue/green for positives, grey for neutral</td>
<td>Chart trends: trail or fade (300–600 ms)</td>
</tr>
<tr>
<td>Alerts</td>
<td>Edge of dashboard or floating; high contrast (bold)</td>
<td>Signal critical issues; red/orange for alerts, yellow/amber for warnings</td>
<td>Quick animations for appearance; highlight changes</td>
</tr>
</tbody>
</table>
Design Elements, Placement, Color, and Motion Strategies for Effective Real-Time Dashboards.
Clarity In Motion: Designing Dashboards That Make Change Understandable
If users cannot interpret changes quickly, the dashboard fails regardless of its visual design. Over time, I have developed methods that reduce confusion and make change feel intuitive rather than overwhelming.
One of the most effective tools I use is the <a href="https://en.wikipedia.org/wiki/Sparkline">sparkline</a>, a compact line chart that shows a trend over time and is typically placed next to a key performance indicator. Unlike full charts, sparklines omit axes and labels. Their simplicity makes them powerful, since they instantly show whether a metric is trending up, down, or steady. For example, placing a sparkline next to monthly revenue immediately reveals if performance is improving or declining, even before the viewer interprets the number.
When using sparklines effectively, follow these principles:
<ul>
<li>Pair sparklines with metrics such as revenue, churn rate, or user activity so users can see both the value and its trajectory at a glance.</li>
<li>Simplify by removing clutter like axis lines or legends unless they add real value.</li>
<li>Highlight the latest data point with a dot or accent color since current performance often matters more than historical context.</li>
<li>Limit the time span. Too many data points compress the sparkline and hurt readability. A focused window, such as the last 7 or 30 days, keeps the trend clear.</li>
<li>Use sparklines in comparative tables. When placed in rows (for example, across product lines or regions), they reveal anomalies or emerging patterns that static numbers may hide.</li>
</ul>
<a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif"><img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif" /></a>Interactive P&L Performance Dashboard with Forecast and Variance Tracking. (<a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif">Large preview</a>)
I combine sparklines with directional indicators like arrows and percentage deltas to support quick interpretation.
For example, pairing “▲ +3.2%” with a rising sparkline shows both the direction and scale of change. I do not rely only on color to convey meaning.
Since <a href="https://www.colourblindawareness.org/colour-blindness/">1 in 12 men</a> is color-blind, using red and green alone can exclude some users. To ensure accessibility, I add shapes and icons alongside color cues.
Micro-animations provide subtle but effective signals. This counters <a href="https://www.nngroup.com/articles/change-blindness">change blindness</a> — our tendency to miss non-salient changes.
<ul>
<li>When numbers update, I use fade-ins or count-up transitions to indicate change without distraction.</li>
<li>If a list reorders, such as when top-performing teams shift positions, a smooth slide animation under 300 milliseconds helps users maintain spatial memory. These animations reduce cognitive friction and prevent disorientation.</li>
</ul>
Layout is critical for clarifying change:
<ul>
<li>I use modular cards with consistent spacing, alignment, and hierarchy to highlight key metrics.</li>
<li>Cards are arranged in a sortable grid, allowing filtering by severity, recency, or relevance.</li>
<li>Collapsible sections manage dense information while keeping important data visible for quick scanning and deeper exploration.</li>
</ul>
For instance, in a logistics dashboard, a card labeled “On-Time Deliveries” may display a weekly sparkline. If performance dips, the line flattens or turns slightly red, a downward arrow appears with a −1.8% delta, and the updated number fades in. This gives instant clarity without requiring users to open a detailed chart.
All these design choices support fast, informed decision-making. In high-velocity environments like product analytics, logistics, or financial operations, dashboards must do more than present data. They must reduce ambiguity and help teams quickly detect change, understand its impact, and take action.
Making Reliability Visible: Designing for Trust In Real-Time Data Interfaces
In real-time data environments, reliability is not just a technical feature. It is the foundation of user trust. Dashboards are used in high-stakes, fast-moving contexts where decisions depend on timely, accurate data. Yet these systems often face less-than-ideal conditions such as unreliable networks, API delays, and incomplete datasets. Designing for these realities is not just damage control. It is essential for making data experiences usable and trustworthy.
When data lags or fails to load, it can mislead users in serious ways:
<ul>
<li>A dip in a trendline may look like a market decline when it is only a delay in the stream.</li>
<li>Missing categories in a bar chart, if not clearly signaled, can lead to flawed decisions.</li>
</ul>
To mitigate this:
<ul>
<li>Every data point should be paired with its condition.</li>
<li>Interfaces must show not only what the data says but also how current or complete it is.</li>
</ul>
One effective strategy is replacing traditional spinners with <a href="https://www.nngroup.com/articles/skeleton-screens/">skeleton UIs</a>. These are greyed-out, animated placeholders that suggest the structure of incoming data. They set expectations, reduce anxiety, and show that the system is actively working. For example, in a financial dashboard, users might see the outline of a candlestick chart filling in as new prices arrive. This signals that data is being refreshed, not stalled.
<h3>Handling Data Unavailability</h3>
When data is unavailable, I show cached snapshots from the most recent successful load, labeled with timestamps such as “Data as of 10:42 AM.” This keeps users aware of what they are viewing.
In operational dashboards such as logistics or monitoring systems, this approach lets users act confidently even when real-time updates are temporarily out of sync.
<h3>Managing Connectivity Failures</h3>
To handle connectivity failures, I use auto-retry mechanisms with exponential backoff, giving the system several chances to recover quietly before notifying the user.
If retries fail, I maintain transparency with clear banners such as “Offline… Reconnecting…” In one product, this approach prevented users from reloading entire dashboards unnecessarily, especially in areas with unreliable Wi-Fi.
<h3>Ensuring Reliability with Accessibility</h3>
Reliability strongly connects with accessibility:
<ul>
<li>Real-time interfaces must announce updates without disrupting user focus, beyond just screen reader compatibility.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions">ARIA live regions</a> quietly narrate significant changes in the background, giving screen reader users timely updates without confusion.</li>
<li>All controls remain keyboard-accessible.</li>
<li>Animations follow <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">motion-reduction preferences</a> to support users with vestibular sensitivities.</li>
</ul>
<h3>Data Freshness Indicator</h3>
A compact but powerful pattern I often implement is the Data Freshness Indicator, a small widget that:
<ul>
<li>Shows sync status,</li>
<li>Displays the last updated time,</li>
<li>Includes a manual refresh button.</li>
</ul>
This improves transparency and reinforces user control. Since different users interpret these cues differently, advanced systems allow personalization. For example:
<ul>
<li>Analysts may prefer detailed logs of update attempts.</li>
<li>Business users might see a simple status such as “Live”, “Stale”, or “Paused”.</li>
</ul>
Reliability in data visualization is not about promising perfection. It is about creating a resilient, informative experience that supports human judgment by revealing the true state of the system.
When users understand what the dashboard knows, what it does not, and what actions it is taking, they are more likely to trust the data and make smarter decisions.
Real-World Case Study
In my work across logistics, hospitality, and healthcare, the challenge has always been to distill complexity into clarity. A well-designed dashboard is more than functional; it serves as a trusted companion in decision-making, embedding clarity, speed, and confidence from the start.
<h3>1. Fleet Management Dashboard</h3>
A client in the car rental industry struggled with fragmented operational data. Critical details like vehicle locations, fuel usage, maintenance schedules, and downtime alerts were scattered across static reports, spreadsheets, and disconnected systems. Fleet operators had to manually cross-reference data sources, even for basic dispatch tasks, which caused missed warnings, inefficient routing, and delays in response.
We solved these issues by redesigning the dashboard strategically, focusing on both layout improvements and how users interpret and act on information.
Strategic Design Improvements and Outcomes:
<ul>
<li>Instant visibility of KPIs High-contrast cards at the top of the dashboard made key performance indicators instantly visible. Example: Fuel consumption anomalies that previously went unnoticed for days were flagged within hours, enabling quick corrective action.</li>
<li>Clear trend and pattern visualization Booking forecasts, utilization graphs, and city-by-city comparisons highlighted performance trends. Example: A weekday-weekend booking chart helped a regional manager spot underperformance in one city and plan targeted vehicle redistribution.</li>
<li>Unified operational snapshot Cost, downtime, and service schedules were grouped into one view. Result: The operations team could assess fleet health in under five minutes each morning instead of using multiple tools.</li>
<li>Predictive context for planning Visual cues showed peak usage periods and historical demand curves. Result: Dispatchers prepared for forecasted spikes, reducing customer wait times and improving resource availability.</li>
<li>Live map with real-time status A color-coded map displays vehicle status: green for active, red for urgent attention, gray for idle. Result: Supervisors quickly identified inactive or delayed vehicles and rerouted resources as needed.</li>
<li>Role-based personalization Personalization options were built in, allowing each role to customize dashboard views. Example: Fleet managers prioritized financial KPIs, while technicians filtered for maintenance alerts and overdue service reports.</li>
</ul>
<img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png" />
Strategic Impact: The dashboard redesign was not only about improving visuals. It changed how teams interacted with data. Operators no longer needed to search for insights, as the system presented them in line with tasks and decision-making. The dashboard became a shared reference for teams with different goals, enabling real-time problem solving, fewer manual checks, and stronger alignment across roles. Every element was designed to build both understanding and confidence in action.
<h3>2. Hospitality Revenue Dashboard</h3>
One of our clients, a hospitality group with 11 hotels in the UAE, faced a growing strategic gap. They had data from multiple departments, including bookings, events, food and beverage, and profit and loss, but it was spread across disconnected dashboards. 
Strategic Design Improvements and Outcomes:
<ul>
<li>All revenue streams (rooms, restaurants, bars, and profit and loss) were consolidated into a single filterable dashboard. Example: A revenue manager could filter by property to see if a drop in restaurant revenue was tied to lower occupancy or was an isolated issue. The structure supported daily operations, weekly reviews, and quarterly planning.</li>
<li>Disconnected charts and metrics were replaced with a unified visual narrative showing how revenue streams interacted. Example: The dashboard revealed how event bookings influenced bar sales or staffing. This shifted teams from passive data consumption to active interpretation.</li>
<li>AI modules for demand forecasting, spend prediction, and pricing recommendations were embedded in the dashboard. Result: Managers could test rate changes with interactive sliders and instantly view effects on occupancy, revenue per available room, and food and beverage income. This enabled proactive scenario planning.</li>
<li>Compact, color-coded sparklines were placed next to each key metric to show short- and long-term trends. Result: These visuals made it easy to spot seasonal shifts or channel-specific patterns without switching views or opening separate reports.</li>
<li>Predictive overlays such as forecast bands and seasonality markers were added to performance graphs. Example: If occupancy rose but lagged behind seasonal forecasts, the dashboard surfaced the gap, prompting early action such as promotions or issue checks.</li>
</ul>
<img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png" />
Strategic Impact: By aligning the dashboard structure with real pricing and revenue strategies, the client shifted from static reporting to forward-looking decision-making. This was not a cosmetic interface update. It was a complete rethinking of how data could support business goals. The result enabled every team, from finance to operations, to interpret data based on their specific roles and responsibilities.
<h3>3. Healthcare Interoperability Dashboard</h3>
In healthcare, timely and accurate access to patient information is essential. A multi-specialist hospital client struggled with fragmented data. Doctors had to consult separate platforms such as electronic health records, lab results, and pharmacy systems to understand a patient’s condition. This fragmented process slowed decision-making and increased risks to patient safety.
Strategic Design Improvements and Outcomes:
<ul>
<li>Patient medical history was integrated to unify lab reports, medications, and allergy information in one view. Example: A cardiologist, for example, could review recent cardiac markers with active medications and allergy alerts in the same place, enabling faster diagnosis and treatment.</li>
<li>Lab report tracking was upgraded to show test type, date, status, and a clear summary with labels such as Pending, Completed, and Awaiting Review. Result: Trends were displayed with sparklines and color-coded indicators, helping clinicians quickly spot abnormalities or improvements.</li>
<li>A medication management module was added for prescription entry, viewing, and exporting. It included dosage, frequency, and prescribing physician details. Example: Specialists could customize it to highlight drugs relevant to their practice, reducing overload and focusing on critical treatments.</li>
<li>Rapid filtering options were introduced to search by patient name, medical record number, date of birth, gender, last visit, insurance company, or policy number. Example: Billing staff could locate patients by insurance details, while clinicians filtered records by visits or demographics.</li>
<li>Visual transparency was provided through interactive tooltips explaining alert rationales and flagged data points. Result: Clinicians gained immediate context, such as the reason a lab value was marked as critical, supporting informed and timely decisions.</li>
</ul>
<img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg" />
Strategic Impact: Our design encourages active decision-making instead of passive data review. Interactive tooltips ensure visual transparency by explaining the rationale behind alerts and flagged data points. These information boxes give clinicians immediate context, such as why a lab value is marked critical, helping them understand implications and next steps without delay.
<h3>Key UX Insights from the Above 3 Examples</h3>
<ul>
<li>Design should drive conclusions, not just display data. Contextualized data enabled faster and more confident decisions. For example, a logistics dashboard flagged high-risk delays so dispatchers could act immediately.</li>
<li>Complexity should be structured, not eliminated. Tools used timelines, layering, and progressive disclosure to handle dense information. A financial tool groups transactions by time blocks, easing cognitive load without losing detail.</li>
<li>Trust requires clear system logic. Users trusted predictive alerts only after understanding their triggers. A healthcare interface added a "Why this alert?" option that explained the reasoning.</li>
<li>The aim is clarity and action, not visual polish. Redesigns improved speed, confidence, and decision-making. In real-time contexts, confusion delays are more harmful than design flaws.</li>
</ul>
Final Takeaways
Real-time dashboards are not about overwhelming users with data. They are about helping them act quickly and confidently. The most effective dashboards reduce noise, highlight the most important metrics, and support decision-making in complex environments. Success lies in balancing visual clarity with cognitive ease while accounting for human limits like memory, stress, and attention alongside technical needs.
Do:
<ul>
<li>Prioritize key metrics in a clear order so priorities are obvious. For instance, a support manager may track open tickets before response times.</li>
<li>Use subtle micro-animations and small visual cues to indicate changes, helping users spot trends without distraction.</li>
<li>Display data freshness and sync status to build trust.</li>
<li>Plan for edge cases like incomplete or offline data to keep the experience consistent.</li>
<li>Ensure accessibility with high contrast, ARIA labels, and keyboard navigation.</li>
</ul>
Don’t:
<ul>
<li>Overcrowd the interface with too many metrics.</li>
<li>Rely only on color to communicate critical information.</li>
<li>Update all data at once or too often, which can cause overload.</li>
<li>Hide failures or delays; transparency helps users adapt.</li>
</ul>
Over time, I’ve come to see real-time dashboards as decision assistants rather than control panels. When users say, “This helps me stay in control,” it reflects a design built on empathy that respects cognitive limits and enhances decision-making. That is the true measure of success.
]]></content:encoded>
<author>hello@smashingmagazine.com (Karan Rawal)</author>
<enclosure url="http://files.smashing.media/articles/ux-strategies-real-time-dashboards/ux-strategies-real-time-dashboards.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Integrating CSS Cascade Layers To An Existing Project]]></title>
<link>https://smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/</link>
<guid>https://smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/</guid>
<pubDate>Wed, 10 Sep 2025 10:00:00 GMT</pubDate>
<description><![CDATA[The idea behind this is to share a full, unfiltered look at integrating CSS Cascade Layers into an existing legacy codebase. In practice, it’s about refactoring existing CSS to use cascade layers without breaking anything.]]></description>
<content:encoded><![CDATA[You can always get a fantastic overview of things in Stephenie Eckles’ article, “<a href="https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/">Getting Started With CSS Cascade Layers</a>”. But let’s talk about the experience of integrating cascade layers into real-world code, the good, the bad, and the spaghetti.
I could have created a sample project for a classic walkthrough, but nah, that’s not how things work in the real world. I want to get our hands dirty, like inheriting code with styles that work and no one knows why.
Finding projects without cascade layers was easy. The tricky part was finding one that was messy enough to have specificity and organisation issues, but broad enough to illustrate different parts of cascade layers integration.
Ladies and gentlemen, I present you with this <a href="https://github.com/Drix10/discord-bot-web">Discord bot website</a> by <a href="https://github.com/Drix10">Drishtant Ghosh</a>. I’m deeply grateful to Drishtant for allowing me to use his work as an example. This project is a typical landing page with a navigation bar, a hero section, a few buttons, and a mobile menu.
<img src="https://files.smashing.media/articles/integrating-css-cascade-layers-existing-project/1-discord-bot-landing-page.png" />
You see how it looks perfect on the outside. Things get interesting, however, when we look at the CSS styles under the hood.
Understanding The Project
Before we start throwing <code>@layers</code> around, let’s get a firm understanding of what we’re working with. I <a href="https://codepen.io/vayospot/pen/bNdoYdP">cloned</a> the GitHub repo, and since our focus is working with CSS Cascade Layers, I’ll focus only on the main page, which consists of three files: <code>index.html</code>, <code>index.css</code>, and <code>index.js</code>.
Note: I didn’t include other pages of this project as it’d make this tutorial too verbose. However, you can refactor the other pages as an experiment.
The <code>index.css</code> file is over 450 lines of code, and skimming through it, I can see some red flags right off the bat:
<ul>
<li>There’s a lot of code repetition with the same selectors pointing to the same HTML element.</li>
<li>There are quite a few <code>#id</code> selectors, which one might argue shouldn’t be used in CSS (and I am one of those people).</li>
<li><code>#botLogo</code> is defined twice and over 70 lines apart.</li>
<li>The <code>!important</code> keyword is used liberally throughout the code.</li>
</ul>
And yet the site works. There is nothing “technically” wrong here, which is another reason CSS is a big, beautiful monster — errors are silent!
Planning The Layer Structure
Now, some might be thinking, “Can’t we simply move all of the styles into a single layer, like <code>@layer legacy</code> and call it a day?”
You could… but I don’t think you should.
Think about it: If more layers are added after the <code>legacy</code> layer, they should override the styles contained in the <code>legacy</code> layer because the specificity of layers is organized by priority, where the layers declared later carry higher priority.
<pre><code>/* new is more specific */
@layer legacy, new;
/* legacy is more specific */
@layer new, legacy;
</code></pre>
That said, we must remember that the site’s existing styles make liberal use of the <code>!important</code> keyword. And when that happens, the order of cascade layers gets reversed. So, even though the layers are outlined like this:
<pre><code>@layer legacy, new;
</code></pre>
…any styles with an <code>!important</code> declaration suddenly shake things up. In this case, the priority order becomes:
<ol>
<li><code>!important</code> styles in the <code>legacy</code> layer (most powerful),</li>
<li><code>!important</code> styles in the <code>new</code> layer,</li>
<li>Normal styles in the <code>new</code> layer,</li>
<li>Normal styles in the <code>legacy</code> layer (least powerful).</li>
</ol>
I just wanted to clear that part up. Let’s continue.
We know that cascade layers handle specificity by creating an explicit order where each layer has a clear responsibility, and later layers always win. 
So, I decided to split things up into five distinct layers:
<ul>
<li><code>reset</code>: Browser default resets like <code>box-sizing</code>, margins, and paddings.</li>
<li><code>base</code>: Default styles of HTML elements, like <code>body</code>, <code>h1</code>, <code>p</code>, <code>a</code>, etc., including default typography and colours.</li>
<li><code>layout</code>: Major page structure stuff for controlling how elements are positioned.</li>
<li><code>components</code>: Reusable UI segments, like buttons, cards, and menus.</li>
<li><code>utilities</code>: Single helper modifiers that do just one thing and do it well.</li>
</ul>
This is merely how I like to break things out and organize styles. Zell Liew, for example, <a href="https://css-tricks.com/composition-in-css/">has a different set of four buckets</a> that could be defined as layers.
There’s also the concept of dividing things up even further into sublayers:
<pre><code>@layer components {
/* sub-layers */
@layer buttons, cards, menus;
}
/* or this: */
@layer components.buttons, components.cards, components.menus;
</code></pre>
That might come in handy, but I also don’t want to overly abstract things. That might be a better strategy for a project that’s scoped to a well-defined design system.
Another thing we could leverage is unlayered styles and the fact that any styles not contained in a cascade layer get the highest priority:
<pre><code>@layer legacy { a { color: red !important; } }
@layer reset { a { color: orange !important; } }
@layer base { a { color: yellow !important; } }
/* unlayered */
a { color: green !important; } /* highest priority */
</code></pre>
But I like the idea of keeping all styles organized in explicit layers because it keeps things modular and maintainable, at least in this context.
Let’s move on to adding cascade layers to this project.
Integrating Cascade Layers
We need to define the layer order at the top of the file:
<pre><code>@layer reset, base, layout, components, utilities;
</code></pre>
This makes it easy to tell which layer takes precedence over which (they get more priority from left to right), and now we can think in terms of layer responsibility instead of selector weight. Moving forward, I’ll proceed through the stylesheet from top to bottom.
First, I noticed that the <a href="https://fonts.google.com/specimen/Poppins?query=poppins">Poppins font</a> was imported in both the HTML and CSS files, so I removed the CSS import and left the one in <code>index.html</code>, as that’s generally recommended for quickly loading fonts.
Next is the universal selector (<code>*</code>) styles, which include <a href="https://css-tricks.com/box-sizing/">classic reset styles</a> that are perfect for <code>@layer reset</code>:
<pre><code>@layer reset {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
</code></pre>
With that out of the way, the <code>body</code> selector is next. I’m putting this into <code>@layer base</code> because it contains core styles for the project, like backgrounds and fonts:
<div>
<pre><code>@layer base {
body {
background-image: url("bg.svg"); /* Renamed to bg.svg for clarity */
font-family: "Poppins", sans-serif;
/* ... other styles */
}
}
</code></pre>
</div>
The way I’m tackling this is that styles in the <code>base</code> layer should generally affect the whole document. So far, no page breaks or anything.
<h3>Swapping IDs For Classes</h3>
Following the <code>body</code> element selector is the page loader, which is defined as an ID selector, <code>#loader</code>.
<blockquote>I’m a firm believer in using class selectors over ID selectors as much as possible. It keeps specificity low by default, which prevents specificity battles and <a href="https://css-tricks.com/the-difference-between-id-and-class/">makes the code a lot more maintainable</a>.</blockquote>
So, I went into the <code>index.html</code> file and refactored elements with <code>id="loader"</code> to <code>class="loader"</code>. In the process, I saw another element with <code>id="page"</code> and changed that at the same time.
While still in the <code>index.html</code> file, I noticed a few <code>div</code> elements missing closing tags. It is astounding how permissive browsers are with that. Anyways, I cleaned those up and moved the <code><script></code> tag out of the <code>.heading</code> element to be a direct child of <code>body</code>. Let’s not make it any tougher to load our scripts.
Now that we’ve levelled the specificity playing field by moving IDs to classes, we can drop them into the <code>components</code> layer since a loader is indeed a reusable component:
<pre><code>@layer components {
.loader {
width: 100%;
height: 100vh;
/* ... */
}
.loader .loading {
/* ... */
}
.loader .loading span {
/* ... */
}
.loader .loading span:before {
/* ... */
}
}
</code></pre>
<h3>Animations</h3>
Next are keyframes, and this was a bit tricky, but I eventually chose to isolate animations in their own new fifth layer and updated the layer order to include it:
<div>
<pre><code>@layer reset, base, layout, components, utilities, animations;
</code></pre>
</div>
But why place <code>animations</code> as the last layer? Because animations are generally the last to run and shouldn’t be affected by style conflicts.
I searched the project’s styles for <code>@keyframes</code> and dumped them into the new layer:
<pre><code>@layer animations {
@keyframes loading {
/* ... */
}
@keyframes loading2 {
/* ... */
}
@keyframes pageShow {
/* ... */
}
}
</code></pre>
This gives a clear distinction of static styles from dynamic ones while also enforcing reusability.
<h3>Layouts</h3>
The <code>#page</code> selector also has the same issue as <code>#id</code>, and since we fixed it in the HTML earlier, we can modify it to <code>.page</code> and drop it in the <code>layout</code> layer, as its main purpose is to control the initial visibility of the content:
<pre><code>@layer layout {
.page {
display: none;
}
}
</code></pre>
<h3>Custom Scrollbars</h3>
Where do we put these? Scrollbars are global elements that persist across the site. This might be a gray area, but I’d say it fits perfectly in <code>@layer base</code> since it’s a global, default feature.
<pre><code>@layer base {
/* ... */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0e0e0f;
}
::-webkit-scrollbar-thumb {
background: #5865f2;
border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
background: #202225;
}
}
</code></pre>
I also removed the <code>!important</code> keywords as I came across them.
<h3>Navigation</h3>
The <code>nav</code> element is pretty straightforward, as it is the main structure container that defines the position and dimensions of the navigation bar. It should definitely go in the <code>layout</code> layer:
<pre><code>@layer layout {
/* ... */
nav {
display: flex;
height: 55px;
width: 100%;
padding: 0 50px; /* Consistent horizontal padding */
/* ... */
}
}
</code></pre>
<h3>Logo</h3>
We have three style blocks that are tied to the logo: <code>nav .logo</code>, <code>.logo img</code>, and <code>#botLogo</code>. These names are redundant and could benefit from inheritance component reusability.
Here’s how I’m approaching it:
<ol>
<li>The <code>nav .logo</code> is overly specific since the logo can be reused in other places. I dropped the <code>nav</code> so that the selector is just <code>.logo</code>. There was also an <code>!important</code> keyword in there, so I removed it.</li>
<li>I updated <code>.logo</code> to be a Flexbox container to help position <code>.logo img</code>, which was previously set with less flexible absolute positioning.</li>
<li>The <code>#botLogo</code> ID is declared twice, so I merged the two rulesets into one and lowered its specificity by making it a <code>.botLogo</code> class. And, of course, I updated the HTML to replace the ID with the class.</li>
<li>The <code>.logo img</code> selector becomes <code>.botLogo</code>, making it the base class for styling all instances of the logo.</li>
</ol>
Now, we’re left with this:
<pre><code>/* initially .logo img */
.botLogo {
border-radius: 50%;
height: 40px;
border: 2px solid #5865f2;
}
/* initially #botLogo */
.botLogo {
border-radius: 50%;
width: 180px;
/* ... */
}
</code></pre>
The difference is that one is used in the navigation and the other in the hero section heading. We can transform the second <code>.botLogo</code> by slightly increasing the specificity with a <code>.heading .botLogo</code> selector. We may as well clean up any duplicated styles as we go.
Let’s place the entire code in the <code>components</code> layer as we’ve successfully turned the logo into a reusable component:
<div>
<pre><code>@layer components {
/* ... */
.logo {
font-size: 30px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.botLogo {
aspect-ratio: 1; /* maintains square dimensions with width */
border-radius: 50%;
width: 40px;
border: 2px solid #5865f2;
}
.heading .botLogo {
width: 180px;
height: 180px;
background-color: #5865f2;
box-shadow: 0px 0px 8px 2px rgba(88, 101, 242, 0.5);
/* ... */
}
}
</code></pre>
</div>
This was a bit of work! But now the logo is properly set up as a component that fits perfectly in the new layer architecture.
<h3>Navigation List</h3>
This is a typical navigation pattern. Take an unordered list (<code><ul></code>) and turn it into a flexible container that displays all of the list items horizontally on the same row (with wrapping allowed). It’s a type of navigation that can be reused, which belongs in the <code>components</code> layer. But there’s a little refactoring to do before we add it.
There’s already a <code>.mainMenu</code> class, so let’s lean into that. We’ll swap out any <code>nav ul</code> selectors with that class. Again, it keeps specificity low while making it clearer what that element does.
<pre><code>@layer components {
/* ... */
.mainMenu {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.mainMenu li {
margin: 0 4px;
}
.mainMenu li a {
color: #fff;
text-decoration: none;
font-size: 16px;
/* ... */
}
.mainMenu li a:where(.active, .hover) {
color: #fff;
background: #1d1e21;
}
.mainMenu li a.active:hover {
background-color: #5865f2;
}
}
</code></pre>
There are also two buttons in the code that are used to toggle the navigation between “open” and “closed” states when the navigation is collapsed on smaller screens. It’s tied specifically to the <code>.mainMenu</code> component, so we’ll keep everything together in the <code>components</code> layer. We can combine and simplify the selectors in the process for cleaner, more readable styles:
<pre><code>@layer components {
/* ... */
nav:is(.openMenu, .closeMenu) {
font-size: 25px;
display: none;
cursor: pointer;
color: #fff;
}
}
</code></pre>
I also noticed that several other selectors in the CSS were not used anywhere in the HTML. So, I removed those styles to keep things trim. There are <a href="https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/">automated ways to go about this</a>, too.
<h3>Media Queries</h3>
Should media queries have a dedicated layer (<code>@layer responsive</code>), or should they be in the same layer as their target elements? I really struggled with that question while refactoring the styles for this project. I did some research and testing, and my verdict is the latter, that media queries ought to be in the same layer as the elements they affect.
My reasoning is that keeping them together:
<ul>
<li>Maintains responsive styles with their base element styles,</li>
<li>Makes overrides predictable, and</li>
<li>Flows well with component-based architecture common in modern web development.</li>
</ul>
However, it also means responsive logic is scattered across layers. But it beats the one with a gap between the layer where elements are styled and the layer where their responsive behaviors are managed. That’s a deal-breaker for me because it’s way too easy to update styles in one layer and forget to update their corresponding responsive style in the responsive layer.
The other big point is that media queries in the same layer have the same priority as their elements. This is consistent with my overall goal of keeping the CSS Cascade simple and predictable, free of style conflicts.
Plus, the <a href="https://css-tricks.com/tag/nesting/">CSS nesting syntax</a> makes the relationship between media queries and elements super clear. Here’s an abbreviated example of how things look when we nest media queries in the <code>components</code> layer:
<pre><code>@layer components {
.mainMenu {
display: flex;
flex-wrap: wrap;
list-style: none;
}
@media (max-width: 900px) {
.mainMenu {
width: 100%;
text-align: center;
height: 100vh;
display: none;
}
}
}
</code></pre>
This also allows me to nest a component’s child element styles (e.g., <code>nav .openMenu</code> and <code>nav .closeMenu</code>).
<pre><code>@layer components {
nav {
&.openMenu {
display: none;
@media (max-width: 900px) {
&.openMenu {
display: block;
}
}
}
}
}
</code></pre>
<h3>Typography & Buttons</h3>
The <code>.title</code> and <code>.subtitle</code> can be seen as typography components, so they and their responsive associates go into — you guessed it — the <code>components</code> layer:
<pre><code>@layer components {
.title {
font-size: 40px;
font-weight: 700;
/* etc. */
}
.subtitle {
color: rgba(255, 255, 255, 0.75);
font-size: 15px;
/* etc.. */
}
@media (max-width: 420px) {
.title {
font-size: 30px;
}
.subtitle {
font-size: 12px;
}
}
}
</code></pre>
What about buttons? Like many website’s this one has a class, <code>.btn</code>, for that component, so we can chuck those in there as well:
<pre><code>@layer components {
.btn {
color: #fff;
background-color: #1d1e21;
font-size: 18px;
/* etc. */
}
.btn-primary {
background-color: #5865f2;
}
.btn-secondary {
transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
background-color: #5865f2;
box-shadow: 0px 0px 8px 2px rgba(88, 101, 242, 0.5);
/* etc. */
}
.btn-secondary:hover {
background-color: #1d1e21;
background-color: rgba(88, 101, 242, 0.7);
}
@media (max-width: 420px) {
.btn {
font-size: 14px;
margin: 2px;
padding: 8px 13px;
}
}
@media (max-width: 335px) {
.btn {
display: flex;
flex-direction: column;
}
}
}
</code></pre>
<h3>The Final Layer</h3>
We haven’t touched the <code>utilities</code> layer yet! I’ve reserved this layer for helper classes that are designed for specific purposes, like hiding content — or, in this case, there’s a <code>.noselect</code> class that fits right in. It has a single reusable purpose: to disable selection on an element.
So, that’s going to be the only style rule in our <code>utilities</code> layer:
<pre><code>@layer utilities {
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
</code></pre>
And that’s it! We’ve completely refactored the CSS of a real-world project to use CSS Cascade Layers. You can compare <a href="https://codepen.io/vayospot/pen/bNdoYdP">where we started</a> with the <a href="https://codepen.io/vayospot/pen/XJbeVdB">final code</a>.
It Wasn’t All Easy
That’s not to say that working with Cascade Layers was challenging, but there were some sticky points in the process that forced me to pause and carefully think through what I was doing.
I kept some notes as I worked:
<ul>
<li>It’s tough to determine where to start with an existing project. However, by defining the layers first and setting their priority levels, I had a framework for deciding how and where to move specific styles, even though I was not totally familiar with the existing CSS. That helped me avoid situations where I might second-guess myself or define extra, unnecessary layers.</li>
<li>Browser support is still a thing! I mean, Cascade Layers enjoy 94% support coverage as I’m writing this, but you might be one of those sites that needs to accommodate legacy browsers that are unable to support layered styles.</li>
<li>It wasn’t clear where media queries fit into the process. Media queries put me on the spot to find where they work best: nested in the same layers as their selectors, or in a completely separate layer? I went with the former, as you know.</li>
<li>The <code>!important</code> keyword is a juggling act. They invert the entire layering priority system, and this project was littered with instances. Once you start chipping away at those, the existing CSS architecture erodes and requires a balance between refactoring the code and fixing what’s already there to know exactly how styles cascade.</li>
</ul>
Overall, refactoring a codebase for CSS Cascade Layers is a bit daunting at first glance. The important thing, though, is to acknowledge that it isn’t really the layers that complicate things, but the existing codebase.
It’s tough to completely overhaul someone’s existing approach for a new one, even if the new approach is elegant.
Where Cascade Layers Helped (And Didn’t)
Establishing layers improved the code, no doubt. I’m sure there are some performance benchmarks in there since we were able to remove unused and conflicting styles, but the real win is in a more maintainable set of styles. It’s easier to find what you need, know what specific style rules are doing, and where to insert new styles moving forward.
At the same time, I wouldn’t say that Cascade Layers are a silver bullet solution. Remember, CSS is intrinsically tied to the HTML structure it queries. If the HTML you’re working with is unstructured and suffers from <code>div</code>-itus, then you can safely bet that the effort to untangle that mess is higher and involves rewriting markup at the same time.
Refactoring CSS for cascade layers is most certainly worth the maintenance enhancements alone.
It may be “easier” to start from scratch and define layers as you work from the ground up because there’s less inherited overhead and technical debt to sort through. But if you have to start from an existing codebase, you might need to de-tangle the complexity of your styles first to determine exactly how much refactoring you’re looking at.
]]></content:encoded>
<author>hello@smashingmagazine.com (Victor Ayomipo)</author>
<enclosure url="http://files.smashing.media/articles/integrating-css-cascade-layers-existing-project/integrating-css-cascade-layers-existing-project.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Designing For TV: Principles, Patterns And Practical Guidance (Part 2)]]></title>
<link>https://smashingmagazine.com/2025/09/designing-tv-principles-patterns-practical-guidance/</link>
<guid>https://smashingmagazine.com/2025/09/designing-tv-principles-patterns-practical-guidance/</guid>
<pubDate>Thu, 04 Sep 2025 10:00:00 GMT</pubDate>
<description><![CDATA[After covering in detail the underlying interaction paradigms of TV experiences in [Part 1](https://www.smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/), it’s time to get practical. In the second part of the series, you’ll explore the building blocks of the “10-foot experience” and how to best utilise them in your designs.]]></description>
<content:encoded><![CDATA[Having covered the developmental history and legacy of TV in <a href="https://www.smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/">Part 1</a>, let’s now delve into more practical matters. As a quick reminder, the “10-foot experience” and its reliance on the six core buttons of any remote form the basis of our efforts, and as you’ll see, most principles outlined simply reinforce the unshakeable foundations.
In this article, we’ll sift through the systems, account for layout constraints, and distill the guidelines to understand the essence of TV interfaces. Once we’ve collected all the main ingredients, we’ll see what we can do to elevate these inherently simplistic experiences.
Let’s dig in, and let’s get practical!
The Systems
When it comes to hardware, TVs and set-top boxes are usually a few generations behind phones and computers. Their components are made to run lightweight systems optimised for viewing, energy efficiency, and longevity. Yet even within these constraints, different platforms offer varying performance profiles, conventions, and price points.
Some notable platforms/systems of today are:
<ul>
<li>Roku, the most affordable and popular, but severely bottlenecked by weak hardware. </li>
<li>WebOS, most common on LG devices, relies on web standards and runs well on modest hardware.</li>
<li>Android TV, considered very flexible and customisable, but relatively demanding hardware-wise.</li>
<li>Amazon Fire, based on Android but with a separate ecosystem. It offers great smooth performance, but is slightly more limited than stock Android.</li>
<li>tvOS, by Apple, offering a high-end experience followed by a high-end price with extremely low customizability.</li>
</ul>
Despite their differences, all of the platforms above share something in common, and by now you’ve probably guessed that it has to do with the remote. Let’s take a closer look:
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/1-remotes.jpg" />
If these remotes were stripped down to just the D-pad, OK, and BACK buttons, they would still be capable of successfully navigating any TV interface. It is this shared control scheme that allows for the <a href="https://www.techtarget.com/whatis/definition/agnostic">agnostic approach</a> of this article with broadly applicable guidelines, regardless of the manufacturer. 
Having already discussed the TV remote in detail in <a href="https://www.smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/">Part 1</a>, let’s turn to the second part of the equation: the TV screen, its layout, and the fundamental building blocks of TV-bound experiences.
TV Design Fundamentals
<h3>The Screen</h3>
With almost one hundred years of legacy, TV has accumulated quite some baggage. One recurring topic in modern articles on TV design is the concept of “<a href="https://en.wikipedia.org/wiki/Overscan">overscan</a>” — a legacy concept from the era of cathode ray tube (<a href="https://en.wikipedia.org/wiki/Cathode-ray_tube">CRT</a>) screens. Back then, the lack of standards in production meant that television sets would often crop the projected image at its edges. To address this inconsistency, broadcasters created guidelines to keep important content from being cut off.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/2-safe-zones.jpg" />
While overscan gets mentioned occasionally, we should call it what it really is — a thing of the past. Modern panels display content with greater precision, making thinking in terms of title and action safe areas rather archaic. Today, we can simply consider the margins and get the same results.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/3-tv-margins.jpg" />
<a href="https://developer.android.com/design/ui/tv/guides/styles/layouts">Google calls for a 5% margin layout</a> and <a href="https://developer.apple.com/design/human-interface-guidelines/layout">Apple advises</a> a 60-point margin top and bottom, and 80 points on the sides in their Layout guidelines. The standard is not exactly clear, but the takeaway is simple: leave some breathing room between screen edge and content, like you would in any thoughtful layout.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/4-tvos-safe-zones.png" />
Having left some baggage behind, we can start considering what to put within and outside the defined bounds.
<h3>The Layout</h3>
Considering the device is made for content consumption, streaming apps such as Netflix naturally come to mind. Broadly speaking, all these interfaces share a common layout structure where a vast collection of content is laid out in a simple grid.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/5-netflix-tv-ui.jpg" />
These horizontally scrolling groups (sometimes referred to as “shelves”) resemble rows of a bookcase. Typically, they’ll contain dozens of items that don’t fit into the initial “fold”, so we’ll make sure the last visible item “peeks” from the edge, subtly indicating to the viewer there’s more content available if they continue scrolling.
If we were to define a standard 12-column layout grid, with a 2-column-wide item, we’d end up with something like this:
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/6-twelve-column-grid-layout.jpg" />
As you can see, the last item falls outside the “safe” zone. 
Tip: A useful trick I discovered when designing TV interfaces was to utilise an odd number of columns. This allows the last item to fall within the defined margins and be more prominent while having little effect on the entire layout. We’ve concluded that overscan is not a prominent issue these days, yet an additional column in the layout helps completely circumvent it. Food for thought!
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/7-thirteen-column-grid-layout.jpg" />
<h3>Typography</h3>
TV design requires us to practice restraint, and this becomes very apparent when working with type. All good typography practices apply to TV design too, but I’d like to point out two specific takeaways.
First, accounting for the distance, everything (including type) needs to scale up. Where 16–18px might suffice for web baseline text, 24px should be your starting point on TV, with the rest of the scale increasing proportionally. 
<blockquote>“Typography can become especially tricky in 10-ft experiences. When in doubt, go larger.” — <a href="https://marvelapp.com/blog/designing-for-television/">Molly Lafferty</a> (Marvel Blog)</blockquote>
With that in mind, the second piece of advice would be to start with a small 5–6 size scale and adjust if necessary. The simplicity of a TV experience can, and should, be reflected in the typography itself, and while small, such a scale will do all the “heavy lifting” if set correctly.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/8-type-application.jpg" />
What you see in the example above is a scale I reduced from <a href="https://developer.android.com/design/ui/tv/guides/styles/typography">Google</a> and <a href="https://developer.apple.com/design/human-interface-guidelines/typography">Apple</a> guidelines, with a few size adjustments. Simple as it is, this scale served me well for years, and I have no doubt it could do the same for you.
<h4>Freebie</h4>
If you’d like to use my basic reduced type scale Figma design file for kicking off your own TV project, feel free to do so! 
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/9-figma-freebie.jpg" />
<h3>Color</h3>
Imagine watching TV at night with the device being the only source of light in the room. You open up the app drawer and select a new streaming app; it loads into a pretty splash screen, and — bam! — a bright interface opens up, which, amplified by the dark surroundings, blinds you for a fraction of a second. That right there is our main consideration when using color on TV.
Built for cinematic experiences and often used in dimly lit environments, TVs lend themselves perfectly to darker and more subdued interfaces. Bright colours, especially pure white (<code>#ffffff</code>), will translate to maximum luminance and may be straining on the eyes. As a general principle, you should rely on a more muted color palette. Slightly tinting brighter elements with your brand color, or undertones of yellow to imitate natural light, will produce less visually unsettling results.
Finally, without a pointer or touch capabilities, it’s crucial to clearly highlight interactive elements. While using bright colors as backdrops may be overwhelming, using them sparingly to highlight element states in a highly contrasting way will work perfectly.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/11-button-focus-basic.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/10-button-focus-basic-800.gif" /></a>A focus state is the underlying principle of TV navigation. Most commonly, it relies on creating high contrast between the focused and unfocused elements. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/11-button-focus-basic.gif">Large preview</a>)
This highlighting of UI elements is what TV leans on heavily — and it is what we’ll discuss next.
<h3>Focus</h3>
In <a href="https://www.smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/">Part 1</a>, we have covered how interacting through a remote implies a certain detachment from the interface, mandating reliance on a focus state to carry the burden of TV interaction. This is done by visually accenting elements to anchor the user’s eyes and map any subsequent movement within the interface.
If you have ever written HTML/CSS, you might recall the use of the <code>:focus</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">CSS pseudo-class</a>. While it’s primarily an accessibility feature on the web, it’s the core of interaction on TV, with more flexibility added in the form of two additional directions thanks to a dedicated D-pad.
<h4>Focus Styles</h4>
There are a few standard ways to style a focus state. Firstly, there’s scaling — enlarging the focused element, which creates the illusion of depth by moving it closer to the viewer.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/13-focus-scale-base.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/12-focus-scale-base-800.gif" /></a>Example of scaling elements on focus. This is especially common in cases where only images are used for focusable elements. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/13-focus-scale-base.gif">Large preview</a>)
Another common approach is to invert background and text colors.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/15-focus-bg-base.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/14-focus-bg-base-800.gif" /></a>Color inversion on focus, common for highlighting cards. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/15-focus-bg-base.gif">Large preview</a>)
Finally, a border may be added around the highlighted element.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/17-focus-border-base.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/16-focus-bg-base-800.gif" /></a>Example of border highlights on focus. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/17-focus-border-base.gif">Large preview</a>)
These styles, used independently or in various combinations, appear in all TV interfaces. While execution may be constrained by the specific system, the purpose remains the same: clear and intuitive feedback, even from across the room.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/19-focus-combo.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/18-focus-combo-800.gif" /></a>The three basic styles can be combined to produce more focus state variants. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/19-focus-combo.gif">Large preview</a>)
Having set the foundations of interaction, layout, and movement, we can start building on top of them. The next chapter will cover the most common elements of a TV interface, their variations, and a few tips and tricks for button-bound navigation.
Common TV UI Components
Nowadays, the core user journey on television revolves around browsing (or searching through) a content library, selecting an item, and opening a dedicated screen to watch or listen.
This translates into a few fundamental screens:
<ul>
<li>Library (or Home) for content browsing,</li>
<li>Search for specific queries, and</li>
<li>A player screen focused on content playback.</li>
</ul>
These screens are built with a handful of components optimized for the <a href="https://en.wikipedia.org/wiki/10-foot_user_interface">10-foot experience</a>, and while they are often found on other platforms too, it’s worth examining how they differ on TV.
<h3>Menus</h3>
Appearing as a horizontal bar along the top edge of the screen, or as a vertical sidebar, the menu helps move between the different screens of an app. While its orientation mostly depends on the specific system, it does seem TV favors the side menu a bit more.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/20-netflix-sidebar-expanded.jpg" />
Both menu types share a common issue: the farther the user navigates away from the menu (vertically, toward the bottom for top-bars; and horizontally, toward the right for sidebars), the more button presses are required to get back to it. Fortunately, usually a Back button shortcut is added to allow for immediate menu focus, which greatly improves usability.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/21-netflix-2-3-posters.jpg" />
16:9 posters abide by the same principles but with a horizontal orientation. They are often paired with text labels, which effectively turn them into cards, commonly seen on platforms like YouTube. In the absence of dedicated poster art, they show stills or playback from the videos, matching the aspect ratio of the media itself.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/22-amazon-prime-16-9-posters.jpg" />
1:1 posters are often found in music apps like Spotify, their shape reminiscent of album art and vinyl sleeves. These squares often get used in other instances, like representing channel links or profile tiles, giving more visual variety to the interface.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/23-spotify-1-1-posters.jpg" />
All of the above can co-exist within a single app, allowing for richer interfaces and breaking up otherwise uniform content libraries. 
And speaking of breaking up content, let’s see what we can do with spotlights!
<h3>Spotlights</h3>
Typically taking up the entire width of the screen, these eye-catching components will highlight a new feature or a promoted piece of media. In a sea of uniform shelves, they can be placed strategically to introduce aesthetic diversity and disrupt the monotony.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/24-spotlight-main.jpg" />
A spotlight can be a focusable element by itself, or it could expose several actions thanks to its generous space. In my ventures into TV design, I relied on a few different spotlight sizes, which allowed me to place multiples into a single row, all with the purpose of highlighting different aspects of the app, without breaking the form to which viewers were used.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/25-spotlight-half.jpg" />
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/26-spotlight-mini.jpg" />
Posters, cards, and spotlights shape the bulk of the visual experience and content presentation, but viewers still need a way to find specific titles. Let’s see how search and input are handled on TV.
<h3>Search And Entering Text</h3>
Manually browsing through content libraries can yield results, but having the ability to search will speed things up — though not without some hiccups.
TVs allow for text input in the form of on-screen keyboards, similar to the ones found in modern smartphones. However, inputting text with a remote control is quite inefficient given the restrictiveness of its control scheme. For example, typing “hey there” on a mobile keyboard requires 9 keystrokes, but about 38 on a TV (!) due to the movement between characters and their selection. 
Typing with a D-pad may be an arduous task, but at the same time, having the ability to search is unquestionably useful.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/27-roku-search.jpg" />
Luckily for us, keyboards are accounted for in all systems and usually come in two varieties. We’ve got the grid layouts used by most platforms and a horizontal layout in support of the touch-enabled and gesture-based controls on tvOS. Swiping between characters is significantly faster, but this is yet another pattern that can only be enhanced, not replaced.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/28-tvos-horizontal-keyboard.jpg" />
Modernization has made things significantly easier, with search autocomplete suggestions, device pairing, voice controls, and remotes with physical keyboards, but on-screen keyboards will likely remain a necessary fallback for quite a while. And no matter how cumbersome this fallback may be, we as designers need to consider it when building for TV.
<h3>Players And Progress Bars</h3>
While all the different sections of a TV app serve a purpose, the Player takes center stage. It’s where all the roads eventually lead to, and where viewers will spend the most time. It’s also one of the rare instances where focus gets lost, allowing for the interface to get out of the way of enjoying a piece of content.
Arguably, players are the most complex features of TV apps, compacting all the different functionalities into a single screen. Take YouTube, for example, its player doesn’t just handle expected playback controls but also supports content browsing, searching, reading comments, reacting, and navigating to channels, all within a single screen.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/29-youtube-android-player.jpg" />
Compared to YouTube, Netflix offers a very lightweight experience guided by the nature of the app. 
Still, every player has a basic set of controls, the foundation of which is the progress bar.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/30-netflix-player.jpg" />
The progress bar UI element serves as a visual indicator for content duration. During interaction, focus doesn’t get placed on the bar itself, but on a movable knob known as the “scrubber.” It is by moving the scrubber left and right, or stopping it in its tracks, that we can control playback. 
Another indirect method of invoking the progress bar is with the good old Play and Pause buttons. Rooted in the mechanical era of tape players, the universally understood triangle and two vertical bars are as integral to the TV legacy as the D-pad. No matter how minimalist and sleek the modern player interface may be, these symbols remain a staple of the viewing experience.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/31-physical-playback-controls.jpg" />
The presence of a scrubber may also indicate the type of content. Video on demand allows for the full set of playback controls, while live streams (unless DVR is involved) will do away with the scrubber since viewers won’t be able to rewind or fast-forward.
Earlier iterations of progress bars often came bundled with a set of playback control buttons, but as viewers got used to the tools available, these controls often got consolidated into the progress bar and scrubber themselves.
<h3>Bringing It All Together</h3>
With the building blocks out of the box, we’ve got everything necessary for a basic but functional TV app. Just as the six core buttons make remote navigation possible, the components and principles outlined above help guide purposeful TV design. The more context you bring, the more you’ll be able to expand and combine these basic principles, creating an experience unique to your needs. 
Before we wrap things up, I’d like to share a few tips and tricks I discovered along the way — tips and tricks which I wish I had known from the start. Regardless of how simple or complex your idea may be, these may serve you as useful tools to help add depth, polish, and finesse to any TV experience.
Thinking Beyond The Basics
Like any platform, TV has a set of constraints that we abide by when designing. But sometimes these norms are applied without question, making the already limited capabilities feel even more restraining. Below are a handful of less obvious ideas that can help you design more thoughtfully and flexibly for the big screen.
<h3>Long Press</h3>
Most modern remotes support press-and-hold gestures as a subtle way to enhance the functionality, especially on remotes with fewer buttons available.
For example, holding directional buttons when browsing content speeds up scrolling, while holding Left/Right during playback speeds up timeline seeking. In many apps, a single press of the OK button opens a video, but holding it for longer opens a contextual menu with additional actions.
<img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/32-amazon-xray-button-mapping.jpg" />
With limited input, context becomes a powerful tool. It not only declutters the interface to allow for more focus on specific tasks, but also enables the same set of buttons to trigger different actions based on the viewer’s location within an app.
Another great example is YouTube’s scrubber interaction. Once the scrubber is moved, every other UI element fades. This cleans up the viewer’s working area, so to speak, narrowing the interface to a single task. In this state — and only in this state — pressing Up one more time moves away from scrubbing and into browsing by chapter.
This is such an elegant example of expanding restraint, and adding more only when necessary. I hope it inspires similar interactions in your TV app designs.
<h3>Efficient Movement On TV</h3>
At its best, every action on TV “costs” at least one click. There’s no such thing as aimless cursor movement — if you want to move, you must press a button. We’ve seen how cumbersome it can be inside a keyboard, but there’s also something we can learn about efficient movement in these restrained circumstances.
Going back to the Homescreen, we can note that vertical and horizontal movement serve two distinct roles. Vertical movement switches between groups, while horizontal movement switches items within these groups. No matter how far you’ve gone inside a group, a single vertical click will move you into another.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/34-horizontal-group-movement.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/33-horizontal-group-movement-800.gif" /></a>Every step on TV “costs” an action, so we might as well optimize movement. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/34-horizontal-group-movement.gif">Large preview</a>)
This subtle difference — two axes with separate roles — is the most efficient way of moving in a TV interface. Reversing the pattern: horizontal to switch groups, and vertical to drill down, will work like a charm as long as you keep the role of each axis well defined.
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/36-vertical-group-movement.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/35-vertical-group-movement-800.gif" /></a>Properly applied in a vertical layout, the principles of optimal movement remain the same. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/36-vertical-group-movement.gif">Large preview</a>)
Quietly brilliant and easy to overlook, this pattern powers almost every step of the TV experience. Remember it, and use it well.
<h3>Thinking Beyond JPGs</h3>
After covering in detail many of the technicalities, let’s finish with some visual polish. 
Most TV interfaces are driven by tightly packed rows of cover and poster art. While often beautifully designed, this type of content and layouts leave little room for visual flair. For years, the flat JPG, with its small file size, has been a go-to format, though contemporary alternatives like <a href="https://en.wikipedia.org/wiki/WebP">WebP</a> are slowly taking its place. 
Meanwhile, we can rely on the tried and tested PNG to give a bit more shine to our TV interfaces. The simple fact that it supports transparency can help the often-rigid UIs feel more sophisticated. Used strategically and paired with simple focus effects such as background color changes, PNGs can bring subtle moments of delight to the interface. 
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/38-basic-png-focus.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/37-basic-png-focus-800.gif" /></a>Having a transparent background blends well with surface color changes common in TV interfaces. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/38-basic-png-focus.gif">Large preview</a>)
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/40-png-shape-focus.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/39-png-shape-focus-800.gif" /></a>And don’t forget, transparency doesn’t have to mean that there shouldn't be any background at all. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/40-png-shape-focus.gif">Large preview</a>)
Moreover, if transformations like scaling and rotating are supported, you can really make those rectangular shapes come alive with layering multiple assets. 
<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/42-multilayer-focus.gif"><img src="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/41-multilayer-focus-800.gif" /></a>Combining multiple images along with a background color change can liven up certain sections. (<a href="https://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/42-multilayer-focus.gif">Large preview</a>)
As you probably understand by now, these little touches of finesse don’t go out of bounds of possibility. They simply find more room to breathe within it. But with such limited capabilities, it’s best to learn all the different tricks that can help make your TV experiences stand out.
Closing Thoughts
Rooted in legacy, with a limited control scheme and a rather “shallow” interface, TV design reminds us to do the best with what we have at our disposal. The restraints I outlined are not meant to induce claustrophobia and make you feel limited in your design choices, but rather to serve you as guides. It is by accepting that fact that we can find freedom and new avenues to explore.
This two-part series of articles, just like my experience designing for TV, was not about reinventing the wheel with radical ideas. It was about understanding its nuances and contributing to what’s already there with my personal touch.
If you find yourself working in this design field, I hope my guide will serve as a warm welcome and will help you do your finest work. And if you have any questions, do leave a comment, and I will do my best to reply and help.
Good luck!
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://developer.android.com/design/ui/tv/guides/foundations/design-for-tv">Design for TV</a>,” by Android Developers Great TV design is all about putting content front and center. It's about creating an interface that's easier to use and navigate, even from a distance. It's about making it easier to find the content you love, and to enjoy it in the best possible quality.</li>
<li>“<a href="https://uxdesign.cc/guidelines-designing-for-television-experience-524f19ab6357">TV Guidelines: A quick kick-off on designing for Television Experiences</a>,” by Andrea Pacheco Just like designing a mobile app, designing a TV application can be a fun and complex thing to do, due to the numerous guidelines and best practices to follow. Below, I have listed the main best practices to keep in mind when designing an app for a 10-foot screen.</li>
<li>“<a href="https://marvelapp.com/blog/designing-for-television/">Designing for Television – TV Ui design</a>,” by Molly Lafferty We’re no longer limited to a remote and cable box to control our TVs; we’re using Smart TVs, or streaming from set-top boxes like Roku and Apple TV, or using video game consoles like Xbox and PlayStation. And each of these devices allows a user interface that’s much more powerful than your old-fashioned on-screen guide.</li>
<li>“<a href="https://www.toptal.com/designers/ui/tv-ui-design">Rethinking User Interface Design for the TV Platform</a>,” by Pascal Potvin Designing for television has become part of the continuum of devices that require a rethink of how we approach user interfaces and user experiences.</li>
<li>“<a href="https://developer.android.com/design/ui/tv/guides/styles/typography">Typography for TV</a>,” by Android Developers As television screens are typically viewed from a distance, interfaces that use larger typography are more legible and comfortable for users. TV Design's default type scale includes contrasting and flexible type styles to support a wide range of use cases.</li>
<li>“<a href="https://developer.apple.com/design/human-interface-guidelines/typography">Typography</a>,” by Apple Developer docs Your typographic choices can help you display legible text, convey an information hierarchy, communicate important content, and express your brand or style.</li>
<li>“<a href="https://developer.android.com/design/ui/tv/guides/foundations/color-on-tv">Color on TV</a>,” by Android Developers Color on TV design can inspire, set the mood, and even drive users to make decisions. It's a powerful and tangible element that users notice first. As a rich way to connect with a wide audience, it's no wonder color is an important step in crafting a high-quality TV interface.</li>
<li>“<a href="https://marvelapp.com/blog/designing-for-television/">Designing for Television — TV UI Design</a>,” by Molly Lafferty (Marvel Blog) Today, we’re no longer limited to a remote and cable box to control our TVs; we’re using Smart TVs, or streaming from set-top boxes like Roku and Apple TV, or using video game consoles like Xbox and PlayStation. And each of these devices allows a user interface that’s much more powerful than your old-fashioned on-screen guide.</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Milan Balać)</author>
<enclosure url="http://files.smashing.media/articles/designing-tv-principles-patterns-practical-guidance/designing-tv-principles-patterns-practical-guidance.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[A Breeze Of Inspiration In September (2025 Wallpapers Edition)]]></title>
<link>https://smashingmagazine.com/2025/08/desktop-wallpaper-calendars-september-2025/</link>
<guid>https://smashingmagazine.com/2025/08/desktop-wallpaper-calendars-september-2025/</guid>
<pubDate>Sun, 31 Aug 2025 08:00:00 GMT</pubDate>
<description><![CDATA[Could there be a better way to welcome the new month than with a new collection of desktop wallpapers? We’ve got some eye-catching designs to make your September just a bit more colorful. Enjoy!]]></description>
<content:encoded><![CDATA[September is just around the corner, and that means it’s time for some new wallpapers! For more than 14 years already, our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> has been the perfect occasion for artists and designers to challenge their creative skills and take on a little just-for-fun project — telling the stories they want to tell, using their favorite tools. This always makes for a unique and inspiring collection of wallpapers month after month, and, of course, this September is no exception.
In this post, you’ll find desktop wallpapers for September 2025, created with love by the community for the community. As a bonus, we’ve also added some oldies but goodies from our archives to the collection, so maybe you’ll spot one of your almost-forgotten favorites in here, too? A huge thank-you to everyone who shared their artworks with us this month — this post wouldn’t exist without your creativity and support!
By the way, if you’d like to get featured in one of our upcoming wallpapers editions, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We are always looking for creative talent and can’t wait to see your story come to life!
<ul>
<li>You can click on every image to see a larger preview.</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 full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
</ul>
21st Night Of September
“On the 21st night of September, the world danced in perfect harmony. Earth, Wind & Fire set the tone and now it’s your turn to keep the rhythm alive.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/sep-25-21st-night-of-september-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-25-21st-night-of-september-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/sep-25-21st-night-of-september-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/cal/sep-25-21st-night-of-september-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/21st-night-of-september/nocal/sep-25-21st-night-of-september-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Who
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/sep-25-who-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-25-who-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/sep-25-who-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/cal/sep-25-who-cal-3840x2160.png">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/who/nocal/sep-25-who-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Skating Through Chocolate Milk Day
“Celebrate Chocolate Milk Day with a perfect blend of fun and flavor. From smooth sips to smooth rides, it’s all about enjoying the simple moments that make the day unforgettable.” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/sep-25-skating-through-chocolate-milk-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-25-skating-through-chocolate-milk-day-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/sep-25-skating-through-chocolate-milk-day-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/cal/sep-25-skating-through-chocolate-milk-day-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/skating-through-chocolate-milk-day/nocal/sep-25-skating-through-chocolate-milk-day-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Mood
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/sep-25-mood-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-25-mood-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/sep-25-mood-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/cal/sep-25-mood-cal-3840x2160.png">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-25/mood/nocal/sep-25-mood-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Funny Cats
“Cats are beautiful animals. They’re quiet, clean, and warm. They’re funny and can become an endless source of love and entertainment. Here for the cats!” — Designed by UrbanUI from India.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/81a90359-0917-4ca1-84e5-700b5c71e3b9/sept-17-funny-cats-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77eaabbb-9743-45b6-99f3-f35a5584275f/sept-17-funny-cats-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77eaabbb-9743-45b6-99f3-f35a5584275f/sept-17-funny-cats-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-360x640.png">360x640</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/funny-cats/nocal/sept-17-funny-cats-nocal-1920x1080.png">1920x1080</a></li></ul>
Pigman And Robin
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-pigman-and-robin-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-pigman-and-robin-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-pigman-and-robin-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/pigman-and-robin/nocal/sep-24-pigman-and-robin-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Autumn Rains
“This autumn, we expect to see a lot of rainy days and blues, so we wanted to change the paradigm and wish a warm welcome to the new season. After all, if you come to think of it: rain is not so bad if you have an umbrella and a raincoat. Come autumn, we welcome you!” — Designed by <a href="https://www.popwebdesign.net/web-design-agency.html">PopArt Studio</a> from Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee2102d2-b5fc-4da5-8dd8-4ad100b079e7/sept-17-autumn-rains-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55161fb1-16dc-47e1-a118-5ecd0f0a3fbb/sept-17-autumn-rains-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55161fb1-16dc-47e1-a118-5ecd0f0a3fbb/sept-17-autumn-rains-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/autumn-rains/nocal/sept-17-autumn-rains-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Terrazzo
“With the end of summer and fall coming soon, I created this terrazzo pattern wallpaper to brighten up your desktop. Enjoy the month!” — Designed by <a href="https://www.embee.me/">Melissa Bogemans</a> from Belgium.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f2ab4afe-e503-4235-96fc-3c9ceade89e3/sep-20-terrazzo-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2644364f-a26f-40da-a000-4f0aea0db125/sep-20-terrazzo-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2644364f-a26f-40da-a000-4f0aea0db125/sep-20-terrazzo-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/terrazzo/nocal/sep-20-terrazzo-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Summer Ending
“As summer comes to an end, all the creatures pull back to their hiding places, searching for warmth within themselves and dreaming of neverending adventures under the tinted sky of closing dog days.” — Designed by Ana Masnikosa from Belgrade, Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/22d5ee98-2e90-4597-a06f-88de7965c1e2/sept-17-summer-ending-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed639caf-f1b5-43e7-9af6-ff85a675a4ef/sept-17-summer-ending-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed639caf-f1b5-43e7-9af6-ff85a675a4ef/sept-17-summer-ending-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/summer-ending/nocal/sept-17-summer-ending-nocal-2560x1440.png">2560x1440</a></li></ul>
Cacti Everywhere
“Seasons come and go, but our brave cactuses still stand. Summer is almost over and autumn is coming, but the beloved plants don’t care.” — Designed by <a href="https://pathlove.com/">Lívia Lénárt</a> from Hungary.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/65da1859-5ab5-475e-9940-f4e3045455d4/sep-18-cacti-everywhere-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2df837fa-5d23-4898-8502-0ed53e2cb2df/sep-18-cacti-everywhere-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2df837fa-5d23-4898-8502-0ed53e2cb2df/sep-18-cacti-everywhere-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-18/cacti-everywhere/nocal/sep-18-cacti-everywhere-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Flower Soul
“The earth has music for those who listen. Take a break and relax and while you drive out the stress, catch a glimpse of the beautiful nature around you. Can you hear the rhythm of the breeze blowing, the flowers singing, and the butterflies fluttering to cheer you up? We dedicate flowers which symbolize happiness and love to one and all.” — Designed by <a href="https://acodez.in/">Krishnankutty</a> from India.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f691ba9d-d4ab-4767-9899-836c61f6aeb0/sept-16-flower-soul-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/247433e6-81e3-4d55-9b68-55578f4138b8/sept-16-flower-soul-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/247433e6-81e3-4d55-9b68-55578f4138b8/sept-16-flower-soul-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/flower-soul/nocal/sept-16-flower-soul-nocal-2560x1440.png">2560x1440</a></li></ul>
Stay Or Leave?
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/413b8d04-e98b-4503-a3f6-e5a25cdd3ba1/sep-19-stay-or-leave-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/84692544-a30d-4a78-9685-1278d065cc6e/sep-19-stay-or-leave-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/84692544-a30d-4a78-9685-1278d065cc6e/sep-19-stay-or-leave-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/stay-or-leave/nocal/sep-19-stay-or-leave-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Rainy Flowers
Designed by <a href="https://teodoravasileva.net">Teodora Vasileva</a> from Bulgaria.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2024/sep-23-rainy-flowers-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2024/sep-23-rainy-flowers-preview.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2024/sep-23-rainy-flowers-preview.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-23/rainy-flowers/nocal/sep-23-rainy-flowers-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Listen Closer… The Mushrooms Are Growing
“It’s this time of the year when children go to school and grown-ups go to collect mushrooms.” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/053d1630-6081-4179-b45e-e4b9311c7ef4/sept-15-listen-closer-the-mushrooms-are-growing-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48d2812e-6e2b-4e34-87ec-e23a53297041/sept-15-listen-closer-the-mushrooms-are-growing-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48d2812e-6e2b-4e34-87ec-e23a53297041/sept-15-listen-closer-the-mushrooms-are-growing-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/listen-closer-the-mushrooms-are-growing/nocal/sept-15-listen-closer-the-mushrooms-are-growing-nocal-2560x1600.jpg">2560x1600</a></li>
</ul>
Weekend Relax
Designed by Robert from the United States.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dff475dd-1a0b-497d-8598-3e13142a8ce2/sep-20-weekend-relax-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f65a03-22e0-4593-92ec-9ab2e0bed79e/sep-20-weekend-relax-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f65a03-22e0-4593-92ec-9ab2e0bed79e/sep-20-weekend-relax-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/weekend-relax/nocal/sep-20-weekend-relax-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Hungry
Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f0b9019c-0e62-4f2e-8b03-9502c1a85a00/sept-14-hungry-full-opt.jpg"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/388cd653-31f5-4e98-bd72-29cb1e8ed4bf/sept-14-hungry-preview.jpg" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/388cd653-31f5-4e98-bd72-29cb1e8ed4bf/sept-14-hungry-preview.jpg">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-14/hungry/nocal/sept-14-hungry-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
National Video Games Day Delight
“September 12th brings us National Video Games Day. US-based video game players love this day and celebrate with huge gaming tournaments. What was once a 2D experience in the home is now a global phenomenon with players playing against each other across statelines and national borders via the internet. National Video Games Day gives gamers the perfect chance to celebrate and socialize! So grab your controller, join online, and let the games begin!” — Designed by <a href="https://www.everincreasingcircles.com/">Ever Increasing Circles</a> from the United Kingdom.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/65043639-9b5d-4516-9371-7b0b50b1ef30/sep-19-national-video-games-day-delight-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2e6f3ea-b44c-456a-a8be-509911dfb34a/sep-19-national-video-games-day-delight-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2e6f3ea-b44c-456a-a8be-509911dfb34a/sep-19-national-video-games-day-delight-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/national-video-games-day-delight/nocal/sep-19-national-video-games-day-delight-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
More Bananas
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-more-bananas-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-more-bananas-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-more-bananas-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/more-bananas/nocal/sep-24-more-bananas-nocal-3840x2160.png">3840x2160</a></li>
</ul>
National Elephant Appreciation Day
“Today, we celebrate these magnificent creatures who play such a vital role in our ecosystems and cultures. Elephants are symbols of wisdom, strength, and loyalty. Their social bonds are strong, and their playful nature, especially in the young ones, reminds us of the importance of joy and connection in our lives.” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-national-elephant-appreciation-day-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-national-elephant-appreciation-day-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-national-elephant-appreciation-day-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/national-elephant-appreciation-day/nocal/sep-24-national-elephant-appreciation-day-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Long Live Summer
“While September’s Autumnal Equinox technically signifies the end of the summer season, this wallpaper is for all those summer lovers, like me, who don’t want the sunshine, warm weather, and lazy days to end.” — Designed by Vicki Grunewald from Washington.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1431a5a8-a30f-4ab8-8875-0be50394f701/sept-15-long-live-summer-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/266371d3-48a0-4692-b12b-c2a0162f0b95/sept-15-long-live-summer-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/266371d3-48a0-4692-b12b-c2a0162f0b95/sept-15-long-live-summer-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-15/long-live-summer/nocal/sept-15-long-live-summer-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Bear Time
Designed by <a href="https://www.instagram.com/auvrea_illustration/">Bojana Stojanovic</a> from Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/71c7c07f-f784-4f21-82c5-3a08e2e8416d/sep-19-bear-time-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b9c1c73-6254-49d5-9e19-4f0e83e5bb0c/sep-19-bear-time-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b9c1c73-6254-49d5-9e19-4f0e83e5bb0c/sep-19-bear-time-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1280x1080.png">1280x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1440x990.png">1440x990</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-19/bear-time/nocal/sep-19-bear-time-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Still In Vacation Mood
“It’s officially the end of summer and I’m still in vacation mood, dreaming about all the amazing places I’ve seen. This illustration is inspired by a small town in France, on the Atlantic coast, right by the beach.” — Designed by <a href="https://www.behance.net/mirunasfia">Miruna Sfia</a> from Romania.<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df067a6a-5e87-48db-bae1-e6c20a3814a3/sept-17-still-in-vacation-mood-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4dc14ac0-029c-4f57-85ed-76b49cb5c183/sept-17-still-in-vacation-mood-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4dc14ac0-029c-4f57-85ed-76b49cb5c183/sept-17-still-in-vacation-mood-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/still-in-vacation-mood/nocal/sept-17-still-in-vacation-mood-nocal-2560x1440.png">2560x1440</a></li></ul>
Maryland Pride
“As summer comes to a close, so does the end of blue crab season in Maryland. Blue crabs have been a regional delicacy since the 1700s and have become Maryland’s most valuable fishing industry, adding millions of dollars to the Maryland economy each year. The blue crab has contributed so much to the state’s regional culture and economy, in 1989 it was named the State Crustacean, cementing its importance in Maryland history.” — Designed by <a href="https://bit.ly/TheHannonGroup">The Hannon Group</a> from Washington DC.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c681011-d8d1-4c4b-8e13-69aed69f9471/sept-17-marylandpride-large-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee60f479-606f-44cd-80c7-ec168d9d54f3/sept-17-marylandpride-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee60f479-606f-44cd-80c7-ec168d9d54f3/sept-17-marylandpride-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-17/marylandpride/nocal/sept-17-marylandpride-nocal-2560x1440.png">2560x1440</a></li></ul>
Summer In Costa Rica
“We continue in tropical climates. In this case, we travel to Costa Rica to observe the Arenal volcano from the lake while we use a kayak.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-summer-in-costa-rica-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-summer-in-costa-rica-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-september-2025/sep-24-summer-in-costa-rica-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/sep-24/summer-in-costa-rica/nocal/sep-24-summer-in-costa-rica-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Wine Harvest Season
“Welcome to the wine harvest season in Serbia. It’s September, and the hazy sunshine bathes the vines on the slopes of Fruška Gora. Everything is ready for the making of Bermet, the most famous wine from Serbia. This spiced wine was a favorite of the Austro-Hungarian elite and was served even on the Titanic. Bermet’s recipe is a closely guarded secret, and the wine is produced by just a handful of families in the town of Sremski Karlovci, near Novi Sad. On the other side of Novi Sad, plains of corn and sunflower fields blend in with the horizon, catching the last warm sun rays of this year.” — Designed by <a href="https://www.popwebdesign.net/logo-design-novisad.html">PopArt Studio </a> from Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/635541fb-2898-49c5-90f5-df7855a81568/sep-21-wine-harvest-season-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4e4c0b7b-0068-48f7-845e-bf20b10d8cec/sep-21-wine-harvest-season-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4e4c0b7b-0068-48f7-845e-bf20b10d8cec/sep-21-wine-harvest-season-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-21/wine-harvest-season/nocal/sep-21-wine-harvest-season-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Office
“Clean, minimalistic office for a productive day.” — Designed by Antun Hiršman from Croatia.<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/254b06d0-db60-4b99-bbcb-b0ee55d30465/sept-16-office-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5462c653-9c0b-4ae7-97d5-139ce8d48435/sept-16-office-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5462c653-9c0b-4ae7-97d5-139ce8d48435/sept-16-office-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sept-16/office/nocal/sept-16-office-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Colors Of September
“I love September. Its colors and smells.” — Designed by Juliagav from Ukraine.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f06a6968-1524-4afb-85a4-b12230506369/sep-13-colors-of-september-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9a49341-db50-475f-a215-a51237e07bcf/sep-13-colors-of-september-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9a49341-db50-475f-a215-a51237e07bcf/sep-13-colors-of-september-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-13/colors-of-september/nocal/sep-13-colors-of-september-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Never Stop Exploring
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/89f02687-d964-470b-9f2c-8cc52b7f25ee/sep-20-never-stop-exploring-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/525be032-d473-4d7a-a706-0d46d65742f4/sep-20-never-stop-exploring-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/525be032-d473-4d7a-a706-0d46d65742f4/sep-20-never-stop-exploring-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/sep-20/never-stop-exploring/nocal/sep-20-never-stop-exploring-nocal-3840x2160.png">3840x2160</a></li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Cosima Mielke)</author>
<enclosure url="http://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77eaabbb-9743-45b6-99f3-f35a5584275f/sept-17-funny-cats-preview-opt.png" length="0" type="image/png"/>
</item>
<item>
<title><![CDATA[Prompting Is A Design Act: How To Brief, Guide And Iterate With AI]]></title>
<link>https://smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/</link>
<guid>https://smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/</guid>
<pubDate>Fri, 29 Aug 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Prompting is more than giving AI some instructions. You could think of it as a design act, part creative brief and part conversation design. This second article on AI augmenting design work introduces a designerly approach to prompting: one that blends creative briefing, interaction design, and structural clarity.]]></description>
<content:encoded><![CDATA[In “<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”, we followed Kate’s weeklong journey of her first AI-augmented design sprint. She had three realizations through the process:
<ol>
<li>AI isn’t a co-pilot (yet); it’s more like a smart, eager intern. One with access to a lot of information, good recall, fast execution, but no context. That mindset defined how she approached every interaction with AI: not as magic, but as management. </li>
<li>Don’t trust; guide, coach, and always verify. Like any intern, AI needs coaching and supervision, and that’s where her designerly skills kicked in. Kate relied on curiosity to explore, observation to spot bias, empathy to humanize the output, and critical thinking to challenge what didn’t feel right. Her learning mindset helped her keep up with advances, and experimentation helped her learn by doing.</li>
<li>Prompting is part creative brief, and part conversation design, just with an AI instead of a person. When you prompt an AI, you’re not just giving instructions, but designing how it responds, behaves, and outputs information. If AI is like an intern, then the prompt is your creative brief that frames the task, sets the tone, and clarifies what good looks like. It’s also your conversation script that guides how it responds, how the interaction flows, and how ambiguity is handled.</li>
</ol>
As designers, we’re used to designing interactions for people. Prompting is us designing our own interactions with machines — it uses the same mindset with a new medium. It shapes an AI’s behavior the same way you’d guide a user with structure, clarity, and intent. 
If you’ve bookmarked, downloaded, or saved prompts from others, you’re not alone. We’ve all done that during our AI journeys. But while someone else’s prompts are a good starting point, you will get better and more relevant results if you can write your own prompts tailored to your goals, context, and style. Using someone else’s prompt is like using a Figma template. It gets the job done, but mastery comes from understanding and applying the fundamentals of design, including layout, flow, and reasoning. Prompts have a structure too. And when you learn it, you stop guessing and start designing.
Note: All prompts in this article were tested using ChatGPT — not because it’s the only game in town, but because it’s friendly, flexible, and lets you talk like a person, yes, even after the recent GPT-5 “update”. That said, any LLM with a decent attention span will work. Results for the same prompt may vary based on the AI model you use, the AI’s training, mood, and how confidently it can hallucinate.
Privacy PSA: As always, don’t share anything you wouldn’t want leaked, logged, or accidentally included in the next AI-generated meme. Keep it safe, legal, and user-respecting.
With that out of the way, let’s dive into the mindset, anatomy, and methods of effective prompting as another tool in your design toolkit.
Mindset: Prompt Like A Designer
As designers, we storyboard journeys, wireframe interfaces to guide users, and write UX copy with intention. However, when prompting AI, we treat it differently: “Summarize these insights”, “Make this better”, “Write copy for this screen”, and then wonder why the output feels generic, off-brand, or just meh. It’s like expecting a creative team to deliver great work from a one-line Slack message. We wouldn’t brief a freelancer, much less an intern, with “Design a landing page,” so why brief AI that way?
<h3>Prompting Is A Creative Brief For A Machine</h3>
Think of a good prompt as a creative brief, just for a non-human collaborator. It needs similar elements, including a clear role, defined goal, relevant context, tone guidance, and output expectations. Just as a well-written creative brief unlocks alignment and quality from your team, a well-structured prompt helps the AI meet your expectations, even though it doesn’t have real instincts or opinions. 
<h3>Prompting Is Also Conversation Design</h3>
A good prompt goes beyond defining the task and sets the tone for the exchange by designing a conversation: guiding how the AI interprets, sequences, and responds. You shape the flow of tasks, how ambiguity is handled, and how refinement happens — that’s conversation design. 
Anatomy: Structure It Like A Designer
So how do you write a designer-quality prompt? That’s where the W.I.R.E.+F.R.A.M.E. prompt design framework comes in — a UX-inspired framework for writing intentional, structured, and reusable prompts. Each letter represents a key design direction, grounded in the way UX designers already think: Just as a wireframe doesn’t dictate final visuals, this WIRE+FRAME framework doesn’t constrain creativity, but guides the AI with structured information it needs. 
<blockquote>“Why not just use a series of back-and-forth chats with AI?”</blockquote>
You can, and many people do. But without structure, AI fills in the gaps on its own, often with vague or generic results. A good prompt upfront saves time, reduces trial and error, and improves consistency. And whether you’re working on your own or across a team, a framework means you’re not reinventing a prompt every time but reusing what works to get better results faster.
Just as we build wireframes before adding layers of fidelity, the WIRE+FRAME framework has two parts:
<ul>
<li>WIRE is the must-have skeleton. It gives the prompt its shape.</li>
<li>FRAME is the set of enhancements that bring polish, logic, tone, and reusability — like building a high-fidelity interface from the wireframe.</li>
</ul>
Let’s improve <a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">Kate’s original research synthesis prompt</a> (“Read this customer feedback and tell me how we can improve financial literacy for Gen Z in our app”). To better reflect how people actually prompt in practice, let’s tweak it to a more broadly applicable version: “Read this customer feedback and tell me how we can improve our app for Gen Z users.” This one-liner mirrors the kinds of prompts we often throw at AI tools: short, simple, and often lacking structure.
Now, we’ll take that prompt and rebuild it using the first four elements of the W.I.R.E. framework — the core building blocks that provide AI with the main information it needs to deliver useful results.
<h3>W: Who & What</h3>
Define who the AI should be, and what it’s being asked to deliver.
A creative brief starts with assigning the right hat. Are you briefing a copywriter? A strategist? A product designer? The same logic applies here. Give the AI a clear identity and task. Treat AI like a trusted freelancer or intern. Instead of saying “help me”, tell it who it should act as and what’s expected.
Example: “You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities.”
<h3>I: Input Context</h3>
Provide background that frames the task.
Creative partners don’t work in a vacuum. They need context: the audience, goals, product, competitive landscape, and what’s been tried already. This is the “What you need to know before you start” section of the brief. Think: key insights, friction points, business objectives. The same goes for your prompt. 
Example: “You are analyzing customer feedback for Fintech Brand’s app, targeting Gen Z users. Feedback will be uploaded from sources such as app store reviews, survey feedback, and usability test transcripts.”
<h3>R: Rules & Constraints</h3>
Clarify any limitations, boundaries, and exclusions.
Good creative briefs always include boundaries — what to avoid, what’s off-brand, or what’s non-negotiable. Things like brand voice guidelines, legal requirements, or time and word count limits. Constraints don’t limit creativity — they focus it. AI needs the same constraints to avoid going off the rails.
Example: “Only analyze the uploaded customer feedback data. Do not fabricate pain points, representative quotes, journey stages, or patterns. Do not supplement with prior knowledge or hypothetical examples. Use clear, neutral, stakeholder-facing language.”
<h3>E: Expected Output</h3>
Spell out what the deliverable should look like.
This is the deliverable spec: What does the finished product look like? What tone, format, or channel is it for? Even if the task is clear, the format often isn’t. Do you want bullet points or a story? A table or a headline? If you don’t say, the AI will guess, and probably guess wrong. Even better, include an example of the output you want, an effective way to help AI know what you’re expecting. If you’re using GPT-5, you can also mix examples across formats (text, images, tables) together.
Example: “Return a structured list of themes. For each theme, include:
<ul>
<li>Theme Title</li>
<li>Summary of the Issue</li>
<li>Problem Statement</li>
<li>Opportunity</li>
<li>Representative Quotes (from data only)</li>
<li>Journey Stage(s)</li>
<li>Frequency (count from data)</li>
<li>Severity Score (1–5) where 1 = Minor inconvenience or annoyance; 3 = Frustrating but workaround exists; 5 = Blocking issue</li>
<li>Estimated Effort (Low / Medium / High), where Low = Copy or content tweak; Medium = Logic/UX/UI change; High = Significant changes.”</li>
</ul>
WIRE gives you everything you need to stop guessing and start designing your prompts with purpose. When you start with WIRE, your prompting is like a briefing, treating AI like a collaborator. 
Once you’ve mastered this core structure, you can layer in additional fidelity, like tone, step-by-step flow, or iterative feedback, using the FRAME elements. These five elements provide additional guidance and clarity to your prompt by layering clear deliverables, thoughtful tone, reusable structure, and space for creative iteration. 
<h3>F: Flow of Tasks</h3>
Break complex prompts into clear, ordered steps.
This is your project plan or creative workflow that lays out the stages, dependencies, or sequence of execution. When the task has multiple parts, don’t just throw it all into one sentence. You are doing the thinking and guiding AI. Structure it like steps in a user journey or modules in a storyboard. In this example, it fits as the blueprint for the AI to use to generate the table described in “E: Expected Output”
Example: “Recommended flow of tasks: Step 1: Parse the uploaded data and extract discrete pain points. Step 2: Group them into themes based on pattern similarity. Step 3: Score each theme by frequency (from data), severity (based on content), and estimated effort. Step 4: Map each theme to the appropriate customer journey stage(s). Step 5: For each theme, write a clear problem statement and opportunity based only on what’s in the data.”
<h3>R: Reference Voice or Style</h3>
Name the desired tone, mood, or reference brand.
This is the brand voice section or style mood board — reference points that shape the creative feel. Sometimes you want buttoned-up. Other times, you want conversational. Don’t assume the AI knows your tone, so spell it out.
Example: “Use the tone of a UX insights deck or product research report. Be concise, pattern-driven, and objective. Make summaries easy to scan by product managers and design leads.”
<h3>A: Ask for Clarification</h3>
Invite the AI to ask questions before generating, if anything is unclear.
This is your “Any questions before we begin?” moment — a key step in collaborative creative work. You wouldn’t want a freelancer to guess what you meant if the brief was fuzzy, so why expect AI to do better? Ask AI to reflect or clarify before jumping into output mode.
Example: “If the uploaded data is missing or unclear, ask for it before continuing. Also, ask for clarification if the feedback format is unstructured or inconsistent, or if the scoring criteria need refinement.”
<h3>M: Memory (Within The Conversation)</h3>
Reference earlier parts of the conversation and reuse what’s working.
This is similar to keeping visual tone or campaign language consistent across deliverables in a creative brief. Prompts are rarely one-shot tasks, so this reminds AI of the tone, audience, or structure already in play. GPT-5 got better with memory, but this still remains a useful element, especially if you switch topics or jump around.
Example: “Unless I say otherwise, keep using this process: analyze the data, group into themes, rank by importance, then suggest an action for each.”
<h3>E: Evaluate & Iterate</h3>
Invite the AI to critique, improve, or generate variations.
This is your revision loop — your way of prompting for creative direction, exploration, and refinement. Just like creatives expect feedback, your AI partner can handle review cycles if you ask for them. Build iteration into the brief to get closer to what you actually need. Sometimes, you may see ChatGPT test two versions of a response on its own by asking for your preference. 
Example: “After listing all themes, identify the one with the highest combined priority score (based on frequency, severity, and effort).
For that top-priority theme:
<ul>
<li>Critically evaluate its framing: Is the title clear? Are the quotes strong and representative? Is the journey mapping appropriate?</li>
<li>Suggest one improvement (e.g., improved title, more actionable implication, clearer quote, tighter summary).</li>
<li>Rewrite the theme entry with that improvement applied.</li>
<li>Briefly explain why the revision is stronger and more useful for product or design teams.”</li>
</ul>
Here’s a quick recap of the WIRE+FRAME framework:
<table>
<thead>
<tr>
<th>Framework Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>W: Who & What</td>
<td>Define the AI persona and the core deliverable.</td>
</tr>
<tr>
<td>I: Input Context</td>
<td>Provide background or data scope to frame the task.</td>
</tr>
<tr>
<td>R: Rules & Constraints</td>
<td>Set boundaries</td>
</tr>
<tr>
<td>E: Expected Output</td>
<td>Spell out the format and fields of the deliverable.</td>
</tr>
<tr>
<td>F: Flow of Tasks</td>
<td>Break the work into explicit, ordered sub-tasks.</td>
</tr>
<tr>
<td>R: Reference Voice/Style</td>
<td>Name the tone, mood, or reference brand to ensure consistency.</td>
</tr>
<tr>
<td>A: Ask for Clarification</td>
<td>Invite AI to pause and ask questions if any instructions or data are unclear before proceeding.</td>
</tr>
<tr>
<td>M: Memory</td>
<td>Leverage in-conversation memory to recall earlier definitions, examples, or phrasing without restating them.</td>
</tr>
<tr>
<td>E: Evaluate & Iterate</td>
<td>After generation, have the AI self-critique the top outputs and refine them.</td>
</tr>
</tbody>
</table>
And here’s the full WIRE+FRAME prompt: 
<blockquote>(W) You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities. (I) You are analyzing customer feedback for Fintech Brand’s app, targeting Gen Z users. Feedback will be uploaded from sources such as app store reviews, survey feedback, and usability test transcripts. (R) Only analyze the uploaded customer feedback data. Do not fabricate pain points, representative quotes, journey stages, or patterns. Do not supplement with prior knowledge or hypothetical examples. Use clear, neutral, stakeholder-facing language. (E) Return a structured list of themes. For each theme, include:<ul><li>Theme Title</li><li>Summary of the Issue</li><li>Problem Statement</li><li>Opportunity</li><li>Representative Quotes (from data only)</li><li>Journey Stage(s)</li><li>Frequency (count from data)</li><li>Severity Score (1–5) where 1 = Minor inconvenience or annoyance; 3 = Frustrating but workaround exists; 5 = Blocking issue</li><li>Estimated Effort (Low / Medium / High), where Low = Copy or content tweak; Medium = Logic/UX/UI change; High = Significant changes</li></ul>(F) Recommended flow of tasks: Step 1: Parse the uploaded data and extract discrete pain points. Step 2: Group them into themes based on pattern similarity. Step 3: Score each theme by frequency (from data), severity (based on content), and estimated effort. Step 4: Map each theme to the appropriate customer journey stage(s). Step 5: For each theme, write a clear problem statement and opportunity based only on what’s in the data. (R) Use the tone of a UX insights deck or product research report. Be concise, pattern-driven, and objective. Make summaries easy to scan by product managers and design leads. (A) If the uploaded data is missing or unclear, ask for it before continuing. Also, ask for clarification if the feedback format is unstructured or inconsistent, or if the scoring criteria need refinement. (M) Unless I say otherwise, keep using this process: analyze the data, group into themes, rank by importance, then suggest an action for each. (E) After listing all themes, identify the one with the highest combined priority score (based on frequency, severity, and effort). For that top-priority theme:<ul><li>Critically evaluate its framing: Is the title clear? Are the quotes strong and representative? Is the journey mapping appropriate?</li><li>Suggest one improvement (e.g., improved title, more actionable implication, clearer quote, tighter summary).</li><li>Rewrite the theme entry with that improvement applied.</li><li>Briefly explain why the revision is stronger and more useful for product or design teams.</li></ul></blockquote>
You could use “##” to label the sections (e.g., “##FLOW”) more for your readability than for AI. At over 400 words, this Insights Synthesis prompt example is a detailed, structured prompt, but it isn’t customized for you and your work. The intent wasn’t to give you a specific prompt (the proverbial fish), but to show how you can use a prompt framework like WIRE+FRAME to create a customized, relevant prompt that will help AI augment your work (teaching you to fish).
Keep in mind that prompt length isn’t a common concern, but rather a lack of quality and structure is. As of the time of writing, AI models can easily process prompts that are thousands of words long.
Not every prompt needs all the FRAME components; WIRE is often enough to get the job done. But when the work is strategic or highly contextual, pick components from FRAME — the extra details can make a difference. Together, WIRE+FRAME give you a detailed framework for creating a well-structured prompt, with the crucial components first, followed by optional components:
<ul>
<li>WIRE builds a clear, focused prompt with role, input, rules, and expected output.</li>
<li>FRAME adds refinement like tone, reusability, and iteration. </li>
</ul>
Here are some scenarios and recommendations for using WIRE or WIRE+FRAME:
<table>
<thead>
<tr>
<th>Scenarios</th>
<th>Description</th>
<th>Recommended</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simple, One-Off Analyses</td>
<td>Quick prompting with minimal setup and no need for detailed process transparency.</td>
<td>WIRE</td>
</tr>
<tr>
<td>Tight Sprints or Hackathons</td>
<td>Rapid turnarounds, and times you don’t need embedded review and iteration loops.</td>
<td>WIRE</td>
</tr>
<tr>
<td>Highly Iterative Exploratory Work</td>
<td>You expect to tweak results constantly and prefer manual control over each step.</td>
<td>WIRE</td>
</tr>
<tr>
<td>Complex Multi-Step Playbooks</td>
<td>Detailed workflows that benefit from a standardized, repeatable, visible sequence.</td>
<td>WIRE+FRAME</td>
</tr>
<tr>
<td>Shared or Hand-Off Projects</td>
<td>When different teams will rely on embedded clarification, memory, and consistent task flows for recurring analyses.</td>
<td>WIRE+FRAME</td>
</tr>
<tr>
<td>Built-In Quality Control</td>
<td>You want the AI to flag top issues, self-critique, and refine, minimizing manual QC steps.</td>
<td>WIRE+FRAME</td>
</tr>
</tbody>
</table>
Prompting isn’t about getting it right the first time. It’s about designing the interaction and redesigning when needed. With WIRE+FRAME, you’re going beyond basic prompting and designing the interaction between you and AI.
<h3>From Gut Feel To Framework: A Prompt Makeover</h3>
Let’s compare the results of Kate’s first AI-augmented design sprint prompt (to synthesize customer feedback into design insights) with one based on the WIRE+FRAME prompt framework, with the same data and focusing on the top results:
Original prompt: Read this customer feedback and tell me how we can improve our app for Gen Z users.
Initial ChatGPT Results:
<ul>
<li>Improve app reliability to reduce crashes and freezing.</li>
<li>Provide better guidance or tutorials for financial tools like budgeting or goal setting.</li>
<li>Enhance the transparency of Zelle transfers by showing confirmation messages.</li>
<li>Speed up app loading and reduce lag on key actions.</li>
</ul>
With this version, you’d likely need to go back and forth with follow-up questions, rewrite the output for clarity, and add structure before sharing with your team.
WIRE+FRAME prompt above (with defined role, scope, rules, expected format, tone, flow, and evaluation loop).
Initial ChatGPT Results:
<img src="https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png" />
You can clearly see the very different results from the two prompts, both using the exact same data. While the first prompt returns a quick list of ideas, the detailed WIRE+FRAME version doesn’t just summarize feedback but structures it. Themes are clearly labeled, supported by user quotes, mapped to customer journey stages, and prioritized by frequency, severity, and effort. 
The structured prompt results can be used as-is or shared without needing to reformat, rewrite, or explain them (see disclaimer below). The first prompt output needs massaging: it’s not detailed, lacks evidence, and would require several rounds of clarification to be actionable. The first prompt may work when the stakes are low and you are exploring. But when your prompt is feeding design, product, or strategy, structure comes to the rescue.
<h4>Disclaimer: Know Your Data</h4>
A well-structured prompt can make AI output more useful, but it shouldn’t be the final word, or your single source of truth. AI models are powerful pattern predictors, not fact-checkers. If your data is unclear or poorly referenced, even the best prompt may return confident nonsense. Don’t blindly trust what you see. Treat AI like a bright intern: fast, eager, and occasionally delusional. You should always be familiar with your data and validate what AI spits out. For example, in the WIRE+FRAME results above, AI rated the effort as low for financial tool onboarding. That could easily be a medium or high. Good prompting should be backed by good judgment.
<h3>Try This Now</h3>
Start by using the WIRE+FRAME framework to create a prompt that will help AI augment your work. You could also rewrite the last prompt you were not satisfied with, using the WIRE+FRAME, and compare the output.
Feel free to use <a href="https://wireframe-prompt-framework.lovable.app">this simple tool</a> to guide you through the framework.
Methods: From Lone Prompts to a Prompt System
Just as design systems have reusable components, your prompts can too. You can use the WIRE+FRAME framework to write detailed prompts, but you can also use the structure to create reusable components that are pre-tested, plug-and-play pieces you can assemble to build high-quality prompts faster. Each part of WIRE+FRAME can be transformed into a prompt component: small, reusable modules that reflect your team’s standards, voice, and strategy.
For instance, if you find yourself repeatedly using the same content for different parts of the WIRE+FRAME framework, you could save them as reusable components for you and your team. In the example below, we have two different reusable components for “W: Who & What” — an insights analyst and an information architect.
<h3>W: Who & What</h3>
<ol>
<li>You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities.</li>
<li>You are an experienced information architect specializing in organizing enterprise content on intranets. Your task is to reorganize the content and features into categories that reflect user goals, reduce cognitive load, and increase findability.</li>
</ol>
Create and save prompt components and variations for each part of the WIRE+FRAME framework, allowing your team to quickly assemble new prompts by combining components when available, rather than starting from scratch each time. 
Behind The Prompts: Questions About Prompting
Q: If I use a prompt framework like WIRE+FRAME every time, will the results be predictable?
A: Yes and no. Yes, your outputs will be guided by a consistent set of instructions (e.g., Rules, Examples, Reference Voice / Style) that will guide the AI to give you a predictable format and style of results. And no, while the framework provides structure, it doesn’t flatten the generative nature of AI, but focuses it on what’s important to you. In the next article, we will look at how you can use this to your advantage to quickly reuse your best repeatable prompts as we build your AI assistant.
Q: Could changes to AI models break the WIRE+FRAME framework?
A: AI models are evolving more rapidly than any other technology we’ve seen before — in fact, ChatGPT was recently updated to GPT-5 to mixed reviews. The update didn’t change the core principles of prompting or the WIRE+FRAME prompt framework. With future releases, some elements of how we write prompts today may change, but the need to communicate clearly with AI won’t. Think of how you delegate work to an intern vs. someone with a few years’ experience: you still need detailed instructions the first time either is doing a task, but the level of detail may change. WIRE+FRAME isn’t built only for today’s models; the components help you clarify your intent, share relevant context, define constraints, and guide tone and format — all timeless elements, no matter how smart the model becomes. The skill of shaping clear, structured interactions with non-human AI systems will remain valuable.
Q: Can prompts be more than text? What about images or sketches?
A: Absolutely. With tools like GPT-5 and other multimodal models, you can upload screenshots, pictures, whiteboard sketches, or wireframes. These visuals become part of your Input Context or help define the Expected Output. The same WIRE+FRAME principles still apply: you’re setting context, tone, and format, just using images and text together. Whether your input is a paragraph or an image and text, you’re still designing the interaction.
Have a prompt-related question of your own? Share it in the comments, and I’ll either respond there or explore it further in the next article in this series.
From Designerly Prompting To Custom Assistants
Good prompts and results don’t come from using others’ prompts, but from writing prompts that are customized for you and your context. The WIRE+FRAME framework helps with that and makes prompting a tool you can use to guide AI models like a creative partner instead of hoping for magic from a one-line request.
Prompting uses the designerly skills you already use every day to collaborate with AI:
<ul>
<li>Curiosity to explore what the AI can do and frame better prompts.</li>
<li>Observation to detect bias or blind spots.</li>
<li>Empathy to make machine outputs human.</li>
<li>Critical thinking to verify and refine.</li>
<li>Experiment & Iteration to learn by doing and improve the interaction over time.</li>
<li>Growth Mindset to keep up with new technology like AI and prompting.</li>
</ul>
Once you create and refine prompt components and prompts that work for you, make them reusable by documenting them. But wait, there’s more — what if your best prompts, or the elements of your prompts, could live inside your own AI assistant, available on demand, fluent in your voice, and trained on your context? That’s where we’re headed next.
In the next article, “Design Your Own Design Assistant”, we’ll take what you’ve learned so far and turn it into a Custom AI assistant (aka Custom GPT), a design-savvy, context-aware assistant that works like you do. We’ll walk through that exact build, from defining the assistant’s job description to uploading knowledge, testing, and sharing it with others. 
<h3>Resources</h3>
<ul>
<li><a href="https://cookbook.openai.com/examples/gpt-5/gpt-5_prompting_guide">GPT-5 Prompting Guide</a></li>
<li><a href="https://cookbook.openai.com/examples/gpt4-1_prompting_guide">GPT-4.1 Prompting Guide</a></li>
<li><a href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview">Anthropic Prompt Engineering</a> </li>
<li><a href="https://cloud.google.com/discover/what-is-prompt-engineering?hl=en">Prompt Engineering by Google</a></li>
<li><a href="https://docs.perplexity.ai/guides/prompt-guide">Perplexity</a> </li>
<li><a href="https://wireframe-prompt-framework.lovable.app">Webapp to guide you through the WIRE+FRAME framework</a></li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Lyndon Cerejo)</author>
<enclosure url="http://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/prompting-design-act-brief-guide-iterate-ai.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Designing For TV: The Evergreen Pattern That Shapes TV Experiences (Part 1)]]></title>
<link>https://smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/</link>
<guid>https://smashingmagazine.com/2025/08/designing-tv-evergreen-pattern-shapes-tv-experiences/</guid>
<pubDate>Wed, 27 Aug 2025 13:00:00 GMT</pubDate>
<description><![CDATA[TV interface design is a unique, fascinating, and often overlooked field. It’s been guided by decades of evolution and innovation, yet still firmly constrained by its legacy. Follow Milan into the history, quirks, and unshakable rules that dictate how we control these devices.]]></description>
<content:encoded><![CDATA[Television sets have been the staple of our living rooms for decades. We watch, we interact, and we control, but how often do we design for them? TV design flew under my “radar” for years, until one day I found myself in the deep, designing TV-specific user interfaces. Now, after gathering quite a bit of experience in the area, I would like to share my knowledge on this rather rare topic. If you’re interested in learning more about the user experience and user interfaces of television, this article should be a good starting point.
Just like any other device or use case, TV has its quirks, specifics, and guiding principles. Before getting started, it will be beneficial to understand the core ins and outs. In Part 1, we’ll start with a bit of history, take a close look at the fundamentals, and review the evolution of television. In <a href="https://www.smashingmagazine.com/2025/09/designing-tv-principles-patterns-practical-guidance/">Part 2</a>, we’ll dive into the depths of practical aspects of designing for TV, including its key principles and patterns.
Let’s start with the two key paradigms that dictate the process of designing TV interfaces.
Mind The Gap, Or The 10-foot-experience
Firstly, we have the so-called “<a href="https://www.edenspiekermann.com/insights/the-10-foot-experience/">10-foot experience</a>,” referring to the fact that interaction and consumption on TV happens from a distance of roughly three or more meters. This is significantly different than interacting with a phone or a computer and implies having some specific approaches in the TV user interface design. For example, we’ll need to make text and user interface (UI) elements larger on TV to account for the bigger distance to the screen.
Furthermore, we’ll take extra care to adhere to contrast standards, primarily relying on dark interfaces, as light ones may be too blinding in darker surroundings. And finally, considering the laid-back nature of the device, we’ll simplify the interactions.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/1-10-ft-experience.jpg" />
But the 10-foot experience is only one part of the equation. There wouldn’t be a “10-foot experience” in the first place if there were no mediator between the user and the device, and if we didn’t have something to interact through from a distance.
There would be no 10-foot experience if there were no remote controllers.
The Mediator
The remote, the second half of the equation, is what allows us to interact with the TV from the comfort of the couch. Slower and more deliberate, this conglomerate of buttons lacks the fluid motion of a mouse, or the dexterity of fingers against a touchscreen — yet the capabilities of the remote should not be underestimated.
Rudimentary as it is and with a limited set of functions, the remote allows for some interesting design approaches and can carry the weight of the modern TV along with its ever-growing requirements for interactivity. It underwent a handful of overhauls during the seventy years since its inception and was refined and made more ergonomic; however, there is a 40-year-old pattern so deeply ingrained in its foundation that nothing can change it.
What if I told you that you could navigate TV interfaces and apps with a basic controller from the 1980s just as well as with the latest remote from Apple? Not only that, but any experience built around the six core buttons of a remote will be system-agnostic and will easily translate across platforms.
This is the main point I will focus on for the rest of this article.
Birth Of A Pattern
As television sets were taking over people’s living rooms in the 1950s, manufacturers sought to upgrade and improve the user experience. The effort of walking up to the device to manually adjust some settings was eventually identified as an area for improvement, and as a result, the first television remote controllers were introduced to the market.
<h3>Early Developments</h3>
Preliminary iterations of the remotes were rather unique, and it took some divergence before we finally settled on a rectangular shape and sprinkled buttons on top. 
Take a look at the <a href="https://en.wikipedia.org/wiki/Zenith_Flash-matic">Zenith Flash-Matic</a>, for example. Designed in the mid-1950s, this standout device featured a single button that triggered a directional lamp; by pointing it at specific corners of the TV set, viewers could control various functions, such as changing channels or adjusting the volume.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/2-flash-matic.jpg" />
While they were a far cry compared to their modern counterparts, devices like the Flash-Matic set the scene for further developments, and we were off to the races!
As the designs evolved, the core functionality of the remote solidified. Gradually, remote controls became more than just simple channel changers, evolving into command centers for the expanding territory of home entertainment.
Note: I will not go too much into history here — aside from some specific points that are of importance to the matter at hand — but if you have some time to spare, do look into the developmental history of television sets and remotes, it’s quite a fascinating topic.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/3-space-command.jpg" />
However, practical as they may have been, they were still considered a luxury, significantly increasing the prices of TV sets. As the 1970s were coming to a close, only around <a href="https://www.grunge.com/826329/the-history-of-the-tv-remote/">17% of United States households</a> had a remote controller for their TVs. Yet, things would change as the new decade rolled in.
<h3>Button Mania Of The 1980s</h3>
The eighties brought with them the Apple Macintosh, MTV, and Star Wars. It was a time of cultural shifts and technological innovation. <a href="https://en.wikipedia.org/wiki/Videocassette_recorder">Videocassette recorders</a> (VCRs) and a multitude of other consumer electronics found their place in the living rooms of the world, along with TVs.
These new devices, while enriching our media experiences, also introduced a few new design problems. Where there was once a single remote, now there were multiple remotes, and things were getting slowly out of hand.
This marked the advent of universal remotes.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/4-universal-remote.jpg" />
Trying to hit many targets with one stone, the unwieldy universal remotes were humanity’s best solution for controlling a wider array of devices. And they did solve some of these problems, albeit in an awkward way. The complexity of universal remotes was a trade-off for versatility, allowing them to be programmed and used as a command center for controlling multiple devices. This meant transforming the relatively simple design of their predecessors into a beehive of buttons, prioritizing broader compatibility over elegance.
On the other hand, almost as a response to the inconvenience of the universal remote, a different type of controller was conceived in the 1980s — one with a very basic layout and set of buttons, and which would leave its mark in both how we interact with the TV, and how our remotes are laid out. A device that would, knowingly or not, give birth to a navigational pattern that is yet to be broken — the <a href="https://nintendo.fandom.com/wiki/Nintendo_Entertainment_System_controller">NES controller</a>.
<h3>D-pad Dominance</h3>
Released in 1985, the Nintendo Entertainment System (NES) was an instant hit. Having sold sixty million units around the world, it left an undeniable mark on the gaming console industry.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/5-nes-control.jpg" />
The NES controller (which was not truly remote, as it ran a cable to the central unit) introduced the world to a deceptively simple control scheme. Consisting of six primary actions, it gave us the directional pad (the D-pad), along with two action buttons (<code>A</code> and <code>B</code>). Made in response to the bulky joystick, the cross-shaped cluster allowed for easy movement along two axes (<code>up</code>, <code>down</code>, <code>left</code>, and <code>right</code>).
Charmingly intuitive, this navigational pattern would produce countless hours of gaming fun, but more importantly, its elementary design would “seep over” into the wider industry — the D-pad, along with the two action buttons, would become the very basis on which future remotes would be constructed.
The world continued spinning madly on, and what was once a luxury became commonplace. By the end of the decade, TV remotes were more integral to the standard television experience, and more than <a href="https://www.grunge.com/826329/the-history-of-the-tv-remote/">two-thirds of American TV owners</a> had some sort of a remote.
The nineties rolled in with further technological advancements. TV sets became more robust, allowing for finer tuning of their settings. This meant creating interfaces through which such tasks could be accomplished, and along with their master sets, remotes got updated as well.
Gone were the bulky rectangular behemoths of the eighties. As ergonomics took precedence, they got replaced by comfortably contoured devices that better fit their users’ hands. Once conglomerations of dozens of uniform buttons, these contemporary remotes introduced different shapes and sizes, allowing for recognition simply through touch. Commands were being clustered into sensible groups along the body of the remote, and within those button groups, a familiar shape started to emerge.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/6-magnavox-remote.jpg" />
Gradually, the D-pad found its spot on our TV remotes. As the evolution of these devices progressed, it became even more deeply embedded at the core of their interactivity.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/7-samsung-remote.jpg" />
Set-top boxes and smart features emerged in the 2000s and 2010s, and TV technology continued to advance. Along the way, many bells and whistles were introduced. TVs got bigger, brighter, thinner, yet their essence remained unchanged.
In the years since their inception, remotes were innovated upon, but all the undertakings circle back to the core principles of the NES controller. Future endeavours never managed to replace, but only to augment and reinforce the pattern.
The Evergreen Pattern
In 2013, <a href="https://www.lg.com/nz/about-lg/press-and-media/lg-announces-2013-lg-smart-tv-with-magic-remote/">LG introduced</a> their Magic remote (“So magically simple, the kids will be showing you how to use it!”). This uniquely shaped device enabled motion controls on LG TV sets, allowing users to point and click similar to a computer mouse. Having a pointer on the screen allowed for much more flexibility and speed within the system, and the remote was well-received and praised as one of the best smart TV remotes.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/8-lg-magic-remote.jpg" />
Innovating on tradition, this device introduced new features and fresh perspectives to the world of TV. But if we look at the device itself, we’ll see that, despite its differences, it still retains the D-pad as a means of interaction. It may be argued that LG never set out to replace the directional pad, and as it stands, regardless of their intent, they only managed to augment it.
For an even better example, let’s examine Apple TV’s second-generation remotes (the first-generation Siri remote). Being the industry disruptors, Apple introduced a touchpad to the top half of the remote. The glass surface provided briskness and precision to the experience, enabling multi-touch gestures, swipe navigation, and quick scrolling. This quality of life upgrade was most noticeable when typing with the horizontal on-screen keyboards, as it allowed for smoother and quicker scrolling from A to Z, making for a more refined experience.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/9-apple-tv-gen-2.jpg" />
While at first glance it may seem Apple removed the directional buttons, the fact is that the touchpad is simply a modernised take on the pattern, still abiding by the same four directions a classic D-pad does. You could say it’s a D-pad with an extra layer of gimmick.
Furthermore, the touchpad didn’t really sit well with the user base, along with the fact that the remote’s ergonomics were a bit iffy. So instead of pushing the boundaries even further with their third generation of remotes, Apple did a complete 180, <a href="https://support.apple.com/en-us/111844">re-introducing the classic D-pad</a> cluster while keeping the touch capabilities from the previous generation (the touch-enabled clickpad lets you select titles, swipe through playlists, and use a circular gesture on the outer ring to find just the scene you’re looking for).
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/10-apple-tv-gen-3.jpg" />
Now, why can’t we figure out a better way to navigate TVs? Does that mean we shouldn’t try to innovate? 
We can argue that using motion controls and gestures is an obvious upgrade to interacting with a TV. And we’d be right… in principle. These added features are more complex and costly to produce, but more importantly, while it has been upgraded with bits and bobs, the TV is essentially a legacy system. And it’s not only that.
While touch controls are a staple of interaction these days, adding them without thorough consideration can reduce the usability of a remote.
<h3>Pitfalls Of Touch Controls</h3>
Modern car dashboards are increasingly being dominated by touchscreens. While they may impress at auto shows, their <a href="https://uxdesign.cc/why-touchscreens-dont-work-in-cars-69b6ff3d4355">real-world usability is often compromised</a>. 
Driving demands constant focus and the ability to adapt and respond to ever-changing conditions. Any interface that requires taking your eyes off the road for more than a moment increases the risk of accidents. That’s exactly where touch controls fall short. While they may be more practical (and likely cheaper) for manufacturers to implement, they’re often the opposite for the end user.
Unlike physical buttons, knobs, and levers, which offer tactile landmarks and feedback, touch interfaces lack the ability to be used by feeling alone. Even simple tasks like adjusting the volume of the radio or the climate controls often involve gestures and nested menus, all performed on a smooth glass surface that demands visual attention, especially when fine-tuning.
Fortunately, the upcoming <a href="https://www.theautopian.com/europe-is-requiring-physical-buttons-for-cars-to-get-top-safety-marks-and-we-should-too/">2026 Euro NCAP regulations</a> will encourage car manufacturers to reintroduce physical controls for core functions, reducing driver distraction and promoting safer interaction.
Similarly (though far less critically), sleek, buttonless TV remote controls may feel modern, but they introduce unnecessary abstraction to a familiar set of controls.
Physical buttons with distinct shapes and positioning allow users to navigate by memory and touch, even in the dark. That’s not outdated — it’s a deeper layer of usability that modern design should respect, not discard.
And this is precisely why Apple reworked the Apple TV third-generation remote the way it is now, where the touch area at the top disappeared. Instead, the D-pad again had clearly defined buttons, and at the same time, the D-pad could also be extended (not replaced) to accept some touch gestures.
The Legacy Of TV
Let’s take a look at an old on-screen keyboard.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/11-zelda-keyboard.jpg" />
The Legend of Zelda, released in 1986, allowed players to register their names in-game. There are even older games with the same feature, but that’s beside the point. Using the NES controller, the players would move around the keyboard, entering their moniker character by character. Now let’s take a look at a modern iteration of the on-screen keyboard.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/12-google-tv-keyboard.jpg" />
Notice the difference? Or, to phrase it better: do you notice the similarities? Throughout the years, we’ve introduced quality of life improvements, but the core is exactly the same as it was forty years ago. And it is not the lack of innovation or bad remotes that keep TV deeply ingrained in its beginnings. It’s simply that it’s the most optimal way to interact given the circumstances.
<h3>Laying It All Out</h3>
Just like phones and computers, TV layouts are based on a grid system. However, this system is a lot more apparent and rudimentary on TV. Taking a look at a standard TV interface, we’ll see that it consists mainly of horizontal and vertical lists, also known as shelves.
<img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/13-youtube-tv-ui.jpg" />
These grids may be populated with cards, characters of the alphabet, or anything else, essentially, and upon closer examination, we’ll notice that our movement is restricted by a few factors:
<ol>
<li>There is no pointer for our eyes to follow, like there would be on a computer.</li>
<li>There is no way to interact directly with the display like we would with a touchscreen.</li>
</ol>
For the purposes of navigating with a remote, a focus state is introduced. This means that an element will always be highlighted for our eyes to anchor, and it will be the starting point for any subsequent movement within the interface.
<a href="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/14-focus-state-column-remote.gif"><img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/14-focus-state-column-remote.gif" /></a>Simplified TV UI demonstrating a focus state along with sequential movement from item to item within a column.
Moreover, starting from the focused element, we can notice that the movement is restricted to one item at a time, almost like skipping stones. Navigating linearly in such a manner, if we wanted to move within a list of elements from element #1 to element #5, we’d have to press a directional button four times.
<a href="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/15-focus-state-row-remote.gif"><img src="https://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/15-focus-state-row-remote.gif" /></a>Simplified TV UI demonstrating a focus state along with sequential movement from item to item within a row.
To successfully navigate such an interface, we need the ability to move <code>left</code>, <code>right</code>, <code>up</code>, and <code>down</code> — we need a D-pad. And once we’ve landed on our desired item, there needs to be a way to select it or make a confirmation, and in the case of a mistake, we need to be able to go back. For the purposes of those two additional interactions, we’d need two more buttons, <code>OK</code> and <code>back</code>, or to make it more abstract, we’d need buttons <code>A</code> and <code>B</code>.
<blockquote>So, to successfully navigate a TV interface, we need only a NES controller. Yes, we can enhance it with touchpads and motion gestures, augment it with voice controls, but this unshakeable foundation of interaction will remain as the very basic level of inherent complexity in a TV interface. Reducing it any further would significantly impair the experience, so all we’ve managed to do throughout the years is to only build upon it.</blockquote>
The D-pad and buttons <code>A</code> and <code>B</code> survived decades of innovation and technological shifts, and chances are they’ll survive many more. By understanding and respecting this principle, you can design intuitive, system-agnostic experiences and easily translate them across platforms. Knowing you can’t go simpler than these six buttons, you’ll easily build from the ground up and attach any additional framework-bound functionality to the time-tested core.
And once you get the grip of these paradigms, you’ll get into mapping and re-mapping buttons depending on context, and understand just how far you can go when designing for TV. You’ll be able to invent new experiences, conduct experiments, and challenge the patterns. But that is a topic for a different article.
Closing Thoughts
While designing for TV almost exclusively during the past few years, I was also often educating the stakeholders on the very principles outlined in this article. Trying to address their concerns about different remotes working slightly differently, I found respite in the simplicity of the NES controller and how it got the point across in an understandable way. Eventually, I expanded my knowledge by looking into the developmental history of the remote and was surprised that my analogy had backing in history. This is a fascinating niche, and there’s a lot more to share on the topic. I’m glad we started!
It’s vital to understand the fundamental “ins” and “outs” of any venture before getting practical, and TV is no different. Now that you understand the basics, go, dig in, and break some ground.
Having covered the underlying interaction patterns of TV experiences in detail, it’s time to get practical.
In <a href="https://www.smashingmagazine.com/2025/09/designing-tv-principles-patterns-practical-guidance/">Part 2</a>, we’ll explore the building blocks of the 10-foot experience and how to best utilize them in your designs. We’ll review the TV design fundamentals (the screen, layout, typography, color, and focus/focus styles), and the common TV UI components (menus, “shelves,” spotlights, search, and more). I will also show you how to start thinking beyond the basics and to work with — and around — the constraints which we abide by when designing for TV. Stay tuned!
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://www.edenspiekermann.com/insights/the-10-foot-experience/">The 10 Foot Experience</a>,” by Robert Stulle (Edenspiekermann) Every user interface should offer effortless navigation and control. For the 10-foot experience, this is twice as important; with only up, down, left, right, OK and back as your input vocabulary, things had better be crystal clear. You want to sit back and enjoy without having to look at your remote — your thumb should fly over the buttons to navigate, select, and activate.</li>
<li>“<a href="https://learn.microsoft.com/en-us/windows/win32/dxtecharts/introduction-to-the-10-foot-experience-for-windows-game-developers">Introduction to the 10-Foot Experience for Windows Game Developers</a>” (Microsoft Learn) A growing number of people are using their personal computers in a completely new way. When you think of typical interaction with a Windows-based computer, you probably envision sitting at a desk with a monitor, and using a mouse and keyboard (or perhaps a joystick device); this is referred to as the 2-foot experience. But there's another trend which you'll probably start hearing more about: the 10-foot experience, which describes using your computer as an entertainment device with output to a TV. This article introduces the 10-foot experience and explores the list of things that you should consider first about this new interaction pattern, even if you aren't expecting your game to be played this way.</li>
<li>“<a href="https://en.wikipedia.org/wiki/10-foot_user_interface">10-foot user interface</a>” (Wikipedia) In computing, a 10-foot user interface, or 3-meter UI, is a graphical user interface designed for televisions (TV). Compared to desktop computer and smartphone user interfaces, it uses text and other interface elements that are much larger in order to accommodate a typical television viewing distance of 10 feet (3.0 meters); in reality, this distance varies greatly between households, and additionally, the limitations of a television's remote control necessitate extra user experience considerations to minimize user effort.</li>
<li>“<a href="https://www.thoughtco.com/history-of-the-television-remote-control-1992384">The Television Remote Control: A Brief History</a>,” by Mary Bellis (ThoughtCo) The first TV remote, the Lazy Bone, was made in 1950 and used a cable. In 1955, the Flash-matic was the first wireless remote, but it had issues with sunlight. Zenith's Space Command in 1956 used ultrasound and became the popular choice for over 25 years.</li>
<li>“<a href="https://www.grunge.com/826329/the-history-of-the-tv-remote/">The History of The TV Remote</a>,” by Remy Millisky (Grunge) The first person to create and patent the remote control was none other than Nikola Tesla, inventor of the Tesla coil and numerous electronic systems. He patented the idea in 1893 to drive boats remotely, far before televisions were invented. Since then, remotes have come a long way, especially for the television, changing from small boxes with long wires to the wireless universal remotes that many people have today. How has the remote evolved over time?</li>
<li>“<a href="https://nintendo.fandom.com/wiki/Nintendo_Entertainment_System_controller">Nintendo Entertainment System controller</a>” (Nintendo Wiki) The Nintendo Entertainment System controller is the main controller for the NES. While previous systems had used joysticks, the NES controller provided a directional pad (the D-pad was introduced in the Game & Watch version of Donkey Kong).</li>
<li>“<a href="https://uxdesign.cc/why-touchscreens-dont-work-in-cars-69b6ff3d4355">Why Touchscreens In Cars Don’t Work</a>,” by Jacky Li (published in June 2018) Observing the behaviour of 21 drivers has made me realize what’s wrong with automotive UX. [...] While I was excited to learn more about the Tesla Model X, it slowly became apparent to me that the driver’s eyes were more glued to the screen than the road. Something about interacting with a touchscreen when driving made me curious to know: just how distracting are they?</li>
<li>“<a href="https://www.theautopian.com/europe-is-requiring-physical-buttons-for-cars-to-get-top-safety-marks-and-we-should-too/">Europe Is Requiring Physical Buttons For Cars To Get Top Safety Marks</a>,” by Jason Torchinsky (published in March 2024) The overuse of touchscreens is an industry-wide problem, with almost every vehicle-maker moving key controls onto central touchscreens, obliging drivers to take their eyes off the road and raising the risk of distraction crashes. New Euro NCAP tests due in 2026 will encourage manufacturers to use separate, physical controls for basic functions in an intuitive manner, limiting eyes-off-road time and therefore promoting safer driving.</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Milan Balać)</author>
<enclosure url="http://files.smashing.media/articles/designing-tv-evergreen-pattern-shapes-tv-experiences/designing-tv-evergreen-pattern-shapes-tv-experiences.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Optimizing PWAs For Different Display Modes]]></title>
<link>https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/</link>
<guid>https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/</guid>
<pubDate>Tue, 26 Aug 2025 08:00:00 GMT</pubDate>
<description><![CDATA[Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. This article covers how we can modify our app depending on what display mode is applied to mitigate these issues.]]></description>
<content:encoded><![CDATA[<a href="https://www.smashingmagazine.com/2020/12/progressive-web-apps/">Progressive web apps</a> (PWA) are a fantastic way to turn web applications into native-like, standalone experiences. They bridge the gap between websites and native apps, but this transformation can be prone to introducing design challenges that require thoughtful consideration.
We define our PWAs <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest">with a manifest file</a>. In our PWA’s manifest, we can select from a collection of display modes, each offering different levels of browser interface visibility:
<ul>
<li><code>fullscreen</code>: Hides all browser UI, using the entire display.</li>
<li><code>standalone</code>: Looks like a native app, hiding browser controls but keeping system UI.</li>
<li><code>minimal-ui</code>: Shows minimal browser UI elements.</li>
<li><code>browser</code>: Standard web browser experience with full browser interface.</li>
</ul>
Oftentimes, we want our PWAs to feel like apps rather than a website in a browser, so we set the display manifest member to one of the options that hides the browser’s interface, such as <code>fullscreen</code> or <code>standalone</code>. This is fantastic for helping make our applications feel more at home, but it can introduce some issues we wouldn’t usually consider when building for the web.
It’s easy to forget just how much functionality the browser provides to us. Things like forward/back buttons, the ability to refresh a page, search within pages, or even manipulate, share, or copy a page’s URL are all browser-provided features that users can lose access to when the browser’s UI is hidden. There is also the case of things that we display on websites that don’t necessarily translate to app experiences.
<img src="https://files.smashing.media/articles/optimizing-pwas-different-display-modes/progressive-web-app-examples.png" />
Imagine a user deep into a form with no back button, trying to share a product page without the ability to copy a URL, or hitting a bug with no refresh button to bail them out!
Much like how we make different considerations when designing for the web versus designing for print, we need to make considerations when designing for independent experiences rather than browser-based experiences by tailoring the content and user experience to the medium.
Thankfully, we’re provided with plenty of ways to customise the web.
Using Media Queries To Target Display Modes
We use media queries all the time when writing CSS. Whether it’s switching up styles for print or setting breakpoints for responsive design, they’re commonplace in the web developer’s toolkit. Each of the display modes discussed previously can be used as a media query to alter the appearance of documents depending.
Media queries such as <code>@media (min-width: 1000px)</code> tend to get the most use for setting breakpoints based on the viewport size, but they’re capable of so much more. They can handle <a href="https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/">print styles</a>, device orientation, contrast preferences, and a whole ton more. In our case, we’re interested in the <code>display-mode</code> media feature.
Display mode media queries correspond to the current display mode.
Note: While we may set display modes in our manifest, the actual display mode may differ depending on browser support.
These media queries directly reference the current mode:
<ul>
<li><code>@media (display-mode: standalone)</code> will only apply to pages set to standalone mode.</li>
<li><code>@media (display-mode: fullscreen)</code> applies to fullscreen mode. It is worth noting that this also applies when using the Fullscreen API.</li>
<li><code>@media (display-mode: minimal-ui)</code> applies to minimal UI mode.</li>
<li><code>@media (display-mode: browser)</code> applies to standard browser mode.</li>
</ul>
It is also worth keeping an eye out for the <code>window-controls-overlay</code> and <code>tabbed</code> display modes. At the time of writing, these two display modes are experimental and can be used with <code>display_override</code>. <code>display-override</code> is a member of our PWA’s manifest, like <code>display</code>, but provides some extra options and power.
<code>display</code> has a predetermined fallback chain (<code>fullscreen</code> -> <code>standalone</code> -> <code>minimal-ui</code> -> <code>browser</code>) that we can’t change, but <code>display-override</code> allows setting a fallback order of our choosing, like the following:
<pre><code>"display_override": ["fullscreen", "minimal-ui"]
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API"><code>window-controls-overlay</code></a> can only apply to PWAs running on a desktop operating system. It makes the PWA take up the entire window, with window control buttons appearing as an overlay. Meanwhile, <code>tabbed</code> is relevant when there are multiple applications within a single window.
In addition to these, there is also the <code>picture-in-picture</code> display mode that applies to (you guessed it) picture-in-picture modes.
We use these media queries exactly as we would any other media query. To show an element with the class <code>.pwa-only</code> when the display mode is standalone, we could do this:
<pre><code>.pwa-only {
display: none;
}
@media (display-mode: standalone) {
.pwa-only {
display: block;
}
}
</code></pre>
If we wanted to show the element when the display mode is standalone or <code>minimal-ui</code>, we could do this:
<div>
<pre><code>@media (display-mode: standalone), (display-mode: minimal-ui) {
.pwa-only {
display: block;
}
}
</code></pre>
</div>
As great as it is, sometimes CSS isn’t enough. In those cases, we can also reference the display mode and make necessary adjustments with JavaScript:
<div>
<pre><code>const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
// Listen for display mode changes
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
if (e.matches) {
// App is now in standalone mode
console.log("Running as PWA");
}
});
</code></pre>
</div>
Practical Applications
Now that we know how to make display modifications depending on whether users are using our web app as a PWA or in a browser, we can have a look at how we might put these newly learnt skills to use.
<h3>Tailoring Content For PWA Users</h3>
Users who have an app installed as a PWA are already converted, so you can tweak your app to tone down the marketing speak and focus on the user experience. Since these users have demonstrated commitment by installing your app, they likely don’t need promotional content or installation prompts.
<h3>Display More Options And Features</h3>
You might need to directly expose more things in PWA mode, as people won’t be able to access the browser’s settings as easily when the browser UI is hidden. Features like changing font sizing, switching between light and dark mode, bookmarks, sharing, tabs, etc., might need an in-app alternative.
<h3>Platform-Appropriate Features</h3>
There are features you might not want on your web app because they feel out of place, but that you might want on your PWA. A good example is the bottom navigation bar, which is common in native mobile apps thanks to the easier reachability it provides, but uncommon on websites.
People sometimes print websites, but they very rarely print apps. Consider whether features like print buttons should be hidden in PWA mode.
<h3>Install Prompts</h3>
A common annoyance is a prompt to install a site as a PWA appearing when the user has already installed the site. Ideally, the browser will provide an install prompt of its own if our PWA is configured correctly, but not all browsers do, and it can be finicky. MDN has a fantastic guide on <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt">creating a custom button to trigger the installation of a PWA</a>, but it might not fit our needs.
We can improve things by hiding install prompts with our media query or detecting the current display mode with JavaScript and forgoing triggering popups in the first place.
We could even set this up as a reusable utility class so that anything we don’t want to be displayed when the app is installed as a PWA can be hidden with ease.
<pre><code>/* Utility class to hide elements in PWA mode */
.hide-in-pwa {
display: block;
}
@media (display-mode: standalone), (display-mode: minimal-ui) {
.hide-in-pwa {
display: none !important;
}
}
</code></pre>
Then in your HTML:
<pre><code><div class="install-prompt hide-in-pwa">
<button>Install Our App</button>
</div>
<div class="browser-notice hide-in-pwa">
For the best experience, install this as an app!
</div>
</code></pre>
We could also do the opposite and create a utility class to make elements only show when in a PWA, as we discussed earlier.
<h3>Strategic Use Of Scope And Start URL</h3>
Another way to hide content from your site is to set the <code>scope</code> and <code>start_url</code> properties. These aren’t using media queries as we’ve discussed, but should be considered as ways to present different content depending on whether a site is installed as a PWA.
Here is an example of a manifest using these properties:
<pre><code>{
"name": "Example PWA",</code>
<code>"scope": "/dashboard/",</code>
<code>"start_url": "/dashboard/index.html",</code>
<code>"display": "standalone",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
</code></pre>
<code>scope</code> here defines the top level of the PWA. When users leave the scope of your PWA, they’ll still have an app-like interface but gain access to browser UI elements. This can be useful if you’ve got certain parts of your app that you still want to be part of the PWA but which aren’t necessarily optimised or making the necessary considerations.
<code>start_url</code> defines the URL a user will be presented with when they open the application. This is useful if, for example, your app has marketing content at <code>example.com</code> and a dashboard at <code>example.com/dashboard/index.html</code>. It is likely that people who have installed the app as a PWA don’t need the marketing content, so you can set the <code>start_url</code> to <code>/dashboard/index.html</code> so the app starts on that page when they open the PWA.
<h3>Enhanced Transitions</h3>
<a href="https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/">View transitions</a> can feel unfamiliar, out of place, and a tad gaudy on the web, but are a common feature of native applications. We can set up PWA-only view transitions by wrapping the relevant CSS appropriately:
<pre><code>@media (display-mode: standalone) {
@view-transition {
navigation: auto;
}
}
</code></pre>
If you’re really ambitious, you could also tweak the design of a site entirely to fit more closely with native design systems when running as a PWA by pairing a check for the display mode with a check for the device and/or browser in use as needed.
Browser Support And Testing
Browser support for display mode media queries is <a href="https://caniuse.com/mdn-css_at-rules_media_display-mode">good and extensive</a>. However, it’s worth noting that Firefox doesn’t have PWA support, and Firefox for Android only displays PWAs in <code>browser</code> mode, so you should make the necessary considerations. Thankfully, <a href="https://www.smashingmagazine.com/2013/09/progressive-enhancement-is-faster/">progressive enhancement</a> is on our side. If we’re dealing with a browser lacking support for PWAs or these media queries, we’ll be treated to graceful degradation.
Testing PWAs can be challenging because every device and browser handles them differently. Each display mode behaves slightly differently in every browser and OS combination.
Unfortunately, I don’t have a silver bullet to offer you with regard to this. Browsers don’t have a convenient way to simulate display modes for testing, so you’ll have to test out your PWA on different devices, browsers, and operating systems to be sure everything works everywhere it should, as it should.
Recap
Using a PWA is a fundamentally different experience from using a web app in the browser, so considerations should be made. <code>display-mode</code> media queries provide a powerful way to create truly adaptive Progressive Web Apps that respond intelligently to their installation and display context. By leveraging these queries, we can do the following:
<ul>
<li>Hide redundant installation prompts for users who have already installed the app,</li>
<li>Provide appropriate navigation aids when making browser controls unavailable,</li>
<li>Tailor content and functionality to match user expectations in different contexts,</li>
<li>Create more native-feeling experiences that respect platform conventions, and</li>
<li>Progressively enhance the experience for committed users.</li>
</ul>
The key is remembering that PWA users in standalone mode have different needs and expectations than standard website visitors. By detecting and responding to display modes, we can create experiences that feel more polished, purposeful, and genuinely app-like.
As PWAs continue to mature, thoughtful implementations and tailoring will become increasingly important for creating truly compelling app experiences on the web. If you’re itching for even more information and PWA tips and tricks, check out Ankita Masand’s “<a href="https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/">Extensive Guide To Progressive Web Applications</a>”.
<h3>Further Reading On SmashingMag</h3>
<ul>
<li>“<a href="https://www.smashingmagazine.com/2021/11/magento-pwa-customizing-themes-coding/">Creating A Magento PWA: Customizing Themes vs. Coding From Scratch</a>”, Alex Husar</li>
<li>“<a href="https://www.smashingmagazine.com/2020/12/progressive-web-apps/">How To Optimize Progressive Web Apps: Going Beyond The Basics</a>”, Gert Svaiko</li>
<li>“<a href="https://www.smashingmagazine.com/2020/01/mobile-pwa-sticky-bars-elements/">How To Decide Which PWA Elements Should Stick</a>”, Suzanne Scacca</li>
<li>“<a href="https://www.smashingmagazine.com/2024/06/uniting-web-native-apps-unknown-javascript-apis/">Uniting Web And Native Apps With 4 Unknown JavaScript APIs</a>”, Juan Diego Rodríguez</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Declan Chidlow)</author>
<enclosure url="http://files.smashing.media/articles/optimizing-pwas-different-display-modes/optimizing-pwas-different-display-modes.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[A Week In The Life Of An AI-Augmented Designer]]></title>
<link>https://smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/</link>
<guid>https://smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/</guid>
<pubDate>Fri, 22 Aug 2025 08:00:00 GMT</pubDate>
<description><![CDATA[If you are new to using AI in design or curious about integrating AI into your UX process without losing your human touch, this article offers a grounded, day-by-day look at introducing AI into your design workflow.]]></description>
<content:encoded><![CDATA[Artificial Intelligence isn’t new, but in November 2022, something changed. The launch of ChatGPT brought AI out of the background and into everyday life. Suddenly, interacting with a machine didn’t feel technical — it felt conversational.
Just this March, ChatGPT overtook Instagram and TikTok as the most downloaded app in the world. That level of adoption shows that millions of everyday users, not just developers or early adopters, are comfortable using AI in casual, conversational ways. People are using AI not just to get answers, but to <a href="https://hbr.org/2025/04/how-people-are-really-using-gen-ai-in-2025">think, create, plan, and even to help with mental health and loneliness</a>. 
In the past two and a half years, people have moved through the <a href="https://www.ekrfoundation.org/5-stages-of-grief/change-curve/">Kübler-Ross Change Curve</a> — only instead of grief, it’s AI-induced uncertainty. UX designers, like Kate (who you’ll meet shortly), have experienced something like this:
<ul>
<li>Denial: “AI can’t design like a human; it won’t affect my workflow.”</li>
<li>Anger: “AI will ruin creativity. It’s a threat to our craft.”</li>
<li>Bargaining: “Okay, maybe just for the boring tasks.”</li>
<li>Depression: “I can’t keep up. What’s the future of my skills?”</li>
<li>Acceptance: “Alright, AI can free me up for more strategic, human work.”</li>
</ul>
As designers move into experimentation, they’re not asking, Can I use AI? but How might I use it well?.
Using AI isn’t about chasing the latest shiny object but about learning how to stay human in a world of machines, and use AI not as a shortcut, but as a creative collaborator.
It isn’t about finding, bookmarking, downloading, or hoarding prompts, but experimenting and writing your own prompts. 
To bring this to life, we’ll follow Kate, a mid-level designer at a FinTech company, navigating her first AI-augmented design sprint. You’ll see her ups and downs as she experiments with AI, tries to balance human-centered skills with AI tools, when she relies on intuition over automation, and how she reflects critically on the role of AI at each stage of the sprint.
The next two planned articles in this series will explore how to design prompts (Part 2) and guide you through building your own AI assistant (aka CustomGPT; Part 3). Along the way, we’ll spotlight the <a href="https://www.smashingmagazine.com/2023/04/skills-designers-ai-cant-replicate/">designerly skills AI can’t replicate</a> like curiosity, empathy, critical thinking, and experimentation that will set you apart in a world where automation is easy, but people and human-centered design matter even more.
Note: This article was written by a human (with feelings, snacks, and deadlines). The prompts are real, the AI replies are straight from the source, and no language models were overworked — just politely bossed around. All em dashes are the handiwork of MS Word’s autocorrect — not AI. Kate is fictional, but her week is stitched together from real tools, real prompts, real design activities, and real challenges designers everywhere are navigating right now. She will primarily be using ChatGPT, reflecting the popularity of this jack-of-all-trades AI as the place many start their AI journeys before branching out. If you stick around to the end, you’ll find other AI tools that may be better suited for different design sprint activities. Due to the pace of AI advances, your outputs may vary (YOMV), possibly by the time you finish reading this sentence.
Cautionary Note: AI is helpful, but not always private or secure. Never share sensitive, confidential, or personal information with AI tools — even the helpful-sounding ones. When in doubt, treat it like a coworker who remembers everything and may not be particularly good at keeping secrets.
Prologue: Meet Kate (As She Preps For The Upcoming Week)
Kate stared at the digital mountain of feedback on her screen: transcripts, app reviews, survey snippets, all waiting to be synthesized. Deadlines loomed. Her calendar was a nightmare. Meanwhile, LinkedIn was ablaze with AI hot takes and success stories. Everyone seemed to have found their “AI groove” — except her. She wasn’t anti-AI. She just hadn’t figured out how it actually fit into her work. She had tried some of the prompts she saw online, played with some AI plugins and extensions, but it felt like an add-on, not a core part of her design workflow.
Her team was focusing on improving financial confidence for Gen Z users of their FinTech app, and Kate planned to use one of her favorite frameworks: <a href="https://www.gv.com/sprint/">the Design Sprint</a>, a five-day, high-focus process that condenses months of product thinking into a single week. Each day tackles a distinct phase: Understand, Sketch, Decide, Prototype, and Test. All designed to move fast, make ideas tangible, and learn from real users before making big bets.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png" />
This time, she planned to experiment with a very lightweight version of the design sprint, almost “solo-ish” since her PM and engineer were available for check-ins and decisions, but not present every day. That gave her both space and a constraint, and made it the perfect opportunity to explore how AI could augment each phase of the sprint. 
She decided to lean on her designerly behavior of experimentation and learning and integrate AI intentionally into her sprint prep, using it as both a creative partner and a thinking aid. Not with a rigid plan, but with a working hypothesis that AI would at the very least speed her up, if nothing else. 
She wouldn’t just be designing and testing a prototype, but prototyping and testing what it means to design with AI, while still staying in the driver’s seat.
Follow Kate along her journey through her first AI-powered design sprint: from curiosity to friction and from skepticism to insight.
Monday: Understanding the Problem (aka: Kate Vs. Digital Pile Of Notes)
The first day of a design sprint is spent understanding the user, their problems, business priorities, and technical constraints, and narrowing down the problem to solve that week.
This morning, Kate had transcripts from recent user interviews and customer feedback from the past year from app stores, surveys, and their customer support center. Typically, she would set aside a few days to process everything, coming out with glazed eyes and a few new insights. This time, she decided to use ChatGPT to summarize that data: “Read this customer feedback and tell me how we can improve financial literacy for Gen Z in our app.” 
ChatGPT’s outputs were underwhelming to say the least. Disappointed, she was about to give up when she remembered an infographic about good prompting that she had emailed herself. She updated her prompt based on those recommendations:
<ul>
<li>Defined a role for the AI (“product strategist”),</li>
<li>Provided context (user group and design sprint objectives), and</li>
<li>Clearly outlined what she was looking for (financial literacy related patterns in pain points, blockers, confusion, lack of confidence; synthesis to identify top opportunity areas).</li>
</ul>
By the time she Aero-pressed her next cup of coffee, ChatGPT had completed its analysis, highlighting blockers like jargon, lack of control, fear of making the wrong choice, and need for blockchain wallets. Wait, what? That last one felt off.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png" />
Kate searched her sources and confirmed her hunch: AI hallucination! Despite the best of prompts, AI sometimes makes things up based on trendy concepts from its training data rather than actual data. Kate updated her prompt with constraints to make ChatGPT only use data she had uploaded, and to cite examples from that data in its results. 18 seconds later, the updated results did not mention blockchain or other unexpected results. 
By lunch, Kate had the makings of a research summary that would have taken much, much longer, and a whole lot of caffeine.
That afternoon, Kate and her product partner plotted the pain points on the Gen Z app journey. The emotional mapping highlighted the most critical moment: the first step of a financial decision, like setting a savings goal or choosing an investment option. That was when fear, confusion, and lack of confidence held people back. 
AI synthesis combined with human insight helped them define the problem statement as: “How might we help Gen Z users confidently take their first financial action in our app, in a way that feels simple, safe, and puts them in control?” 
<h3>Kate’s Reflection</h3>
As she wrapped up for the day, Kate jotted down her reflections on her first day as an AI-augmented designer: 
<blockquote>There’s nothing like learning by doing. I’ve been reading about AI and tinkering around, but took the plunge today. Turns out AI is much more than a tool, but I wouldn’t call it a co-pilot. Yet. I think it’s like a sharp intern: it has a lot of information, is fast, eager to help, but it lacks context, needs supervision, and can surprise you. You have to give it clear instructions, double-check its work, and guide and supervise it. Oh, and maintain boundaries by not sharing anything I wouldn’t want others to know. Today was about listening — to users, to patterns, to my own instincts. AI helped me sift through interviews fast, but I had to stay curious to catch what it missed. Some quotes felt too clean, like the edges had been smoothed over. That’s where observation and empathy kicked in. I had to ask myself: what’s underneath this summary? Critical thinking was the designerly skill I had to exercise most today. It was tempting to take the AI’s synthesis at face value, but I had to push back by re-reading transcripts, questioning assumptions, and making sure I wasn’t outsourcing my judgment. Turns out, the thinking part still belongs to me.</blockquote>
Tuesday: Sketching (aka: Kate And The Sea of OKish Ideas)
Day 2 of a design sprint focuses on solutions, starting by remixing and improving existing ideas, followed by people sketching potential solutions.
Optimistic, yet cautious after her experience yesterday, Kate started thinking about ways she could use AI today, while brewing her first cup of coffee. By cup two, she was wondering if AI could be a creative teammate. Or a creative intern at least. She decided to ask AI for a list of relevant UX patterns across industries. Unlike yesterday’s complex analysis, Kate was asking for inspiration, not insight, which meant she could use a simpler prompt: “Give me 10 unique examples of how top-rated apps reduce decision anxiety for first-time users — from FinTech, health, learning, or ecommerce.”
She received her results in a few seconds, but there were only 6, not the 10 she asked for. She expanded her prompt for examples from a wider range of industries. While reviewing the AI examples, Kate realized that one had accessibility issues. To be fair, the results met Kate’s ask since she had not specified accessibility considerations. She then went pre-AI and brainstormed examples with her product partner, coming up with a few unique local examples. 
Later that afternoon, Kate went full human during Crazy 8s by putting a marker to paper and sketching 8 ideas in 8 minutes to rapidly explore different directions. Wondering if AI could live up to its generative nature, she uploaded pictures of her top 3 sketches and prompted AI to act as “a product design strategist experienced in Gen Z behavior, digital UX, and behavioral science”, gave it context about the problem statement, stage in the design sprint, and explicitly asked AI the following:
<ol>
<li>Analyze the 3 sketch concepts and identify core elements or features that resonated with the goal.</li>
<li>Generate 5 new concept directions, each of which should:<ul>
<li>Address the original design sprint challenge.</li>
<li>Reflect Gen Z design language, tone, and digital behaviors.</li>
<li>Introduce a unique twist, remix, or conceptual inversion of the ideas in the sketches.</li>
</ul>
</li>
<li>For each concept, provide:<ul>
<li>Name (e.g., “Monopoly Mode,” “Smart Start”);</li>
<li>1–2 sentence concept summary;</li>
<li>Key differentiator from the original sketches;</li>
<li>Design tone and/or behavioral psychology technique used.</li>
</ul>
</li>
</ol>
The results included ideas that Kate and her product partner hadn’t considered, including a progress bar that started at 20% (to build confidence), and a sports-like “stock bracket” for first-time investors. 
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png" />
Not bad, thought Kate, as she cherry-picked elements, combined and built on these ideas in her next round of sketches. By the end of the day, they had a diverse set of sketched solutions — some original, some AI-augmented, but all exploring how to reduce fear, simplify choices, and build confidence for Gen Z users taking their first financial step. With five concept variations and a few rough storyboards, Kate was ready to start converging on day 3. 
<h3>Kate’s Reflection</h3>
<blockquote>Today was creatively energizing yet a little overwhelming! I leaned hard on AI to act as a creative teammate. It delivered a few unexpected ideas and remixed my Crazy 8s into variations I never would’ve thought of! It also reinforced the need to stay grounded in the human side of design. AI was fast — too fast, sometimes. It spit out polished-sounding ideas that sounded right, but I had to slow down, observe carefully, and ask: Does this feel right for our users? Would a first-time user feel safe or intimidated here? Critical thinking helped me separate what mattered from what didn’t. Empathy pulled me back to what Gen Z users actually said, and kept their voices in mind as I sketched. Curiosity and experimentation were my fuel. I kept tweaking prompts, remixing inputs, and seeing how far I could stretch a concept before it broke. Visual communication helped translate fuzzy AI ideas into something I could react to — and more importantly, test.</blockquote>
Wednesday: Deciding (aka Kate Tries to Get AI to Pick a Side)
Design sprint teams spend Day 3 critiquing each of their potential solutions to shortlist those that have the best chance of achieving their long-term goal. The winning scenes from the sketches are then woven into a prototype storyboard.
Design sprint Wednesdays were Kate’s least favorite day. After all the generative energy during Sketching Tuesday, today, she would have to decide on one clear solution to prototype and test. She was unsure if AI would be much help with judging tradeoffs or narrowing down options, and it wouldn’t be able to critique like a team. Or could it?
Kate reviewed each of the five concepts, noting strengths, open questions, and potential risks. Curious about how AI would respond, she uploaded images of three different design concepts and prompted ChatGPT for strengths and weaknesses. AI’s critique was helpful in summarizing the pros and cons of different concepts, including a few points she had not considered — like potential privacy concerns. 
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png" />
She asked a few follow-up questions to confirm the actual reasoning. Wondering if she could simulate a team critique by prompting ChatGPT differently, Kate asked it to use the <a href="https://www.debonogroup.com/services/core-programs/six-thinking-hats/">6 thinking hats technique</a>. The results came back dense, overwhelming, and unfocused. The AI couldn’t prioritize, and it couldn’t see the gaps Kate instinctively noticed: friction in onboarding, misaligned tone, unclear next steps.
In that moment, the promise of AI felt overhyped. Kate stood up, stretched, and seriously considered ending her experiments with the AI-driven process. But she paused. Maybe the problem wasn’t the tool. Maybe it was how she was using it. She made a note to experiment when she wasn’t on a design sprint clock.
She returned to her sketches, this time laying them out on the wall. No screens, no prompts. Just markers, sticky notes, and Sharpie scribbles. Human judgment took over. Kate worked with her product partner to finalize the solution to test on Friday and spent the next hour storyboarding the experience in Figma.
Kate re-engaged with AI as a reviewer, not a decider. She prompted it for feedback on the storyboard and was surprised to see it spit out detailed design, content, and micro-interaction suggestions for each of the steps of the storyboarded experience. A lot of food for thought, but she’d have to judge what mattered when she created her prototype. But that wasn’t until tomorrow!
<h3>Kate’s Reflection</h3>
<blockquote>AI exposed a few of my blind spots in the critique, which was good, but it basically pointed out that multiple options “could work”. I had to rely on my critical thinking and instincts to weigh options logically, emotionally, and contextually in order to choose a direction that was the most testable and aligned with the user feedback from Day 1. I was also surprised by the suggestions it came up with while reviewing my final storyboard, but I will need a fresh pair of eyes and all the human judgement I can muster tomorrow. Empathy helped me walk through the flow like I was a new user. Visual communication helped pull it all together by turning abstract steps into a real storyboard for the team to see instead of imagining. TO DO: Experiment prompting around the 6 Thinking Hats for different perspectives.</blockquote>
Thursday: Prototype (aka Kate And Faking It)
On Day 4, the team usually turns the storyboard from the previous day into a prototype that can be tested with users on Day 5. The prototype doesn’t need to be fully functional; a simulated experience is sufficient to gather user feedback.
Kate’s prototype day often consisted of marathon Figma Design sessions and late-night pizza dinners. She was hoping AI would change that today. She fed yesterday’s storyboard to ChatGPT and asked it for screens. It took a while to generate, but she was excited to see a screen flow gradually appear on her screen, except that it had 3 ¾ screens, instead of the 6 frames from her storyboard, as you can see in the image below.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png" />
She tried different prompts but couldn’t get a complete flow. She was excited when it offered to create a Figma file. She waited. And waited. And reminded it that she was right there waiting. It finally gave her a link — a link that didn’t work. That made her question why she needed prototype screens in Figma at all. Could one of those no-code tools do the job? Kate remembered that she had just received beta access to <a href="https://www.figma.com/make/">Figma Make</a> (Figma’s AI prompt-to-prototype tool) and decided to put it to the test.
She shared her storyboard, added context about the prototype for a design sprint, the problem, and a brief description of the audience. In a few seconds, she saw code being generated and a running description on the left. It seemed like it would take some time, so she headed to the cafeteria for lunch. 
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png" />
When Kate returned, she was surprised to see Figma Make had created an app along with a detailed explanation:
<blockquote>“I’ve created a complete finance app prototype with five key screens that guide users through setting financial goals in a friendly, low-pressure way. The app features smooth animations with Framer Motion, a progress indicator to show users where they are in the journey, and emotionally supportive visuals and copy throughout the experience. Each screen serves a specific purpose: welcoming users, helping them define relatable goals, building their plan with visual feedback, presenting a simple summary, and offering next steps without pressure. You might want to:<ul><li>Add personalization options like user profiles or avatars.</li><li>Implement a dark mode toggle for accessibility.</li><li>Create additional goal templates and saving strategies.”</li></ul></blockquote>
Since Figma Make had built the prototype, not her, Kate felt like she was User 0, and clicked her way through the interactive prototype, making a mental note of what worked, what didn’t. She was impressed to see that she could not only select a common goal (buy a home, save for education, and so on) but she could also create her own goal (hello De’Longhi Coffee Maker) and it carried over for the rest of the experience. This was something she had never been able to do in Figma Design!
Despite some obvious misses like a missing header and navigation, and some buttons not working, she was impressed! Kate tried the option to ‘Publish’ and it gave her a link that she immediately shared with her product and engineering partners. A few minutes later, they joined her in the conference room, exploring it together. The engineer scanned the code, didn’t seem impressed, but said it would work as a disposable prototype.
Kate prompted Figma Make to add an orange header and app navigation, and this time the trio kept their eyes peeled as they saw the progress in code and in English. The results were pretty good. They spent the next hour making changes to get it ready for testing. Even though he didn’t admit it, the engineer seemed impressed with the result, if not the code.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png" />
By late afternoon, they had a <a href="https://zone-crush-76141775.figma.site">functioning interactive prototype</a>. Kate fed ChatGPT the prototype link and asked it to create a usability testing script. It came up with a basic, but complete test script, including a checklist for observers to take notes. 
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png" />
Kate went through the script carefully and updated it to add probing questions about AI transparency, emotional check-ins, more specific task scenarios, and a post-test debrief that looped back to the sprint goal. 
Kate did a dry run with her product partner, who teased her: “Did you really need me? Couldn’t your AI do it?” It hadn’t occurred to her, but she was now curious! 
<blockquote>“Act as a Gen Z user seeing this interactive prototype for the first time. How would you react to the language, steps, and tone? What would make you feel more confident or in control?”</blockquote>
It worked! ChatGPT simulated user feedback for the first screen and asked if she wanted it to continue. “Yes, please,” she typed. A few seconds later, she was reading what could have very well been a screen-by-screen transcript from a test. 
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png" />
Kate was still processing what she had seen as she drove home, happy she didn’t have to stay late. The simulated test using AI appeared impressive at first glance. But the more she thought about it, the more disturbing it became. The output didn’t mention what the simulated user clicked, and if she had asked, she probably would have received an answer. But how useful would that be? After almost missing her exit, she forced herself to think about eating a relaxed meal at home instead of her usual Prototype-Thursday-Multitasking-Pizza-Dinner.
<h3>Kate’s Reflection</h3>
<blockquote>Today was the most meta I’ve felt all week: building a prototype about AI, with AI, while being coached by AI. And it didn’t all go the way I expected. While ChatGPT didn’t deliver prototype screens, Figma Make coded a working, interactive prototype with interactions I couldn’t have built in Figma Design. I used curiosity and experimentation today, by asking: What if I reworded this? What if I flipped that flow? AI moved fast, but I had to keep steering. But I have to admit that tweaking the prototype by changing the words, not code, felt like magic! Critical thinking isn’t optional anymore — it is table stakes. My impromptu ask of ChatGPT to simulate a Gen Z user testing my flow? That part both impressed and unsettled me. I’m going to need time to process this. But that can wait until next week. Tomorrow, I test with 5 Gen Zs — real people.</blockquote>
Friday: Test (aka Prototype Meets User)
Day 5 in a design sprint is a culmination of the week’s work from understanding the problem, exploring solutions, choosing the best, and building a prototype. It’s when teams interview users and learn by watching them react to the prototype and seeing if it really matters to them.
As Kate prepped for the tests, she grounded herself in the sprint problem statement and the users: “How might we help Gen Z users confidently take their first financial action in our app — in a way that feels simple, safe, and puts them in control?” 
She clicked through the prototype one last time — the link still worked! And just in case, she also had screenshots saved. 
Kate moderated the five tests while her product and engineering partners observed. The prototype may have been AI-generated, but the reactions were human. She observed where people hesitated, what made them feel safe and in control. Based on the participant, she would pivot, go off-script, and ask clarifying questions, getting deeper insights.
After each session, she dropped the transcripts and their notes into ChatGPT, asking it to summarize that user’s feedback into pain points, positive signals, and any relevant quotes. At the end of the five rounds, Kate prompted them for recurring themes to use as input for their reflection and synthesis.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png" />
The trio combed through the results, with an eye out for any suspicious AI-generated results. They ran into one: “Users Trust AI”. Not one user mentioned or clicked the ‘Why this?’ link, but AI possibly assumed transparency features worked because they were available in the prototype.
They agreed that the prototype resonated with users, allowing all to easily set their financial goals, and identified a couple of opportunities for improvement: better explaining AI-generated plans and celebrating “win” moments after creating a plan. Both were fairly easy to address during their product build process.
That was a nice end to the week: another design sprint wrapped, and Kate’s first AI-augmented design sprint! She started Monday anxious about falling behind, overwhelmed by options. She closed Friday confident in a validated concept, grounded in real user needs, and empowered by tools she now knew how to steer.
<h3>Kate’s Reflection</h3>
<blockquote>Test driving my prototype with AI yesterday left me impressed and unsettled. But today’s tests with people reminded me why we test with real users, not proxies or people who interact with users, but actual end users. And GenAI is not the user. Five tests put my designerly skill of observation to the test. GenAI helped summarize the test transcripts quickly but snuck in one last hallucination this week — about AI! With AI, don’t trust — always verify! Critical thinking is not going anywhere. AI can move fast with words, but only people can use empathy to move beyond words to truly understand human emotions. My next goal is to learn to talk to AI better, so I can get better results.</blockquote>
Conclusion
Over the course of five days, Kate explored how AI could fit into her UX work, not by reading articles or LinkedIn posts, but by doing. Through daily experiments, iterations, and missteps, she got comfortable with AI as a collaborator to support a design sprint. It accelerated every stage: synthesizing user feedback, generating divergent ideas, giving feedback, and even spinning up a working prototype, as shown below.
<img src="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png" />
What was clear by Friday was that speed isn’t insight. While AI produced outputs fast, it was Kate’s designerly skills — curiosity, empathy, observation, visual communication, experimentation, and most importantly, critical thinking and a growth mindset — that turned data and patterns into meaningful insights. She stayed in the driver’s seat, verifying claims, adjusting prompts, and applying judgment where automation fell short.
She started the week on Monday, overwhelmed, her confidence dimmed by uncertainty and the noise of AI hype. She questioned her relevance in a rapidly shifting landscape. By Friday, she not only had a validated concept but had also reshaped her entire approach to design. She had evolved: from AI-curious to AI-confident, from reactive to proactive, from unsure to empowered. Her mindset had shifted: AI was no longer a threat or trend; it was like a smart intern she could direct, critique, and collaborate with. She didn’t just adapt to AI. She redefined what it meant to be a designer in the age of AI.
The experience raised deeper questions: How do we make sure AI-augmented outputs are not made up? How should we treat AI-generated user feedback? Where do ethics and human responsibility intersect?
Besides a validated solution to their design sprint problem, Kate had prototyped a new way of working as an AI-augmented designer. 
The question now isn’t just “Should designers use AI?”. It’s “How do we work with AI responsibly, creatively, and consciously?”. That’s what the next article will explore: designing your interactions with AI using a repeatable framework.
Poll: If you could design your own AI assistant, what would it do?
<ul>
<li>Assist with ideation?</li>
<li>Research synthesis?</li>
<li>Identify customer pain points?</li>
<li>Or something else entirely?</li>
</ul>
<a href="https://forms.gle/tSsZzy92VVrjuPQX8">Share your idea</a>, and in the spirit of learning by doing, we’ll build one together from scratch in the third article of this series: Building your own CustomGPT.
<h3>Resources</h3>
<ul>
<li><a href="https://www.amazon.com/Sprint-Solve-Problems-Test-Ideas/dp/150112174X">Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days</a>, by Jake Knapp</li>
<li><a href="https://www.gv.com/sprint/">The Design Sprint</a></li>
<li><a href="https://www.figma.com/make/">Figma Make</a></li>
<li>“<a href="https://gizmodo.com/openai-appeals-sweeping-unprecedented-order-requiring-it-maintain-all-chatgpt-logs-2000612405">OpenAI Appeals ‘Sweeping, Unprecedented Order’ Requiring It Maintain All ChatGPT Logs</a>”, Vanessa Taylor</li>
</ul>
Tools
As mentioned earlier, ChatGPT was the general-purpose LLM Kate leaned on, but you could swap it out for Claude, Gemini, Copilot, or other competitors and likely get similar results (or at least similarly weird surprises). Here are some alternate AI tools that might suit each sprint stage even better. Note that with dozens of new AI tools popping up every week, this list is far from exhaustive.
<table>
<thead>
<tr>
<th>Stage</th>
<th>Tools</th>
<th>Capability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Understand</td>
<td>Dovetail, UserTesting’s Insights Hub, <a href="http://heymarvin.com">Marvin</a></td>
<td>Summarize & Synthesize data</td>
</tr>
<tr>
<td>Sketch</td>
<td>Any LLM, <a href="https://musely.ai/tools/ideation-tool">Musely</a></td>
<td>Brainstorm concepts and ideas</td>
</tr>
<tr>
<td>Decide</td>
<td>Any LLM</td>
<td>Critique/provide feedback</td>
</tr>
<tr>
<td>Prototype</td>
<td><a href="http://uizard.io">UIzard</a>, <a href="http://uxpilot.ai">UXPilot</a>, <a href="http://visily.ai">Visily</a>, <a href="http://krisspy.ai">Krisspy</a>, Figma Make, Lovable, Bolt</td>
<td>Create wireframes and prototypes</td>
</tr>
<tr>
<td>Test</td>
<td>UserTesting, UserInterviews, PlaybookUX, <a href="http://maze.co">Maze</a>, plus tools from the Understand stage</td>
<td>Moderated and unmoderated user tests/synthesis </td>
</tr>
</tbody>
</table>
]]></content:encoded>
<author>hello@smashingmagazine.com (Lyndon Cerejo)</author>
<enclosure url="http://files.smashing.media/articles/week-in-life-ai-augmented-designer/week-in-life-ai-augmented-designer.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[The Double-Edged Sustainability Sword Of AI In Web Design]]></title>
<link>https://smashingmagazine.com/2025/08/double-edged-sustainability-sword-ai-web-design/</link>
<guid>https://smashingmagazine.com/2025/08/double-edged-sustainability-sword-ai-web-design/</guid>
<pubDate>Wed, 20 Aug 2025 10:00:00 GMT</pubDate>
<description><![CDATA[AI has introduced huge efficiencies for web designers and is frequently being touted as the key to unlocking sustainable design and development. But do these gains outweigh the environmental cost of using energy-hungry AI tools?]]></description>
<content:encoded><![CDATA[Artificial intelligence is increasingly automating large parts of design and development workflows — tasks once reserved for skilled designers and developers. This streamlining can dramatically speed up project delivery. Even back in 2023, AI-assisted developers were found to complete tasks <a href="https://www.mckinsey.com/capabilities/mckinsey-digital/our-insights/unleashing-developer-productivity-with-generative-ai">twice as fast</a> as those without. And AI tools have advanced massively since then.
Yet this surge in capability raises a pressing dilemma:
<blockquote>Does the environmental toll of powering AI infrastructure eclipse the efficiency gains?</blockquote>
We can create websites faster that are optimized and more efficient to run, but the global consumption of energy by AI <a href="https://www.iea.org/news/ai-is-set-to-drive-surging-electricity-demand-from-data-centres-while-offering-the-potential-to-transform-how-the-energy-sector-works">continues to climb</a>.
As awareness grows around the digital sector’s hidden ecological footprint, web designers and businesses must grapple with this double-edged sword, weighing the grid-level impacts of AI against the cleaner, leaner code it can produce.
The Good: How AI Can Enhance Sustainability In Web Design
There’s no disputing that <a href="https://www.smashingmagazine.com/2023/03/ai-technology-transform-design/">AI-driven automation</a> has introduced higher speeds and efficiencies to many of the mundane aspects of web design. Tools that automatically generate responsive layouts, optimize image sizes, and refactor bloated scripts should free designers to focus on <a href="https://www.smashingmagazine.com/2023/04/skills-designers-ai-cant-replicate/">completing the creative</a> side of design and development.
By some interpretations, these accelerated project timelines could <a href="https://arxiv.org/abs/2411.11892">represent a reduction</a> in the required energy for development, and speedier production should mean less energy used. 
Beyond automation, AI excels at <a href="https://www.smashingmagazine.com/2024/11/ai-transformative-impact-web-design-supercharging-productivity/">identifying inefficiencies in code and design</a>, as it can take a much more holistic view and assess things as a whole. Advanced algorithms can parse through stylesheets and JavaScript files to detect unused selectors or redundant logic, producing leaner, faster-loading pages. For example, AI-driven caching can <a href="https://www.researchgate.net/publication/383735847_Leveraging_AI_and_Machine_Learning_for_Performance_Optimization_in_Web_Applications">increase cache hit rates by 15%</a> by improving data availability and reducing latency. This means more user requests are served directly from the cache, reducing the need for data retrieval from the main server, which reduces energy expenditure.
AI tools can utilize <a href="https://wp-rocket.me/google-core-web-vitals-wordpress/serve-images-next-gen-formats/">next-generation image formats</a> like AVIF or WebP, as they’re basically designed to be understood by AI and automation, and selectively compress assets based on content sensitivity. This slashes media payloads without perceptible quality loss, as the AI can use Generative Adversarial Networks (GANs) that can learn compact representations of data.
AI’s impact also brings sustainability benefits via user experience (UX). AI-driven personalization engines can <a href="https://www.researchgate.net/publication/378288736_AI-driven_personalization_in_web_content_delivery_A_comparative_study_of_user_engagement_in_the_USA_and_the_UK">dynamically serve only the content a visitor needs</a>, which eliminates superfluous scripts or images that they don’t care about. This not only enhances perceived performance but reduces the number of server requests and data transferred, cutting downstream energy use in network infrastructure.
With the right prompts, generative AI can be an accessibility tool and ensure <a href="https://arxiv.org/abs/2501.03572">sites meet inclusive design standards</a> by checking against accessibility standards, reducing the need for redesigns that can be costly in terms of time, money, and energy.
So, if you can take things in isolation, AI can and already acts as an important tool to make web design more efficient and sustainable. But do these gains outweigh the cost of the resources required in building and maintaining these tools?
The Bad: The Environmental Footprint Of AI Infrastructure
Yet the carbon savings engineered at the page level must be balanced against the prodigious resource demands of AI infrastructure. Large-scale AI hinges on data centers that already account for <a href="https://www2.deloitte.com/us/en/insights/industry/technology/technology-media-and-telecom-predictions/2025/genai-power-consumption-creates-need-for-more-sustainable-data-centers.html">roughly 2% of global electricity consumption</a>, a figure projected to swell as AI workloads grow. 
The International Energy Agency warns that electricity consumption from data centers could <a href="https://www.iea.org/news/ai-is-set-to-drive-surging-electricity-demand-from-data-centres-while-offering-the-potential-to-transform-how-the-energy-sector-works">more than double by 2030</a> due to the increasing demand for AI tools, reaching nearly the current consumption of Japan. Training state-of-the-art language models generates carbon emissions <a href="https://www.reuters.com/business/microsoft-urge-senators-speed-permitting-ai-boost-government-data-access-2025-05-07/">on par with hundreds of transatlantic flights</a>, and inference workloads, serving billions of requests daily, can rival or exceed training emissions over a model’s lifetime.
Image generation tasks represent an even steeper energy hill to climb. Producing a single AI-generated image can consume energy <a href="https://www.scientificamerican.com/article/generative-ai-could-generate-millions-more-tons-of-e-waste-by-2030/">equivalent to charging a smartphone</a>.
As generative design and AI-based prototyping become more common in web development, the cumulative energy footprint of these operations can quickly undermine the carbon savings achieved through optimized code.
Water consumption forms another hidden cost. Data centers rely heavily on evaporative cooling systems that can draw between <a href="https://www.axios.com/local/indianapolis/2025/05/09/midwest-data-center-boom-indiana">one and five million gallons of water</a> per day, depending on size and location, placing stress on local supplies, especially in drought-prone regions. Studies estimate a single ChatGPT query may <a href="https://eandt.theiet.org/2024/11/29/how-boil-egg-and-other-simple-searches-chatgpt-worse-environment-you-may-think">consume up to half a liter of water</a> when accounting for direct cooling requirements, with broader AI use potentially demanding billions of liters annually by 2027.
Resource depletion and electronic waste are further concerns. High-performance components underpinning AI services, like GPUs, can have very small lifespans due to both wear and tear and being superseded by more powerful hardware. AI alone could add between <a href="https://www.scimex.org/newsfeed/generative-ai-could-create-1-000-times-more-e-waste-by-2030">1.2 and 5 million metric tons of e-waste</a> by 2030, due to the continuous demand for new hardware, amplifying one of the world’s fastest-growing waste streams.
Mining for the critical minerals in these devices often <a href="https://www.unep.org/news-and-stories/story/ai-has-environmental-problem-heres-what-world-can-do-about">proceeds under unsustainable conditions</a> due to a lack of regulations in many of the environments where rare metals can be sourced, and the resulting e-waste, rich in toxic metals like lead and mercury, poses another form of environmental damage if not properly recycled.
Compounding these physical impacts is a lack of transparency in corporate reporting. Energy and water consumption figures for AI workloads are often <a href="https://www2.deloitte.com/us/en/insights/industry/technology/technology-media-and-telecom-predictions/2025/genai-power-consumption-creates-need-for-more-sustainable-data-centers.html">aggregated under general data center operations</a>, which obscures the specific toll of AI training and inference among other operations.
And the energy consumption reporting of the data centres themselves has been found to have been obfuscated.
<blockquote>Reports estimate that the emissions of data centers are up to <a href="https://www.theguardian.com/technology/2024/sep/15/data-center-gas-emissions-tech">662% higher than initially reported</a> due to misaligned metrics, and ‘creative’ interpretations of what constitutes an emission. This makes it hard to grasp the true scale of AI’s environmental footprint, leaving designers and decision-makers unable to make informed, environmentally conscious decisions.</blockquote>
Do The Gains From AI Outweigh The Costs?
Some industry advocates argue that AI’s energy consumption isn’t as catastrophic as headlines suggest. Some groups have <a href="https://thebreakthrough.org/journal/no-20-spring-2024/unmasking-the-fear-of-ais-energy-demand">challenged ‘alarmist’ projections</a>, claiming that AI’s current contribution of ‘just’ <a href="https://www.ecb.europa.eu/press/economic-bulletin/focus/2025/html/ecb.ebbox202502_03~8eba688e29.en.html">0.02% of global energy consumption</a> isn’t a cause for concern.
Proponents also highlight AI’s supposed environmental benefits. There are claims that AI could reduce <a href="https://www.pwc.com/gx/en/issues/value-in-motion/ai-energy-consumption-net-zero.html">economy-wide greenhouse gas emissions by 0.1% to 1.1%</a> through efficiency improvements. <a href="https://aimagazine.com/articles/what-does-google-2025-environmental-report-say-about-tech">Google reported</a> that five AI-powered solutions removed 26 million metric tons of emissions in 2024. The optimistic view holds that AI’s capacity to optimize everything from energy grids to transportation systems will more than compensate for its data center demands.
However, recent scientific analysis reveals these arguments underestimate AI’s true impact. MIT found that data centers already consume <a href="https://www.technologyreview.com/2025/05/20/1116327/ai-energy-usage-climate-footprint-big-tech/">4.4% of all US electricity</a>, with projections showing AI alone could use as much power as 22% of US households by 2028. Research indicates AI-specific electricity use <a href="https://www.energy.gov/articles/doe-releases-new-report-evaluating-increase-electricity-demand-data-centers">could triple from current levels</a> annually by 2028. Moreover, <a href="https://www.technologyreview.com/2024/12/13/1108719/ais-emissions-are-about-to-skyrocket-even-further/">Harvard research</a> revealed that data centers use electricity with 48% higher carbon intensity than the US average.
Advice For Sustainable AI Use In Web Design
Despite the environmental costs, AI’s use in business, particularly web design, isn’t going away anytime soon, with <a href="https://www.hostinger.com/tutorials/ai-in-business">70% of large businesses</a> looking to increase their AI investments to increase efficiencies. AI’s immense impact on productivity means those not using it are likely to be left behind. This means that environmentally conscious businesses and designers must find the right balance between AI’s environmental cost and the efficiency gains it brings.
<h3>Make Sure You Have A Strong Foundation Of Sustainable Web Design Principles</h3>
Before you plug in any AI magic, start by making sure the bones of your site are sustainable. <a href="https://www.evergrowingdev.com/p/a-guide-to-lean-web-design-for-developers">Lean web fundamentals</a>, like system fonts instead of hefty custom files, minimal JavaScript, and judicious image use, can slash a page’s carbon footprint by stripping out redundancies that increase energy consumption. For instance, the global average web page emits about <a href="https://www.websitecarbon.com/">0.8g of CO₂ per view</a>, whereas sustainably crafted sites can see a roughly 70% reduction.
Once that lean baseline is in place, AI-driven optimizations (image format selection, code pruning, responsive layout generation) aren’t adding to bloat but building on efficiency, ensuring every joule spent on AI actually yields downstream energy savings in delivery and user experience.
<h3>Choosing The Right Tools And Vendors</h3>
In order to make sustainable tool choices, transparency and awareness are the first steps. Many AI vendors have pledged to <a href="https://sustainabilitymag.com/articles/which-companies-are-in-the-coalition-for-sustainable-ai">work towards sustainability</a>, but independent audits are necessary, along with clear, cohesive metrics. Standardized reporting on energy and water footprints will help us understand the true cost of AI tools, allowing for informed choices.
You can look for providers that publish detailed environmental reports and hold third-party renewable energy certifications. Many major providers now offer <a href="https://thenewstack.io/cloud-pue-comparing-aws-azure-and-gcp-global-regions/">PUE (Power Usage Effectiveness) metrics</a> alongside renewable energy matching to demonstrate real-world commitments to clean power. 
When integrating AI into your build pipeline, choosing lightweight, specialized models for tasks like image compression or code linting can be more sustainable than full-scale generative engines. Task-specific tools often <a href="https://news.mit.edu/2023/new-tools-available-reduce-energy-that-ai-models-devour-1005">use considerably less energy</a> than general AI models, as general models must process what task you want them to complete. 
There are a variety of guides and collectives out there that can guide you on choosing the ‘green’ web hosts that are best for your business. When choosing AI-model vendors, you should look at options that prioritize ‘efficiency by design’: smaller, pruned models and edge-compute deployments can cut energy use by up to <a href="https://accesspartnership.com/12-key-principles-for-sustainable-ai/">50% compared to monolithic cloud-only models</a>. They’re trained for specific tasks, so they don’t have to expend energy computing what the task is and how to go about it.
<h3>Using AI Tools Sustainably</h3>
Once you’ve chosen conscientious vendors, optimize how you actually use AI. You can take steps like batching non-urgent inference tasks to reduce idle GPU time, an approach shown to <a href="https://blog.purestorage.com/purely-educational/5-ways-to-reduce-your-ai-energy-footprint/">lower energy consumption overall</a> compared to requesting ad-hoc, as you don’t have to keep running the GPU constantly, only when you need to use it.
Smarter prompts can also help make AI usage slightly more sustainable. Sam Altman of ChatGPT revealed early in 2025 that people’s propensity for saying ‘please’ and ‘thank you’ to LLMs is <a href="https://futurism.com/altman-please-thanks-chatgpt">costing millions of dollars and wasting energy</a> as the Generative AI has to deal with extra phrases to compute that aren’t relevant to its task. You need to ensure that your prompts are direct and to the point, and deliver the context required to complete the task to reduce the need to reprompt.
<h3>Additional Strategies To Balance AI’s Environmental Cost</h3>
On top of being responsible with your AI tool choice and usage, there are other steps you can take to offset the carbon cost of AI usage and enjoy the efficiency benefits it brings. Organizations can <a href="https://earthly.org/the-guide-to-carbon-offsetting">reduce their own emissions and use carbon offsetting</a> to reduce their own carbon footprint as much as possible. Combined with the apparent sustainability benefits of AI use, this approach can help mitigate the harmful impacts of energy-hungry AI.
You can ensure that you’re using green server hosting (servers run on sustainable energy) for your own site and cloud needs beyond AI, and <a href="https://www.imperva.com/learn/performance/what-is-cdn-how-it-works/">refine your content delivery network</a> (CDN) to ensure your sites and apps are serving compressed, optimized assets from edge locations, cutting the distance data must travel, which should reduce the associated energy use.
Organizations and individuals, particularly those with thought leadership status, can be <a href="https://ai4good.org/what-we-do/sustainable-ai-policy/">advocates pushing for transparent sustainability specifications</a>. This involves both lobbying politicians and regulatory bodies to introduce and enforce sustainability standards and ensuring that other members of the public are kept aware of the environmental costs of AI use.
It’s only through collective action that we’re likely to see strict enforcement of both sustainable AI data centers and the standardization of emissions reporting.
Regardless, it remains a tricky path to walk, along the double-edged sword of AI’s use in web design.
Use AI too much, and you’re contributing to its massive carbon footprint. Use it too little, and you’re likely to be left behind by rivals that are able to work more efficiently and deliver projects much faster.
The best environmentally conscious designers and organizations can currently do is attempt to navigate it as best they can and stay informed on best practices.
Conclusion
We can’t dispute that AI use in web design delivers on its promise of agility, personalization, and resource savings at the page-level. Yet without a holistic view that accounts for the environmental demands of AI infrastructure, these gains risk being overshadowed by an expanding energy and water footprint. 
Achieving the balance between enjoying AI’s efficiency gains and managing its carbon footprint requires transparency, targeted deployment, human oversight, and a steadfast commitment to core sustainable web practices. 
]]></content:encoded>
<author>hello@smashingmagazine.com (Alex Williams)</author>
<enclosure url="http://files.smashing.media/articles/double-edged-sustainability-sword-ai-web-design/double-edged-sustainability-sword-ai-web-design.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Beyond The Hype: What AI Can Really Do For Product Design]]></title>
<link>https://smashingmagazine.com/2025/08/beyond-hype-what-ai-can-do-product-design/</link>
<guid>https://smashingmagazine.com/2025/08/beyond-hype-what-ai-can-do-product-design/</guid>
<pubDate>Mon, 18 Aug 2025 13:00:00 GMT</pubDate>
<description><![CDATA[AI tools are improving fast, but it’s still not clear how they fit into a real product design workflow. Nikita Samutin walks through four core stages — from analytics and ideation to prototyping and visual design — to show where AI fits and where it doesn’t, illustrated with real-world examples.]]></description>
<content:encoded><![CDATA[These days, it’s easy to find curated lists of AI tools for designers, galleries of generated illustrations, and countless prompt libraries. What’s much harder to find is a clear view of how AI is actually integrated into the everyday workflow of a product designer — not for experimentation, but for real, meaningful outcomes.
I’ve gone through that journey myself: testing AI across every major stage of the design process, from ideation and prototyping to visual design and user research. Along the way, I’ve built a simple, repeatable workflow that significantly boosts my productivity.
In this article, I’ll share what’s already working and break down some of the most common objections I’ve encountered — many of which I’ve faced personally.
Stage 1: Idea Generation Without The Clichés
Pushback: “Whenever I ask AI to suggest ideas, I just get a list of clichés. It can’t produce the kind of creative thinking expected from a product designer.”
That’s a fair point. AI doesn’t know the specifics of your product, the full context of your task, or many other critical nuances. The most obvious fix is to “feed it” all the documentation you have. But that’s a common mistake as it often leads to even worse results: the context gets flooded with irrelevant information, and the AI’s answers become vague and unfocused.
Current-gen models can technically process thousands of words, but the longer the input, the higher the risk of missing something important, especially content buried in the middle. This is known as the “<a href="https://community.openai.com/t/validating-middle-of-context-in-gpt-4-128k/498255">lost in the middle</a>” problem.
To get meaningful results, AI doesn’t just need more information — it needs the right information, delivered in the right way. That’s where the RAG approach comes in.
<h3>How RAG Works</h3>
Think of RAG as a smart assistant working with your personal library of documents. You upload your files, and the assistant reads each one, creating a short summary — a set of bookmarks (semantic tags) that capture the key topics, terms, scenarios, and concepts. These summaries are stored in a kind of “card catalog,” called a vector database.
When you ask a question, the assistant doesn’t reread every document from cover to cover. Instead, it compares your query to the bookmarks, retrieves only the most relevant excerpts (chunks), and sends those to the language model to generate a final answer.
<h3>How Is This Different from Just Dumping a Doc into the Chat?</h3>
Let’s break it down:
Typical chat interaction
It’s like asking your assistant to read a 100-page book from start to finish every time you have a question. Technically, all the information is “in front of them,” but it’s easy to miss something, especially if it’s in the middle. This is exactly what the “lost in the middle” issue refers to.
RAG approach
You ask your smart assistant a question, and it retrieves only the relevant pages (chunks) from different documents. It’s faster and more accurate, but it introduces a few new risks:
<ul>
<li>Ambiguous question You ask, “How can we make the project safer?” and the assistant brings you documents about cybersecurity, not finance.</li>
<li>Mixed chunks A single chunk might contain a mix of marketing, design, and engineering notes. That blurs the meaning so the assistant can’t tell what the core topic is.</li>
<li>Semantic gap You ask, “How can we speed up the app?” but the document says, “Optimize API response time.” For a human, that’s obviously related. For a machine, not always.</li>
</ul>
<img src="https://files.smashing.media/articles/beyond-hype-what-ai-can-do-product-design/1-rag-approach.png" />
These aren’t reasons to avoid RAG or AI altogether. Most of them can be avoided with better preparation of your knowledge base and more precise prompts. So, where do you start?
<h3>Start With Three Short, Focused Documents</h3>
These three short documents will give your AI assistant just enough context to be genuinely helpful:
<ul>
<li>Product Overview & Scenarios A brief summary of what your product does and the core user scenarios.</li>
<li>Target Audience Your main user segments and their key needs or goals.</li>
<li>Research & Experiments Key insights from interviews, surveys, user testing, or product analytics.</li>
</ul>
Each document should focus on a single topic and ideally stay within 300–500 words. This makes it easier to search and helps ensure that each retrieved chunk is semantically clean and highly relevant.
<h3>Language Matters</h3>
In practice, RAG works best when both the query and the knowledge base are in English. I ran a small experiment to test this assumption, trying a few different combinations:
<ul>
<li>English prompt + English documents: Consistently accurate and relevant results.</li>
<li>Non-English prompt + English documents: Quality dropped sharply. The AI struggled to match the query with the right content.</li>
<li>Non-English prompt + non-English documents: The weakest performance. Even though large language models technically support multiple languages, their internal semantic maps are mostly trained in English. Vector search in other languages tends to be far less reliable.</li>
</ul>
Takeaway: If you want your AI assistant to deliver precise, meaningful responses, do your RAG work entirely in English, both the data and the queries. This advice applies specifically to RAG setups. For regular chat interactions, you’re free to use other languages. A challenge also highlighted in <a href="https://arxiv.org/abs/2408.12345">this 2024 study on multilingual retrieval</a>.
<h3>From Outsider to Teammate: Giving AI the Context It Needs</h3>
Once your AI assistant has proper context, it stops acting like an outsider and starts behaving more like someone who truly understands your product. With well-structured input, it can help you spot blind spots in your thinking, challenge assumptions, and strengthen your ideas — the way a mid-level or senior designer would.
Here’s an example of a prompt that works well for me:
<blockquote>Your task is to perform a comparative analysis of two features: "Group gift contributions" (described in group_goals.txt) and "Personal savings goals" (described in personal_goals.txt). The goal is to identify potential conflicts in logic, architecture, and user scenarios and suggest visual and conceptual ways to clearly separate these two features in the UI so users can easily understand the difference during actual use. Please include:<ul><li>Possible overlaps in user goals, actions, or scenarios;</li><li>Potential confusion if both features are launched at the same time;</li><li>Any architectural or business-level conflicts (e.g. roles, notifications, access rights, financial logic);</li><li>Suggestions for visual and conceptual separation: naming, color coding, separate sections, or other UI/UX techniques;</li><li>Onboarding screens or explanatory elements that might help users understand both features.</li></ul>If helpful, include a comparison table with key parameters like purpose, initiator, audience, contribution method, timing, access rights, and so on.</blockquote>
<h3>AI Needs Context, Not Just Prompts</h3>
<blockquote>If you want AI to go beyond surface-level suggestions and become a real design partner, it needs the right context. Not just more information, but better, more structured information.</blockquote>
Building a usable knowledge base isn’t difficult. And you don’t need a full-blown RAG system to get started. Many of these principles work even in a regular chat: well-organized content and a clear question can dramatically improve how helpful and relevant the AI’s responses are. That’s your first step in turning AI from a novelty into a practical tool in your product design workflow.
Stage 2: Prototyping and Visual Experiments
Pushback: “AI only generates obvious solutions and can’t even build a proper user flow. It’s faster to do it manually.”
That’s a fair concern. AI still performs poorly when it comes to building complete, usable screen flows. But for individual elements, especially when exploring new interaction patterns or visual ideas, it can be surprisingly effective.
For example, I needed to prototype a gamified element for a limited-time promotion. The idea is to give users a lottery ticket they can “flip” to reveal a prize. I couldn’t recreate the 3D animation I had in mind in Figma, either manually or using any available plugins. So I described the idea to Claude 4 in Figma Make and within a few minutes, without writing a single line of code, I had exactly what I needed.
At the prototyping stage, AI can be a strong creative partner in two areas:
<ul>
<li>UI element ideation It can generate dozens of interactive patterns, including ones you might not think of yourself.</li>
<li>Micro-animation generation It can quickly produce polished animations that make a concept feel real, which is great for stakeholder presentations or as a handoff reference for engineers.</li>
</ul>
AI can also be applied to multi-screen prototypes, but it’s not as simple as dropping in a set of mockups and getting a fully usable flow. The bigger and more complex the project, the more fine-tuning and manual fixes are required. Where AI already works brilliantly is in focused tasks — individual screens, elements, or animations — where it can kick off the thinking process and save hours of trial and error.
 A quick UI prototype of a gamified promo banner created with Claude 4 in Figma Make. No code or plugins needed. 
Here’s another valuable way to use AI in design — as a stress-testing tool. Back in 2023, Google Research introduced <a href="https://arxiv.org/abs/2310.15435?utm_source=chatgpt.com">PromptInfuser</a>, an internal Figma plugin that allowed designers to attach prompts directly to UI elements and simulate semi-functional interactions within real mockups. Their goal wasn’t to generate new UI, but to check how well AI could operate inside existing layouts — placing content into specific containers, handling edge-case inputs, and exposing logic gaps early.
The results were striking: designers using PromptInfuser were up to 40% more effective at catching UI issues and aligning the interface with real-world input — a clear gain in design accuracy, not just speed.
That closely reflects my experience with Claude 4 and Figma Make: when AI operates within a real interface structure, rather than starting from a blank canvas, it becomes a much more reliable partner. It helps test your ideas, not just generate them.
Stage 3: Finalizing The Interface And Visual Style
Pushback: “AI can’t match our visual style. It’s easier to just do it by hand.”
This is one of the most common frustrations when using AI in design. Even if you upload your color palette, fonts, and components, the results often don’t feel like they belong in your product. They tend to be either overly decorative or overly simplified.
And this is a real limitation. In my experience, today’s models still struggle to reliably apply a design system, even if you provide a component structure or JSON files with your styles. I tried several approaches:
<ul>
<li>Direct integration with a component library. I used Figma Make (powered by Claude) and connected our library. This was the least effective method: although the AI attempted to use components, the layouts were often broken, and the visuals were overly conservative. <a href="https://forum.figma.com/ask-the-community-7/figma-make-library-support-42423?utm_source=chatgpt.com">Other designers</a> have run into similar issues, noting that library support in Figma Make is still limited and often unstable.</li>
<li>Uploading styles as JSON. Instead of a full component library, I tried uploading only the exported styles — colors, fonts — in a JSON format. The results improved: layouts looked more modern, but the AI still made mistakes in how styles were applied.</li>
<li>Two-step approach: structure first, style second. What worked best was separating the process. First, I asked the AI to generate a layout and composition without any styling. Once I had a solid structure, I followed up with a request to apply the correct styles from the same JSON file. This produced the most usable result — though still far from pixel-perfect.</li>
</ul>
<img src="https://files.smashing.media/articles/beyond-hype-what-ai-can-do-product-design/3-ui-screens-claude-sonnet.png" />
So yes, AI still can’t help you finalize your UI. It doesn’t replace hand-crafted design work. But it’s very useful in other ways:
<ul>
<li>Quickly creating a visual concept for discussion.</li>
<li>Generating “what if” alternatives to existing mockups.</li>
<li>Exploring how your interface might look in a different style or direction.</li>
<li>Acting as a second pair of eyes by giving feedback, pointing out inconsistencies or overlooked issues you might miss when tired or too deep in the work.</li>
</ul>
AI won’t save you five hours of high-fidelity design time, since you’ll probably spend that long fixing its output. But as a visual sparring partner, it’s already strong. If you treat it like a source of alternatives and fresh perspectives, it becomes a valuable creative collaborator.
Stage 4: Product Feedback And Analytics: AI As A Thinking Exosuit
Product designers have come a long way. We used to create interfaces in Photoshop based on predefined specs. Then we delved deeper into UX with mapping user flows, conducting interviews, and understanding user behavior. Now, with AI, we gain access to yet another level: data analysis, which used to be the exclusive domain of product managers and analysts.
As <a href="https://www.smashingmagazine.com/2025/03/how-to-argue-against-ai-first-research/">Vitaly Friedman rightly pointed out in one of his columns</a>, trying to replace real UX interviews with AI can lead to false conclusions as models tend to generate an average experience, not a real one. The strength of AI isn’t in inventing data but in processing it at scale.
Let me give a real example. We launched an exit survey for users who were leaving our service. Within a week, we collected over 30,000 responses across seven languages.
Simply counting the percentages for each of the five predefined reasons wasn’t enough. I wanted to know:
<ul>
<li>Are there specific times of day when users churn more?</li>
<li>Do the reasons differ by region?</li>
<li>Is there a correlation between user exits and system load?</li>
</ul>
The real challenge was... figuring out what cuts and angles were even worth exploring. The entire technical process, from analysis to visualizations, was done “for me” by Gemini, working inside Google Sheets. This task took me about two hours in total. Without AI, not only would it have taken much longer, but I probably wouldn’t have been able to reach that level of insight on my own at all.
<img src="https://files.smashing.media/articles/beyond-hype-what-ai-can-do-product-design/4-gemini-google-sheets.png" />
AI enables near real-time work with large data sets. But most importantly, it frees up your time and energy for what’s truly valuable: asking the right questions.
A few practical notes: Working with large data sets is still challenging for models without strong reasoning capabilities. In my experiments, I used Gemini embedded in Google Sheets and cross-checked the results using ChatGPT o3. Other models, including the standalone Gemini 2.5 Pro, often produced incorrect outputs or simply refused to complete the task.
AI Is Not An Autopilot But A Co-Pilot
AI in design is only as good as the questions you ask it. It doesn’t do the work for you. It doesn’t replace your thinking. But it helps you move faster, explore more options, validate ideas, and focus on the hard parts instead of burning time on repetitive ones. Sometimes it’s still faster to design things by hand. Sometimes it makes more sense to delegate to a junior designer. 
But increasingly, AI is becoming the one who suggests, sharpens, and accelerates. Don’t wait to build the perfect AI workflow. Start small. And that might be the first real step in turning AI from a curiosity into a trusted tool in your product design process.
Let’s Summarize
<ul>
<li>If you just paste a full doc into chat, the model often misses important points, especially things buried in the middle. That’s the “lost in the middle” problem.</li>
<li>The RAG approach helps by pulling only the most relevant pieces from your documents. So responses are faster, more accurate, and grounded in real context.</li>
<li>Clear, focused prompts work better. Narrow the scope, define the output, and use familiar terms to help the model stay on track.</li>
<li>A well-structured knowledge bas makes a big difference. Organizing your content into short, topic-specific docs helps reduce noise and keep answers sharp.</li>
<li>Use English for both your prompts and your documents. Even multilingual models are most reliable when working in English, especially for retrieval.</li>
<li>Most importantly: treat AI as a creative partner. It won’t replace your skills, but it can spark ideas, catch issues, and speed up the tedious parts.</li>
</ul>
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://standardbeagle.com/ai-assisted-design-workflows/#what-ai-actually-does-in-ux-workflows">AI-assisted Design Workflows: How UX Teams Move Faster Without Sacrificing Quality</a>”, Cindy Brummer This piece is a perfect prequel to my article. It explains how to start integrating AI into your design process, how to structure your workflow, and which tasks AI can reasonably take on — before you dive into RAG or idea generation.</li>
<li>“<a href="https://www.figma.com/blog/8-ways-to-build-with-figma-make/">8 essential tips for using Figma Make</a>”, Alexia Danton While this article focuses on Figma Make, the recommendations are broadly applicable. It offers practical advice that will make your work with AI smoother, especially if you’re experimenting with visual tools and structured prompting.</li>
<li>“<a href="https://blogs.nvidia.com/blog/what-is-retrieval-augmented-generation/">What Is Retrieval-Augmented Generation aka RAG</a>”, Rick Merritt If you want to go deeper into how RAG actually works, this is a great starting point. It breaks down key concepts like vector search and retrieval in plain terms and explains why these methods often outperform long prompts alone.</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Nikita Samutin)</author>
<enclosure url="http://files.smashing.media/articles/beyond-hype-what-ai-can-do-product-design/beyond-hype-what-ai-can-do-product-design.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[The Psychology Of Color In UX And Digital Products]]></title>
<link>https://smashingmagazine.com/2025/08/psychology-color-ux-design-digital-products/</link>
<guid>https://smashingmagazine.com/2025/08/psychology-color-ux-design-digital-products/</guid>
<pubDate>Fri, 15 Aug 2025 15:00:00 GMT</pubDate>
<description><![CDATA[Rodolpho Henrique guides you through the essential aspects of color in digital design and user experience, from the practical steps of creating effective and scalable color palettes to critical accessibility considerations.]]></description>
<content:encoded><![CDATA[Color plays a pivotal role in crafting compelling user experiences and successful digital products. It’s far more than just aesthetics; color strategically guides users, establishes brand identity, and evokes specific emotions.
Beyond functionality, color is also a powerful tool for brand recognition and emotional connection. Consistent use of brand colors across a digital product reinforces identity and builds trust. Different hues carry cultural and psychological associations, allowing designers to subtly influence user perception and create the desired mood. A thoughtful and deliberate approach to color in UX design elevates the user experience, strengthens brand presence, and contributes significantly to the overall success and impact of digital products. In this article, we will talk about the importance of color and why they are important for creating emotional connection and delivering consistent and accessible digital products.
Well-chosen color palettes enhance usability by creating visual hierarchies, highlighting interactive elements, and providing crucial feedback on screens. For instance, a bright color might draw attention to a call-to-action button, while consistent color coding can help users navigate complex interfaces intuitively. Color also contributes significantly to accessibility, ensuring that users with visual impairments can still effectively interact with digital products. By carefully considering contrast ratios and providing alternative visual cues, designers can create inclusive experiences that cater to a wider audience.
The colors we choose are the silent language of our digital products, and speaking it fluently is essential for success.
Communicating Brand Identity Through Color In The Digital Space
A thoughtfully curated and vibrant color palette becomes a critical differentiator, allowing a brand to stand out amidst the digital noise and cultivate stronger connections with the audience.
Far beyond mere decoration, color acts as a visual shorthand, instantly conveying a brand’s personality, its underlying values, and its unique essence. According to the <a href="https://www.ama.org/2025/04/08/more-vividmore-effective-how-saturated-colors-impact-consumer-behavior-and-waste/">American Marketing Association</a>, vibrant colors, in particular, possess an inherent magnetism, drawing the eye and etching themselves into memory within the online environment. They infuse the brand with energy and dynamism, projecting approachability and memorability in a way that more muted tones often cannot.
Consistency: The Core Of Great Design
Consistency is important because it fosters trust and familiarity, allowing users to quickly identify and connect with the brand in the online landscape. The strategic deployment of vibrant colors is especially crucial for brands seeking to establish themselves and flourish within the digital ecosystem. In the absence of physical storefronts or tangible in-person interactions, visual cues become paramount in shaping user perception and building brand recognition. A carefully selected primary color, supported by a complementary and equally energetic secondary palette, can become synonymous with a brand’s digital presence. A consistent application of the right colors across different digital touchpoints — from the logo and website design to the user interface of an app and engaging social media campaigns — creates a cohesive and instantly recognizable visual language.
Several sources and professionals agree that the psychology behind the colors plays a significant role in shaping brand perception. The publication <a href="https://insightspsychology.org/psychology-of-color-emotional-impact/">Insights Psychology</a>, for instance, explains how colors can create emotional and behavioural responses. Vibrant colors often evoke strong emotions and associations. A bold, energetic red, for example, might communicate passion and excitement, while a bright, optimistic yellow could convey innovation and cheerfulness. By consciously aligning their color choices with their brand values and target audience preferences, digitally-native brands can create a powerful emotional resonance.
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/1-colors-psychology.png" />
Beyond Aesthetics: How Color Psychologically Impacts User Behavior In Digital
As designers working with digital products, we’ve learned that color is far more than a superficial layer of visual appeal. It’s a potent, often subconscious, force that shapes how users interact with and feel about the digital products we build.
<blockquote>We’re not just painting pixels, we’re conducting a psychological symphony, carefully selecting each hue to evoke specific emotions, guide behavior, and ultimately forge a deeper connection with the user.</blockquote>
The initial allure of a color palette might be purely aesthetic, but its true power lies in its ability to bypass conscious thought and tap directly into our emotional core. Think about the subtle unease that might creep in when encountering a predominantly desaturated interface for a platform promising dynamic content, or the sense of calm that washes over you when a learning application utilizes soft, analogous colors. These are not arbitrary responses; they’re deeply rooted in our evolutionary history and cultural conditioning.
To understand how colors psychologically impact user behavior in digital, we first need to understand how colors are defined. In digital design, colors are precisely defined using the HSB model, which stands for Hue, Saturation, and Brightness. This model provides a more intuitive way for designers to think about and manipulate color compared to other systems like RGB (Red, Green, Blue). Here is a quick breakdown of each component:
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/2-hsb-colors.png" />
<h3>Hue</h3>
This is the pure color itself, the essence that we typically name, such as red, blue, green, or yellow. On a color wheel, hue is represented as an angle ranging from 0 to 360 degrees. For example, 0 is red, 120 is green, and 240 is blue. Think of it as the specific wavelength of light that our eyes perceive as a particular color. In UX, selecting the base hues is often tied to brand identity and the overall feeling you want to convey.
<h3>Saturation</h3>
Saturation refers to the intensity or purity of the hue. It describes how vivid or dull the color appears. A fully saturated color is rich and vibrant, while a color with low saturation appears muted, grayish, or desaturated. Saturation is typically expressed as a percentage, from 0% (completely desaturated, appearing as a shade of gray) to 100% (fully saturated, the purest form of the hue).
In UX, saturation levels are crucial for creating visual hierarchy and drawing attention to key elements. Highly saturated colors often indicate interactive elements or important information, while lower saturation can be used for backgrounds or less critical content.
<h3>Brightness</h3>
Brightness, sometimes also referred to as a value or lightness, indicates how light or dark a color appears. It’s the amount of white or black mixed into the hue. Brightness is also usually represented as a percentage, ranging from 0% (completely black, regardless of the hue or saturation) to 100% (fully bright). At 100% brightness and 0% saturation, you get white. In UX, adjusting brightness is essential for creating contrast and ensuring readability. Sufficient brightness contrast between text and background is a fundamental accessibility requirement. Furthermore, variations in brightness within a color palette can create visual depth and subtle distinctions between UI elements.
By understanding and manipulating these 3 color dimensions, digital designers have precise control over their color choices. This allows for the creation of harmonious and effective color palettes that not only align with brand guidelines but also strategically influence user behavior.
Just as in the physical world, colors in digital also carry symbolic meanings and trigger subconscious associations. Understanding these color associations is essential for UX designers aiming to craft experiences that not only look appealing but also resonate emotionally and guide user behavior effectively. 
As the <a href="https://blog.emb.global/color-psychology-in-branding/">EMB Global</a> states, the way we perceive and interpret color is not universal, yet broad patterns of association exist. For instance, the color blue often evokes feelings of trust, stability, and calmness. This association stems from the natural world — the vastness of the sky and the tranquility of deep waters. In the digital space, this makes blue a popular choice for financial institutions, corporate platforms, and interfaces aiming to project reliability and security. However, the specific shade and context matter immensely. A bright, electric blue can feel energetic and modern, while a muted and darker blue might convey a more serious and authoritative tone.
Kendra Cherry, a psychosocial and rehabilitation specialist and author of the book Everything Psychology, <a href="https://www.verywellmind.com/color-psychology-2795824">explains</a> very well how colors evoke certain responses in us. For example, the color green is intrinsically linked to nature, often bringing about feelings of growth, health, freshness, and tranquility. It can also symbolize prosperity in some cultures. In digital design, green is frequently used for health and wellness applications, environmental initiatives, and platforms emphasizing sustainability. A vibrant lime green can feel energetic and youthful, while a deep forest green can evoke a sense of groundedness and organic quality.
Yellow, the color of sunshine, is generally associated with optimism, happiness, energy, and warmth. It’s attention-grabbing and can create a sense of playfulness. In digital interfaces, yellow is often used for highlighting important information, calls to action (though sparingly, as too much can be overwhelming), or for brands wanting to project a cheerful and approachable image. 
Red, a color with strong physiological effects, typically evokes excitement, passion, urgency, and sometimes anger or danger. It commands attention and can stimulate action. Digitally, red is often used for alerts, error messages, sales promotions, or for brands wanting to project a bold and energetic identity. Its intensity requires careful consideration, as overuse can lead to user fatigue or anxiety.
Orange blends the energy of red with the optimism of yellow, often conveying enthusiasm, creativity, and friendliness. It can feel less aggressive than red but still commands attention. In digital design, orange is frequently used for calls to action, highlighting sales or special offers, and for brands aiming to appear approachable and innovative.
Purple has historically been associated with royalty and luxury. It can evoke feelings of creativity, wisdom, and mystery. In digital contexts, purple is often used for brands aiming for a sophisticated or unique feel, particularly in areas like luxury goods, beauty, or spiritual and creative platforms.
Black often signifies sophistication, power, elegance, and sometimes mystery. In digital design, black is frequently used for minimalist interfaces, luxury brands, and for creating strong contrast with lighter elements. The feeling it evokes heavily depends on the surrounding colors and overall design aesthetic.
White is generally associated with purity, cleanliness, simplicity, and neutrality. It provides a sense of spaciousness and allows other colors to stand out. In digital design, white space is a crucial element, and white is often used as a primary background color to create a clean and uncluttered feel.
Gray is often seen as neutral, practical, and sometimes somber or conservative. In digital interfaces, various shades of gray are essential for typography, borders, dividers, and creating visual hierarchy without being overly distracting.
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/3-color-associations.png" />
Evoking Emotions In Digital Interfaces
Imagine an elegant furniture application. The designers might choose a primary palette of soft, desaturated blues and greens, accented with gentle earth tones. The muted blues could subtly induce a feeling of calmness and tranquility, aligning with the app’s core purpose of relaxation. The soft greens might evoke a sense of nature and well-being, further reinforcing the theme of peace and mental clarity. The earthy browns could ground the visual experience, creating a feeling of stability and connection to the natural world.
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/4-calm-vs-vibrant-color-palette.png" />
Now, consider a platform for extreme investment enthusiasts. The color palette might be dominated by high-energy oranges and reds, contrasted with stark blacks and sharp whites. The vibrant oranges could evoke feelings of excitement and adventure, while the bold red might amplify the sense of adrenaline and intensity. The black and white could provide a sense of dynamism and modernity, reflecting the fast-paced nature of the activities.
By consciously understanding and applying these color associations, digital designers can move beyond purely aesthetic choices and craft experiences that resonate deeply with users on an emotional level, leading to more engaging, intuitive, and successful digital products.
<h3>Color As A Usability Tool</h3>
Choosing the right colors isn’t about adhering to fleeting trends; it’s about ensuring that our mobile applications and websites are usable by the widest possible audience, including individuals with visual impairments. Improper color choices can create significant barriers, rendering content illegible, interactive elements indistinguishable, and ultimately excluding a substantial portion of potential users.
<blockquote>Prioritizing color with accessibility in mind is not just a matter of ethical design; it’s a fundamental aspect of creating inclusive and user-friendly digital experiences that benefit everyone.</blockquote>
For individuals with low vision, sufficient color contrast between text and background is paramount for readability. Imagine trying to decipher light gray text on a white background — a common design trend that severely hinders those with even mild visual impairments. Adhering to <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> (WCAG) contrast ratios ensures that text remains legible and understandable.
Furthermore, color blindness, affecting a significant percentage of the population, necessitates the use of redundant visual cues. Relying solely on color to convey information, such as indicating errors in red without an accompanying text label, excludes colorblind users. By pairing color with text, icons, or patterns, we ensure that critical information is conveyed through multiple sensory channels, making it accessible to all. Thoughtful color selection, therefore, is not an optional add-on but an integral component of designing digital products that are truly usable and equitable.
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/5-high-vs-low-contrast-texts.png" />
Choosing Your Palette
As designers, we need a strategic approach to choosing color palettes, considering various factors to build a scalable and impactful color system. Here’s a breakdown of the steps and considerations involved:
<h3>1. Deep Dive Into Brand Identity And Main Goals</h3>
The journey begins with a thorough understanding of the brand itself. What are its core values? What personality does it project? Is it playful, sophisticated, innovative? Analyze existing brand guidelines (if any), target audience demographics and psychographics, and the overall goals of the digital product. The color palette should be a visual extension of this identity, reinforcing brand recognition and resonating with the intended users. For instance, a financial app aiming for trustworthiness might lean towards blues and greens, while a creative platform could explore more vibrant and unconventional hues.
<h3>2. Understand Color Psychology And Cultural Associations</h3>
As discussed previously, colors carry inherent psychological and cultural baggage. While these associations are not absolute, they provide a valuable framework for initial exploration. Consider the emotions you want to evoke and research how your target audience might perceive different colors, keeping in mind cultural nuances that can significantly alter interpretations. This step is important to help in making informed decisions that align with the desired user experience and brand perception.
<h3>3. Defining The Core Colors</h3>
Start by identifying the primary color — the dominant hue that represents your brand’s essence. This will likely be derived from the brand logo or existing visual identity. Next, establish a secondary color or two that complement the primary color and provide visual interest and hierarchy. These secondary colors should work harmoniously with the primary, offering flexibility for different UI elements and interactions.
<h3>4. Build A Functional Color System</h3>
A consistent and scalable color palette goes beyond just a few base colors. It involves creating a system of variations for practical application within the digital interface. This typically includes tints and shades, accent colors, and neutral colors.
<h3>5. Do Not Forget About Usability And Accessibility</h3>
Ensure sufficient color contrast between text and background, as well as between interactive elements and their surroundings, to meet WCAG guidelines. Tools are readily available to check color contrast ratios.
Test your palette using color blindness simulators to see how it will be perceived by individuals with different types of color vision deficiencies. This helps identify potential issues where information might be lost due to color alone.
Visual hierarchy is also important to guide the user’s eye and establish a clear visual story. Important elements should be visually distinct. 
<h3>6. Testing And Iteration</h3>
Once you have a preliminary color palette, it’s crucial to test it within the context of your digital product. Create mockups and prototypes to see how the colors work together in the actual interface. Gather feedback from stakeholders and, ideally, conduct user testing to identify any usability or aesthetic issues. Be prepared to iterate and refine your palette based on these insights.
A well-defined color palette for the digital medium should be:
<ul>
<li>Consistent,</li>
<li>Scalable,</li>
<li>Accessible,</li>
<li>Brand-aligned,</li>
<li>Emotionally resonant, and</li>
<li>Functionally effective.</li>
</ul>
By following these steps and keeping these considerations in mind, designers can craft color palettes that are not just visually appealing but also strategically powerful tools for creating effective and accessible digital experiences.
<img src="https://files.smashing.media/articles/psychology-color-ux-design-digital-products/6-consistent-color-palette.png" />
Color Consistency: Building Trust And Recognition Through A Harmonized Digital Presence
Consistency plays an important role in the whole color ecosystem. By maintaining a unified color scheme for interactive elements, navigation cues, and informational displays, designers create a seamless and predictable user journey, building trust through visual stability.
Color consistency directly contributes to brand recognition in the increasingly crowded digital landscape. Just as a logo or typeface becomes instantly identifiable, a consistent color palette acts as a powerful visual signature. When users repeatedly encounter the same set of colors associated with a particular brand, it strengthens their recall and fosters a stronger brand association. This visual consistency extends beyond the core interface to marketing materials, social media presence, and all digital touchpoints, creating a cohesive and memorable brand experience. By strategically and consistently applying a solid and consistent color palette, digital products can cultivate stronger brand recognition, build user trust, and enhance user loyalty.
]]></content:encoded>
<author>hello@smashingmagazine.com (Rodolpho Henrique)</author>
<enclosure url="http://files.smashing.media/articles/psychology-color-ux-design-digital-products/psychology-color-ux-design-digital-products.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[From Line To Layout: How Past Experiences Shape Your Design Career]]></title>
<link>https://smashingmagazine.com/2025/08/from-line-to-layout-past-experiences-shape-design-career/</link>
<guid>https://smashingmagazine.com/2025/08/from-line-to-layout-past-experiences-shape-design-career/</guid>
<pubDate>Wed, 13 Aug 2025 11:00:00 GMT</pubDate>
<description><![CDATA[Your past shapes who you are as a designer, no matter where your career began or how unexpected your career path may have been. Stephanie Campbell shows how those lessons can sharpen your instincts, strengthen collaboration, and help you become a better designer today.]]></description>
<content:encoded><![CDATA[Design career origin stories often sound clean and linear: a degree in Fine Arts, a lucky internship, or a first job that launches a linear, upward path. But what about those whose paths were not so straight? The ones who came from service, retail, construction, or <a href="https://jasoncyr.medium.com/how-being-a-firefighter-made-me-a-better-designer-cb6345001d62">even firefighting</a> — the messy, winding paths that didn’t begin right out of design school — who learned service instincts long before learning design tools?
I earned my Associate in Science way later than planned, after 15 years in fine dining, which I once dismissed as a detour delaying my “real” career. But in hindsight, it was anything but. Those years built skills and instincts I still rely on daily — in meetings, design reviews, and messy mid-project pivots.
Your Past Is Your Advantage
I still have the restaurant dream.
Whenever I’m overwhelmed or deep in a deadline, it comes back: I’m the only one running the restaurant floor. The grill is on fire. There’s no clean glassware. Everyone needs their check, their drink, and their table turned. I wake up sweating, and I ask myself, “Why am I still having restaurant nightmares 15 years into a design career?”
Because those jobs wired themselves into how I think and work.
<blockquote>Those years weren’t just a job but high-stakes training in adaptability, anticipation, and grace under pressure. They built muscle memory: ways of thinking, reacting, and solving problems that still appear daily in my design work. They taught me to adapt, connect with people, and move with urgency and grace.</blockquote>
But those same instincts rooted in nightmares can trip you up if you’re unaware. Speed can override thoughtfulness. Constant anticipation can lead to over-complication. The pressure to polish can push you to over-deliver too soon. Embracing your past also means examining it — recognizing when old habits serve you and when they don’t.
With reflection, those experiences can become your greatest advantage.
Lessons From The Line
These aren’t abstract comparisons. They’re instincts built through repetition and real-world pressure, and they show up daily in my design process.
Here are five moments from restaurant life that shaped how I think, design, and collaborate today.
1. Reading The Room
Reading a customer’s mood begins as soon as they sit down. Through years of trial and error, I refined my understanding of subtle cues, like seating delays indicating frustration or menus set aside, suggesting they want to enjoy cocktails. Adapting my approach based on these signals became instinctual, emerging from countless moments of observation.
<h3>What I Learned</h3>
The subtleties of reading a client aren’t so different in product design. Contexts differ, but the cues remain similar: project specifics, facial expressions, tone of voice, lack of engagement, or even the “word salad” of client feedback. With time, these signals become easier to spot, and you learn to ask better questions, challenge assumptions, or offer alternate approaches before misalignment grows. Whether a client is energized and all-in or hesitant and constrained, reading those cues early can make all the difference.
Those instincts — like constant anticipation and early intervention — served me well in fine dining, but can hinder the design process if I’m not in tune with how I’m reacting. Jumping in too early can lead to over-complicating the design process, solving problems that haven’t been voiced (yet), or stepping on others’ roles. I’ve had to learn to pause, check in with the team, and trust the process to unfold more collaboratively.
<h3>How I Apply This Today</h3>
<ul>
<li>Guide direction with focused options. Early on, share 2–3 meaningful variations, like style tiles or small component explorations, to shape the conversation and avoid overwhelm.</li>
<li>Flag misalignment fast. If something feels off, raise it early and loop in the right people.</li>
<li>Be intentional about workshop and deliverable formats. Structure or space? Depends on what helps the client open up and share.</li>
<li>Pause before jumping in. A sticky note on my screen (“Pause”) helps me slow down and check assumptions.</li>
</ul>
<img src="https://files.smashing.media/articles/from-line-to-layout-past-experiences-shape-design-career/1-workspace.jpeg" />
2. Speed Vs. Intentionality
In fine dining, multitasking wasn’t just helpful, it was survival. Every night demanded precision timing, orchestrating every meal step, from the first drink poured to the final dessert plated. The soufflé, for example, was a constant test. It takes precisely 45 minutes — no more, no less. If the guests lingered over appetizers or finished their entrées too early, that soufflé risked collapse.
But fine dining taught me how to handle that volatility. I learned to manage timing proactively, mastering small strategies: an amuse-bouche to buy the kitchen precious minutes, a complimentary glass of champagne to slow a too-quickly paced meal. Multitasking meant constantly adjusting in real-time, keeping a thousand tiny details aligned even when, behind the scenes, chaos loomed.
<h3>What I Learned</h3>
Multitasking is a given in product design, just in a different form. While the pressure is less immediate, it is more layered as designers often juggle multiple projects, overlapping timelines, differing stakeholder expectations, and evolving product needs simultaneously. That restaurant instinct to keep numerous plates spinning at the same time? It’s how I handle shifting priorities, constant Slack pings, regular Figma updates, and unexpected client feedback — without losing sight of the big picture.
The hustle and pace of fine dining hardwired me to associate speed with success. But in design, speed can sometimes undermine depth. Jumping too quickly into a solution might mean missing the real problem or polishing the wrong idea. I’ve learned that staying in motion isn’t always the goal. Unlike a fast-paced service window, product design invites experimentation and course correction. I’ve had to quiet the internal timer and lean into design with a slower, more intentional nature.
<h3>How I Apply This Today</h3>
<ul>
<li>Make space for inspiration. Set aside time for untasked exploration outside the norm — magazines, bookstores, architecture, or gallery visits — before jumping into design.</li>
<li>Build in pause points. Plan breaks between design rounds and schedule reviews after a weekend gap to return with fresh eyes.</li>
<li>Stay open to starting over. Let go of work that isn’t working, even full comps. Starting fresh often leads to better ideas.</li>
</ul>
3. Presentation Matters
Presentation isn’t just a finishing touch in fine dining — it’s everything. It’s the mint leaf delicately placed atop a dessert, the raspberry glace cascading across the perfectly off-centered espresso cake.
The presentation engages every sense: the smell of rare imported truffles on your truffle fries, or the meticulous choreography of four servers placing entrées in front of diners simultaneously, creating a collective “wow” moment. An excellent presentation shapes diners’ emotional connection with their meal — that experience directly impacts how generously they spend, and ultimately, your success.
<img src="https://files.smashing.media/articles/from-line-to-layout-past-experiences-shape-design-career/2-flourless-cake.jpg" />
<h3>What I Learned</h3>
A product design presentation, from the initial concept to the handoff, carries that same power. Introducing a new homepage design can feel mechanical or magical, depending entirely on how you frame and deliver it. Just like careful plating shapes a diner’s experience, clear framing and confident storytelling shape how design is received. 
Beyond the initial introduction, explain the why behind your choices. Connect patterns to the organic elements of the brand’s identity and highlight how users will intuitively engage with each section. Presentation isn’t just about aesthetics; it helps clients connect with the work, understand its value, and get excited to share it.
The pressure to get everything right the first time, to present a pixel-perfect comp that “wows” immediately, is intense.
Sometimes, an excellent presentation isn’t about perfection — it’s about pacing, storytelling, and allowing the audience to see themselves in the work.
I’ve had to let go of the idea that polish is everything and instead focus on the why, describing it with clarity, confidence, and connection.
<h3>How I Apply This Today</h3>
<ul>
<li>Frame the story first. Lead with the “why” behind the work before showing the “what”. It sets the tone and invites clients into the design.</li>
<li>Keep presentations polished. Share fewer, more intentional concepts to reduce distractions and keep focus.</li>
<li>Skip the jargon. Clients aren’t designers. Use clear, relatable terms. Say “section” instead of “component,” or “repeatable element” instead of “pattern.”</li>
<li>Bring designs to life. Use motion, prototypes, and real content to add clarity, energy, and brand relevance.</li>
</ul>
<img src="https://files.smashing.media/articles/from-line-to-layout-past-experiences-shape-design-career/3-documented-component-anatomy.png" />
5. Composure Under Pressure
In fine dining, pressure isn’t an occasional event — it’s the default setting. Every night is high stakes. Timing is tight, expectations are sky-high, and mistakes are rarely forgiven. Composure becomes your edge. You don’t show panic when the kitchen is backed up or when a guest sends a dish back mid-rush. You pivot. You delegate. You anticipate. Some nights, the only thing that kept things on track was staying calm and thinking clearly. 
<blockquote>“This notion of problem solving and decision making is key to being a great designer. I think that we need to get really strong at problem identification and then prioritization. All designers are good problem solvers, but the really great designers are strong problem finders.” — Jason Cyr, “<a href="https://jasoncyr.medium.com/how-being-a-firefighter-made-me-a-better-designer-cb6345001d62">How being a firefighter made me a better designer thinker</a>”</blockquote>
<h3>What I Learned</h3>
The same principle applies to product design. When pressure mounts — tight timelines, conflicting feedback, or unclear priorities — your ability to stay composed can shift the energy of the entire project.
<blockquote>Composure isn’t just about being calm; it’s about being adaptable and responsive without reacting impulsively. It helps you hold space for feedback, ask better questions, and move forward with clarity instead of chaos.</blockquote>
There have also been plenty of times when a client doesn’t resonate with a design, which can feel crushing. You can easily take it personally and internalize the rejection, or you can pause, listen, and course-correct. I’ve learned to focus on understanding the root of the feedback. Often, what seems like a rejection is just discomfort with a small detail, which in most cases can be easily corrected.
Perfection was the baseline in restaurants, and pressure drove polish. In design, that mindset can lead to overinvesting in perfection too soon or “freezing” under critique. I’ve had to unlearn that success means getting everything right the first time. Now I see messy collaboration and gradual refinement as a mark of success, not failure.
<h3>How I Apply This Today</h3>
<ul>
<li>Use live design to unblock. When timelines are tight and feedback goes in circles, co-designing in real time helps break through stuck points and move forward quickly.</li>
<li>Turn critique into clarity. Listen for what’s underneath the feedback, then ask clarifying questions, or repeat back what you’re hearing to align before acting.</li>
<li>Pause when stress builds. If you feel reactive, take a moment to regroup before responding.</li>
<li>Frame changes as progress. Normalize iteration as part of the process, and not a design failure.</li>
</ul>
Would I Go Back?
I still dream about the restaurant floor. But now, I see it as a reminder — not of where I was stuck, but of where I perfected the instincts I use today. If you’re someone who came to design from another path, try asking yourself:
<ul>
<li>When do I feel strangely at ease while others panic?</li>
<li>What used to feel like “just part of the job,” but now feels like a superpower?</li>
<li>Where do I get frustrated because my instincts are different — and maybe sharper?</li>
<li>What kinds of group dynamics feel easy to me that others struggle with?</li>
<li>What strengths would not exist in me today if I hadn’t lived that past life?</li>
</ul>
Once you see the patterns, start using them.
Name your edge. Talk about your background as an asset: in intros, portfolios, interviews, or team retrospectives. When projects get messy, lean into what you already know how to do. Trust your instincts. They’re real, and they’re earned. But balance them, too. Stay aware of when your strengths could become blind spots, like speed overriding thoughtfulness. That kind of awareness turns experience into a tool, not a trigger.
Your past doesn’t need to look like anyone else’s. It just needs to teach you something.
<h3>Further Reading</h3>
<ul>
<li>“If I Was Starting My Career Today: Thoughts After 15 Years Spent In UX Design” (<a href="https://www.smashingmagazine.com/2024/08/thoughts-after-15-years-spent-ux-design-part1/">Part One</a>, <a href="https://www.smashingmagazine.com/2024/08/thoughts-after-15-years-spent-ux-design-part2/">Part Two</a>), by Andrii Zhdan (Smashing Magazine) In this two-part series, Andrii Zhdan outlines common challenges faced at the start of a design career and offers advice to smooth your journey based on insights from his experience hiring designers.</li>
<li>“<a href="https://www.smashingmagazine.com/2022/07/overcoming-imposter-syndrome-developing-guiding-principles/">Overcoming Imposter Syndrome By Developing Your Own Guiding Principles</a>,” by Luis Ouriach (Smashing Magazine) Unfortunately, not everyone has access to a mentor or a guide at the start of the design career, which is why we often have to rely on “working it out” by ourselves. In this article, Luis Ouriach tries to help you in this task so that you can walk into the design critique meetings with more confidence and really deliver the best representation of your ideas.</li>
<li>“<a href="https://www.smashingmagazine.com/2022/07/overcoming-imposter-syndrome-developing-guiding-principles/">Why Designers Get Stuck In The Details And How To Stop</a>,” by Nikita Samutin (Smashing Magazine) Designers love to craft, but polishing pixels before the problem is solved is a time sink. This article pinpoints the five traps that lure us into premature detail and then hands you a rescue plan to refocus on goals, ship faster, and keep your craft where it counts.</li>
<li>“<a href="https://www.smashingmagazine.com/2023/09/rediscovering-joy-happiness-design/">Rediscovering The Joy Of Design</a>,” by Pratik Joglekar (Smashing Magazine) Pratik Joglekar takes a philosophical approach to remind designers about the lost joy within themselves by effectively placing massive importance on mindfulness, introspection, and forward-looking.</li>
<li>“<a href="https://www.smashingmagazine.com/2022/09/lessons-learned-designer-founder/">Lessons Learned As A Designer-Founder</a>,” by Dave Feldman (Smashing Magazine) In this article, Dave Feldman shares his lessons learned and the experiments he has done as a multidisciplinary designer-founder-CEO at an early-stage startup.</li>
<li>“<a href="https://www.smashingmagazine.com/2023/02/designers-ask-receive-high-quality-feedback/">How Designers Should Ask For (And Receive) High-Quality Feedback</a>,” by Andy Budd (Smashing Magazine) Designers often complain about the quality of feedback they get from senior stakeholders without realizing it’s usually because of the way they initially have framed the request. In this article, Andy Budd shares a better way of requesting feedback: rather than sharing a linear case study that explains every design revision, the first thing to do would be to better frame the problem.</li>
<li>“<a href="https://jasoncyr.medium.com/how-being-a-firefighter-made-me-a-better-designer-cb6345001d62">How being a Firefighter made me a better Designer Thinker</a>“ by <a href="https://jasoncyr.medium.com/?source=post_page---byline--cb6345001d62---------------------------------------">Jason Cyr</a> (Medium) The ability to come upon a situation and very quickly start evaluating information, asking questions, making decisions, and formulating a plan is a skill that every firefighter learns to develop, especially as you rise through the ranks and start leading others.</li>
<li>“<a href="https://adobe.design/stories/leading-design/advice-for-making-the-most-of-an-indirect-career-path-to-design">Advice for making the most of an indirect career path to design</a>,” by Heidi Meredith (Adobe Express Growth) I didn’t know anything about design until after I graduated from the University of California, Santa Cruz, with a degree in English Literature/Creative Writing. A mere three months into it, though, I realized I didn't want to write books — I wanted to design them.</li>
</ul>
I want to express my deep gratitude to Sara Wachter-Boettcher, whose coaching helped me find the clarity and confidence to write this piece — and, more importantly, to move forward with purpose in both life and work. And to Lea Alcantara, my design director at Fueled, for being a steady creative force and an inspiring example of thoughtful leadership.
]]></content:encoded>
<author>hello@smashingmagazine.com (Stephanie Campbell)</author>
<enclosure url="http://files.smashing.media/articles/from-line-to-layout-past-experiences-shape-design-career/from-line-to-layout-past-experiences-shape-design-career.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Designing With AI, Not Around It: Practical Advanced Techniques For Product Design Use Cases]]></title>
<link>https://smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/</link>
<guid>https://smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/</guid>
<pubDate>Mon, 11 Aug 2025 08:00:00 GMT</pubDate>
<description><![CDATA[Prompting isn’t just about writing better instructions, but about designing better thinking. Ilia and Marina explore how advanced prompting can empower different product & design use cases, speeding up your workflow and improving results, from research and brainstorming to testing and beyond. Let’s dive in.]]></description>
<content:encoded><![CDATA[AI is almost everywhere — it writes text, makes music, generates code, draws pictures, runs research, chats with you — and apparently even <a href="https://hbr.org/2025/04/how-people-are-really-using-gen-ai-in-2025">understands people better than they understand themselves</a>?!
It’s a lot to take in. The pace is wild, and new tools pop up faster than anyone has time to try them. Amid the chaos, one thing is clear: this isn’t hype, but it’s structural change.
According to the <a href="https://www.weforum.org/publications/the-future-of-jobs-report-2025/">Future of Jobs Report 2025</a> by the World Economic Forum, one of the fastest-growing, most in-demand skills for the next five years is the ability to work with AI and Big Data. That applies to almost every role — including product design.
<img src="https://files.smashing.media/articles/designing-with-ai-practical-techniques-product-design/1-skills-on-the-rise-2025.png" />
What do companies want most from their teams? Right, efficiency. And AI can make people way more efficient. We’d easily spend 3x more time on tasks like replying to our managers without AI helping out. We’re learning to work with it, but many of us are still figuring out how to meet the rising bar.
That’s especially important for designers, whose work is all about empathy, creativity, critical thinking, and working across disciplines. It’s a uniquely human mix. At least, that’s what we tell ourselves.
Even as debates rage about AI’s limitations, tools today (June 2025 — timestamp matters in this fast-moving space) already assist with research, ideation, and testing, sometimes better than expected.
Of course, not everyone agrees. AI hallucinates, loses context, and makes things up. So how can both views exist at the same time? Very simple. It’s because both are true: AI is deeply flawed and surprisingly useful. The trick is knowing how to work with its strengths while managing its weaknesses. The real question isn’t whether AI is good or bad — it’s how we, as designers, stay sharp, stay valuable, and stay in the loop.
Why Prompting Matters
Prompting matters more than most people realize because even small tweaks in how you ask can lead to radically different outputs. To see how this works in practice, let’s look at a simple example.
Imagine you want to improve the onboarding experience in your product. On the left, you have the prompt you send to AI. On the right, the response you get back.
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to improve onboarding in a SaaS product?</td>
<td>👉 Broad suggestions: checklists, empty states, welcome modals…</td>
</tr>
<tr>
<td>How to improve onboarding in Product A’s workspace setup flow?</td>
<td>👉 Suggestions focused on workspace setup…</td>
</tr>
<tr>
<td>How to improve onboarding in Product A’s workspace setup step to address user confusion?</td>
<td>👉 ~10 common pain points with targeted UX fixes for each…</td>
</tr>
<tr>
<td>How to improve onboarding in Product A by redesigning the workspace setup screen to reduce drop-off, with detailed reasoning?</td>
<td>👉 ~10 paragraphs covering a specific UI change, rationale, and expected impact…</td>
</tr>
</tbody>
</table>
This side-by-side shows just how much even the smallest prompt details can change what AI gives you.
Talking to an AI model isn’t that different from talking to a person. If you explain your thoughts clearly, you get a better understanding and communication overall. 
<blockquote>Advanced prompting is about moving beyond one-shot, throwaway prompts. It’s an iterative, structured process of refining your inputs using different techniques so you can guide the AI toward more useful results. It focuses on being intentional with every word you put in, giving the AI not just the task but also the path to approach it step by step, so it can actually do the job.</blockquote>
<img src="https://files.smashing.media/articles/designing-with-ai-practical-techniques-product-design/2-advanced-prompting.png" />
Where basic prompting throws your question at the model and hopes for a quick answer, advanced prompting helps you explore options, evaluate branches of reasoning, and converge on clear, actionable outputs.
But that doesn’t mean simple prompts are useless. On the contrary, short, focused prompts work well when the task is narrow, factual, or time-sensitive. They’re great for idea generation, quick clarifications, or anything where deep reasoning isn’t required. Think of prompting as a scale, not a binary. The simpler the task, the faster a lightweight prompt can get the job done. The more complex the task, the more structure it needs.
In this article, we’ll dive into how advanced prompting can empower different product & design use cases, speeding up your workflow and improving your results — whether you’re researching, brainstorming, testing, or beyond. Let’s dive in.
Practical Cases
In the next section, we’ll explore six practical prompting techniques that we’ve found most useful in real product design work. These aren’t abstract theories — each one is grounded in hands-on experience, tested across research, ideation, and evaluation tasks. Think of them as modular tools: you can mix, match, and adapt them depending on your use case. For each, we’ll explain the thinking behind it and walk through a sample prompt.
Important note: The prompts you’ll see are not copy-paste recipes. Some are structured templates you can reuse with small tweaks; others are more specific, meant to spark your thinking. Use them as scaffolds, not scripts.
<h3>1. Task Decomposition By JTBD</h3>
Technique: Role, Context, Instructions template + Checkpoints (with self-reflection)
Before solving any problem, there’s a critical step we often overlook: breaking the problem down into clear, actionable parts.
Jumping straight into execution feels fast, but it’s risky. We might end up solving the wrong thing, or solving it the wrong way. That’s where GPT can help: not just by generating ideas, but by helping us think more clearly about the structure of the problem itself.
There are many ways to break down a task. One of the most useful in product work is the Jobs To Be Done (JTBD) framework. Let’s see how we can use advanced prompting to apply JTBD decomposition to any task.
Good design starts with understanding the user, the problem, and the context. Good prompting? Pretty much the same. That’s why most solid prompts include three key parts: Role, Context, and Instructions. If needed, you can also add the expected format and any constraints.
In this example, we’re going to break down a task into smaller jobs and add self-checkpoints to the prompt, so the AI can pause, reflect, and self-verify along the way.
<blockquote>Role Act as a senior product strategist and UX designer with deep expertise in Jobs To Be Done (JTBD) methodology and user-centered design. You think in terms of user goals, progress-making moments, and unmet needs — similar to approaches used at companies like Intercom, Basecamp, or IDEO. Context You are helping a product team break down a broad user or business problem into a structured map of Jobs To Be Done. This decomposition will guide discovery, prioritization, and solution design. Task & Instructions [👉 DESCRIBE THE USER TASK OR PROBLEM 👈🏼] Use JTBD thinking to uncover:<ul><li>The main functional job the user is trying to get done;</li><li>Related emotional or social jobs;</li><li>Sub-jobs or tasks users must complete along the way;</li><li>Forces of progress and barriers that influence behavior.</li></ul> Checkpoints Before finalizing, check yourself:<ul><li>Are the jobs clearly goal-oriented and not solution-oriented?</li><li>Are sub-jobs specific steps toward the main job?</li><li>Are emotional/social jobs captured?</li><li>Are user struggles or unmet needs listed?</li></ul> If anything’s missing or unclear, revise and explain what was added or changed.</blockquote>
With a simple one-sentence prompt, you’ll likely get a high-level list of user needs or feature ideas. An advanced approach can produce a structured JTBD breakdown of a specific user problem, which may include:
<ul>
<li>Main Functional Job: A clear, goal-oriented statement describing the primary outcome the user wants to achieve.</li>
<li>Emotional & Social Jobs: Supporting jobs related to how the user wants to feel or be perceived during their progress.</li>
<li>Sub-Jobs: Step-by-step tasks or milestones the user must complete to fulfill the main job.</li>
<li>Forces of Progress: A breakdown of motivations (push/pull) and barriers (habits/anxieties) that influence user behavior.</li>
</ul>
But these prompts are most powerful when used with real context. Try it now with your product. Even a quick test can reveal unexpected insights.
<h3>2. Competitive UX Audit</h3>
Technique: Attachments + Reasoning Before Understanding + Tree of Thought (ToT)
Sometimes, you don’t need to design something new — you need to understand what already exists.
Whether you’re doing a competitive analysis, learning from rivals, or benchmarking features, the first challenge is making sense of someone else’s design choices. What’s the feature really for? Who’s it helping? Why was it built this way?
Instead of rushing into critique, we can use GPT to reverse-engineer the thinking behind a product — before judging it. In this case, start by:
<ol>
<li>Grabbing the competitor’s documentation for the feature you want to analyze.</li>
<li>Save it as a PDF. Then head over to ChatGPT (or other models).</li>
<li>Before jumping into the audit, ask it to first make sense of the documentation. This technique is called Reasoning Before Understanding (RBU). That means before you ask for critique, you ask for interpretation. This helps AI build a more accurate mental model — and avoids jumping to conclusions.</li>
</ol>
<blockquote>Role You are a senior UX strategist and cognitive design analyst. Your expertise lies in interpreting digital product features based on minimal initial context, inferring purpose, user intent, and mental models behind design decisions before conducting any evaluative critique. Context You’ve been given internal documentation and screenshots of a feature. The goal is not to evaluate it yet, but to understand what it’s doing, for whom, and why. Task & Instructions Review the materials and answer:<ul><li>What is this feature for?</li><li>Who is the intended user?</li><li>What tasks or scenarios does it support?</li><li>What assumptions does it make about the user?</li><li>What does its structure suggest about priorities or constraints?</li></ul></blockquote>
Once you get the first reply, take a moment to respond: clarify, correct, or add nuance to GPT’s conclusions. This helps align the model’s mental frame with your own.
For the audit part, we’ll use something called the Tree of Thought (ToT) approach. 
Tree of Thought (ToT) is a prompting strategy that asks the AI to “think in branches.” Instead of jumping to a single answer, the model explores multiple reasoning paths, compares outcomes, and revises logic before concluding — like tracing different routes through a decision tree. This makes it perfect for handling more complex UX tasks.
<blockquote>You are now performing a UX audit based on your understanding of the feature. You’ll identify potential problems, alternative design paths, and trade-offs using a Tree of Thought approach, i.e., thinking in branches, comparing different reasoning paths before concluding.</blockquote>
or
<blockquote>Convert your understanding of the feature into a set of Jobs-To-Be-Done statements from the user’s perspective using a Tree of Thought approach.</blockquote>
<blockquote>List implicit assumptions this feature makes about the user's behavior, workflow, or context using a Tree of Thought approach.</blockquote>
<blockquote>Propose alternative versions of this feature that solve the same job using different interaction or flow mechanics using a Tree of Thought approach.</blockquote>
<h3>3. Ideation With An Intellectual Opponent</h3>
Technique: Role Conditioning + Memory Update
When you’re working on creative or strategic problems, there’s a common trap: AI often just agrees with you or tries to please your way of thinking. It treats your ideas like gospel and tells you they’re great — even when they’re not.
So how do you avoid this? How do you get GPT to challenge your assumptions and act more like a critical thinking partner? Simple: tell it to and ask to remember.
<blockquote>Instructions From now on, remember to follow this mode unless I explicitly say otherwise. Do not take my conclusions at face value. Your role is not to agree or assist blindly, but to serve as a sharp, respectful intellectual opponent. Every time I present an idea, do the following:<ul><li>Interrogate my assumptions: What am I taking for granted?</li><li>Present counter-arguments: Where could I be wrong, misled, or overly confident?</li><li>Test my logic: Is the reasoning sound, or are there gaps, fallacies, or biases?</li><li>Offer alternatives: Not for the sake of disagreement, but to expand perspective.</li><li>Prioritize truth and clarity over consensus: Even when it’s uncomfortable.</li></ul>Maintain a constructive, rigorous, truth-seeking tone. Don’t argue for the sake of it. Argue to sharpen thought, expose blind spots, and help me reach clearer, stronger conclusions. This isn’t a debate. It’s a collaboration aimed at insight.</blockquote>
<h3>4. Requirements For Concepting</h3>
Technique: Requirement-Oriented + Meta prompting
This one deserves a whole article on its own, but let’s lay the groundwork here.
When you’re building quick prototypes or UI screens using tools like v0, Bolt, Lovable, UX Pilot, etc., your prompt needs to be better than most PRDs you’ve worked with. Why? Because the output depends entirely on how clearly and specifically you describe the goal.
The catch? Writing that kind of prompt is hard. So instead of jumping straight to the design prompt, try writing a meta-prompt first. That is a prompt that asks GPT to help you write a better prompt. Prompting about prompting, prompt-ception, if you will.
Here’s how to make that work: Feed GPT what you already know about the app or the screen. Then ask it to treat things like information architecture, layout, and user flow as variables it can play with. That way, you don’t just get one rigid idea — you get multiple concept directions to explore.
<blockquote>Role You are a product design strategist working with AI to explore early-stage design concepts. Goal Generate 3 distinct prompt variations for designing a Daily Wellness Summary single screen in a mobile wellness tracking app for Lovable/Bolt/v0. Each variation should experiment with a different Information Architecture and Layout Strategy. You don’t need to fully specify the IA or layout — just take a different angle in each prompt. For example, one may prioritize user state, another may prioritize habits or recommendations, and one may use a card layout while another uses a scroll feed. User context The target user is a busy professional who checks this screen once or twice a day (morning/evening) to log their mood, energy, and sleep quality, and to receive small nudges or summaries from the app. Visual style Keep the tone calm and approachable. Format Each of the 3 prompt variations should be structured clearly and independently. Remember: The key difference between the three prompts should be the underlying IA and layout logic. You don’t need to over-explain — just guide the design generator toward different interpretations of the same user need.</blockquote>
<h3>5. From Cognitive Walkthrough To Testing Hypothesis</h3>
Technique: Casual Tree of Though + Casual Reasoning + Multi-Roles + Self-Reflection
Cognitive walkthrough is a powerful way to break down a user action and check whether the steps are intuitive.
Example: “User wants to add a task” → Do they know where to click? What to do next? Do they know it worked?
We’ve found this technique super useful for reviewing our own designs. Sometimes there’s already a mockup; other times we’re still arguing with a PM about what should go where. Either way, GPT can help.
Here’s an advanced way to run that process:
<blockquote>Context You’ve been given a screenshot of a screen where users can create new tasks in a project management app. The main action the user wants to perform is “add a task”. Simulate behavior from two user types: a beginner with no prior experience and a returning user familiar with similar tools. Task & Instructions Go through the UI step by step and evaluate:<ol><li>Will the user know what to do at each step?</li><li>Will they understand how to perform the action?</li><li>Will they know they’ve succeeded?</li></ol>For each step, consider alternative user paths (if multiple interpretations of the UI exist). Use a casual Tree-of-Thought method. At each step, reflect: what assumptions is the user making here? What visual feedback would help reduce uncertainty? Format Use a numbered list for each step. For each, add observations, possible confusions, and UX suggestions. Limits Don’t assume prior knowledge unless it’s visually implied. Do not limit analysis to a single user type.</blockquote>
Cognitive walkthroughs are great, but they get even more useful when they lead to testable hypotheses.
After running the walkthrough, you’ll usually uncover moments that might confuse users. Instead of leaving that as a guess, turn those into concrete UX testing hypotheses.
We ask GPT to not only flag potential friction points, but to help define how we’d validate them with real users: using a task, a question, or observable behavior.
<blockquote>Task & Instructions Based on your previous cognitive walkthrough:<ol><li>Extract all potential usability hypotheses from the walkthrough.</li><li>For each hypothesis:<ul><li>Assess whether it can be tested through moderated or unmoderated usability testing.</li><li>Explain what specific UX decision or design element may cause this issue. Use causal reasoning.</li><li>For testable hypotheses:<ul><li>Propose a specific usability task or question.</li><li>Define a clear validation criterion (how you’ll know if the hypothesis is confirmed or disproved).</li><li>Evaluate feasibility and signal strength of the test (e.g., how easy it is to test, and how confidently it can validate the hypothesis).</li><li>Assign a priority score based on Impact, Confidence, and Ease (ICE).</li></ul></li></ul></li></ol>Limits Don’t invent hypotheses not rooted in your walkthrough output. Only propose tests where user behavior or responses can provide meaningful validation. Skip purely technical or backend concerns.</blockquote>
<h3>6. Cross-Functional Feedback</h3>
Technique: Multi-Roles
Good design is co-created. And good designers are used to working with cross-functional teams: PMs, engineers, analysts, QAs, you name it. Part of the job is turning scattered feedback into clear action items.
Earlier, we talked about how giving AI a “role” helps sharpen its responses. Now let’s level that up: what if we give it multiple roles at once? This is called multi-role prompting. It’s a great way to simulate a design review with input from different perspectives. You get quick insights and a more well-rounded critique of your design.
<blockquote>Role You are a cross-functional team of experts evaluating a new dashboard design:<ul><li>PM (focus: user value & prioritization)</li><li>Engineer (focus: feasibility & edge cases)</li><li>QA tester (focus: clarity & testability)</li><li>Data analyst (focus: metrics & clarity of reporting)</li><li>Designer (focus: consistency & usability)</li></ul>Context The team is reviewing a mockup for a new analytics dashboard for internal use. Task & Instructions For each role:<ol><li>What stands out immediately?</li><li>What concerns might this role have?</li><li>What feedback or suggestions would they give?</li></ol></blockquote>
Designing With AI Is A Skill, Not A Shortcut
By now, you’ve seen that prompting isn’t just about typing better instructions. It’s about designing better thinking.
We’ve explored several techniques, and each is useful in different contexts:
<table>
<thead>
<tr>
<th>Technique</th>
<th>When to use It</th>
</tr>
</thead>
<tbody>
<tr>
<td>Role + Context + Instructions + Constraints</td>
<td>Anytime you want consistent, focused responses (especially in research, decomposition, and analysis).</td>
</tr>
<tr>
<td>Checkpoints / Self-verification</td>
<td>When accuracy, structure, or layered reasoning matters. Great for complex planning or JTBD breakdowns.</td>
</tr>
<tr>
<td>Reasoning Before Understanding (RBU)</td>
<td>When input materials are large or ambiguous (like docs or screenshots). Helps reduce misinterpretation.</td>
</tr>
<tr>
<td>Tree of Thought (ToT)</td>
<td>When you want the model to explore options, backtrack, compare. Ideal for audits, evaluations, or divergent thinking.</td>
</tr>
<tr>
<td>Meta-prompting</td>
<td>When you're not sure how to even ask the right question. Use it early in fuzzy or creative concepting.</td>
</tr>
<tr>
<td>Multi-role prompting</td>
<td>When you need well-rounded, cross-functional critique or to simulate team feedback.</td>
</tr>
<tr>
<td>Memory-updated “opponent” prompting</td>
<td>When you want to challenge your own logic, uncover blind spots, or push beyond echo chambers.</td>
</tr>
</tbody>
</table>
But even the best techniques won’t matter if you use them blindly, so ask yourself:
<ul>
<li>Do I need precision or perspective right now?<ul>
<li>Precision? Try Role + Checkpoints for clarity and control.</li>
<li>Perspective? Use Multi-Role or Tree of Thought to explore alternatives.</li>
</ul>
</li>
<li>Should the model reflect my framing, or break it?<ul>
<li>Reflect it? Use Role + Context + Instructions.</li>
<li>Break it? Try Opponent prompting to challenge assumptions.</li>
</ul>
</li>
<li>Am I trying to reduce ambiguity, or surface complexity?<ul>
<li>Reduce ambiguity? Use Meta-prompting to clarify your ask.</li>
<li>Surface complexity? Go with ToT or RBU to expose hidden layers.</li>
</ul>
</li>
<li>Is this task about alignment, or exploration?<ul>
<li>Alignment? Use Multi-Roles prompting to simulate consensus.</li>
<li>Exploration? Use Cognitive Walkthrough to push deeper.</li>
</ul>
</li>
</ul>
Remember, you don’t need a long prompt every time. Use detail when the task demands it, not out of habit. AI can do a lot, but it reflects the shape of your thinking. And prompting is how you shape it. So don’t just prompt better. Think better. And design with AI — not around it.
]]></content:encoded>
<author>hello@smashingmagazine.com (Ilia Kanazin & Marina Chernyshova)</author>
<enclosure url="http://files.smashing.media/articles/designing-with-ai-practical-techniques-product-design/designing-with-ai-practical-techniques-product-design.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[The Power Of The <code>Intl</code> API: A Definitive Guide To Browser-Native Internationalization]]></title>
<link>https://smashingmagazine.com/2025/08/power-intl-api-guide-browser-native-internationalization/</link>
<guid>https://smashingmagazine.com/2025/08/power-intl-api-guide-browser-native-internationalization/</guid>
<pubDate>Fri, 08 Aug 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Internationalization isn’t just translation. It’s about formatting dates, pluralizing words, sorting names, and more, all according to specific locales. Instead of relying on heavy third-party libraries, modern JavaScript offers the Intl API — a powerful, native way to handle i18n. A quiet reminder that the web truly is worldwide. ]]></description>
<content:encoded><![CDATA[It’s a common misconception that internationalization (i18n) is simply about translating text. While crucial, translation is merely one facet. One of the complexities lies in adapting information for diverse cultural expectations: How do you display a date in Japan versus Germany? What’s the correct way to pluralize an item in Arabic versus English? How do you sort a list of names in various languages?
Many developers have relied on weighty third-party libraries or, worse, custom-built formatting functions to tackle these challenges. These solutions, while functional, often come with significant overhead: increased bundle size, potential performance bottlenecks, and the constant struggle to keep up with evolving linguistic rules and locale data.
Enter the ECMAScript Internationalization API, more commonly known as the <code>Intl</code> object. This silent powerhouse, built directly into modern JavaScript environments, is an often-underestimated, yet incredibly potent, native, performant, and standards-compliant solution for handling data internationalization. It’s a testament to the web’s commitment to being worldwide, providing a unified and efficient way to format numbers, dates, lists, and more, according to specific locales.
<code>Intl</code> And Locales: More Than Just Language Codes
At the heart of <code>Intl</code> lies the concept of a locale. A locale is far more than just a two-letter language code (like <code>en</code> for English or <code>es</code> for Spanish). It encapsulates the complete context needed to present information appropriately for a specific cultural group. This includes:
<ul>
<li>Language: The primary linguistic medium (e.g., <code>en</code>, <code>es</code>, <code>fr</code>).</li>
<li>Script: The script (e.g., <code>Latn</code> for Latin, <code>Cyrl</code> for Cyrillic). For example, <code>zh-Hans</code> for Simplified Chinese, vs. <code>zh-Hant</code> for Traditional Chinese.</li>
<li>Region: The geographic area (e.g., <code>US</code> for United States, <code>GB</code> for Great Britain, <code>DE</code> for Germany). This is crucial for variations within the same language, such as <code>en-US</code> vs. <code>en-GB</code>, which differ in date, time, and number formatting.</li>
<li>Preferences/Variants: Further specific cultural or linguistic preferences. See <a href="https://www.w3.org/International/questions/qa-choosing-language-tags">“Choosing a Language Tag”</a> from W3C for more information.</li>
</ul>
Typically, you’ll want to choose the locale according to the language of the web page. This can be determined from the <code>lang</code> attribute:
<div>
<pre><code>// Get the page's language from the HTML lang attribute
const pageLocale = document.documentElement.lang || 'en-US'; // Fallback to 'en-US'
</code></pre>
</div>
Occasionally, you may want to override the page locale with a specific locale, such as when displaying content in multiple languages:
<div>
<pre><code>// Force a specific locale regardless of page language
const tutorialFormatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });
console.log(<code>Chinese example: ${tutorialFormatter.format(199.99)}</code>); // Output: ¥199.99
</code></pre>
</div>
In some cases, you might want to use the user’s preferred language:
<div>
<pre><code>// Use the user's preferred language
const browserLocale = navigator.language || 'ja-JP';
const formatter = new Intl.NumberFormat(browserLocale, { style: 'currency', currency: 'JPY' });
</code></pre>
</div>
When you instantiate an <code>Intl</code> formatter, you can optionally pass one or more locale strings. The API will then select the most appropriate locale based on availability and preference.
Core Formatting Powerhouses
The <code>Intl</code> object exposes several constructors, each for a specific formatting task. Let’s delve into the most frequently used ones, along with some powerful, often-overlooked gems.
<h3>1. <code>Intl.DateTimeFormat</code>: Dates and Times, Globally</h3>
Formatting dates and times is a classic i18n problem. Should it be MM/DD/YYYY or DD.MM.YYYY? Should the month be a number or a full word? <code>Intl.DateTimeFormat</code> handles all this with ease.
<div>
<pre><code>const date = new Date(2025, 6, 27, 14, 30, 0); // June 27, 2025, 2:30 PM
// Specific locale and options (e.g., long date, short time)
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
timeZoneName: 'shortOffset' // e.g., "GMT+8"
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// "Friday, June 27, 2025 at 2:30 PM GMT+8"
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
// "Freitag, 27. Juni 2025 um 14:30 GMT+8"
// Using dateStyle and timeStyle for common patterns
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'short' }).format(date));
// "Friday 27 June 2025 at 14:30"
console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long', timeStyle: 'short' }).format(date));
// "2025年6月27日 14:30"
</code></pre>
</div>
The flexibility of <code>options</code> for <code>DateTimeFormat</code> is vast, allowing control over year, month, day, weekday, hour, minute, second, time zone, and more.
<h3>2. <code>Intl.NumberFormat</code>: Numbers With Cultural Nuance</h3>
Beyond simple decimal places, numbers require careful handling: thousands separators, decimal markers, currency symbols, and percentage signs vary wildly across locales.
<div>
<pre><code>const price = 123456.789;
// Currency formatting
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));
// "$123,456.79" (auto-rounds)
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price));
// "123.456,79 €"
// Units
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'meter', unitDisplay: 'long' }).format(100));
// "100 meters"
console.log(new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilogram', unitDisplay: 'short' }).format(5.5));
// "5,5 kg"
</code></pre>
</div>
Options like <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code>, and <code>notation</code> (e.g., <code>scientific</code>, <code>compact</code>) provide even finer control.
<h3>3. <code>Intl.ListFormat</code>: Natural Language Lists</h3>
Presenting lists of items is surprisingly tricky. English uses “and” for conjunction and “or” for disjunction. Many languages have different conjunctions, and some require specific punctuation.
This API simplifies a task that would otherwise require complex conditional logic:
<div>
<pre><code>const items = ['apples', 'oranges', 'bananas'];
// Conjunction ("and") list
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(items));
// "apples, oranges, and bananas"
console.log(new Intl.ListFormat('de-DE', { type: 'conjunction' }).format(items));
// "Äpfel, Orangen und Bananen"
// Disjunction ("or") list
console.log(new Intl.ListFormat('en-US', { type: 'disjunction' }).format(items));
// "apples, oranges, or bananas"
console.log(new Intl.ListFormat('fr-FR', { type: 'disjunction' }).format(items));
// "apples, oranges ou bananas"
</code></pre>
</div>
<h3>4. <code>Intl.RelativeTimeFormat</code>: Human-Friendly Timestamps</h3>
Displaying “2 days ago” or “in 3 months” is common in UI, but localizing these phrases accurately requires extensive data. <code>Intl.RelativeTimeFormat</code> automates this.
<div>
<pre><code>const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "yesterday"
console.log(rtf.format(1, 'day')); // "tomorrow"
console.log(rtf.format(-7, 'day')); // "7 days ago"
console.log(rtf.format(3, 'month')); // "in 3 months"
console.log(rtf.format(-2, 'year')); // "2 years ago"
// French example:
const frRtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto', style: 'long' });
console.log(frRtf.format(-1, 'day')); // "hier"
console.log(frRtf.format(1, 'day')); // "demain"
console.log(frRtf.format(-7, 'day')); // "il y a 7 jours"
console.log(frRtf.format(3, 'month')); // "dans 3 mois"
</code></pre>
</div>
The <code>numeric: 'always'</code> option would force “1 day ago” instead of “yesterday”.
<h3>5. <code>Intl.PluralRules</code>: Mastering Pluralization</h3>
This is arguably one of the most critical aspects of i18n. Different languages have vastly different pluralization rules (e.g., English has singular/plural, Arabic has zero, one, two, many...). <code>Intl.PluralRules</code> allows you to determine the “plural category” for a given number in a specific locale.
<pre><code>const prEn = new Intl.PluralRules('en-US');
console.log(prEn.select(0)); // "other" (for "0 items")
console.log(prEn.select(1)); // "one" (for "1 item")
console.log(prEn.select(2)); // "other" (for "2 items")
const prAr = new Intl.PluralRules('ar-EG');
console.log(prAr.select(0)); // "zero"
console.log(prAr.select(1)); // "one"
console.log(prAr.select(2)); // "two"
console.log(prAr.select(10)); // "few"
console.log(prAr.select(100)); // "other"
</code></pre>
This API doesn’t pluralize text directly, but it provides the essential classification needed to select the correct translation string from your message bundles. For example, if you have message keys like <code>item.one</code>, <code>item.other</code>, you’d use <code>pr.select(count)</code> to pick the right one.
<h3>6. <code>Intl.DisplayNames</code>: Localized Names For Everything</h3>
Need to display the name of a language, a region, or a script in the user’s preferred language? <code>Intl.DisplayNames</code> is your comprehensive solution.
<div>
<pre><code>// Display language names in English
const langNamesEn = new Intl.DisplayNames(['en'], { type: 'language' });
console.log(langNamesEn.of('fr')); // "French"
console.log(langNamesEn.of('es-MX')); // "Mexican Spanish"
// Display language names in French
const langNamesFr = new Intl.DisplayNames(['fr'], { type: 'language' });
console.log(langNamesFr.of('en')); // "anglais"
console.log(langNamesFr.of('zh-Hans')); // "chinois (simplifié)"
// Display region names
const regionNamesEn = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(regionNamesEn.of('US')); // "United States"
console.log(regionNamesEn.of('DE')); // "Germany"
// Display script names
const scriptNamesEn = new Intl.DisplayNames(['en'], { type: 'script' });
console.log(scriptNamesEn.of('Latn')); // "Latin"
console.log(scriptNamesEn.of('Arab')); // "Arabic"
</code></pre>
</div>
With <code>Intl.DisplayNames</code>, you avoid hardcoding countless mappings for language names, regions, or scripts, keeping your application robust and lean.
Browser Support
You might be wondering about browser compatibility. The good news is that <code>Intl</code> has excellent support across modern browsers. All major browsers (Chrome, Firefox, Safari, Edge) fully support the core functionality discussed (<code>DateTimeFormat</code>, <code>NumberFormat</code>, <code>ListFormat</code>, <code>RelativeTimeFormat</code>, <code>PluralRules</code>, <code>DisplayNames</code>). You can confidently use these APIs without polyfills for the majority of your user base.
Conclusion: Embrace The Global Web With <code>Intl</code>
The <code>Intl</code> API is a cornerstone of modern web development for a global audience. It empowers front-end developers to deliver highly localized user experiences with minimal effort, leveraging the browser’s built-in, optimized capabilities.
By adopting <code>Intl</code>, you reduce dependencies, shrink bundle sizes, and improve performance, all while ensuring your application respects and adapts to the diverse linguistic and cultural expectations of users worldwide. Stop wrestling with custom formatting logic and embrace this standards-compliant tool!
It’s important to remember that <code>Intl</code> handles the formatting of data. While incredibly powerful, it doesn’t solve every aspect of internationalization. Content translation, bidirectional text (RTL/LTR), locale-specific typography, and deep cultural nuances beyond data formatting still require careful consideration. (I may write about these in the future!) However, for presenting dynamic data accurately and intuitively, <code>Intl</code> is the browser-native answer.
<h3>Further Reading & Resources</h3>
<ul>
<li>MDN Web Docs:<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"><code>Intl namespace object</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"><code>Intl.DateTimeFormat</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat"><code>Intl.NumberFormat</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat"><code>Intl.ListFormat</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat"><code>Intl.RelativeTimeFormat</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules"><code>Intl.PluralRules</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames"><code>Intl.DisplayNames</code></a></li>
</ul>
</li>
<li>ECMAScript Internationalization API Specification: <a href="https://tc39.es/ecma402/">The official ECMA-402 Standard</a></li>
<li><a href="https://www.w3.org/International/questions/qa-choosing-language-tags">Choosing a Language Tag</a></li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Fuqiao Xue)</author>
<enclosure url="http://files.smashing.media/articles/power-intl-api-guide-browser-native-internationalization/power-intl-api-guide-browser-native-internationalization.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Automating Design Systems: Tips And Resources For Getting Started]]></title>
<link>https://smashingmagazine.com/2025/08/automating-design-systems-tips-resources/</link>
<guid>https://smashingmagazine.com/2025/08/automating-design-systems-tips-resources/</guid>
<pubDate>Wed, 06 Aug 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Design systems are more than style guides: they’re made up of workflows, tokens, components, and documentation — all the stuff teams rely on to build consistent products. As projects grow, keeping everything in sync gets tricky fast. In this article, we’ll look at how smart tooling, combined with automation where it makes sense, can speed things up, reduce errors, and help your team focus on design over maintenance.]]></description>
<content:encoded><![CDATA[A design system is more than just a set of colors and buttons. It’s a shared language that helps designers and developers build good products together. At its core, a design system includes <a href="https://www.smashingmagazine.com/2024/05/naming-best-practices/">tokens</a> (like colors, spacing, fonts), <a href="https://www.smashingmagazine.com/2022/12/anatomy-themed-design-system-components/">components</a> (such as buttons, forms, navigation), plus the <a href="https://www.smashingmagazine.com/2023/11/designing-web-design-documentation/">rules and documentation</a> that tie all together across projects.
If you’ve ever used systems like <a href="https://m3.material.io/">Google Material Design</a> or <a href="https://polaris-react.shopify.com/">Shopify Polaris</a>, for example, then you’ve seen how design systems set clear expectations for structure and behavior, making teamwork smoother and faster. But while design systems promote consistency, keeping everything in sync is the hard part. Update a token in Figma, like a color or spacing value, and that change has to show up in the code, the documentation, and everywhere else it’s used.
The same thing goes for components: when a button’s behavior changes, it needs to update across the whole system. That’s where the right tools and a bit of automation can make the difference. They help reduce repetitive work and keep the system easier to manage as it grows.
In this article, we’ll cover a variety of tools and techniques for syncing tokens, updating components, and keeping docs up to date, showing how automation can make all of it easier.
The Building Blocks Of Automation
Let’s start with the basics. Color, typography, spacing, radii, shadows, and all the tiny values that make up your visual language are known as design tokens, and they’re meant to be the single source of truth for the UI. You’ll see them in design software like Figma, in code, in style guides, and in documentation. <a href="https://www.smashingmagazine.com/2024/05/naming-best-practices/">Smashing Magazine has covered them</a> before in great detail.
The problem is that they often go out of sync, such as when a color or component changes in design but doesn’t get updated in the code. The more your team grows or changes, the more these mismatches show up; not because people aren’t paying attention, but because manual syncing just doesn’t scale. That’s why automating tokens is usually the first thing teams should consider doing when they start building a design system. That way, instead of writing the same color value in Figma and then again in a configuration file, you pull from a shared token source and let that drive both design and development.
There are a few tools that are designed to help make this easier.
<h3>Token Studio</h3>
<a href="https://tokens.studio/">Token Studio</a> is a Figma plugin that lets you manage design tokens directly in your file, export them to different formats, and sync them to code.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/1-token-studio-figma.png" />
<h3>Specify</h3>
<a href="https://specifyapp.com/">Specify</a> lets you collect tokens from Figma and push them to different targets, including GitHub repositories, continuous integration pipelines, documentation, and more.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/2-design-tokens-dev-screen.png" />
<h3>NameDesignTokens.guide</h3>
<a href="https://namedesigntokens.guide/">NamedDesignTokens.guide</a> helps with naming conventions, which is honestly a common pain point, especially when you’re working with a large number of tokens.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/3-token-configuration.png" />
Once your tokens are set and connected, you’ll spend way less time fixing inconsistencies. It also gives you a solid base to scale, whether that’s adding themes, switching brands, or even building systems for multiple products.
That’s also when naming really starts to count. If your tokens or components aren’t clearly named, things can get confusing quickly.
Note: Vitaly Friedman’s “<a href="https://www.linkedin.com/posts/vitalyfriedman_how-to-name-things-httpslnkdineirqgv9a-activity-7338149568607363073-j0">How to Name Things</a>” is worth checking out if you’re working with larger systems.
From there, it’s all about components. Tokens define the values, but components are what people actually use, e.g., buttons, inputs, cards, dropdowns — you name it. In a perfect setup, you build a component once and reuse it everywhere. But without structure, it’s easy for things to “drift” out of scope. It’s easy to end up with five versions of the same button, and what’s in code doesn’t match what’s in Figma, for example.
<blockquote>Automation doesn’t replace design, but rather, it connects everything to one source.</blockquote>
The Figma component matches the one in production, the documentation updates when the component changes, and the whole team is pulling from the same library instead of rebuilding their own version. This is where real collaboration happens.
Here are a few tools that help make that happen:
<table>
<thead>
<tr>
<th>Tool</th>
<th>What It Does</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://www.uxpin.com/merge">UXPin Merge</a></td>
<td>Lets you design using real code components. What you prototype is what gets built.</td>
</tr>
<tr>
<td><a href="https://www.supernova.io/">Supernova</a></td>
<td>Helps you publish a design system, sync design and code sources, and keep documentation up-to-date.</td>
</tr>
<tr>
<td><a href="https://zeroheight.com/">Zeroheight</a></td>
<td>Turns your Figma components into a central, browsable, and documented system for your whole team.</td>
</tr>
</tbody>
</table>
How Does Everything Connect?
A lot of the work starts right inside your design application. Once your tokens and components are in place, tools like Supernova help you take it further by extracting design data, syncing it across platforms, and generating production-ready code. You don’t need to write custom scripts or use the Figma API to get value from automation; these tools handle most of it for you.
But for teams that want full control, <a href="https://www.figma.com/developers/api">Figma does offer an API</a>. It lets you do things like the following:
<ul>
<li>Pull token values (like colors, spacing, typography) directly from Figma files,</li>
<li>Track changes to components and variants,</li>
<li>Tead metadata (like style names, structure, or usage patterns), and</li>
<li>Map which components are used where in the design.</li>
</ul>
The Figma API is REST-based, so it works well with custom scripts and automations. You don’t need a huge setup, just the right pieces. On the development side, teams usually use Node.js or Python to handle automation. For example:
<ul>
<li>Fetch styles from Figma.</li>
<li>Convert them into JSON.</li>
<li>Push the values to a design token repo or directly into the codebase.</li>
</ul>
You won’t need that level of setup for most use cases, but it’s helpful to know it’s there if your team outgrows no-code tools.
<ul>
<li>Where do your tokens and components come from?</li>
<li>How do updates happen?</li>
<li>What tools keep everything connected?</li>
</ul>
The workflow becomes easier to manage once that’s clear, and you spend less time trying to fix changes or mismatches. When tokens, components, and documentation stay in sync, your team moves faster and spends less time fixing the same issues.
Extracting Design Data
Figma is a collaborative design tool used to create UIs: buttons, layouts, styles, components, everything that makes up the visual language of the product. It’s also where all your design data lives, which includes the tokens we talked about earlier. This data is what we’ll extract and eventually connect to your codebase. But first, you’ll need a setup. 
To follow along:
<ol>
<li>Go to <a href="https://figma.com">figma.com</a> and create a free account.</li>
<li>Download the Figma desktop app if you prefer working locally, but keep an eye on system requirements if you’re on an older device.</li>
</ol>
Once you’re in, you’ll see a home screen that looks something like the following: 
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/4-figma-dashboard.png" />
From here, it’s time to set up your design tokens. You can either create everything from scratch or <a href="https://www.figma.com/templates/">use a template from the Figma community</a> to save time. Templates are a great option if you don’t want to build everything yourself. But if you prefer full control, creating your setup totally works too.
There are other ways to get tokens as well. For example, a site like <a href="https://namedesigntokens.guide/">namedesigntokens.guide</a> lets you generate and download tokens in formats like JSON. The only catch is that Figma doesn’t let you import JSON directly, so if you go that route, you’ll need to bring in a middle tool like Specify to bridge that gap. It helps sync tokens between Figma, GitHub, and other places.
For this article, though, we’ll keep it simple and stick with Figma. Pick any design system template from the Figma community to get started; there are plenty to choose from.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/5-collection-figma-templates.png" />
Depending on the template you choose, you’ll get a pre-defined set of tokens that includes colors, typography, spacing, components, and more. These templates come in all types: website, e-commerce, portfolio, app UI kits, you name it. For this article, we’ll be using the <a href="https://www.figma.com/community/file/1055785285964148921">/Design-System-Template--Community</a> because it includes most of the tokens you’ll need right out of the box. But feel free to pick a different one if you want to try something else.
Once you’ve picked your template, it’s time to download the tokens. We’ll use Supernova, a tool that connects directly to your Figma file and pulls out design tokens, styles, and components. It makes the design-to-code process a lot smoother.
<h3>Step 1: Sign Up on Supernova</h3>
Go to <a href="https://supernova.io">supernova.io</a> and create an account. Once you’re in, you’ll land on a dashboard that looks like this: 
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/6-supernova-dashboard.png" />
<h3>Step 2: Connect Your Figma File</h3>
To pull in the tokens, head over to the Data Sources section in Supernova and choose Figma from the list of available sources. (You’ll also see other options like Storybook or Figma variables, but we’re focusing on Figma.) Next, click on Connect a new file, paste the link to your Figma template, and click Import.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/7-supernova-figma.png" />
Supernova will load the full design system from your template. From your dashboard, you’ll now be able to see all the tokens.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/8-supernova-figma.png" />
Turning Tokens Into Code
Design tokens are great inside Figma, but the real value shows when you turn them into code. That’s how the developers on your team actually get to use them.
Here’s the problem: Many teams default to copying values manually for things like color, spacing, and typography. But when you make a change to them in Figma, the code is instantly out of sync. That’s why automating this process is such a big win.
Instead of rewriting the same theme setup for every project, you generate it, constantly translating designs into dev-ready assets, and keep everything in sync from one source of truth.
Now that we’ve got all our tokens in Supernova, let’s turn them into code. First, go to the Code Automation tab, then click New Pipeline. You’ll see different options depending on what you want to generate: React Native, CSS-in-JS, Flutter, Godot, and a few others.
Let’s go with the CSS-in-JS option for the sake of demonstration:
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/9-supernova-code-automation-screen.png" />
After that, you’ll land on a setup screen with three sections: Data, Configuration, and Delivery.
<h3>Data</h3>
Here, you can pick a theme. At first, it might only give you “Black” as the option; you can select that or leave it empty. It really doesn’t matter for the time being.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/10-supernova-code-automation-screen.png" />
<h3>Configuration</h3>
This is where you control how the code is structured. I picked PascalCase for how token names are formatted. You can also update how things like spacing, colors, or font styles are grouped and saved.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/11-supernova-code-automation-screen-configuration.png" />
<h3>Delivery</h3>
This is where you choose how you want the output delivered. I chose “Build Only”, which builds the code for you to download.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/12-supernova-code-automation-screen-delivery.png" />
Once you’re done, click Save. The pipeline is created, and you’ll see it listed in your dashboard. From here, you can download your token code, which is already generated.
Automating Documentation
So, what’s the point of documentation in a design system?
You can think of it as the instruction manual for your team. It explains what each token or component is, why it exists, and how to use it. Designers, developers, and anyone else on your team can stay on the same page — no guessing, no back-and-forth. Just clear context.
Let’s continue from where we stopped. Supernova is capable of handling your documentation. Head over to the Documentation tab. This is where you can start editing everything about your design system docs, all from the same place.
You can:
<ul>
<li>Add descriptions to your tokens,</li>
<li>Define what each base token is for (as well as what it’s not for),</li>
<li>Organize sections by colors, typography, spacing, or components, and</li>
<li>Drop in images, code snippets, or examples.</li>
</ul>
You’re building the documentation inside the same tool where your tokens live. In other words, there’s no jumping between tools and no additional setup. That’s where the automation kicks in. You edit once, and your docs stay synced with your design source. It all stays in one environment.
<img src="https://files.smashing.media/articles/automating-design-systems-tips-resources/13-supernova-code-automation-screen-documentation.png" />
Once you’re done, click Publish and you will be presented with a new window asking you to sign in. After that, you’re able to access your live documentation site.
Practical Tips For Automations
Automation is great. It saves hours of manual work and keeps your design system tight across design and code. The trick is knowing when to automate and how to make sure it keeps working over time. You don’t need to automate everything right away. But if you’re doing the same thing over and over again, that’s a kind of red flag.
A few signs that it’s time to consider using automation:
<ul>
<li>You’re using the same styles across multiple platforms (like web and mobile).</li>
<li>You have a shared design system used by more than one team.</li>
<li>Design tokens change often, and you want updates to flow into code automatically.</li>
<li>You’re tired of manual updates every time the brand team tweaks a color. </li>
</ul>
There are three steps you need to consider. Let’s look at each one.
<h3>Step 1: Keep An Eye On Tools And API Updates</h3>
If your pipeline depends on design tools, like Figma, or platforms, like Supernova, you’ll want to know when changes are made and evaluate how they impact your work, because even small updates can quietly affect your exports.
It’s a good idea to check <a href="https://www.figma.com/developers/api#changelog">Figma’s API changelog</a> now and then, especially if something feels off with your token syncing. They often update how variables and components are structured, and that can impact your pipeline. There’s also an <a href="https://www.figma.com/release-notes/">RSS feed for product updates</a>.
The same goes for <a href="https://updates.supernova.io">Supernova’s product updates</a>. They regularly roll out improvements that might tweak how your tokens are handled or exported. If you’re using open-source tools like <a href="https://v4.styledictionary.com">Style Dictionary</a>, keeping an eye on the GitHub repo (particularly the Issues tab) can save you from debugging weird token name changes later.
All of this isn’t about staying glued to release notes, but having a system to check if something suddenly stops working. That way, you’ll catch things before they reach production.
<h3>Step 2: Break Your Pipeline Into Smaller Steps</h3>
A common trap teams fall into is trying to automate everything in one big run: colors, spacing, themes, components, and docs, all processed in a single click. It sounds convenient, but it’s hard to maintain, and even harder to debug.
It’s much more manageable to split your automation into pieces. For example, having a single workflow that handles your core design tokens (e.g., colors, spacing, and font sizes), another for theme variations (e.g., light and dark themes), and one more for component mapping (e.g., buttons, inputs, and cards). This way, if your team changes how spacing tokens are named in Figma, you only need to update one part of the workflow, not the entire system. It’s also easier to test and reuse smaller steps.
<h3>Step 3: Test The Output Every Time</h3>
Even if everything runs fine, always take a moment to check the exported output. It doesn’t need to be complicated. A few key things:
<ul>
<li>Are the token names clean and readable? If you see something like <code>PrimaryColorColorText</code>, that’s a red flag.</li>
<li>Did anything disappear or get renamed unexpectedly? It happens more often than you think, especially with typography or spacing tokens after design changes.</li>
<li>Does the UI still work? If you’re using something like Tailwind, CSS variables, or custom themes, double-check that the new token values aren’t breaking anything in the design or build process.</li>
</ul>
To catch issues early, it helps to run tools like <a href="https://eslint.org">ESLint</a> or <a href="https://stylelint.io">Stylelint</a> right after the pipeline completes. They’ll flag odd syntax or naming problems before things get shipped.
How AI Can Help
Once your automation is stable, there’s a next layer that can boost your workflow: AI. It’s not just for writing code or generating mockups, but for helping with the small, repetitive things that eat up time in design systems. When used right, AI can assist without replacing your control over the system.
Here’s where it might fit into your workflow:
<h3>Naming Suggestions</h3>
When you’re dealing with hundreds of tokens, naming them clearly and consistently is a real challenge. Some AI tools can help by suggesting clean, readable names for your tokens or components based on patterns in your design. It’s not perfect, but it’s a good way to kickstart naming, especially for large teams.
<h3>Pattern Recognition</h3>
AI can also spot repeated styles or usage patterns across your design files. If multiple buttons or cards share similar spacing, shadows, or typography, tools powered by AI can group or suggest components for systemization even before a human notices.
<h3>Automated Documentation</h3>
Instead of writing everything from scratch, AI can generate first drafts of documentation based on your tokens, styles, and usage. You still need to review and refine, but it takes away the blank-page problem and saves hours.
Here are a few tools that already bring AI into the design and development space in practical ways:
<ul>
<li><a href="https://uizard.io/">Uizard</a>: Uizard uses AI to turn wireframes into designs automatically. You can sketch something by hand, and it transforms that into a usable mockup.</li>
<li><a href="https://www.animaapp.com/">Anima</a>: Anima can convert Figma designs into responsive React code. It also helps fill in real content or layout structures, making it a powerful bridge between design and development, with some AI assistance under the hood.</li>
<li><a href="https://www.builder.io/">Builder.io</a>: Builder uses AI to help generate and edit components visually. It's especially useful for marketers or non-developers who need to build pages fast. AI helps streamline layout, content blocks, and design rules.</li>
</ul>
Conclusion
This article is not about achieving complete automation in the technical sense, but more about using smart tools to streamline the menial and manual aspects of working with design systems. Exporting tokens, generating docs, and syncing design with code can be automated, making your process quicker and more reliable with the right setup.
Instead of rebuilding everything from scratch every time, you now have a way to keep things consistent, stay organized, and save time.
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://thedesignsystem.guide/">Design System Guide</a>” by Romina Kavcic</li>
<li>“<a href="https://www.smashingmagazine.com/2025/05/design-system-in-90-days/">Design System In 90 Days</a>” by Vitaly Friedman</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Joas Pambou)</author>
<enclosure url="http://files.smashing.media/articles/automating-design-systems-tips-resources/automating-design-systems-tips-resources.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[UX Job Interview Helpers]]></title>
<link>https://smashingmagazine.com/2025/08/ux-job-interview-helpers/</link>
<guid>https://smashingmagazine.com/2025/08/ux-job-interview-helpers/</guid>
<pubDate>Tue, 05 Aug 2025 13:00:00 GMT</pubDate>
<description><![CDATA[Talking points. Smart questions. A compelling story. This guide helps you prepare for your UX job interview. And remember: no act of kindness, however small, is ever wasted.]]></description>
<content:encoded><![CDATA[When talking about job interviews for a UX position, we often discuss how to leave an incredible impression and how to negotiate the right salary. But it’s only one part of the story. The other part is to be prepared, to ask questions, and to listen carefully.
Below, I’ve put together a few useful resources on UX job interviews — from job boards to Notion templates and practical guides. I hope you or your colleagues will find it helpful.
The Design Interview Kit
As you are preparing for that interview, get ready with the <a href="https://www.figma.com/community/file/1268352321000064567/complete-guide-to-design-interviews-free">Design Interview Kit</a> (Figma), a helpful practical guide that covers how to craft case studies, solve design challenges, write cover letters, present your portfolio, and negotiate your offer. Kindly shared by Oliver Engel.
<img src="https://files.smashing.media/articles/ux-job-interview-helpers/1-ux-interview-questions.jpg" />
The Product Designer’s (Job) Interview Playbook (PDF)
<a href="https://drive.google.com/file/d/1z_lJyguQhxvV1sZXt0oQUtdxpoQWoeol/view">The Product Designer’s (Job) Interview Playbook (PDF)</a> is a practical little guide for designers through each interview phase, with helpful tips and strategies on things to keep in mind, talking points, questions to ask, red flags to watch out for and how to tell a compelling story about yourself and your work. Kindly put together by Meghan Logan.
<img src="https://files.smashing.media/articles/ux-job-interview-helpers/2-ux-interview-questions.jpg" />
From my side, I can only wholeheartedly recommend to not only speak about your design process. Tell stories about the impact that your design work has produced. Frame your design work as an enabler of business goals and user needs. And include insights about the impact you’ve produced — on business goals, processes, team culture, planning, estimates, and testing.
Also, be very clear about the position that you are applying for. In many companies, titles do matter. There are vast differences in responsibilities and salaries between various levels for designers, so if you see yourself as a senior, review whether it actually reflects in the position.
A Guide To Successful UX Job Interviews (+ Notion template)
Catt Small’s <a href="https://cattsmall.com/blog/2023/debug-design-hiring-journey-application">Guide To Successful UX Job Interviews</a>, a wonderful practical series on how to build a referral pipeline, apply for an opening, prepare for screening and interviews, present your work, and manage salary expectations. You can also <a href="https://cattsmall.notion.site/6826ccd5deca4e51a7b76ea60778236e?v=acc69633e8704285802464f72ac830c4">download a Notion template</a>.
<img src="https://files.smashing.media/articles/ux-job-interview-helpers/3-ux-interview-questions.jpg" />
30 Useful Questions To Ask In UX Job Interviews
In her wonderful article, Nati Asher has suggested <a href="https://uxdesign.cc/6-things-i-wish-product-design-candidates-would-ask-me-during-interviews-87d9f21d286e">many useful questions</a> to ask in a job interview when you are applying as a UX candidate. I’ve taken the liberty of revising some of them and added a few more questions that might be worth considering for your next job interview.
<img src="https://files.smashing.media/articles/ux-job-interview-helpers/4-ux-interview-questions.jpg" />
<ol>
<li>What are the biggest challenges the team faces at the moment?</li>
<li>What are the team’s main strengths and weaknesses?</li>
<li>What are the traits and skills that will make me successful in this position?</li>
<li>Where is the company going in the next 5 years?</li>
<li>What are the achievements I should aim for over the first 90 days?</li>
<li>What would make you think “I’m so happy we hired X!”?</li>
<li>Do you have any doubts or concerns regarding my fit for this position?</li>
<li>Does the team have any budget for education, research, etc.?</li>
<li>What is the process of onboarding in the team?</li>
<li>Who is in the team, and how long have they been in that team?</li>
<li>Who are the main stakeholders I will work with on a day-to-day basis?</li>
<li>Which options do you have for user research and accessing users or data?</li>
<li>Are there analytics, recordings, or other data sources to review?</li>
<li>How do you measure the impact of design work in your company?</li>
<li>To what extent does management understand the ROI of good UX?</li>
<li>How does UX contribute strategically to the company’s success?</li>
<li>Who has the final say on design, and who decides what gets shipped?</li>
<li>What part of the design process does the team spend most time on?</li>
<li>How many projects do designers work on simultaneously?</li>
<li>How has the organization overcome challenges with remote work?</li>
<li>Do we have a design system, and in what state is it currently?</li>
<li>Why does a company want to hire a UX designer?</li>
<li>How would you describe the ideal candidate for this position?</li>
<li>What does a <a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-career-activity-7077180633575223296-gYIi">career path</a> look like for this role?</li>
<li>How will my performance be evaluated in this role?</li>
<li>How long do projects take to launch? Can you give me some examples?</li>
<li>What are the most immediate projects that need to be addressed?</li>
<li>How do you see the design team growing in the future?</li>
<li>What traits make someone successful in this team?</li>
<li>What’s the most challenging part of leading the design team?</li>
<li>How does the company ensure it’s upholding its values?</li>
</ol>
Before a job interview, have your questions ready. Not only will they convey a message that you care about the process and the culture, but also that you understand what is required to be successful. And this fine detail might go a long way.
Don’t Forget About The STAR Method
Interviewers closer to business will expect you to present examples of your work using the <a href="https://nationalcareers.service.gov.uk/careers-advice/interview-advice/the-star-method">STAR method</a> (Situation — Task — Action — Result), and might be utterly confused if you delve into all the fine details of your ideation process or the choice of UX methods you’ve used.
<ul>
<li>Situation: Set the scene and give necessary details.</li>
<li>Task: Explain your responsibilities in that situation.</li>
<li>Action: Explain what steps you took to address it.</li>
<li>Result: Share the outcomes your actions achieved.</li>
</ul>
As Meghan suggests, the interview is all about how your skills add value to the problem the company is currently solving. So ask about the current problems and tasks. Interview the person who interviews you, too — but also explain who you are, your focus areas, your passion points, and how you and your expertise would fit in a product and in the organization.
Wrapping Up
A final note on my end: never take a rejection personally. Very often, the reasons you are given for rejection are only a small part of a much larger picture — and have almost nothing to do with you. It might be that a job description wasn’t quite accurate, or the company is undergoing restructuring, or the finances are too tight after all.
Don’t despair and keep going. Write down your expectations. Job titles matter: be deliberate about them and your level of seniority. Prepare good references. Have your questions ready for that job interview. As Catt Small says, “once you have a foot in the door, you’ve got to kick it wide open”.
You are a bright shining star — don’t you ever forget that.
Job Boards
<ul>
<li><a href="https://medium.com/@uxsurvivalguide/a-ux-designers-guide-to-finding-the-best-job-boards-f7c7886a0fd6">Remote + In-person</a></li>
<li><a href="https://ixda.org/jobs/">IXDA</a></li>
<li><a href="https://stillhiring.today/">Who Is Still Hiring?</a></li>
<li><a href="https://uxpa.org/job-bank/">UXPA Job Bank</a></li>
<li><a href="https://otta.com/">Otta</a></li>
<li><a href="https://boooom.co/">Boooom</a></li>
<li><a href="https://www.watbd.org/jobs">Black Creatives Job Board</a></li>
<li><a href="https://lnkd.in/eGjmr6ZQ">UX Research Jobs</a></li>
<li><a href="https://lnkd.in/ehF8hwXt">UX Content Jobs</a></li>
<li><a href="https://lnkd.in/e82vQ9yM">UX Content Collective Jobs</a></li>
<li><a href="https://lnkd.in/eq_2FY_C">UX Writing Jobs</a></li>
</ul>
<h3>Useful Resources</h3>
<ul>
<li>“<a href="https://www.linkedin.com/posts/vitalyfriedman_ux-jobs-activity-7342081450093015040-lNGp">How To Be Prepared For UX Job Interviews</a>,” by yours truly</li>
<li>“<a href="https://www.linkedin.com/posts/vitalyfriedman_ux-jobs-activity-7322193621477179392-BYLX">UX Job Search Strategies and Templates</a>,” by yours truly</li>
<li>“<a href="https://startup.jobs/interview-questions">How To Ace Your Next Job Interview</a>,” by Startup.jobs</li>
<li>“<a href="https://productdesigninterview.com/ux-design-job-interview-process">Cracking The UX Job Interview</a>,” by Artiom Dashinsky</li>
<li>“<a href="https://www.tannerchristensen.com/notes/the-product-design-interview-process">The Product Design Interview Process</a>,” by Tanner Christensen</li>
<li>“<a href="https://medium.com/salesforce-ux/10-questions-you-should-ask-in-a-ux-interview-df8450623088">10 Questions To Ask in a UX Interview</a>,” by Ryan Scott</li>
<li>“<a href="https://uxplanet.org/six-questions-to-ask-after-a-ux-designer-job-interview-e046219738d7">Six questions to ask after a UX designer job interview</a>,” by Nick Babich</li>
</ul>
Meet “Smart Interface Design Patterns”
You can find more details on design patterns and UX in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our 15h-video course with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>. Use code <a href="https://smart-interface-design-patterns.com">BIRDIE</a> to save 15% off.
<a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design & UX.
<div><div><ul><li><a href="#">
Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 699.00
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">
Get Video + UX Training<div></div></a>25 video lessons (15h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>. 100 days money-back-guarantee.</div><div><h3>Video only</h3><div>$ 300.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>40 video lessons (15h). Updated yearly. 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></div></div></div>
]]></content:encoded>
<author>hello@smashingmagazine.com (Vitaly Friedman)</author>
<enclosure url="http://files.smashing.media/articles/ux-job-interview-helpers/ux-job-interview-helpers.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Stories Of August (2025 Wallpapers Edition)]]></title>
<link>https://smashingmagazine.com/2025/07/desktop-wallpaper-calendars-august-2025/</link>
<guid>https://smashingmagazine.com/2025/07/desktop-wallpaper-calendars-august-2025/</guid>
<pubDate>Thu, 31 Jul 2025 11:00:00 GMT</pubDate>
<description><![CDATA[Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers might be for you. The wallpapers are designed with love by the community for the community and can be downloaded for free! Enjoy!]]></description>
<content:encoded><![CDATA[Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique designs on a regular basis, we started our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> more than 14 years ago, and from the very beginning to today, artists and designers from across the globe have accepted the challenge and submitted their artworks. This month is no exception, of course.
In this post, you’ll find desktop wallpapers for August 2025, along with a selection of timeless designs from our archives that are bound to make your August extra colorful. A big thank you to everyone who tickled their creativity and shared their wallpapers with us this month — this post wouldn’t exist without your kind support!
Now, if you’re feeling inspired after browsing this collection, why not <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">submit a wallpaper</a> to get featured in one of our upcoming posts? Fire up your favorite design tool, grab your camera or pen and paper, and tell the story you want to tell. We can’t wait to see what you’ll come up with! Happy August!
<ul>
<li>You can click on every image to see a larger preview.</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 full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
</ul>
August Afloat
“Set sail into a serene summer moment with this bright and breezy wallpaper. A wooden boat drifts gently across wavy blue waters dotted with lily pads, capturing the stillness and simplicity of late August days.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/aug-25-august-afloat-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-25-august-afloat-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/aug-25-august-afloat-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/cal/aug-25-august-afloat-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/august-afloat/nocal/aug-25-august-afloat-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Dive Into Summer Mode
“When your phone becomes a pool and your pup’s living the dream — it’s a playful reminder that sometimes the best escapes are simple: unplug, slow down, soak in the sunshine, and let your imagination do the swimming.” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/aug-25-dive-into-summer-mode-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-25-dive-into-summer-mode-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/aug-25-dive-into-summer-mode-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/cal/aug-25-dive-into-summer-mode-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/dive-into-summer-mode/nocal/aug-25-dive-into-summer-mode-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Sea Shanties And Ears In The Wind
“August is like a boat cruise swaying with the rhythm of sea shanties. Our mascot really likes to have its muzzle caressed by the salty sea wind and getting its ears warmed by the summer sun.” — Designed by <a href="https://gaae.design/">Caroline Boire</a> from France.
<a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/aug-25-sea-shanties-and-ears-in-the-wind-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-25-sea-shanties-and-ears-in-the-wind-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/aug-25-sea-shanties-and-ears-in-the-wind-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/cal/aug-25-sea-shanties-and-ears-in-the-wind-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/sea-shanties-and-ears-in-the-wind/nocal/aug-25-sea-shanties-and-ears-in-the-wind-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Queen Of August
“August 8 is International Cat Day, so of course the month belongs to her majesty. Confident, calm, and totally in charge. Just like every cat ever.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/aug-25-queen-of-august-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-25-queen-of-august-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/aug-25-queen-of-august-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/cal/aug-25-queen-of-august-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-25/queen-of-august/nocal/aug-25-queen-of-august-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Happiness Happens In August
“Many people find August one of the happiest months of the year because of holidays. You can spend days sunbathing, swimming, birdwatching, listening to their joyful chirping, and indulging in sheer summer bliss. August 8th is also known as the Happiness Happens Day, so make it worthwhile.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c02105d1-3e31-49e7-b909-ddb84982b7e0/aug-17-happiness-happens-in-august-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Nostalgia
“August, the final breath of summer, brings with it a wistful nostalgia for a season not yet past.” — Designed by <a href="https://www.instagram.com/tot_o_ami">Ami Totorean</a> from Romania.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-nostalgia-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-nostalgia-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-nostalgia-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/nostalgia/nocal/aug-24-nostalgia-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Relax In Bora Bora
“As we have taken a liking to diving through the coral reefs, we’ll also spend August diving and took the leap to Bora Bora. There we enjoy the sea and nature and above all, we rest to gain strength for the new course that is to come.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/aug-24-relax-in-bora-bora-nocal-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-24-relax-in-bora-bora-nocal-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/aug-24-relax-in-bora-bora-nocal-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/relax-in-bora-bora/nocal/aug-24-relax-in-bora-bora-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Banana!
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-banana-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-banana-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-24-banana-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-24/banana/nocal/aug-24-banana-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Summer Day
Designed by <a href="https://cpsp.in/">Kasturi Palmal</a> from India.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-summer-day-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-summer-day-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-summer-day-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Retro Road Trip
“As the sun dips below the horizon, casting a warm glow upon the open road, the retro van finds a resting place for the night. A campsite bathed in moonlight or a cozy motel straight from a postcard become havens where weary travelers can rest, rejuvenate, and prepare for the adventures that await with the dawn of a new day.” — Designed by <a href="https://www.popwebdesign.net/seo-optimizacija.html">PopArt Studio </a> from Serbia.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-retro-road-trip-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-retro-road-trip-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-retro-road-trip-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Spooky Campfire Stories
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-spooky-campfire-stories-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-spooky-campfire-stories-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2024/aug-23-spooky-campfire-stories-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Bee Happy!
“August means that fall is just around the corner, so I designed this wallpaper to remind everyone to ‘bee happy’ even though summer is almost over. Sweeter things are ahead!” — Designed by Emily Haines from the United States.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe3c5086-c859-4d07-b477-164a15433f15/aug-16-bee-happy-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9652bddf-d511-4014-867d-585b4b05e9c0/aug-16-bee-happy-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9652bddf-d511-4014-867d-585b4b05e9c0/aug-16-bee-happy-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/bee-happy/nocal/aug-16-bee-happy-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Oh La La… Paris’ Night
“I like the Paris night! All is very bright!” — Designed by <a href="https://www.silocreativo.com/en">Verónica Valenzuela</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f30e0e86-d6cc-40ec-8cf9-b331785ce2c4/aug-14-oh-la-la-paris-night-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5d06b93-8eda-40af-bd31-3efbf2e73625/aug-14-oh-la-la-paris-night-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5d06b93-8eda-40af-bd31-3efbf2e73625/aug-14-oh-la-la-paris-night-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-14/oh-la-la-paris-night/nocal/aug-14-oh-la-la-paris-night-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Cowabunga
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b531ca2f-bac1-4241-98ef-d5de509d2090/aug-21-cowabunga-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/41c9f73b-4612-48f4-ab9a-0c6449f9cf55/aug-21-cowabunga-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/41c9f73b-4612-48f4-ab9a-0c6449f9cf55/aug-21-cowabunga-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-21/cowabunga/nocal/aug-21-cowabunga-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Childhood Memories
Designed by Francesco Paratici from Australia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e78c0ea-650c-4284-a61a-3f281d4d4413/august-12-childhood-memories-4-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a92e8178-2097-4bf1-9803-1d85bb2710a5/august-12-childhood-memories-4-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a92e8178-2097-4bf1-9803-1d85bb2710a5/august-12-childhood-memories-4-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-childhood_memories__4-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Summer Nap
Designed by <a href="https://dorvandavoudi.com">Dorvan Davoudi</a> from Canada.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/80a729c6-385d-4e22-bb2c-61266a7f5a96/aug-16-summer-nap-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e52aff7-6aac-4b28-b75c-f118e8591211/aug-16-summer-nap-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e52aff7-6aac-4b28-b75c-f118e8591211/aug-16-summer-nap-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/summer-nap/nocal/aug-16-summer-nap-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Live In The Moment
“My dog Sami inspired me for this one. He lives in the moment and enjoys every second with a big smile on his face. I wish we could learn to enjoy life like he does! Happy August everyone!” — Designed by <a href="https://westievibes.com/">Westie Vibes</a> from Portugal.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1ab25b5a-40a4-4e39-9206-2c3b12c04aa4/aug-20-live-in-the-moment-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c117def9-f04a-432a-9f1a-5cae806a2418/aug-20-live-in-the-moment-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c117def9-f04a-432a-9f1a-5cae806a2418/aug-20-live-in-the-moment-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-1080x1920.png">1080x1920</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-20/live-in-the-moment/nocal/aug-20-live-in-the-moment-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Handwritten August
“I love typography handwritten style.” — Designed by Chalermkiat Oncharoen from Thailand.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4011a427-17f6-4223-9eb4-f759f54251f7/aug-13-handwritten-august-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52bea7de-ac48-4387-baf7-aaea0311e27a/aug-13-handwritten-august-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52bea7de-ac48-4387-baf7-aaea0311e27a/aug-13-handwritten-august-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/handwritten-august/nocal/aug-13-handwritten-august-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Psst, It’s Camping Time…
“August is one of my favorite months, when the nights are long and deep and crackling fire makes you think of many things at once and nothing at all at the same time. It’s about heat and cold which allow you to touch the eternity for a few moments.” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3b4015-afe0-4299-9696-22c3543d2665/aug-16-psst-its-camping-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a263dc14-0e54-40ad-9a5f-bc7dc2adee15/aug-16-psst-its-camping-time-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a263dc14-0e54-40ad-9a5f-bc7dc2adee15/aug-16-psst-its-camping-time-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/psst-its-camping-time/nocal/aug-16-psst-its-camping-time-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Hello Again
“In Melbourne it is the last month of quite a cool winter so we are looking forward to some warmer days to come.” — Designed by <a href="https://www.tazi.com.au">Tazi</a> from Australia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/812278fd-ebf0-46a6-90c1-c65032ca65e0/aug-17-hello-again-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f767666c-03bf-42c5-b5ee-2e0ebc0ef441/aug-17-hello-again-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f767666c-03bf-42c5-b5ee-2e0ebc0ef441/aug-17-hello-again-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/hello-again/nocal/aug-17-hello-again-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Coffee Break Time
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7fcfa12-a939-437c-a2c1-320294b54030/aug-18-coffee-break-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec380c41-2c66-41b9-b716-3a7a45f58ea4/aug-18-coffee-break-time-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec380c41-2c66-41b9-b716-3a7a45f58ea4/aug-18-coffee-break-time-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-18/coffee-break-time/nocal/aug-18-coffee-break-time-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Subtle August Chamomiles
“Our designers wanted to create something summery, but not very colorful, something more subtle. The first thing that came to mind was chamomile because there are a lot of them in Ukraine and their smell is associated with a summer field.” — Designed by <a href="http://masterbundles.com/">MasterBundles</a> from Ukraine.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-subtle-august-chamomiles-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-subtle-august-chamomiles-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-subtle-august-chamomiles-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/subtle-august-chamomiles/nocal/aug-22-subtle-august-chamomiles-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Party Night Under The Stars
“August… it’s time for a party and summer vacation — sea, moon, stars, music… and magical vibrant colors.” — Designed by <a href="https://teodoravasileva.net">Teodora Vasileva</a> from Bulgaria.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-23-party-night-under-the-stars-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-23-party-night-under-the-stars-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-23-party-night-under-the-stars-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
A Bloom Of Jellyfish
“I love going to aquariums – the colors, patterns, and array of blue hues attract the nature lover in me while still appeasing my design eye. One of the highlights is always the jellyfish tanks. They usually have some kind of light show in them, which makes the jellyfish fade from an intense magenta to a deep purple — and it literally tickles me pink. We discovered that the collective noun for jellyfish is a bloom and, well, it was love-at-first-collective-noun all over again. I’ve used some intense colors to warm up your desktop and hopefully transport you into the depths of your own aquarium.” — Designed by <a href="https://wonderlandcollective.co.za/">Wonderland Collective</a> from South Africa.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ced7bcdb-b285-4c0f-8c6e-16a34b2bd713/aug-15-a-bloom-of-jellyfish-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2973d-50fa-4151-a61b-d2936ed260ad/aug-15-a-bloom-of-jellyfish-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2973d-50fa-4151-a61b-d2936ed260ad/aug-15-a-bloom-of-jellyfish-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-15/a-bloom-of-jellyfish/nocal/aug-15-a-bloom-of-jellyfish-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Colorful Summer
“‘Always keep mint on your windowsill in August, to ensure that the buzzing flies will stay outside where they belong. Don’t think summer is over, even when roses droop and turn brown and the stars shift position in the sky. Never presume August is a safe or reliable time of the year.’ (Alice Hoffman)” — Designed by <a href="https://www.instagram.com/lenartlivia/">Lívi</a> from Hungary.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4425cee-41ad-4ab7-96af-9dab9d1115ec/aug-19-colorful-summer-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4da5f29-93df-4a10-80d2-116d2748c9e1/aug-19-colorful-summer-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4da5f29-93df-4a10-80d2-116d2748c9e1/aug-19-colorful-summer-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-19/colorful-summer/nocal/aug-19-colorful-summer-nocal-3475x4633.jpg">3475x4633</a></li>
</ul>
Searching For Higgs Boson
Designed by <a href="https://www.vladstudio.com">Vlad Gerasimov</a> from Georgia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85adaefa-8054-4237-94e9-df37f849f5a4/august-12-2012-08-92-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96410b87-8914-4496-8416-15ef65130c03/august-12-2012-08-92-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96410b87-8914-4496-8416-15ef65130c03/august-12-2012-08-92-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-960x600.jpg">960x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1229x768.jpg">1229x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1440x960.jpg">1440x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1728x1080.jpg">1728x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-2304x1440.jpg">2304x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/august-12/august-12-2012_08__92-nocal-2560x1600.jpg">2560x1600</a></li>
</ul>
Freak Show Vol. 1
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-22-freak-show-vol-1-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-22-freak-show-vol-1-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-22-freak-show-vol-1-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/freak-show-vol-1/nocal/aug-22-freak-show-vol-1-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Grow Where You Are Planted
“Every experience is a building block on your own life journey, so try to make the most of where you are in life and get the most out of each day.” — Designed by <a href="https://www.tazi.com.au">Tazi Design</a> from Australia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/228de0db-46a0-4376-90ca-5e140ae509d2/aug-16-grow-where-you-are-planted-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9b2f74c-7830-4236-a81a-72f60dc11406/aug-16-grow-where-you-are-planted-preview-opt.png" /> </a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9b2f74c-7830-4236-a81a-72f60dc11406/aug-16-grow-where-you-are-planted-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/grow-where-you-are-planted/nocal/aug-16-grow-where-you-are-planted-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Chill Out
“Summer is in full swing and Chicago is feeling the heat! Take some time to chill out!” — Designed by <a href="https://ladybirddee.net/">Denise Johnson</a> from Chicago.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d495ec3e-4fc4-4904-a8f8-77161e9f8e9d/aug-16-chill-out-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b712c69a-9ce4-4193-aaf0-354a7c1591d5/aug-16-chill-out-preview-opt.png" /> </a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b712c69a-9ce4-4193-aaf0-354a7c1591d5/aug-16-chill-out-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-16/chill-out/nocal/aug-16-chill-out-nocal-1920x1200.jpg">1920x1200</a></li>
</ul>
Estonian Summer Sun
“This is a moment from Southern Estonia that shows amazing summer nights.” Designed by Erkki Pung from Estonia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b076e1e-1df6-4b2d-8207-3e052b411a8c/aug-13-estonian-summer-sun-full-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b40ec210-dcdf-4288-82ff-36ac0573049b/aug-13-estonian-summer-sun-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b40ec210-dcdf-4288-82ff-36ac0573049b/aug-13-estonian-summer-sun-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-13/estonian-summer-sun/nocal/aug-13-estonian-summer-sun-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/estonian-summer-sun/nocal/aug-13-estonian-summer-sun-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/estonian-summer-sun/nocal/aug-13-estonian-summer-sun-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/estonian-summer-sun/nocal/aug-13-estonian-summer-sun-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-13/estonian-summer-sun/nocal/aug-13-estonian-summer-sun-nocal-1920x1200.png">1920x1200</a></li></ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Cosima Mielke)</author>
<enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-august-2025/aug-25-august-afloat-preview-opt.png" length="0" type="image/png"/>
</item>
<item>
<title><![CDATA[The Core Model: Start FROM The Answer, Not WITH The Solution]]></title>
<link>https://smashingmagazine.com/2025/07/core-model-start-from-answer-not-solution/</link>
<guid>https://smashingmagazine.com/2025/07/core-model-start-from-answer-not-solution/</guid>
<pubDate>Wed, 30 Jul 2025 13:00:00 GMT</pubDate>
<description><![CDATA[The Core Model is a practical methodology that flips traditional digital development on its head. Instead of starting with solutions or structure, we begin with a hypothesis about what users need and follow a simple framework that brings diverse teams together to create more effective digital experiences. By asking six good questions in the right order, teams align around user tasks and business objectives, creating clarity that transcends organizational boundaries.]]></description>
<content:encoded><![CDATA[Ever sat in a meeting where everyone jumped straight to solutions? “We need a new app!” “Let’s redesign the homepage!” “AI will fix everything!” This solution-first thinking is endemic in digital development — and it’s why so many projects fail to deliver real value. As the creator of the Core Model methodology, I developed this approach to flip the script: instead of starting with solutions, we start FROM the answer.
What’s the difference? Starting with solutions means imposing our preconceived ideas. Starting FROM the answer to a user task means forming a hypothesis about what users need, then taking a step back to follow a simple structure that validates and refines that hypothesis.
Six Good Questions That Lead to Better Answers
At its heart, the Core Model is simply six good questions asked in the right order, with a seventh that drives action. It appeals to common sense — something often in short supply during complex digital projects.
When I introduced this approach to a large organization struggling with their website, their head of digital admitted: “We’ve been asking all these questions separately, but never in this structured way that connects them.”
These questions help teams pause, align around what matters, and create solutions that actually work:
<ol>
<li>Who are we trying to help, and what’s their situation?</li>
<li>What are they trying to accomplish?</li>
<li>What do we want to achieve?</li>
<li>How do they approach this need?</li>
<li>Where should they go next?</li>
<li>What’s the essential content or functionality they need?</li>
<li>What needs to be done to create this solution?</li>
</ol>
This simple framework creates clarity across team boundaries, bringing together content creators, designers, developers, customer service, subject matter experts, and leadership around a shared understanding.
Starting With a Hypothesis
The Core Model process typically begins before the workshop. The project lead or facilitator works with key stakeholders to:
<ol>
<li>Identify candidate cores based on organizational priorities and user needs.</li>
<li>Gather existing user insights and business objectives.</li>
<li>Form initial hypotheses about what these cores should accomplish.</li>
<li>Prepare relevant background materials for workshop participants.</li>
</ol>
This preparation ensures the workshop itself is focused and productive, with teams validating and refining hypotheses rather than starting from scratch.
The Core Model: Six Elements That Create Alignment
Let’s explore each element of the Core Model in detail:
<img src="https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png" />
<h3>1. Target Group: Building Empathy First</h3>
Rather than detailed personas, the Core Model starts with quick proto-personas that build empathy for users in specific situations:
<ul>
<li>A parent researching childcare options late at night after a long day.</li>
<li>A small business owner trying to understand tax requirements between client meetings.</li>
<li>A new resident navigating unfamiliar public services in their second language.</li>
</ul>
The key is to humanize users and understand their emotional and practical context before diving into solutions.
<h3>2. User Tasks: What People Are Actually Trying to Do</h3>
Beyond features or content, what are users actually trying to accomplish?
<ul>
<li>Making an informed decision about a major purchase.</li>
<li>Finding the right form to apply for a service.</li>
<li>Understanding next steps in a complex process.</li>
<li>Checking eligibility for a program or benefit.</li>
</ul>
These tasks should be based on user research and drive everything that follows. <a href="https://www.smashingmagazine.com/2022/05/top-tasks-focus-what-matters-must-defocus-what-doesnt/">Top task methodology</a> is a great approach to this.
<h3>3. Business Objectives: What Success Looks Like</h3>
Every digital initiative should connect to clear organizational goals:
<ul>
<li>Increasing online self-service adoption.</li>
<li>Reducing support costs.</li>
<li>Improving satisfaction and loyalty.</li>
<li>Meeting compliance requirements.</li>
<li>Generating leads or sales.</li>
</ul>
These objectives provide the measurement framework for success. (If you work with OKRs, you can think of these as Key Results that connect to your overall Objective.)
<h3>4. Inward Paths: User Scenarios and Approaches</h3>
This element goes beyond just findability to include the user’s entire approach and mental model:
<ul>
<li>What scenarios lead them to this need?</li>
<li>What terminology do they use to describe their problem?</li>
<li>How would the phrase their need to Google or an LLM?</li>
<li>What emotions or urgency are they experiencing?</li>
<li>What channels or touchpoints do they use?</li>
<li>What existing knowledge do they bring?</li>
</ul>
Understanding these angles of different approaches ensures we meet users where they are.
<h3>5. Forward Paths: Guiding the Journey</h3>
What should users do after engaging with this core?
<ul>
<li>Take a specific action to continue their task.</li>
<li>Explore related information or options.</li>
<li>Connect with appropriate support channels.</li>
<li>Save or share their progress.</li>
</ul>
These paths create coherent journeys (core flows) rather than dead ends.
<h3>6. Core Content: The Essential Solution</h3>
Only after mapping the previous elements do we define the actual solution:
<ul>
<li>What information must be included?</li>
<li>What functionality is essential?</li>
<li>What tone and language are appropriate?</li>
<li>What format best serves the need?</li>
</ul>
This becomes our blueprint for what actually needs to be created.
<h3>Action Cards: From Insight to Implementation</h3>
The Core Model process culminates with action cards that answer the crucial seventh question: “What needs to be done to create this solution?”
<img src="https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png" />
These cards typically include:
<ul>
<li>Specific actions required;</li>
<li>Who is responsible;</li>
<li>Timeline for completion;</li>
<li>Resources needed;</li>
<li>Dependencies and constraints.</li>
</ul>
Action cards transform insights into concrete next steps, ensuring the workshop leads to real improvements rather than just interesting discussions.
The Power of Core Pairs
A unique aspect of the Core Model methodology is working in core pairs—two people from different competencies or departments working together on the same core sheet. This approach creates several benefits:
<ul>
<li>Cross-disciplinary insight Pairing someone with deep subject knowledge with someone who brings a fresh perspective.</li>
<li>Built-in quality control Partners catch blind spots and challenge assumptions.</li>
<li>Simplified communication One-to-one dialogue is more effective than group discussions.</li>
<li>Shared ownership Both participants develop a commitment to the solution.</li>
<li>Knowledge transfer Skills and insights flow naturally between disciplines.</li>
</ul>
The ideal pair combines different perspectives — content and design, business and technical, expert and novice — creating a balanced approach that neither could achieve alone.
Creating Alignment Within and Between Teams
The Core Model excels at creating two crucial types of alignment:
<h3>Within Cross-Functional Teams</h3>
Modern teams bring together diverse competencies:
<ul>
<li>Content creators focus on messages and narrative.</li>
<li>Designers think about user experience and interfaces.</li>
<li>Developers consider technical implementation.</li>
<li>Business stakeholders prioritize organizational needs.</li>
</ul>
The Core Model gives these specialists a common framework. Instead of the designer focusing only on interfaces or the developer only on code, everyone aligns around user tasks and business goals.
As one UX designer told me: 
<blockquote>“The Core Model changed our team dynamic completely. Instead of handing off wireframes to developers who didn’t understand the ‘why’ behind design decisions, we now share a common understanding of what we’re trying to accomplish.”</blockquote>
<h3>Between Teams Across the Customer Journey</h3>
Users don’t experience your organization in silos — they move across touchpoints and teams. The Core Model helps connect these experiences:
<ul>
<li>Marketing teams understand how their campaigns connect to service delivery.</li>
<li>Product teams see how their features fit into larger user journeys.</li>
<li>Support teams gain context on user pathways and common issues.</li>
<li>Content teams create information that supports the entire journey.</li>
</ul>
By mapping connections between cores (core flows), organizations create coherent experiences rather than fragmented interactions.
Breaking Down Organizational Barriers
The Core Model creates a neutral framework where various perspectives can contribute while maintaining a unified direction. This is particularly valuable in traditional organizational structures where content responsibility is distributed across departments.
The Workshop: Making It Happen
The Core Model workshop brings these elements together in a practical format that can be adapted to different contexts and needs.
<h3>Workshop Format and Timing</h3>
For complex projects with multiple stakeholders across organizational silos, the ideal format is a full-day (6–hour) workshop:
First Hour: Foundation and Context
<ul>
<li>Introduction to the methodology (15 min).</li>
<li>Sharing user insights and business context (15 min).</li>
<li>Reviewing pre-workshop hypotheses (15 min).</li>
<li>Initial discussion and questions (15 min).</li>
</ul>
Hours 2–4: Core Mapping
<ul>
<li>Core pairs work on mapping elements (120 min).</li>
<li>Sharing between core pairs and in plenary between elements.</li>
<li>Facilitators provide guidance as needed.</li>
</ul>
Hours 5–6: Presentation, Discussion, and Action Planning
<ul>
<li>Each core pair presents its findings (depending on the number of cores).</li>
<li>Extensive group discussion and refinement.</li>
<li>Creating action cards and next steps.</li>
</ul>
The format is highly flexible:
<ul>
<li>Teams experienced with the methodology can conduct focused sessions in as little as 30 minutes.</li>
<li>Smaller projects might need only 2–3 hours.</li>
<li>Remote teams might split the workshop into multiple shorter sessions.</li>
</ul>
<h3>Workshop Environment</h3>
The Core Model workshop thrives in different environments:
<ul>
<li>Analog: Traditional approach using paper <a href="https://drive.google.com/file/d/18yT6Fv-fFmVqorWuezRSAraVj2ngCwXh/view?usp=sharing">core sheets</a>.</li>
<li>Digital: Virtual workshops using <a href="https://coremodel.link/miro">Miro</a>, <a href="https://coremodel.link/mural">Mural</a>, <a href="https://coremodel.link/figjam">FigJam</a>, or similar platforms.</li>
<li>Hybrid: Digital canvas in physical workshop, combining in-person interaction with digital documentation.</li>
</ul>
Note: You can find all downloads and templates <a href="http://coremodel.link/templates">here</a>.
<h3>Core Pairs: The Key to Success</h3>
The composition of core pairs is critical to success:
<ul>
<li>One person should know the solution domain well (subject matter expert).</li>
<li>The other brings a fresh perspective (and learns about a different domain).</li>
<li>This combination ensures both depth of knowledge and fresh thinking.</li>
<li>Cross-functional pairing creates natural knowledge transfer and breaks down silos.</li>
</ul>
<h3>Workshop Deliverables</h3>
Important to note: The workshop doesn’t produce final solutions.
Instead, it creates a comprehensive brief containing the following:
<ul>
<li>Priorities and context for content development.</li>
<li>Direction and ideas for design and user experience.</li>
<li>Requirements and specifications for functionality.</li>
<li>Action plan for implementation with clear ownership.</li>
</ul>
This brief becomes the foundation for subsequent development work, ensuring everyone builds toward the same goal while leaving room for specialist expertise during implementation.
Getting Started: Your First Core Model Implementation
Ready to apply the Core Model in your organization? Here’s how to begin:
<h3>1. Form Your Initial Hypothesis</h3>
Before bringing everyone together:
<ul>
<li>Identify a core where users struggle and the business impact is clear.</li>
<li>Gather available user insights and business objectives.</li>
<li>Form a hypothesis about what this core should accomplish.</li>
<li>Identify key stakeholders across relevant departments.</li>
</ul>
<h3>2. Bring Together the Right Core Pairs</h3>
Select participants who represent different perspectives:
<ul>
<li>Content creators paired with designers.</li>
<li>Business experts paired with technical specialists.</li>
<li>Subject matter experts paired with user advocates.</li>
<li>Veterans paired with fresh perspectives.</li>
</ul>
<h3>3. Follow the Seven Questions</h3>
Guide core pairs through the process:
<ul>
<li>Who are we trying to help, and what’s their situation?</li>
<li>What are they trying to accomplish?</li>
<li>What do we want to achieve?</li>
<li>How do they approach this need?</li>
<li>Where should they go next?</li>
<li>What’s the essential content or functionality?</li>
<li>What needs to be done to create this solution?</li>
</ul>
<h3>4. Create an Action Plan</h3>
Transform insights into concrete actions:
<ul>
<li>Document specific next steps on action cards.</li>
<li>Assign clear ownership for each action.</li>
<li>Establish timeline and milestones.</li>
<li>Define how you’ll measure success.</li>
</ul>
In Conclusion: Common Sense In A Structured Framework
The Core Model works because it combines common sense with structure — asking the right questions in the right order to ensure we address what actually matters.
By starting FROM the answer, not WITH the solution, teams avoid premature problem-solving and create digital experiences that truly serve user needs while achieving organizational goals.
Whether you’re managing a traditional website, creating multi-channel content, or developing digital products, this methodology provides a framework for better collaboration, clearer priorities, and more effective outcomes.
This article is a short adaptation of my book The Core Model — A Common Sense to Digital Strategy and Design. You can find information about the book and updated resources at <a href="http://thecoremodel.com/">thecoremodel.com</a>.
]]></content:encoded>
<author>hello@smashingmagazine.com (Are Halland)</author>
<enclosure url="http://files.smashing.media/articles/core-model-start-from-answer-not-solution/core-model-start-from-answer-not-solution.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Web Components: Working With Shadow DOM]]></title>
<link>https://smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/</link>
<guid>https://smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/</guid>
<pubDate>Mon, 28 Jul 2025 08:00:00 GMT</pubDate>
<description><![CDATA[Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.]]></description>
<content:encoded><![CDATA[It’s common to see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> directly <a href="https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components/">compared to framework components</a>. But most examples are actually specific to Custom Elements, which is one piece of the Web Components picture. It’s easy to forget Web Components are actually a set of individual Web Platform APIs that can be used on their own:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements">Custom Elements</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template">HTML Templates</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">Shadow DOM</a></li>
</ul>
In other words, it’s possible to create a Custom Element without using Shadow DOM or HTML Templates, but combining these features opens up enhanced stability, reusability, maintainability, and security. They’re all parts of the same feature set that can be used separately or together.
With that being said, I want to pay particular attention to Shadow DOM and where it fits into this picture. Working with Shadow DOM allows us to define clear boundaries between the various parts of our web applications — encapsulating related HTML and CSS inside a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a> to isolate components, prevent conflicts, and maintain clean separation of concerns.
How you take advantage of that encapsulation involves trade-offs and a variety of approaches. In this article, we’ll explore those nuances in depth, and in a follow-up piece, we’ll dive into how to work effectively with encapsulated styles.
Why Shadow DOM Exists
Most modern web applications are built from an assortment of libraries and components from a variety of providers. With the traditional (or “light”) DOM, it’s easy for styles and scripts to leak into or collide with each other. If you are using a framework, you might be able to trust that everything has been written to work seamlessly together, but effort must still be made to ensure that all elements have a unique ID and that CSS rules are scoped as specifically as possible. This can lead to overly verbose code that both increases app load time and reduces maintainability.
<div>
<pre><code>
<div id="my-custom-app-framework-landingpage-header" class="my-custom-app-framework-foo">
<div><div><div><div><div><div>etc...</div></div></div></div></div></div>
</div>
</code></pre>
</div>
Shadow DOM was introduced to solve these problems by providing a way to isolate each component. The <code><video></code> and <code><details></code> elements are good examples of native HTML elements that use Shadow DOM internally by default to prevent interference from global styles or scripts. Harnessing this hidden power that drives native browser components is what really sets Web Components apart from their framework counterparts.
<img src="https://files.smashing.media/articles/web-components-working-with-shadow-dom/1-shadow-dom-devtools.png" />
Elements That Can Host A Shadow Root
Most often, you will see shadow roots associated with Custom Elements. However, they can also be used with any <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#elements_you_can_attach_a_shadow_to">many standard elements</a> support them as well, including:
<ul>
<li><code><aside></code></li>
<li><code><blockquote></code></li>
<li><code><body></code></li>
<li><code><div><footer></code></li>
<li><code><h1></code> to <code><h6></code></li>
<li><code><header></code></li>
<li><code><main></code></li>
<li><code><nav></code></li>
<li><code></code></li>
<li><code><section></code></li>
<li><code></code></li>
</ul>
Each element can only have one shadow root. Some elements, including <code><input></code> and <code><select></code>, already have a built-in shadow root that is not accessible through scripting. You can inspect them with your Developer Tools by enabling the Show User Agent Shadow DOM setting, which is “off” by default.
<img src="https://files.smashing.media/articles/web-components-working-with-shadow-dom/2-dom-setting-chrome-developer-tools.png" />
<img src="https://files.smashing.media/articles/web-components-working-with-shadow-dom/3-user-agent-shadow-root-chrome-developer-tools.png" />
Creating A Shadow Root
Before leveraging the benefits of Shadow DOM, you first need to establish a shadow root on an element. This can be instantiated imperatively or declaratively.
<h3>Imperative Instantiation</h3>
To create a shadow root using JavaScript, use <code>attachShadow({ mode })</code> on an element. The <code>mode</code> can be <code>open</code> (allowing access via <code>element.shadowRoot</code>) or <code>closed</code> (hiding the shadow root from outside scripts).
<pre><code>const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = 'Hello from the Shadow DOM!';
document.body.appendChild(host);
</code></pre>
In this example, we’ve established an <code>open</code> shadow root. This means that the element’s content is accessible from the outside, and we can query it like any other DOM node:
<div>
<pre><code>host.shadowRoot.querySelector('p'); // selects the paragraph element
</code></pre>
</div>
If we want to prevent external scripts from accessing our internal structure entirely, we can set the mode to <code>closed</code> instead. This causes the element’s <code>shadowRoot</code> property to return <code>null</code>. We can still access it from our <code>shadow</code> reference in the scope where we created it.
<pre><code>shadow.querySelector('p');
</code></pre>
This is a crucial security feature. With a <code>closed</code> shadow root, we can be confident that malicious actors cannot extract private user data from our components. For example, consider a widget that shows banking information. Perhaps it contains the user’s account number. With an <code>open</code> shadow root, any script on the page can drill into our component and parse its contents. In <code>closed</code> mode, only the user can perform this kind of action with manual copy-pasting or by inspecting the element.
I suggest a closed-first approach when working with Shadow DOM. Make a habit of using <code>closed</code> mode unless you are debugging, or only when absolutely necessary to get around a real-world limitation that cannot be avoided. If you follow this approach, you will find that the instances where <code>open</code> mode is actually required are few and far between.
<h3>Declarative Instantiation</h3>
We don’t have to use JavaScript to take advantage of Shadow DOM. Registering a shadow root can be done declaratively. Nesting a <code><template></code> with a <code>shadowrootmode</code> attribute inside any supported element will cause the browser to automatically upgrade that element with a shadow root. Attaching a shadow root in this manner can even be done with JavaScript disabled.
<pre><code><my-widget>
<template shadowrootmode="closed">
 Declarative Shadow DOM content 
</template>
</my-widget>
</code></pre>
Again, this can be either <code>open</code> or <code>closed</code>. Consider the security implications before using <code>open</code> mode, but note that you cannot access the <code>closed</code> mode content through any scripts unless this method is used with a registered Custom Element, in which case, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals"><code>ElementInternals</code></a> to access the automatically attached shadow root:
<pre><code>class MyWidget extends HTMLElement {
#internals;
#shadowRoot;
constructor() {
super();
this.#internals = this.attachInternals();
this.#shadowRoot = this.#internals.shadowRoot;
}
connectedCallback() {
const p = this.#shadowRoot.querySelector('p')
console.log(p.textContent); // this works
}
};
customElements.define('my-widget', MyWidget);
export { MyWidget };
</code></pre>
Shadow DOM Configuration
There are three other options besides mode that we can pass to <code>Element.attachShadow()</code>.
<h3>Option 1: <code>clonable:true</code></h3>
Until recently, if a standard element had a shadow root attached and you tried to clone it using <code>Node.cloneNode(true)</code> or <code>document.importNode(node,true)</code>, you would only get a shallow copy of the host element without the shadow root content. The examples we just looked at would actually return an empty <code><div></code>. This was never an issue with Custom Elements that built their own shadow root internally.
But for a declarative Shadow DOM, this means that each element needs its own template, and they cannot be reused. With this newly-added feature, we can selectively clone components when it’s desirable:
<div>
<pre><code><div id="original">
<template shadowrootmode="closed" shadowrootclonable>
 This is a test 
</template>
</div>
<script>
const original = document.getElementById('original');
const copy = original.cloneNode(true); copy.id = 'copy';
document.body.append(copy); // includes the shadow root content
</script>
</code></pre>
</div>
<h3>Option 2: <code>serializable:true</code></h3>
Enabling this option allows you to save a string representation of the content inside an element’s shadow root. Calling <code>Element.getHTML()</code> on a host element will return a template copy of the Shadow DOM’s current state, including all nested instances of <code>shadowrootserializable</code>. This can be used to inject a copy of your shadow root into another host, or cache it for later use.
In Chrome, this actually <a href="https://github.com/whatwg/html/pull/10260#issuecomment-2042918560">works through a closed shadow root</a>, so be careful of accidentally leaking user data with this feature. A safer alternative would be to use a <code>closed</code> wrapper to shield the inner contents from external influences while still keeping things <code>open</code> internally:
<div>
<pre><code><wrapper-element></wrapper-element>
<script>
class WrapperElement extends HTMLElement {
#shadow;
constructor() {
super();
this.#shadow = this.attachShadow({ mode:'closed' });
this.#shadow.setHTMLUnsafe(<code>&lt;nested-element&gt;
&lt;template shadowrootmode="open" shadowrootserializable&gt;
&lt;div id="test"&gt;
&lt;template shadowrootmode="open" shadowrootserializable&gt;
&lt;p&gt; Deep Shadow DOM Content &lt;/p&gt;
&lt;/template&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/nested-element&gt;</code>);
this.cloneContent();
}
cloneContent() {
const nested = this.#shadow.querySelector('nested-element');
const snapshot = nested.getHTML({ serializableShadowRoots: true });
const temp = document.createElement('div');
temp.setHTMLUnsafe(<code>&lt;another-element&gt;${snapshot}&lt;/another-element&gt;</code>);
const copy = temp.querySelector('another-element');
copy.shadowRoot.querySelector('#test').shadowRoot.querySelector('p').textContent = 'Changed Content!';
this.#shadow.append(copy);
}
}
customElements.define('wrapper-element', WrapperElement);
const wrapper = document.querySelector('wrapper-element');
const test = wrapper.getHTML({ serializableShadowRoots: true });
console.log(test); // empty string due to closed shadow root
</script>
</code></pre>
</div>
Notice <a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/setHTMLUnsafe"><code>setHTMLUnsafe()</code></a>. That’s there because the content contains <code><template></code> elements. This method must be called when injecting trusted content of this nature. Inserting the template using <code>innerHTML</code> would not trigger the automatic initialization into a shadow root.
<h3>Option 3: <code>delegatesFocus:true</code></h3>
This option essentially makes our host element act as a <code><label></code> for its internal content. When enabled, clicking anywhere on the host or calling <code>.focus()</code> on it will move the cursor to the first focusable element in the shadow root. This will also apply the <code>:focus</code> pseudo-class to the host, which is especially useful when creating components that are intended to participate in forms.
<div>
<pre><code><custom-input>
<template shadowrootmode="closed" shadowrootdelegatesfocus>
<fieldset>
<legend> Custom Input </legend>
 Click anywhere on this element to focus the input 
<input type="text" placeholder="Enter some text...">
</fieldset>
</template>
</custom-input>
</code></pre>
</div>
This example only demonstrates focus delegation. One of the oddities of encapsulation is that form submissions are not automatically connected. That means an input’s value will not be in the form submission by default. Form validation and states are also not communicated out of the Shadow DOM. There are similar connectivity issues with accessibility, where the shadow root boundary can interfere with ARIA. These are all considerations specific to forms that we can address with <a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals"><code>ElementInternals</code></a>, which is a topic for another article, and is cause to question whether you can rely on a light DOM form instead.
Slotted Content
So far, we have only looked at fully encapsulated components. A key Shadow DOM feature is using slots to selectively inject content into the component’s internal structure. Each shadow root can have one default (unnamed) <code><slot></code>; all others must be named. Naming a slot allows us to provide content to fill specific parts of our component as well as fallback content to fill any slots that are omitted by the user:
<div>
<pre><code><my-widget>
<template shadowrootmode="closed">
<h2><slot name="title">Fallback Title</slot></h2>
<slot name="description">A placeholder description.</slot>
<ol><slot></slot></ol>
</template>
 A Slotted Title
An example of using slots to fill parts of a component.
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</my-widget>
</code></pre>
</div>
Default slots also support fallback content, but any stray text nodes will fill them. As a result, this only works if you collapse all whitespace in the host element’s markup:
<pre><code><my-widget><template shadowrootmode="closed">
<slot>Fallback Content</slot>
</template></my-widget>
</code></pre>
Slot elements emit <code>slotchange</code> events when their <code>assignedNodes()</code> are added or removed. These events do not contain a reference to the slot or the nodes, so you will need to pass those into your event handler:
<pre><code>class SlottedWidget extends HTMLElement {
#internals;
#shadow;
constructor() {
super();
this.#internals = this.attachInternals();
this.#shadow = this.#internals.shadowRoot;
this.configureSlots();
}
configureSlots() {
const slots = this.#shadow.querySelectorAll('slot');
console.log({ slots });
slots.forEach(slot => {
slot.addEventListener('slotchange', () => {
console.log({
changedSlot: slot.name || 'default',
assignedNodes: slot.assignedNodes()
});
});
});
}
}
customElements.define('slotted-widget', SlottedWidget);
</code></pre>
Multiple elements can be assigned to a single slot, either declaratively with the <code>slot</code> attribute or through scripting:
<div>
<pre><code>const widget = document.querySelector('slotted-widget');
const added = document.createElement('p');
added.textContent = 'A secondary paragraph added using a named slot.';
added.slot = 'description';
widget.append(added);
</code></pre>
</div>
Notice that the paragraph in this example is appended to the host element. Slotted content actually belongs to the “light” DOM, not the Shadow DOM. Unlike the examples we’ve covered so far, these elements can be queried directly from the <code>document</code> object:
<div>
<pre><code>const widgetTitle = document.querySelector('my-widget [slot=title]');
widgetTitle.textContent = 'A Different Title';
</code></pre>
</div>
If you want to access these elements internally from your class definition, use <code>this.children</code> or <code>this.querySelector</code>. Only the <code><slot></code> elements themselves can be queried through the Shadow DOM, not their content.
From Mystery To Mastery
Now you know why you would want to use Shadow DOM, when you should incorporate it into your work, and how you can use it right now.
But your Web Components journey can’t end here. We’ve only covered markup and scripting in this article. We have not even touched on another major aspect of Web Components: Style encapsulation. That will be our topic in another article.
]]></content:encoded>
<author>hello@smashingmagazine.com (Russell Beswick)</author>
<enclosure url="http://files.smashing.media/articles/web-components-working-with-shadow-dom/web-components-working-with-shadow-dom.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Designing Better UX For Left-Handed People]]></title>
<link>https://smashingmagazine.com/2025/07/designing-better-ux-left-handed-people/</link>
<guid>https://smashingmagazine.com/2025/07/designing-better-ux-left-handed-people/</guid>
<pubDate>Fri, 25 Jul 2025 15:00:00 GMT</pubDate>
<description><![CDATA[Today, roughly 10% of people are left-handed. Yet most products — digital and physical — aren’t designed with it in mind. Let’s change that. More design patterns in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, a **friendly video course on UX** and design patterns by Vitaly.]]></description>
<content:encoded><![CDATA[Many products — digital and physical — are focused on “average” users — a statistical representation of the user base, which often overlooks or dismisses anything that deviates from that average, or happens to be an edge case. But people are never edge cases, and “average” users don’t really exist. We must be deliberate and intentional to ensure that our products reflect that.
Today, roughly 10% of people are left-handed. Yet most products — digital and physical — aren’t designed with them in mind. And there is rarely a conversation about how a particular digital experience would work better for their needs. So how would it adapt, and what are the issues we should keep in mind? Well, let’s explore what it means for us.
<img src="https://files.smashing.media/articles/designing-better-ux-left-handed-people/1-ux-left-handed.jpg" />
This article is part of our ongoing series on <a href="/category/ux">UX</a>. You can find more details on design patterns and UX strategy in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 — with live UX training coming up soon. <a href="https://smart-interface-design-patterns.com">Jump to table of contents</a>.
Left-Handedness ≠ “Left-Only”
It’s easy to assume that left-handed people are usually left-handed users. However, that’s not necessarily the case. Because most products are designed with right-handed use in mind, many left-handed people have to use their right hand to navigate the physical world.
From very early childhood, left-handed people have to rely on their right hand to use tools and appliances like scissors, openers, fridges, and so on. That’s why left-handed people tend to be ambidextrous, sometimes using different hands for different tasks, and sometimes using different hands for the same tasks interchangeably. However, only <a href="https://www.rd.com/article/ambidextrous/">1% of people use both hands equally well</a> (ambidextrous).
<img src="https://files.smashing.media/articles/designing-better-ux-left-handed-people/2-challenges-left-handed-people.jpg" />
In the same way, right-handed people aren’t necessarily right-handed users. It’s common to be using a mobile device in both left and right hands, or both, perhaps with a preference for one. But when it comes to writing, a preference is stronger.
Challenges For Left-Handed Users
Because left-handed users are in the minority, there is less demand for left-handed products, and so typically they are <a href="https://theleftyguitarist.com/buying-guides/why-left-handed-guitars-are-more-expensive/">more expensive</a>, and also more difficult to find. Troubles often emerge with seemingly simple tools — scissors, can openers, musical instruments, rulers, microwaves and bank pens. 
<img src="https://files.smashing.media/articles/designing-better-ux-left-handed-people/3-challenges-left-handed-people.jpg" />
For example, most scissors are designed with the top blade positioned for right-handed use, which makes cutting difficult and less precise. And in microwaves, buttons and interfaces are nearly always on the right, making left-handed use more difficult.
Now, with digital products, most left-handed people tend to adapt to right-handed tools, which they use daily. Unsurprisingly, many use their right hand to navigate the mouse. However, it’s often quite different on mobile where the left hand is often preferred.
<ul>
<li>Don’t make design decisions based on left/right-handedness. </li>
<li>Allow customizations based on the user’s personal preferences. </li>
<li>Allow users to re-order columns (incl. the Actions column). </li>
<li>In forms, place action buttons next to the last user’s interaction. </li>
<li>Keyboard accessibility helps everyone move faster (Esc).</li>
</ul>
Usability Guidelines To Support Both Hands
As Ruben Babu <a href="https://medium.com/@rubenbabu/inclusivity-guide-usability-design-for-left-handedness-101-2bc0265ae21e">writes</a>, we shouldn’t design a fire extinguisher that can’t be used by both hands. Think pull up and pull down, rather than swipe left or right. Minimize the distance to travel with the mouse. And when in doubt, align to the center.
<ul>
<li>Bottom left → better for lefties, bottom right → for righties. </li>
<li>With magnifiers, users can’t spot right-aligned buttons. </li>
<li>On desktop, align buttons to the left/middle, not right. </li>
<li>On mobile, most people switch both hands when tapping. </li>
<li>Key actions → put in middle half to two-thirds of the screen.</li>
</ul>
<img src="https://files.smashing.media/articles/designing-better-ux-left-handed-people/4-left-handed-oil-test.jpg" />
A simple way to test the mobile UI is by trying to use the opposite-handed UX test. For key flows, we try to complete them with your non-dominant hand and use the opposite hand to discover UX shortcomings.
For physical products, you might try the oil test. It might be <a href="https://uxplanet.org/discover-ux-flaws-with-the-opposite-handed-ux-test-e2543223d4a3?sk=v2%2Fa6e6c84e-e7ee-4115-8ff8-36a9a15b4cfb">more effective than you might think</a>.
Good UX Works For Both
Our aim isn’t to degrade the UX of right-handed users by meeting the needs of left-handed users. The aim is to create an accessible experience for everyone. Providing a better experience for left-handed people also benefits right-handed people who have a temporary arm disability.
And that’s an often-repeated but also often-overlooked universal principle of usability: better accessibility is better for everyone, even if it might feel that it doesn’t benefit you directly at the moment.
Useful Resources
<ul>
<li>“<a href="https://uxplanet.org/discover-ux-flaws-with-the-opposite-handed-ux-test-e2543223d4a3?sk=v2%2Fa6e6c84e-e7ee-4115-8ff8-36a9a15b4cfb">Discover Hidden UX Flaws With the Opposite-Handed UX Test</a>,” by Jeff Huang</li>
<li>“<a href="https://sparkbox.com/foundry/are_right_aligned_buttons_easier_for_right_handed_people_first_click_test_usibility_ux_research">Right-Aligned Buttons Aren’t More Efficient For Right-Handed People</a>,” by Julia Y.</li>
<li>“<a href="https://smart-interface-design-patterns.com/articles/accessible-tap-target-sizes/">Mobile Accessibility Target Sizes Cheatsheet</a>,” by Vitaly Friedman</li>
<li>“<a href="https://uxdesign.cc/why-the-world-is-not-designed-for-left-handed-people-96bb5cf4c460?sk=v2%2F9daed92e-a991-4acd-aeba-8d228ee444da">Why The World Is Not Designed For Left-Handed People</a>,” by Elvis Hsiao</li>
<li>“<a href="https://medium.com/@rubenbabu/inclusivity-guide-usability-design-for-left-handedness-101-2bc0265ae21e">Usability For Left Handedness 101</a>”, by Ruben Babu</li>
<li><a href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Touch Design For Mobile Interfaces</a>, by Steven Hoober</li>
</ul>
Meet “Smart Interface Design Patterns”
You can find more details on design patterns and UX in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our 15h-video course with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>. Use code <a href="https://smart-interface-design-patterns.com">BIRDIE</a> to save 15% off.
<a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design & UX.
<div><div><ul><li><a href="#">
Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 699.00
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">
Get Video + UX Training<div></div></a>25 video lessons (15h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>. 100 days money-back-guarantee.</div><div><h3>Video only</h3><div>$ 300.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>40 video lessons (15h). Updated yearly. 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></div></div></div>
]]></content:encoded>
<author>hello@smashingmagazine.com (Vitaly Friedman)</author>
<enclosure url="http://files.smashing.media/articles/designing-better-ux-left-handed-people/designing-better-ux-left-handed-people.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Handling JavaScript Event Listeners With Parameters]]></title>
<link>https://smashingmagazine.com/2025/07/handling-javascript-event-listeners-parameters/</link>
<guid>https://smashingmagazine.com/2025/07/handling-javascript-event-listeners-parameters/</guid>
<pubDate>Mon, 21 Jul 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Event listeners are essential for interactivity in JavaScript, but they can quietly cause memory leaks if not removed properly. And what if your event listener needs parameters? That’s where things get interesting. Amejimaobari Ollornwi shares which JavaScript features make handling parameters with event handlers both possible and well-supported.]]></description>
<content:encoded><![CDATA[JavaScript event listeners are very important, as they exist in almost every web application that requires interactivity. As common as they are, it is also essential for them to be managed properly. Improperly managed event listeners can lead to memory leaks and can sometimes cause performance issues in extreme cases.
Here’s the real problem: JavaScript event listeners are often not removed after they are added. And when they are added, they do not require parameters most of the time — except in rare cases, which makes them a little trickier to handle. 
A common scenario where you may need to use parameters with event handlers is when you have a dynamic list of tasks, where each task in the list has a “Delete” button attached to an event handler that uses the task’s ID as a parameter to remove the task. In a situation like this, it is a good idea to remove the event listener once the task has been completed to ensure that the deleted element can be successfully cleaned up, a process known as <a href="https://javascript.info/garbage-collection">garbage collecti</a><a href="https://javascript.info/garbage-collection">on</a>.
A Common Mistake When Adding Event Listeners
A very common mistake when adding parameters to event handlers is calling the function with its parameters inside the <code>addEventListener()</code> method. This is what I mean:
<pre><code>button.addEventListener('click', myFunction(param1, param2));
</code></pre>
The browser responds to this line by immediately calling the function, irrespective of whether or not the click event has happened. In other words, the function is invoked right away instead of being deferred, so it never fires when the click event actually occurs.
You may also receive the following console error in some cases:
<img src="https://files.smashing.media/articles/handling-javascript-event-listeners-parameters/1-uncaught-typeerror.png" />
This error makes sense because the second parameter of the <code>addEventListener</code> method <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#listener">can only accept</a> a JavaScript function, an object with a <code>handleEvent()</code> method, or simply <code>null</code>. A quick and easy way to avoid this error is by changing the second parameter of the <code>addEventListener</code> method to an arrow or anonymous function.
<pre><code>button.addEventListener('click', (event) => {
myFunction(event, param1, param2); // Runs on click
});
</code></pre>
The only hiccup with using arrow and anonymous functions is that they cannot be removed with the traditional <code>removeEventListener()</code> method; you will have to make use of <code>AbortController</code>, which may be overkill for simple cases. <code>AbortController</code> shines when you have multiple event listeners to remove at once.
For simple cases where you have just one or two event listeners to remove, the <code>removeEventListener()</code> method still proves useful. However, in order to make use of it, you’ll need to store your function as a reference to the listener.
Using Parameters With Event Handlers
There are several ways to include parameters with event handlers. However, for the purpose of this demonstration, we are going to constrain our focus to the following two:
<h3>Option 1: Arrow And Anonymous Functions</h3>
Using arrow and anonymous functions is the fastest and easiest way to get the job done.
To add an event handler with parameters using arrow and anonymous functions, we’ll first need to call the function we’re going to create inside the arrow function attached to the event listener:
<pre><code>const button = document.querySelector("#myButton");
button.addEventListener("click", (event) => {
handleClick(event, "hello", "world");
});
</code></pre>
After that, we can create the function with parameters:
<pre><code>function handleClick(event, param1, param2) {
console.log(param1, param2, event.type, event.target);
}
</code></pre>
Note that with this method, removing the event listener requires the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController"><code>AbortController</code></a>. To remove the event listener, we create a new <code>AbortController</code> object and then retrieve the <code>AbortSignal</code> object from it:
<pre><code>const controller = new AbortController();
const { signal } = controller;
</code></pre>
Next, we can pass the <code>signal</code> from the <code>controller</code> as an option in the <code>removeEventListener()</code> method:
<pre><code>button.addEventListener("click", (event) => {
handleClick(event, "hello", "world");
}, { signal });
</code></pre>
Now we can remove the event listener by calling <code>AbortController.abort()</code>:
<pre><code>controller.abort()
</code></pre>
<h3>Option 2: Closures</h3>
Closures in JavaScript are another feature that can help us with event handlers. Remember the mistake that produced a type error? That mistake can also be corrected with closures. Specifically, with closures, a function can access variables from its outer scope.
In other words, we can access the parameters we need in the event handler from the outer function:
<div>
<pre><code>function createHandler(message, number) {
// Event handler
return function (event) {
console.log(<code>${message} ${number} - Clicked element:</code>, event.target);
};
}
const button = document.querySelector("#myButton");
button.addEventListener("click", createHandler("Hello, world!", 1));
}
</code></pre>
</div>
This establishes a function that returns another function. The function that is created is then called as the second parameter in the <code>addEventListener()</code> method so that the inner function is returned as the event handler. And with the power of closures, the parameters from the outer function will be made available for use in the inner function.
Notice how the <code>event</code> object is made available to the inner function. This is because the inner function is what is being attached as the event handler. The event object is passed to the function automatically because it’s the event handler.
To remove the event listener, we can use the <code>AbortController</code> like we did before. However, this time, let’s see how we can do that using the <code>removeEventListener()</code> method instead.
In order for the <code>removeEventListener</code> method to work, a reference to the <code>createHandler</code> function needs to be stored and used in the <code>addEventListener</code> method:
<div>
<pre><code>function createHandler(message, number) {
return function (event) {
console.log(<code>${message} ${number} - Clicked element:</code>, event.target);
};
}
const handler = createHandler("Hello, world!", 1);
button.addEventListener("click", handler);
</code></pre>
</div>
Now, the event listener can be removed like this:
<pre><code>button.removeEventListener("click", handler);
</code></pre>
Conclusion
It is good practice to always remove event listeners whenever they are no longer needed to prevent memory leaks. Most times, event handlers do not require parameters; however, in rare cases, they do. Using JavaScript features like closures, <code>AbortController</code>, and <code>removeEventListener</code>, handling parameters with event handlers is both possible and well-supported.
]]></content:encoded>
<author>hello@smashingmagazine.com (Amejimaobari Ollornwi)</author>
<enclosure url="http://files.smashing.media/articles/handling-javascript-event-listeners-parameters/handling-javascript-event-listeners-parameters.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Why Non-Native Content Designers Improve Global UX]]></title>
<link>https://smashingmagazine.com/2025/07/why-non-native-content-designers-improve-global-ux/</link>
<guid>https://smashingmagazine.com/2025/07/why-non-native-content-designers-improve-global-ux/</guid>
<pubDate>Fri, 18 Jul 2025 13:00:00 GMT</pubDate>
<description><![CDATA[Ensuring your product communicates clearly to a global audience is not just about localisation. Even for products that have a proper localisation process, English often remains the default language for UI and communications. This article focuses on how you can make English content clear and inclusive for non-native users. Oleksii offers a practical guide based on his own experience as a non-native English-speaking content designer, defining the user experience for international companies.]]></description>
<content:encoded><![CDATA[A few years ago, I was in a design review at a fintech company, polishing the expense management flows. It was a routine session where we reviewed the logic behind content and design decisions.
While looking over the statuses for submitted expenses, I noticed a label saying ‘In approval’. I paused, re-read it again, and asked myself:
<blockquote>“Where is it? Are the results in? Where can I find them? Are they sending me to the app section called “Approval”?”</blockquote>
This tiny label made me question what was happening with my money, and this feeling of uncertainty was quite anxiety-inducing.
My team, all native English speakers, did not flinch, even for a second, and moved forward to discuss other parts of the flow. I was the only non-native speaker in the room, and while the label made perfect sense to them, it still felt off to me.
After a quick discussion, we landed on ‘Pending approval’ — the simplest and widely recognised option internationally. More importantly, this wording makes it clear that there’s an approval process, and it hasn’t taken place yet. There’s no need to go anywhere to do it.
Some might call it nitpicking, but that was exactly the moment I realised how invisible — yet powerful — the non-native speaker’s perspective can be. 
In a reality where user testing budgets aren’t unlimited, designing with familiar language patterns from the start helps you prevent costly confusions in the user journey.
Those same confusions often lead to:
<ul>
<li>Higher rate of customer service queries,</li>
<li>Lower adoption rates,</li>
<li>Higher churn,</li>
<li>Distrust and confusion.</li>
</ul>
As A Native Speaker, You Don’t See The Whole Picture
Global products are often designed with English as their primary language. This seems logical, but here’s the catch:
<blockquote><a href="https://americantesol.com/tesol-report.html">Roughly 75% of English-speaking users are not native speakers</a>, which means 3 out of every 4 users.</blockquote>
Native speakers often write on instinct, which works much like autopilot. This can often lead to overconfidence in content that, in reality, is too culturally specific, vague, or complex. And that content may not be understood by 3 in 4 people who read it.
If your team shares the same native language, content clarity remains assumed by default rather than proven through pressure testing.
The price for that is the accessibility of your product. A <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC7757700/#s016">study by National Library of Medicine</a> found that US adults who had proficiency in English but did not use it as their primary language were significantly less likely to be insured, even when provided with the same level of service as everyone else.
In other words, they did not finish the process of securing a healthcare provider — a process that’s vital to their well-being, in part, due to unclear or inaccessible communication.
If people abandon the process of getting something as vital as healthcare insurance, it’s easy to imagine them dropping out during checkout, account setup, or app onboarding.
<img src="https://files.smashing.media/articles/why-non-native-content-designers-improve-global-ux/1-clarity-zone-visualised.png" />
Non-native content designers, by contrast, do not write on autopilot. Because of their experience learning English, they’re much more likely to tune into nuances, complexity, and cultural exclusions that natives often overlook. That’s the key to designing for everyone rather than 1 in 4.
Non-native Content Designers Make Your UX Global
<h3>Spotting The Clutter And Cognitive Load Issues</h3>
When a non-native speaker has to pause, re-read something, or question the meaning of what’s written, they quickly identify it as a friction point in the user experience. 
Why it’s important: Every extra second users have to spend understanding your content makes them more likely to abandon the task. This is a high price that companies pay for not prioritising clarity.
Cognitive load is not just about complex sentences but also about the speed. There’s plenty of research <a href="https://www.researchgate.net/publication/368711420_Do_Non-native_Speakers_Read_Differently_Predicting_Reading_Times_with_Surprisal_and_Language_Models_of_Native_and_Non-native_Eye_Tracking_Data">confirming that non-native speakers read more slowly than native speakers</a>. This is especially important when you work on the visibility of system status — time-sensitive content that the user needs to scan and understand quickly.
One example you can experience firsthand is an ATM displaying a number of updates and instructions. Even when they’re quite similar, it still overwhelms you when you realise that you missed one, not being able to finish reading.
This kind of rapid-fire updates can increase frustration and the chances of errors.
<img src="https://files.smashing.media/articles/why-non-native-content-designers-improve-global-ux/2-atm-flashing-messages.png" />
<h3>Always Advocating For Plain English</h3>
They tend to review and rewrite things more often to find the easiest way to communicate the message. What a native speaker may consider clear enough might be dense or difficult for a non-native to understand.
Why it’s important: Simple content better scales across countries, languages, and cultures.
<h3>Catching Culture-specific Assumptions And References</h3>
When things do not make sense, non-native speakers challenge them. Besides the idioms and other obvious traps, native speakers tend to fall into considering their life experience to be shared with most English-speaking users.
Cultural differences might even exist within one globally shared language. Have you tried saying ‘soccer’ instead of ‘football’ in a conversation with someone from the UK? These details may not only cause confusion but also upset people.
Why it’s important: Making sure your product is free from culture-specific references makes your product more inclusive and safeguards you from alienating your users.
<h3>They Have Another Level Of Empathy For The Global Audience</h3>
Being a non-native speaker themselves, they have experience with products that do not speak clearly to them. They’ve been in the global user’s shoes and know how it impacts the experience.
Why it’s important: Empathy is a key driver towards design decisions that take into account the diverse cultural and linguistic background of the users. 
How Non-native Content Design Can Shape Your Approach To Design
Your product won’t become better overnight simply because you read an inspiring article telling you that you need to have a more diverse team. I get it. So here are concrete changes that you can make in your design workflows and hiring routines to make sure your content is accessible globally.
<h3>Run Copy Reviews With Non-native Readers</h3>
When you launch a new feature or product, it’s a standard practice to run QA sessions to review visuals and interactions. When your team does not include the non-native perspective, the content is usually overlooked and considered fine as long as it’s grammatically correct. 
I know, having a dedicated localisation team to pressure-test your content for clarity is a privilege, but you can always start small.
At one of my previous companies, we established a ‘clarity heroes council’ — a small team of non-native English speakers with diverse cultural and linguistic backgrounds. During our reviews, they often asked questions that surprised us and highlighted where clarity was missing:
<ul>
<li>What’s a “grace period”?</li>
<li>What will happen when I tap “settle the payment”?</li>
</ul>
These questions flag potential problems and help you save both money and reputation by avoiding thousands of customer service tickets.
<h3>Review Existing Flows For Clarity</h3>
Even if your product does not have major releases regularly, it accumulates small changes over time. They’re often plugged in as fixes or small improvements, and can be easily overlooked from a QA perspective.
A good start will be a regular look at the flows that are critical to your business metrics: onboarding, checkout, and so on. Fence off some time for your team quarterly or even annually, depending on your product size, to come together and check whether your key content pieces serve the global audience well. 
Usually, a proper review is conducted by a team: a product designer, a content designer, an engineer, a product manager, and a researcher. The idea is to go over the flows, research insights, and customer feedback together. For that, having a non-native speaker on the audit task force will be essential. 
If you’ve never done an audit before, try <a href="https://www.figma.com/community/file/1489250366825103388">this template</a> as it covers everything you need to start.
<h3>Make Sure Your Content Guidelines Are Global-ready</h3>
If you haven’t done it already, make sure your voice & tone documentation includes details about the level of English your company is catering to. 
This might mean working with the brand team to find ways to make sure your brand voice comes through to all users without sacrificing clarity and comprehension. Use examples and showcase the difference between sounding smart or playful vs sounding clear. 
Leaning too much towards brand personality is where cultural differences usually shine through. As a user, you might’ve seen it many times. Here’s a banking app that wanted to seem relaxed and relatable by introducing ‘Dang it’ as the only call-to-action on the screen.
<img src="https://files.smashing.media/articles/why-non-native-content-designers-improve-global-ux/3-confusing-ctas.png" />
However, users with different linguistic backgrounds might not be familiar with this expression. Worse, they might see it as an action, leaving them unsure of what will actually happen after tapping it.
Considering how much content is generated with AI today, your guidelines have to account for both tone and clarity. This way, when you feed these requirements to the AI, you’ll see the output that will not just be grammatically correct but also easy to understand.
<h3>Incorporate Global English Heuristics Into Your Definition Of Success</h3>
Basic heuristic principles are often documented as a part of overarching guidelines to help UX teams do a better job. The <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">Nielsen Norman Group usability heuristics</a> cover the essential ones, but it doesn’t mean you shouldn’t introduce your own. To complement this list, add this principle:
Aim for global understanding: Content and design should communicate clearly to any user regardless of cultural or language background.
You can suggest criteria to ensure it’s clear how to evaluate this:
<ul>
<li>Action transparency: Is it clear what happens next when the user proceeds to the next screen or page?</li>
<li>Minimal ambiguity: Is the content open to multiple interpretations?</li>
<li>International clarity: Does this content work in a non-Western context?</li>
</ul>
<h3>Bring A Non-native Perspective To Your Research, Too</h3>
This one is often overlooked, but collaboration between the research team and non-native speaking writers is super helpful. If your research involves a survey or interview, they can help you double-check whether there is complex or ambiguous language used in the questions unintentionally. 
<a href="https://dl.acm.org/doi/abs/10.5555/2835531.2835535?utm_source=chatgpt.com">In a study by the Journal of Usability Studies</a>, 37% of non-native speakers did not manage to answer the question that included a word they did not recognise or could not recall the meaning of. The question was whether they found the system to be “cumbersome to use”, and the consequences of getting unreliable data and measurements on this would have a negative impact on the UX of your product.
<a href="https://uxpajournal.org/cultural-linguistic-usability-testing/">Another study by UX Journal of User Experience</a> highlights how important clarity is in surveys. While most people in their study interpreted the question “How do you feel about … ?” as “What’s your opinion on …?”, some took it literally and proceeded to describe their emotions instead.
This means that even familiar terms can be misinterpreted. To get precise research results, it’s worth defining key terms and concepts to ensure common understanding with participants.
<h3>Globalise Your Glossary</h3>
At Klarna, we often ran into a challenge of inconsistent translation for key terms. A well-defined English term could end up having from three to five different versions in Italian or German. Sometimes, even the same features or app sections could be referred to differently depending on the market — this led to user confusion. 
To address this, we introduced a shared term base — a controlled vocabulary that included:
<ul>
<li>English term,</li>
<li>Definition,</li>
<li>Approved translations for all markets,</li>
<li>Approved and forbidden synonyms.</li>
</ul>
Importantly, the term selection was dictated by user research, not by assumption or personal preferences of the team.
<img src="https://files.smashing.media/articles/why-non-native-content-designers-improve-global-ux/4-controlled-vocabulary-example.jpg" />
If you’re unsure where to begin, <a href="https://www.notion.com/templates/term-base-controlled-vocabulary-for-product-content">use this product content vocabulary template for Notion</a>. Duplicate it for free and start adding your terms.
We used a similar setup. Our new glossary was shared internally across teams, from product to customer service. Results? Reducing the support tickets related to unclear language used in UI (or directions in the user journey) by 18%. This included tasks like finding instructions on how to make a payment (especially with the least popular payment methods like bank transfer), where the late fee details are located, or whether it’s possible to postpone the payment. And yes, all of these features were available, and the team believed they were quite easy to find.
A glossary like this can live as an add-on to your guidelines. This way, you will be able to quickly get up to speed new joiners, keep product copy ready for localisation, and defend your decisions with stakeholders.
<h3>Approach Your Team Growth With An Open Mind</h3>
‘Looking for a native speaker’ still remains a part of the job listing for UX Writers and content designers. There’s no point in assuming it’s intentional discrimination. It’s just a misunderstanding that stems from not fully accepting that our job is more about building the user experience than writing texts that are grammatically correct. 
Here are a few tips to make sure you hire the best talent and treat your applicants fairly:
<ul>
<li>Remove the ‘native speaker’ and ‘fluency’ requirement.</li>
</ul>
Instead, focus on the core part of our job: add ‘clear communicator’, ‘ability to simplify’, or ‘experience writing for a global audience’.
<ul>
<li>Judge the work, not the accent.</li>
</ul>
Over the years, there have been plenty of studies confirming that the accent bias is real — people having an unusual or foreign accent are considered less hirable. While some may argue that it can have an impact on the efficiency of internal communications, it’s not enough to justify the reason to overlook the good work of the applicant. 
My personal experience with the accent is that it mostly depends on the situation you’re in. When I’m in a friendly environment and do not feel anxiety, my English flows much better as I do not overthink how I sound. Ironically, sometimes when I’m in a room with my team full of British native speakers, I sometimes default to my Slavic accent. The question is: does it make my content design expertise or writing any worse? Not in the slightest.
Therefore, make sure you judge the portfolios, the ideas behind the interview answers, and whiteboard challenge presentations, instead of focusing on whether the candidate’s accent implies that they might not be good writers.
Good Global Products Need Great Non-native Content Design
Non-native content designers do not have a negative impact on your team’s writing. They sharpen it by helping you look at your content through the lens of your real user base. In the globalised world, linguistic purity no longer benefits your product’s user experience. 
Try these practical steps and leverage the non-native speaking lens of your content designers to design better international products.
]]></content:encoded>
<author>hello@smashingmagazine.com (Oleksii Tkachenko)</author>
<enclosure url="http://files.smashing.media/articles/why-non-native-content-designers-improve-global-ux/why-non-native-content-designers-improve-global-ux.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Tiny Screens, Big Impact: The Forgotten Art Of Developing Web Apps For Feature Phones]]></title>
<link>https://smashingmagazine.com/2025/07/tiny-screens-big-impact-developing-web-apps-feature-phones/</link>
<guid>https://smashingmagazine.com/2025/07/tiny-screens-big-impact-developing-web-apps-feature-phones/</guid>
<pubDate>Wed, 16 Jul 2025 15:00:00 GMT</pubDate>
<description><![CDATA[Learn why flip phones still matter in 2025, and how you can build and launch web apps for these tiny devices.]]></description>
<content:encoded><![CDATA[Flip phones aren’t dead. On the contrary, <a href="https://www.sellcell.com/how-many-mobile-phones-are-sold-each-year/#sources-and-media-contacts">200+ million non-smartphones</a> are sold annually. That’s roughly equivalent to the number of <a href="https://increv.co/academy/iphone-users/">iPhones sold in 2024</a>. Even in the United States, <a href="https://www.counterpointresearch.com/insights/us-feature-phone-market/">millions of flip phones</a> are sold each year. As network operators struggle to <a href="https://restofworld.org/2025/shutting-down-2g-networks-phones-obsolete/">shut down 2G service</a>, new incentives are offered to encourage device upgrades that further increase demand for budget-friendly flip phones. This is especially true across South Asia and Africa, where an iPhone is unaffordable for the vast majority of the population (it takes <a href="https://www.indiatoday.in/business/story/study-shows-people-us-need-to-work-5-days-to-buy-iphone-16-how-long-do-indians-need-2603531-2024-09-20">two months of work</a> on an average Indian salary to afford the cheapest iPhone).
Like their “smart” counterparts, flip phones (technically, this category is called “Feature Phones”) are becoming increasingly more capable. They now offer features you’d expect from a smartphone, like 4G, WiFi, Bluetooth, and the ability to run apps. If you are targeting users in South Asia and Africa, or niches in Europe and North America, there are flip phone app platforms like <a href="https://www.cloudphone.tech/">Cloud Phone</a> and <a href="https://www.kaiostech.com/">KaiOS</a>. Building for these platforms is similar to developing a Progressive Web App (PWA), with distribution managed across several app stores.
<blockquote>Jargon Busting Flip phones go by many names. Non-smartphones are jokingly called “dumb phones”. The technology industry calls this device category “feature phones”. Regionally, they are also known as button phones or basic mobiles in Europe, and keypad mobiles in India. They all share a few traits: they are budget phones with small screens and physical buttons.</blockquote>
Why Build Apps For Flip Phones?
It’s a common misconception that people who use flip phones do not want apps. In fact, many first-time internet users are eager to discover new content and services. While this market isn’t as lucrative as Apple’s App Store, there are a few reasons why you should build for flip phones.
<ul>
<li>Organic Growth You do not need to pay to acquire flip phone users. Unlike Android or IOS, where the cost per install (CPI) averages around <a href="https://www.gogochart.com/insights/7-things-you-need-to-know-about-mobile-app-cost-per-install-values/">$2.5-3.3 per install</a> according to GoGoChart, flip phone apps generate substantial organic downloads. </li>
<li>Brand Introduction When flip phone users eventually upgrade to smartphones, they will search for the apps they are already familiar with. This will, in turn, generate more installs on the Google Play Store and, to a lesser extent, the Apple App Store.</li>
<li>Low Competition There are <a href="https://kaios.app/">~1,700 KaiOS apps</a> and fewer Cloud Phone widgets. Meanwhile, Google Play has over <a href="https://www.appbrain.com/stats/number-of-android-apps">1.55 million Android apps</a> to choose from. It is much easier to stand out as one in a thousand than one in a million.</li>
</ul>
Technical Foundations
Flip phones could not always run apps. It wasn’t until the <a href="https://www.theguardian.com/technology/appsblog/2011/jun/07/nokia-ovi-store">Ovi Store</a> (later renamed to the “Nokia Store”) launched in 2009, a year after Apple’s flagship iPhone launched, that flip phones got installable, third-party applications. At the time, apps were written for the fragmented Java 2 Mobile Edition (J2ME) runtime, available only on select Nokia models, and often required integration with poorly-documented, proprietary packages like the <a href="https://nikita36078.github.io/J2ME_Docs/docs/nokiaapi2/">Nokia UI API</a>.
Today, flip phone platforms have rejected native runtimes in favor of standard web technologies in an effort to reduce barriers to entry and attract a wider pool of software developers. Apps running on modern flip phones are primarily written in languages many developers are familiar with — HTML, CSS, and JavaScript — and with them, a set of trade-offs and considerations.
<h3>Hardware</h3>
Flip phones are affordable because they use low-end, often outdated, hardware. On the bottom end are budget phones with a real-time operating system (RTOS) running on chips like the <a href="https://www.unisoc.com/en_us/home/TGNSJ-T107-1">Unisoc T107</a> with as little as 16MB of RAM. These phones typically support Opera Mini and Cloud Phone. At the upper end is the recently-released <a href="https://www.tcl.com/us/en/products/mobile/flip-series/flip-4-5g">TCL Flip 4</a> running KaiOS 4.0 on the Qualcomm Snapdragon 4s with 1GB of RAM.
While it is difficult to accurately compare such different hardware, Apple’s latest iPhone 16 Pro has 500x more memory (8GB RAM) and supports download speeds up to 1,000x faster than a low-end flip phone (4G LTE CAT-1).
<h3>Performance</h3>
You might think that flip phone apps are easily limited by the scarce available resources of budget hardware. This is the case for KaiOS, since apps are executed on the device. Code needs to be minified, thumbnails downsized, and performance evaluated across a range of real devices. You cannot simply test on your desktop with a small viewport.
However, as <a href="https://tigercosmos.xyz/post/2018/09/puffin/">remote browsers</a>, both Cloud Phone and Opera Mini overcome hardware constraints by offloading computationally expensive rendering to servers. This means performance is generally comparable to modern desktops, but can lead to a few quirky and, at times, unintuitive characteristics.
For instance, if your app fetches a 1MB file to display a data table, this does not consume 1MB of the user’s mobile data. Only changes to the screen contents get streamed to the user, consuming bandwidth. On the other hand, data is consumed by complex animations and page transitions, because each frame is at least a partial screen refresh. Despite this quirk, Opera Mini estimates it saves up to <a href="https://blogs.opera.com/africa/2021/11/free-data-mtn-south-africa/">90% of data</a> compared to conventional browsers.
<h3>Security</h3>
<a href="https://www.trevorlasn.com/blog/the-problem-with-local-storage">Do not store sensitive data</a> in browser storage. This holds true for flip phones, where the security concerns are similar to those of traditional web browsers. Although apps cannot generally access data from other apps, KaiOS does not encrypt client-side data. The implications are different for remote browsers.
Opera Mini <a href="https://help.opera.com/en/opera-mini-and-javascript/">does not support client-side storage</a> at all, while Cloud Phone <a href="https://developer.cloudfone.com/docs/reference/data-storage/#secure-cloud-storage">stores data encrypted</a> in its data centers and not on the user’s phone.
Design For Modern Flip Phones
<h3>Simplify, Don’t Shrink-to-fit</h3>
Despite their staying power, these devices go largely ignored by nearly every web development framework and library. Popular front-end web frameworks like <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/">Bootstrap v5</a> categorize all screens below 576px as extra small. Another popular choice, <a href="https://tailwindcss.com/docs/responsive-design">Tailwind</a>, sets the smallest CSS breakpoint — a specific width where the layout changes to accommodate an optimal viewing experience across different devices — even higher at 40em (640px). Design industry experts like <a href="https://www.nngroup.com/articles/breakpoints-in-responsive-design/">Norman Nielsen suggest the smallest breakpoint</a>, “is intended for mobile and generally is up to 500px.” Standards like these advocate for a one-size-fits-all approach on small screens, but some small design changes can make a big difference for new internet users.
Small screens vary considerably in size, resolution, contrast, and brightness.
Small screen usability requires distinct design considerations — not a shrink-to-fit model. While all of these devices have a screen width smaller than the smallest common breakpoints, treating them equally would be a mistake.
<img src="https://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/1-apps-shrink-poorly.png" />
<img src="https://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/2-apps-shrink-well.png" />
Most websites render too large for flip phones. They use fonts that are too big, graphics that are too detailed, and sticky headers that occupy a quarter of the screen. To make matters worse, many websites <a href="https://www.htmlallthethings.com/blog-posts/how-to-disable-scrolling-in-css">disable horizontal scrolling</a> by hiding content that overflows horizontally. This allows for smooth scrolling on a touchscreen, but also makes it impossible to read text that extends beyond the viewport on flip phones.
The table below includes physical display size, resolution, and examples to better understand the diversity of small screens across flip phones and budget smartphones.
<table>
<thead>
<tr>
<th>Resolution</th>
<th>Display Size</th>
<th>Pixel Size</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>QQVGA</td>
<td>1.8”</td>
<td>128×160</td>
<td><a href="https://vietteltelecom.vn/tmdt-device/sumo-4g-v1">Viettel Sumo 4G V1</a></td>
</tr>
<tr>
<td>QVGA</td>
<td>2.4”</td>
<td>240×320</td>
<td><a href="https://www.hmd.com/en_int/nokia-235-4g-2024?sku=1GF026GPG3L01">Nokia 235 4G</a></td>
</tr>
<tr>
<td>QVGA (Square)</td>
<td>2.4”</td>
<td>240×240</td>
<td><a href="https://www.reddit.com/r/dumbphones/comments/1j7gsxk/frog_pocket_2_mwc_barcelona_2025/?tl=it">Frog Pocket2</a></td>
</tr>
<tr>
<td>HVGA (480p)</td>
<td>2.8-3.5”</td>
<td>320×480</td>
<td><a href="https://www.gsmarena.com/blackberry_9720-5625.php">BlackBerry 9720</a></td>
</tr>
<tr>
<td>VGA</td>
<td>2.8-3.5”</td>
<td>480×640</td>
<td><a href="https://www.t-mobile.com/support/tutorials/device/cat/s22-flip/specifications">Cat S22</a></td>
</tr>
<tr>
<td>WVGA</td>
<td>2.8-3.5”</td>
<td>480×800</td>
<td><a href="https://www.gsmarena.com/hp_pre_3-3770.php">HP Pre 3</a></td>
</tr>
<tr>
<td>FWVGA+</td>
<td>5”</td>
<td>480×960</td>
<td><a href="https://www.alcatelmobile.com/product/smartphone/alcatel1/alcatel-1/">Alcatel 1</a></td>
</tr>
</tbody>
</table>
Note: Flip phones have small screens typically between 1.8”–2.8” with a resolution of 240x320 (QVGA) or 128x160 (QQVGA). For comparison, an Apple Watch Series 10 has a 1.8” screen with a resolution of 416x496. By modern standards, flip phone displays are small with low resolution, pixel density, contrast, and brightness.
Develop For Small Screens
Add custom, named breakpoints to your framework’s defaults, rather than manually using media queries to override layout dimensions defined by classes.
<h4>Bootstrap v5</h4>
Bootstrap defines a map, <code>$grid-breakpoints</code>, in the _variables.scss Sass file that contains the default breakpoints from SM (576px) to XXL (1400px). Use the <code>map-merge()</code> function to extend the default and add your own breakpoint.
<pre><code>@import "node_modules/bootstrap/scss/functions";
$grid-breakpoints: map-merge($grid-breakpoints, ("xs": 320px));
</code></pre>
<h4>Tailwind v4</h4>
Tailwind allows you to extend the default theme in the tailwind.config.js configuration file. Use the <code>extend</code> key to define new breakpoints.
<pre><code>const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
screens: {
"xs": "320px",
...defaultTheme.screens,
},
},
},
};
</code></pre>
The Key(board) To Success
Successful flip phone apps support keyboard navigation using the directional pad (D-pad). This is the same navigation pattern as TV remotes: four arrow keys (up, down, left, right) and the central button. To build a great flip phone-optimized app, provide a navigation scheme where the user can quickly learn how to navigate your app using these limited controls. Ensure users can navigate to all visible controls on the screen.
<a href="https://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/3-navigating-podlp.gif"><img src="https://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/3-navigating-podlp.gif" /></a>Navigating PodLP using d-pad (left) and a virtual cursor (right).
Although some flip phone platforms support spatial navigation using an emulated cursor, it is not universally available and creates a worse user experience. Moreover, while apps that support keyboard navigation will work with an emulated cursor, this isn’t necessarily true the other way around. Opera Mini Native only offers a virtual cursor, Cloud Phone only offers spatial navigation, and KaiOS <a href="https://developer.kaiostech.com/docs/getting-started/main-concepts/emulated-cursor/">supports both</a>.
If you develop with keyboard accessibility in mind, supporting flip phone navigation is easy. As general guidelines, <a href="https://theadminbar.com/accessibility-weekly/focus-outlines/">never remove a focus outline</a>. Instead, override default styles and use <a href="https://dev.to/hybrid_alex/better-css-outlines-with-box-shadows-1k7j">box shadows</a> to match your app’s color scheme while fitting appropriately. Autofocus on the first item in a sequence — list or grid — but be careful to avoid <a href="https://www.boia.org/blog/avoid-keyboard-traps-to-make-your-site-more-accessible">keyboard traps</a>. Finally, make sure that the lists scroll the newly-focused item completely into view.
<h3>Don’t Make Users Type</h3>
If you have ever been frustrated typing a long message on your smartphone, only to have it accidentally erased, now imagine that frustration when you typed the message using <a href="https://en.wikipedia.org/wiki/T9_%28predictive_text%29">T9</a> on a flip phone. Despite advancements in predictive typing, it’s a chore to fill forms and compose even a single 180-character Tweet with just nine keys.
<blockquote>Whatever you do, don’t make flip phone users type!</blockquote>
Fortunately, it is easy to adapt designs to require less typing. Prefer numbers whenever possible. Allow users to register using their phone number (which is easy to type), send a PIN code or one-time password (OTPs) that contains only numbers, and look up address details from a postal code. Each of these saves tremendous time and avoids frustration that often leads to user attrition.
Alternatively, integrate with single-sign-on (SSO) providers to “Log in with Google,” so users do not have to retype passwords that security teams require to be at least eight characters long and contain a letter, number, and symbol. Just keep in mind that many new internet users won’t have an email address. They may not know how to access it, or their phone might not be able to access emails.
Finally, allow users to search by voice when it is available. As difficult as it is typing English using T9, it’s much harder typing a language like Tamil, which has over 90M speakers across South India and Sri Lanka. Despite decades of advancement, technologies like auto-complete and predictive typing are seldom available for such languages. While imperfect, there are AI models like <a href="https://huggingface.co/vasista22/whisper-tamil-medium">Whisper Tamil</a> that can perform speech-to-text, thanks to researchers at universities like the <a href="https://asr.iitm.ac.in/">Speech Lab at IIT Madras</a>.
Flip Phone Browsers And Operating Systems
Another challenge with developing web apps for flip phones is their fragmented ecosystem. Various companies have used different approaches to allow websites and apps to run on limited hardware. There are at least three major web-based platforms that all operate differently:
<ol>
<li><a href="https://developer.cloudfone.com/">Cloud Phone</a> is the most recent solution, launched in December 2023, using a modern <a href="https://www.puffin.com/">Puffin</a> (Chromium) based remote browser that serves as an app store.</li>
<li><a href="https://www.kaiostech.com/">KaiOS</a>, launched in 2016 using <a href="https://en.wikipedia.org/wiki/Firefox_OS">Firefox OS</a> as its foundation, is a mobile operating system where the entire system is a web browser.</li>
<li><a href="https://www.opera.com/mobile/basic-phones">Opera Mini</a> Native is by far the oldest, launched in 2005 as an ad-supported remote browser that still uses the decade-old, discontinued <a href="https://en.wikipedia.org/wiki/Presto_(browser_engine">Presto engine</a>).</li>
</ol>
Although both platforms are remote browsers, there are significant differences between <a href="https://developer.cloudfone.com/blog/cloud-phone-vs.-opera-mini/">Cloud Phone and Opera Mini</a> that are not immediately apparent.
<img src="https://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/4-flip-phones.jpg" />
<table>
<thead>
<tr>
<th>Platform</th>
<th>Cons</th>
<th>Pros</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cloud Phone</td>
<td><ul><li>Missing features like WebPush</li><li>No offline support</li><li>Monetization not provided</li></ul></td>
<td><ul><li>Modern Chromium v128+ engine</li><li>Rich multimedia support</li><li>No optimizations needed</li><li>Actively developed</li><li>100+ models launched in 2024</li></ul></td>
</tr>
<tr>
<td>KaiOS</td>
<td><ul><li>Outdated Gecko engine</li><li>Hardware constrained</li><li>Few models released in 2024</li><li><a href="https://kaiads.com/">KaiAds</a> integration required</li><li>Two app stores</li></ul></td>
<td><ul><li>Full offline support</li><li>APIs for low-level integration</li><li>Apps can be <a href="https://developer.kaiostech.com/docs/development/packaged-or-hosted/">packaged or hosted</a></li></ul></td>
</tr>
<tr>
<td>Opera Mini Native</td>
<td><ul><li>Discontinued Presto engine</li><li>~2.5s async execution limit</li><li>Limited ES5 support</li><li>No multimedia support</li><li>No app store
Last updated in 2020</li></ul></td>
<td><ul><li>Preinstalled on hundreds of millions of phones</li><li>Partial offline support</li><li>Stable, cross-platform</li></ul></td>
</tr>
</tbody>
</table>
Flip phones have come a long way, but each platform supports different capabilities. You may need to remove or scale back features based on what is supported. It is best to target the lowest common denominator that is feasible for your application.
For information-heavy news websites, wikis, or blogs, Opera Mini’s outdated technology works well enough. For video streaming services, both Cloud Phone and KaiOS work well. Conversely, remote browsers like Opera Mini and Cloud Phone cannot handle high frame rates, so only KaiOS is suitable for real-time interactive games. Just like with design, there is no one-size-fits-all approach to flip phone development. Even though all platforms are web-based, they require different tradeoffs.
Tiny Screens, Big Impact
The flip phone market is growing, particularly for 4G-enabled models. Reliance’s JioPhone is among the most successful models, selling more than <a href="https://kalingatv.com/business/reliance-jio-has-now-sold-135-million-units-of-jiophone-devices/">135 million units</a> of its flagship KaiOS-enabled phone. The company plans to increase 4G flip phone rollout steadily as it migrates India’s 250 million 2G users to 4G and 5G.
Similar campaigns are underway across emerging markets, like <a href="https://www.telecoms.com/public-cloud/vodacom-south-africa-launches-14-cloud-based-smartphone">Vodacom’s $14 Mobicel S4</a>, a Cloud phone-enabled device in South Africa, and <a href="https://e.vnexpress.net/news/business/companies/viettel-to-gift-4g-phones-to-700-000-2g-subscribers-4795412.html">Viettel’s gifting 700,000 4G flip phones</a> to current 2G subscribers to upgrade users in remote and rural areas.
Estimates of the total active flip phone market size are difficult to come by, and harder still to find a breakdown by platform. KaiOS claims to enable “<a href="https://www.kaiostech.com/developers/">over 160 million phones worldwide</a>,” while “<a href="https://www.opera.com/mobile/basic-phones">over 300 million people use Opera Mini</a> to stay connected.” Just a year after launch, Cloud Phone states that, “<a href="https://www.theregister.com/2025/01/02/cloudmosa_cloudphone_4g_feature_phone/">one million Cloud Phone users</a> already access the service from 90 countries.” By most estimates, there are already hundreds of millions of web-enabled flip phone users eager to discover new products and services.
Conclusion
Hundreds of millions still rely on flip phones to stay connected. Yet, these users go largely ignored even by products that target emerging markets. Modern software development often prioritizes the latest and greatest over finding ways to affordably serve more than <a href="https://www.itu.int/en/mediacentre/Pages/PR-2023-09-12-universal-and-meaningful-connectivity-by-2030.aspx">2.6 billion unconnected people</a>. If you are not designing for small screens using <a href="https://www.smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable/">keyboard navigation</a>, you’re shutting out an entire population from accessing your service.
<a href="https://www.htmlallthethings.com/blog-posts/why-feature-phones-are-important-in-2025">Flip phones still matter in 2025</a>. With ongoing network transitions, millions will upgrade, and millions more will connect for the first time using 4G flip phones. This creates an opportunity to put your app into the hands of the newly connected. And thanks to modern remote browser technology, it is now easier than ever to build and launch your app on flip phones without costly and time-consuming optimizations to function on low-end hardware.
]]></content:encoded>
<author>hello@smashingmagazine.com (Tom Barrasso)</author>
<enclosure url="http://files.smashing.media/articles/tiny-screens-big-impact-developing-web-apps-feature-phones/tiny-screens-big-impact-developing-web-apps-feature-phones.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Design Patterns For AI Interfaces]]></title>
<link>https://smashingmagazine.com/2025/07/design-patterns-ai-interfaces/</link>
<guid>https://smashingmagazine.com/2025/07/design-patterns-ai-interfaces/</guid>
<pubDate>Mon, 14 Jul 2025 15:00:00 GMT</pubDate>
<description><![CDATA[Designing a new AI feature? Where do you even begin? Here’s a simple, practical overview with useful design patterns for better AI experiences.]]></description>
<content:encoded><![CDATA[So you need to design a new AI feature for your product. How would you start? How do you design flows and interactions? And how do you ensure that that new feature doesn’t get abandoned by users after a few runs?
In this article, I’d love to share a very simple but systematic approach to how I think about designing AI experiences. Hopefully, it will help you get a bit more clarity about how to get started.
This article is part of our ongoing series on <a href="/category/ux">UX</a>. You can find more details on design patterns and UX strategy in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 — with live UX training coming up soon. <a href="https://smart-interface-design-patterns.com">Jump to table of contents</a>.
The Receding Role of AI Chat
One of the key recent shifts is a slow move away from traditional “chat-alike” AI interfaces. As Luke Wroblewski <a href="https://lukew.com/ff/entry.asp?2105">wrote</a>, when agents can use multiple tools, call other agents and run in the background, users orchestrate AI work more — there’s a lot less chatting back and forth.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/1-ai-experience-paradigm.jpg" />
In fact, chatbots are rarely a great experience paradigm — mostly because the burden of articulating intent efficiently lies on the user. But in practice, it’s remarkably difficult to do well and very time-consuming.
Chat doesn’t go away, of course, but it’s being complemented with task-oriented UIs — temperature controls, knobs, sliders, buttons, semantic spreadsheets, infinite canvases — with AI providing predefined options, presets, and templates.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/2-agentic-ai-design-patterns.jpg" />
There, AI emphasizes the work, the plan, the tasks — the outcome, instead of the chat input. The results are experiences that truly amplify value for users by sprinkling a bit of AI in places where it delivers real value to real users.
To design better AI experiences, we need to study 5 key areas that we need to shape.
Input UX: Expressing Intent
Conversational AI is a very slow way of helping users express and articulate their intent. Usability tests <a href="https://www.nngroup.com/articles/accordion-editing-apple-picking/">show</a> that users often get lost in editing, reviewing, typing, and re-typing. It’s painfully slow, often taking 30-60 seconds for input.
As it turns out, people have a hard time expressing their intent well. In fact, instead of writing prompts manually, it's a good idea to <a href="https://spectrum.ieee.org/prompt-engineering-is-dead">ask AI to write a prompt</a> to feed itself.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/3-flora-ai.jpg" />
With <a href="https://www.florafauna.ai/">Flora AI</a>, users can still write prompts, but they visualize their intent with nodes by connecting various sources visually. Instead of elaborately explaining to AI how we need the pipeline to work, we attach nodes and commands on a canvas.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/4-illustration-output-ux.jpg" />
With input for AI, being precise is slow and challenging. Instead, we can abstract away the object we want to manipulate, and give AI precise input by moving that abstracted object on a canvas. That’s what <a href="https://www.krea.ai/">Krea.ai</a> does.
In summary, we can minimize the burden of typing prompts manually — with AI-generated pre-prompts, prompt extensions, query builders, and also voice input.
Output UX: Displaying Outcomes
AI output doesn't have to be merely plain text or a list of bullet points. It must be helpful to drive people to insights, faster. For example, we could visualize output by creating additional explanations based on the user’s goal and motivations.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/5-illustration-output-ux.jpg" />
For example, Amelia Wattenberger <a href="https://wattenberger.com/thoughts/boo-chatbots">visualized AI output</a> for her text editor PenPal by adding style lenses to explore the content from. The output could be visualized in sentence lengths and scales Sad — Happy, Concrete — Abstract, and so on.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/6-aino-ai.jpg" />
The outcome could also be visualized on a map, which, of course, is expected for an <a href="https://www.aino.world/">AI GIS analyst</a>. Also, users can access individual data layers, turn them on and off, and hence explore the data on the map.
We can also use <a href="https://www.nngroup.com/articles/accordion-editing-apple-picking/">forced ranking</a> and prioritizations to suggest best options and avoid choice paralysis — even if a user asks for top 10 recommendations. We can think about ways to present results as a data table, or a dashboard, or a visualization on a map, or as a structured JSON file, for example.
Refinement UX: Tweaking Output
Users often need to <a href="https://www.nngroup.com/articles/accordion-editing-apple-picking/">cherry-pick</a> some bits from the AI output and bring them together in a new place — and often they need to expand on one section, synthesize bits from another section, or just refine the outcome to meet their needs.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/7-adobe-firefly.jpg" />
Refinement is usually the most painful part of the experience, with many fine details being left to users to explain elaborately. But we can use good old-fashioned UI controls like knobs, sliders, buttons, and so on to improve that experience, similar to how Adobe Firefly does it (image above).
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/8-illustration-output-ux.jpg" />
We can also use presets, bookmarks, and allow users to highlight specific parts of the outcome that they’d like to change — with contextual prompts acting on highlighted parts of the output, rather than global prompts.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/9-illustration-output-ux.jpg" />
AI Actions: Tasks To Complete
With AI agents, we can now also allow users to initiate tasks that AI can perform on their behalf, such as scheduling events, planning, and deep research. We could also ask to sort results or filter them in a specific way.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/10-illustration-output-ux.jpg" />
But we can also add features to help users use AI output better — e.g., by visualizing it, making it shareable, allowing transformations between formats, or also posting to Slack, Jira, and so on.
AI Integration: Where Work Happens
Many AI interactions are locked within a specific product, but good AI experiences happen where the actual work happens. It would be quite unusual to expect a dedicated section for Autocomplete, for example, but we do so for AI features.
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/11-illustration-ai-integration-ux.png" />
<img src="https://files.smashing.media/articles/design-patterns-ai-interfaces/12-dovetail.jpg" />
The actual boost in productivity comes when users rely on AI as a co-pilot or little helper in the tools they use daily for work. It’s seamless integrations into Slack, Teams, Jira, GitHub, and so on — the tools that people use anyway. <a href="https://www.diabrowser.com/">Dia Browser</a> and <a href="https://dovetail.com/">Dovetail</a> are great examples of it in action.
Wrapping Up
Along these five areas, we can explore ways to minimize the cost of interaction with a textbox, and allow users to interact with the points of interest directly, by tapping, clicking, selecting, highlighting, and bookmarking.
Many products are obsessed with being AI-first. But you might be way better off by being AI-second instead. The difference is that we focus on user needs and sprinkle a bit of AI across customer journeys where it actually adds value.
And AI products don’t have to be AI-only. There is a lot of value in mapping into the mental models that people have adopted over the years, and enhance them with AI, similar to how we do it with browsers’ autofill, rather than leaving users in front of a frightening and omnipresent text box.
Useful Resources
<ul>
<li><a href="https://uxdesign.cc/where-should-ai-sit-in-your-ui-1710a258390e">Where Should AI Sit In Your UI?</a>, by Sharang Sharma</li>
<li><a href="https://shapeof.ai/">Shape of AI: Design Patterns</a>, by Emily Campbell</li>
<li><a href="https://www.aiuxpatterns.com/">AI UX Patterns</a>, by Luke Bennis</li>
<li><a href="https://catalogue.projectsbyif.com/">Design Patterns For Trust With AI</a>, via Sarah Gold</li>
<li><a href="https://pair.withgoogle.com/guidebook/patterns">AI Guidebook Design Patterns</a>, by Google</li>
<li><a href="https://lukew.com/ff/entry.asp?2093">Usable Chat Interfaces to AI Models</a>, by Luke Wroblewski</li>
<li><a href="https://lukew.com/ff/entry.asp?2105">The Receding Role of AI Chat</a>, by Luke Wroblewski</li>
<li><a href="https://lukew.com/ff/entry.asp?2106">Agent Management Interface Patterns</a>, by Luke Wroblewski</li>
<li><a href="https://uxdesign.cc/designing-for-ai-engineers-what-ui-patterns-and-principles-you-need-to-know-8b16a5b62a61">Designing for AI Engineers</a>, by Eve Weinberg</li>
</ul>
Meet “Smart Interface Design Patterns”
You can find more details on design patterns and UX in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our 15h-video course with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>. Use code <a href="https://smart-interface-design-patterns.com">BIRDIE</a> to save 15% off.
<a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design & UX.
<div><div><ul><li><a href="#">
Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 699.00
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">
Get Video + UX Training<div></div></a>25 video lessons (15h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>. 100 days money-back-guarantee.</div><div><h3>Video only</h3><div>$ 300.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>40 video lessons (15h). Updated yearly. 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></div></div></div>
]]></content:encoded>
<author>hello@smashingmagazine.com (Vitaly Friedman)</author>
<enclosure url="http://files.smashing.media/articles/design-patterns-ai-interfaces/design-patterns-ai-interfaces.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Unmasking The Magic: The Wizard Of Oz Method For UX Research]]></title>
<link>https://smashingmagazine.com/2025/07/unmasking-magic-wizard-oz-method-ux-research/</link>
<guid>https://smashingmagazine.com/2025/07/unmasking-magic-wizard-oz-method-ux-research/</guid>
<pubDate>Thu, 10 Jul 2025 10:00:00 GMT</pubDate>
<description><![CDATA[The Wizard of Oz method is a proven UX research tool that simulates real interactions to uncover authentic user behavior. Victor Yocco unpacks the core principles of the WOZ method, explores advanced real-world applications, and highlights its unique value, including its relevance in the emerging field of agentic AI.]]></description>
<content:encoded><![CDATA[New technologies and innovative concepts frequently enter the product development lifecycle, promising to revolutionize user experiences. However, even the most ingenious ideas risk failure without a fundamental grasp of user interaction with these new experiences. 
Consider the plight of the <a href="https://en.wikipedia.org/wiki/Power_Glove">Nintendo Power Glove</a>. Despite being a commercial success (selling over 1 million units), its release in late 1989 was followed by its discontinuation less than a full year later in 1990. The two games created solely for the Power Glove sold poorly, and there was little use for the Glove with Nintendo’s already popular traditional console games.
A large part of the failure was due to audience reaction once the product (which allegedly was developed in 8 weeks) was cumbersome and unintuitive. Users found <a href="https://electronics.howstuffworks.com/nintendo-power-glove.htm">syncing the glove</a> to the moves in specific games to be extremely frustrating, as it required a process of coding the moves into the glove’s preset move buttons and then remembering which buttons would generate which move. With the more modern success of Nintendo’s WII and other movement-based controller consoles and games, we can see the Power Glove was a concept ahead of its time.
<img src="https://files.smashing.media/articles/unmasking-magic-wizard-oz-method-ux-research/1-nintendo-nes-power-glove.jpg" />
If Power Glove’s developers wanted to conduct effective research prior to building it out, they would have needed to look beyond traditional methods, such as surveys and interviews, to understand how a user might truly interact with the Glove. How could this have been done without a functional prototype and slowing down the overall development process?
Enter the Wizard of Oz method, a potent tool for bridging the chasm between abstract concepts and tangible user understanding, as one potential option. This technique simulates a fully functional system, yet a human operator (“the Wizard”) discreetly orchestrates the experience. This allows researchers to gather authentic user reactions and insights without the prerequisite of a fully built product.
The Wizard of Oz (WOZ) method is named in tribute to the similarly named book by Frank L. Baum. In the book, the Wizard is simply a man hidden behind a curtain, manipulating the reality of those who travel the land of Oz. Dorothy, the protagonist, exposes the Wizard for what he is, essentially an illusion or a con who is deceiving those who believe him to be omnipotent. Similarly, WOZ takes technologies that may or may not currently exist and emulates them in a way that should convince a research participant they are using an existing system or tool.
WOZ enables the exploration of user needs, validation of nascent concepts, and mitigation of development risks, particularly with complex or emerging technologies. 
The product team in our above example might have used this method to have users simulate the actions of wearing the glove, programming moves into the glove, and playing games without needing a fully functional system. This could have uncovered the illogical situation of asking laypeople to code their hardware to be responsive to a game, show the frustration one encounters when needing to recode the device when changing out games, and also the cumbersome layout of the controls on the physical device (even if they’d used a cardboard glove with simulated controls drawn in crayon on the appropriate locations.
Jeff Kelley <a href="https://uxpajournal.org/wp-content/uploads/sites/7/pdf/JUS_Kelley_May2018.pdf">credits himself</a> (PDF) with coining the term WOZ method in 1980 to describe the research method he employed in his dissertation. However, Paula Roe <a href="https://www.telefonica.com/en/communication-room/blog/wizard-oz-technique-relation-artificial-intelligence/">credits Don Norman and Allan Munro</a> for using the method as early as 1973 to conduct testing on an airport automated travel assistant. Regardless of who originated the method, both parties agree that it gained prominence when IBM later used it to conduct studies on a speech-to-text tool known as The Listening Typewriter (see Image below).
<img src="https://files.smashing.media/articles/unmasking-magic-wizard-oz-method-ux-research/2-wizard-of-oz-testing.png" />
In this article, I’ll cover the core principles of the WOZ method, explore advanced applications taken from practical experience, and demonstrate its unique value through real-world examples, including its application to the field of agentic AI. UX practitioners can use the WOZ method as another tool to unlock user insights and craft human-centered products and experiences.
The Yellow Brick Road: Core Principles And Mechanics
The WOZ method operates on the premise that users believe they are interacting with an autonomous system while a human wizard manages the system’s responses behind the scenes. This individual, often positioned remotely (or off-screen), interprets user inputs and generates outputs that mimic the anticipated functionality of the experience.
<h3>Cast Of Characters</h3>
A successful WOZ study involves several key roles:
<ul>
<li>The User The participant who engages with what they perceive as the functional system.</li>
<li>The Facilitator The researcher who guides the user through predefined tasks and observes their behavior and reactions.</li>
<li>The Wizard The individual manipulates the system’s behavior in real-time, providing responses to user inputs.</li>
<li>The Observer (Optional) An additional researcher who observes the session without direct interaction, allowing for a secondary perspective on user behavior.</li>
</ul>
<h3>Setting The Stage For Believability: Leaving Kansas Behind</h3>
Creating a convincing illusion is key to the success of a WOZ study. This necessitates careful planning of the research environment and the tasks users will undertake. Consider a study evaluating a new voice command system for smart home devices. The research setup might involve a physical mock-up of a smart speaker and predefined scenarios like “Play my favorite music” or “Dim the living room lights.” The wizard, listening remotely, would then trigger the appropriate responses (e.g., playing a song, verbally confirming the lights are dimmed).
Or perhaps it is a screen-based experience testing a new AI-powered chatbot. You have users entering commands into a text box, with another member of the product team providing responses simultaneously using a tool like Figma/Figjam, Miro, Mural, or other cloud-based software that allows multiple users to collaborate simultaneously (the author has no affiliation with any of the mentioned products).
<h4>The Art Of Illusion</h4>
Maintaining the illusion of a genuine system requires the following:
<ul>
<li>Timely and Natural Responses The wizard must react to user inputs with minimal delay and in a manner consistent with expected system behavior. Hesitation or unnatural phrasing can break the illusion.</li>
<li>Consistent System Logic Responses should adhere to a predefined logic. For instance, if a user asks for the weather in a specific city, the wizard should consistently provide accurate information.</li>
<li>Handling the Unexpected Users will inevitably deviate from planned paths. The wizard must possess the adaptability to respond plausibly to unforeseen inputs while preserving the perceived functionality.</li>
</ul>
<h4>Ethical Considerations</h4>
Transparency is crucial, even in a method that involves a degree of deception. Participants should always be debriefed after the session, with a clear explanation of the Wizard of Oz technique and the reasons for its use. Data privacy must be maintained as with any study, and participants should feel comfortable and respected throughout the process.
<h4>Distinguishing The Method</h4>
The WOZ method occupies a unique space within the UX research toolkit:
<ul>
<li>Unlike usability testing, which evaluates existing interfaces, Wizard of Oz explores concepts before significant development.</li>
<li>Distinct from A/B testing, which compares variations of a product’s design, WOZ assesses entirely new functionalities that might otherwise lack context if shown to users.</li>
<li>Compared to traditional prototyping, which often involves static mockups, WOZ offers a dynamic and interactive experience, enabling observation of real-time user behavior with a simulated system.</li>
</ul>
This method proves particularly valuable when exploring truly novel interactions or complex systems where building a fully functional prototype is premature or resource-intensive. It allows researchers to answer fundamental questions about user needs and expectations before committing significant development efforts.
Let’s move beyond the foundational aspects of the WOZ method and explore some more advanced techniques and critical considerations that can elevate its effectiveness.
<h4>Time Savings: WOZ Versus Crude Prototyping</h4>
It’s a fair question to ask whether WOZ is truly a time-saver compared to even cruder prototyping methods like paper prototypes or static digital mockups.
While paper prototypes are incredibly fast to create and test for basic flow and layout, they fundamentally lack dynamic responsiveness. Static mockups offer visual fidelity but cannot simulate complex interactions or personalized outputs.
The true time-saving advantage of the WOZ emerges when testing novel, complex, or AI-driven concepts. It allows researchers to evaluate genuine user interactions and mental models in a seemingly live environment, collecting rich behavioral data that simpler prototypes cannot. This fidelity in simulating a dynamic experience, even with a human behind the curtain, often reveals critical usability or conceptual flaws far earlier and more comprehensively than purely static representations, ultimately preventing costly reworks down the development pipeline.
<h3>Additional Techniques And Considerations</h3>
While the core principle of the WOZ method is straightforward, its true power lies in nuanced application and thoughtful execution. Seasoned practitioners may leverage several advanced techniques to extract richer insights and address more complex research questions.
<h4>Iterative Wizardry</h4>
The WOZ method isn’t necessarily a one-off endeavor. Employing it in iterative cycles can yield significant benefits. Initial rounds might focus on broad concept validation and identifying fundamental user reactions. Subsequent iterations can then refine the simulated functionality based on previous findings.
For instance, after an initial study reveals user confusion with a particular interaction flow, the simulation can be adjusted, and a follow-up study can assess the impact of those changes. This iterative approach allows for a more agile and user-centered exploration of complex experiences.
<h4>Managing Complexity</h4>
Simulating complex systems can be difficult for one wizard. Breaking complex interactions into smaller, manageable steps is crucial. Consider researching a multi-step onboarding process for a new software application. Instead of one person trying to simulate the entire flow, different aspects could be handled sequentially or even by multiple team members coordinating their responses.
Clear communication protocols and well-defined responsibilities are essential in such scenarios to maintain a seamless user experience.
<h4>Measuring Success Beyond Observation</h4>
While qualitative observation is a cornerstone of the WOZ method, defining clear metrics can add a layer of rigor to the findings. These metrics should match research goals. For example, if the goal is to assess the intuitiveness of a new navigation pattern, you might track the number of times users express confusion or the time it takes them to complete specific tasks.
Combining these quantitative measures with qualitative insights provides a more comprehensive understanding of the user experience.
<h4>Integrating With Other Methods</h4>
The WOZ method isn’t an island. Its effectiveness can be amplified by integrating it with other research techniques. Preceding a WOZ study with user interviews can help establish a deeper understanding of user needs and mental models, informing the design of the simulated experience. Following a WOZ study, surveys can gather broader quantitative feedback on the concepts explored. For example, after observing users interact with a simulated AI-powered scheduling tool, a survey could gauge their overall trust and perceived usefulness of such a system.
<h4>When Not To Use WOZ</h4>
WOZ, as with all methods, has limitations. A few examples of scenarios where other methods would likely yield more reliable findings would be:
<ul>
<li>Detailed Usability Testing Humans acting as wizards cannot perfectly replicate the exact experience a user will encounter. WOZ is often best in the early stages, where prototypes are rough drafts, and your team is looking for guidance on a solution that is up for consideration. Testing on a more detailed wireframe or prototype would be preferable to WOZ when you have entered the detailed design phase.</li>
<li>Evaluating extremely complex systems with unpredictable outputs If the system’s responses are extremely varied, require sophisticated real-time calculations that exceed human capacity, or are intended to be genuinely unpredictable, a human may struggle to simulate them convincingly and consistently. This can lead to fatigue, errors, or improvisations that don’t reflect the intended system, thereby compromising the validity of the findings.</li>
</ul>
<h3>Training And Preparedness</h3>
The wizard’s skill is critical to the method’s success. Training the individual(s) who will be simulating the system is essential. This training should cover:
<ul>
<li>Understanding the Research Goals The wizard needs to grasp what the research aims to uncover.</li>
<li>Consistency in Responses Maintaining consistent behavior throughout the sessions is vital for user believability.</li>
<li>Anticipating User Actions While improvisation is sometimes necessary, the wizard should be prepared for common user paths and potential deviations.</li>
<li>Remaining Unbiased The wizard must avoid leading users or injecting their own opinions into the simulation.</li>
<li>Handling Unexpected Inputs Clear protocols for dealing with unforeseen user actions should be established. This might involve having a set of pre-prepared fallback responses or a mechanism for quickly consulting with the facilitator.</li>
</ul>
All of this suggests the need for practice in advance of running the actual session. We shouldn’t forget to have a number of dry runs in which we ask our colleagues or those who are willing to assist to not only participate but also think about possible responses that could stump the wizard or throw things off if the user might provide them during a live session.
I suggest having a believable prepared error statement ready to go for when a user throws a curveball. A simple response from the wizard of “I’m sorry, I am unable to perform that task at this time” might be enough to move the session forward while also capturing a potentially unexpected situation your team can address in the final product design.
<h3>Was This All A Dream? The Art Of The Debrief</h3>
The debriefing session following the WOZ interaction is an additional opportunity to gather rich qualitative data. Beyond asking “What did you think?” effective debriefing involves sharing the purpose of the study and the fact that the experience was simulated.
Researchers should then conduct psychological probing to understand the reasons behind user behavior and reactions. Asking open-ended questions like “Why did you try that?” or “What were you expecting to happen when you clicked that button?” can reveal valuable insights into user mental models and expectations.
Exploring moments of confusion, frustration, or delight in detail can uncover key areas for design improvement. Think about the potential information the Power Gloves’ development team could have uncovered if they’d asked participants what the experience of programming the glove and trying to remember what they’d programmed into which set of keys had been.
Case Studies: Real-World Applications
The value of the WOZ method becomes apparent when examining its application in real-world research scenarios. Here is an in-depth review of one scenario and a quick summary of another study involving WOZ, where this technique proved invaluable in shaping user experiences.
<h3>Unraveling Agentic AI: Understanding User Mental Models</h3>
A significant challenge in the realm of emerging technologies lies in user comprehension. This was particularly evident when our team began exploring the potential of Agentic AI for enterprise HR software.
<a href="https://www.uipath.com/ai/agentic-ai">Agentic AI</a> refers to artificial intelligence systems that can autonomously pursue goals by making decisions, taking actions, and adapting to changing environments with minimal human intervention. <a href="https://www.ibm.com/think/topics/agentic-ai-vs-generative-ai">Unlike generative AI</a> that primarily responds to direct commands or generates content, Agentic AI is designed to understand user intent, independently plan and execute multi-step tasks, and learn from its interactions to improve performance over time. These systems often combine multiple AI models and can reason through complex problems. <a href="https://www.krasamo.com/ai-ux/">For designers</a>, this signifies a shift towards creating experiences where AI acts more like a proactive collaborator or assistant, capable of anticipating needs and taking the initiative to help users achieve their objectives rather than solely relying on explicit user instructions for every step.
Preliminary research, including surveys and initial interviews, suggested that many HR professionals, while intrigued by the concept of AI assistance, struggled to grasp the potential functionality and practical implications of truly agentic systems — those capable of autonomous action and proactive decision-making. We saw they had no reference point for what agentic AI was, even after we attempted relevant analogies to current examples. 
Building a fully functional agentic AI prototype at this exploratory stage was impractical. The underlying algorithms and integrations were complex and time-consuming to develop. Moreover, we risked building a solution based on potentially flawed assumptions about user needs and understanding. The WOZ method offered a solution.
<h4>Setup</h4>
We designed a scenario where HR employees interacted with what they believed was an intelligent AI assistant capable of autonomously handling certain tasks. The facilitator presented users with a web interface where they could request assistance with tasks like “draft a personalized onboarding plan for a new marketing hire” or “identify employees who might benefit from proactive well-being resources based on recent activity.”
Behind the scenes, a designer acted as the wizard. Based on the user’s request and the (simulated) available data, the designer would craft a response that mimicked the output of an agentic AI. For the onboarding plan, this involved assembling pre-written templates and personalizing them with details provided by the user. For the well-being resource identification, the wizard would select a plausible list of employees based on the general indicators discussed in the scenario. 
Crucially, the facilitator encouraged users to interact naturally, asking follow-up questions and exploring the system’s perceived capabilities. For instance, a user might ask, “Can the system also schedule the initial team introductions?” The wizard, guided by pre-defined rules and the overall research goals, would respond accordingly, perhaps with a “Yes, I can automatically propose meeting times based on everyone’s calendars” (again, simulated).
As recommended, we debriefed participants following each session. We began with transparency, explaining the simulation and that we had another live human posting the responses to the queries based on what the participant was saying. Open-ended questions explored initial reactions and envisioned use. Task-specific probing, like “Why did you expect that?” revealed underlying assumptions. We specifically addressed trust and control (“How much trust...? What level of control...?”). To understand mental models, we asked how users thought the “AI” worked. We also solicited improvement suggestions (“What features...?”).
By focusing on the “why” behind user actions and expectations, these debriefings provided rich qualitative data that directly informed subsequent design decisions, particularly around transparency, human oversight, and prioritizing specific, high-value use cases. We also had a research participant who understood agentic AI and could provide additional insight based on that understanding.
<h4>Key Insights</h4>
This WOZ study yielded several crucial insights into user mental models of agentic AI in an HR context:
<ul>
<li>Overestimation of Capabilities Some users initially attributed near-magical abilities to the “AI”, expecting it to understand highly nuanced or ambiguous requests without explicit instruction. This highlighted the need for clear communication about the system’s actual scope and limitations.</li>
<li>Trust and Control A significant theme revolved around trust and control. Users expressed both excitement about the potential time savings and anxiety about relinquishing control over important HR processes. This indicated a need for design solutions that offered transparency into the AI’s decision-making and allowed for human oversight.</li>
<li>Value in Proactive Assistance Users reacted positively to the AI proactively identifying potential issues (like burnout risk), but they emphasized the importance of the AI providing clear reasoning and allowing human HR professionals to review and approve any suggested actions.</li>
<li>Need for Tangible Examples Abstract explanations of agentic AI were insufficient. Users gained a much clearer understanding through these simulated interactions with concrete tasks and outcomes.</li>
</ul>
<h4>Resulting Design Changes</h4>
Based on these findings, we made several key design decisions:
<ul>
<li>Emphasis on Transparency The user interface would need to clearly show the AI’s reasoning and the data it used to make decisions.</li>
<li>Human Oversight and Review Built-in approval workflows would be essential for critical actions, ensuring HR professionals retain control.</li>
<li>Focus on Specific, High-Value Use Cases Instead of trying to build a general-purpose agent, we prioritized specific use cases where agentic capabilities offered clear and demonstrable benefits.</li>
<li>Educational Onboarding The product onboarding would include clear, tangible examples of the AI’s capabilities in action.</li>
</ul>
<h3>Exploring Voice Interaction for In-Car Systems</h3>
In another project, we used the WOZ method to evaluate user interaction with a voice interface for controlling in-car functions. Our research question focused on the naturalness and efficiency of voice commands for tasks like adjusting climate control, navigating to points of interest, and managing media playback.
We set up a car cabin simulator with a microphone and speakers. The wizard, located in an adjacent room, listened to the user’s voice commands and triggered the corresponding actions (simulated through visual changes on a display and audio feedback). This allowed us to identify ambiguous commands, areas of user frustration with voice recognition (even though it was human-powered), and preferences for different phrasing and interaction styles before investing in complex speech recognition technology.
These examples illustrate the versatility and power of the method in addressing a wide range of UX research questions across diverse product types and technological complexities. By simulating functionality, we can gain invaluable insights into user behavior and expectations early in the design process, leading to more user-centered and ultimately more successful products.
The Future of Wizardry: Adapting To Emerging Technologies
The WOZ method, far from being a relic of simpler technological times, retains relevance as we navigate increasingly sophisticated and often opaque emerging technologies.
The WOZ method’s core strength, the ability to simulate complex functionality with human ingenuity, makes it uniquely suited for exploring user interactions with systems that are still in their nascent stages.
WOZ In The Age Of AI
Consider the burgeoning field of AI-powered experiences. Researching user interaction with generative AI, for instance, can be effectively done through WOZ. A wizard could curate and present AI-generated content (text, images, code) in response to user prompts, allowing researchers to assess user perceptions of quality, relevance, and trust without needing a fully trained and integrated AI model.
Similarly, for personalized recommendation systems, a human could simulate the recommendations based on a user’s stated preferences and observed behavior, gathering valuable feedback on the perceived accuracy and helpfulness of such suggestions before algorithmic development.
Even autonomous systems, seemingly the antithesis of human control, can benefit from WOZ studies. By simulating the autonomous behavior in specific scenarios, researchers can explore user comfort levels, identify needs for explainability, and understand how users might want to interact with or override such systems.
Virtual And Augmented Reality
Immersive environments like virtual and augmented reality present new frontiers for user experience research. WOZ can be particularly powerful here.
Imagine testing a novel gesture-based interaction in VR. A researcher tracking the user’s hand movements could trigger corresponding virtual events, allowing for rapid iteration on the intuitiveness and comfort of these interactions without the complexities of fully programmed VR controls. Similarly, in AR, a wizard could remotely trigger the appearance and behavior of virtual objects overlaid onto the real world, gathering user feedback on their placement, relevance, and integration with the physical environment.
The Human Factor Remains Central
Despite the rapid advancements in artificial intelligence and immersive technologies, the fundamental principles of human-centered design remain as relevant as ever. Technology should serve human needs and enhance human capabilities.
The WOZ method inherently focuses on understanding user reactions and behaviors and acts as a crucial anchor in ensuring that technological progress aligns with human values and expectations.
It allows us to inject the “human factor” into the design process of even the most advanced technologies. Doing this may help ensure these innovations are not only technically feasible but also truly usable, desirable, and beneficial.
Conclusion
The WOZ method stands as a powerful and versatile tool in the UX researcher’s toolkit. The WOZ method’s ability to bypass limitations of early-stage development and directly elicit user feedback on conceptual experiences offers invaluable advantages. We’ve explored its core mechanics and covered ways of maximizing its impact. We’ve also examined its practical application through real-world case studies, including its crucial role in understanding user interaction with nascent technologies like agentic AI.
The strategic implementation of the WOZ method provides a potent means of de-risking product development. By validating assumptions, uncovering unexpected user behaviors, and identifying potential usability challenges early on, teams can avoid costly rework and build products that truly resonate with their intended audience.
I encourage all UX practitioners, digital product managers, and those who collaborate with research teams to consider incorporating the WOZ method into their research toolkit. Experiment with its application in diverse scenarios, adapt its techniques to your specific needs and don’t be afraid to have fun with it. Scarecrow costume optional.
]]></content:encoded>
<author>hello@smashingmagazine.com (Victor Yocco)</author>
<enclosure url="http://files.smashing.media/articles/unmasking-magic-wizard-oz-method-ux-research/unmasking-magic-wizard-oz-method-ux-research.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Droip: The Modern Website Builder WordPress Needed]]></title>
<link>https://smashingmagazine.com/2025/07/modern-website-builder-wordpress-droip/</link>
<guid>https://smashingmagazine.com/2025/07/modern-website-builder-wordpress-droip/</guid>
<pubDate>Tue, 08 Jul 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Traditional page builders have shaped how we build WordPress sites for years. Let’s take a closer look at [Droip](https://droip.com/), a modern, no-code visual builder, and explore how it redefines the experience with cleaner performance, full design freedom, and zero plugin dependency.]]></description>
<content:encoded><![CDATA[This article is a sponsored by <a href="https://droip.com/">Droip</a>
Traditional WordPress page builders had their moment. Builders like Elementor, Divi, and Oxygen have been around for years. So long, in fact, that many of us just accepted their limitations as the cost of using WordPress.
But Droip, a relatively new no-code website builder, steps in with a completely different philosophy. It is built to provide Webflow and Framer-level power in WordPress, complete design freedom, built-in performance, and no reliance on third-party plugins.
In this review, we’re putting Droip head-to-head with traditional builders according to all the things that matter when choosing a website builder: 
<ul>
<li>Price,</li>
<li>Affect on website performance,</li>
<li>User-friendliness vs flexibility,</li>
<li>Features,</li>
<li>Theme and layout options.</li>
</ul>
What Is Droip?
<a href="https://droip.com/">Droip</a> is a no-code visual website builder for WordPress, designed to bridge the gap where other page builders fall short. 
Unlike other page builders, Droip is an all-in-one solution that aims to provide everything you need to build websites without any third-party dependencies, shifting from the norm in WordPress!
And the best part? It’s all included in your subscription, so you won’t be hit with surprise upgrades.
Pricing: A Smarter Investment with All Features Included
While most page builders upsell critical features or require multiple add-ons, Droip keeps it simple: one platform, all features, no hidden costs.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/1-droip-pricing-plans.jpg" />
It’s surprisingly affordable for the value it delivers. The Starter plan is just $34.50/year (currently at 50% off) for one site and includes all premium features. 
If you compare it with Elementor, that’s almost half the cost of Elementor Pro’s Essential plan, which starts at $60/year and still keeps several essentials behind paywalls.
Droip also has a Lifetime plan. For a one-time payment of $299.50, you get unlimited use, forever. No renewals, no upcharges.
All Droip Pro plans are fully featured from the start. You don’t need to stack plugins or pay extra to unlock dynamic content support, pop-up builders, or submission forms. You also get access to the entire growing template library from day one.
Note: Explore <a href="https://droip.com/pricing/">Droip pricing</a>.
Website Performance Comparison
Performance directly impacts user experience, SEO, and conversion rates. So, to get a clear picture of how different page builders impact performance, we put Droip and Elementor to the test under identical conditions to see how each builder stacks up.
We installed both on a clean WordPress setup using the default Twenty Twenty-Five theme to ensure a fair comparison. Then, we created identical layouts using comparable design elements and ran Lighthouse performance audits to measure load time, responsiveness, and Core Web Vitals.
Test Conditions:
<ul>
<li>Clean WordPress installation.</li>
<li>Same theme: Twenty Twenty-Five.</li>
<li>Same layout structure and design elements.</li>
<li>Lighthouse is used for performance scoring.</li>
</ul>
Sample Layout
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/2-website-layout-built-pperformance-testing-comparison.jpg" />
Droip’s Performance
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/3-droip-performance-test-scores.jpg" />
Elementor’s Performance
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/4-elementor-performance.jpg" />
Droip’s Code Output
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/5-droip-code-output.png" />
Elementor’s Code Output
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/6-elementor-code-output.png" />
The difference was immediately clear. Droip generated a much cleaner DOM with significantly fewer <code><div></code>s and no unnecessary wrappers, resulting in faster load times and higher scores across all boards.
Elementor, on the other hand, added heavily nested markup and extra scripts, even on this simple layout, which dragged down its performance.
If clean code, fast loading, and technical efficiency are priorities for you, Droip clearly comes out ahead.
Exploring The Features
Now that we’ve seen how Droip outperforms the competition and does it at a highly competitive price, let’s dive into the features to see what makes it such a powerful all-in-one builder.
<h3>Freeform Visual Canvas For True Design Freedom</h3>
What makes Droip different from the existing page builders is its <a href="https://droip.com/editor/">freeform visual canvas</a>. 
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/7-freeform-visual-canvas.jpg" />
With Droip, you finally get the layout flexibility modern design demands and no longer need to place elements into rigid structures. 
The editor is powerful, modern, and feels more like designing in a modern interface tool like Figma.
You can place elements exactly where you want, overlap sections, layer backgrounds, and create complex animations & interactions all visually. Every element’s layout behavior is editable on canvas, giving you pixel-level control without touching code.
The editor supports both light and dark modes for a more comfortable, focused workspace.
If you've used Figma or Webflow, you'll feel instantly at home. If you haven't, this is the most natural way to design websites you've ever tried.
<h3>Instant Figma to Droip Handoff</h3>
Talking about Figma, if you have a design ready in Figma, you can instantly import it into Droip to a functional website with no need to rebuild from scratch.
<a href="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/8-instant-figma-droip-handoff.gif"><img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/8-instant-figma-droip-handoff-800px.gif" /></a>Seamless import of Figma designs directly into Droip for fast development. (<a href="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/8-instant-figma-droip-handoff.gif">Large preview</a>)
Your imported design comes in fully responsive by default, adapting to all screen sizes, including any custom breakpoints you define.
And it supports unlimited breakpoints, too. You can define layout behavior exactly how you want it, and styles will cascade intelligently across smaller screens.
<h3>No Third-Party Plugins Needed For Dynamic Content</h3>
In traditional WordPress, handling dynamic content means installing the ACF or other third-party plugins.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/9-droip-native-dynamic-content-management.jpg" />
But with Droip, all of that is natively integrated. It comes with a powerful <a href="https://droip.com/content-manager/">Dynamic Content Manager</a> that lets you:
<ul>
<li>Create custom content types and fields.</li>
<li>Use reference and multi-reference relationships.</li>
<li>Build dynamic templates visually.</li>
<li>Add dynamic SEO to template pages.</li>
<li>Apply advanced filtering to Collection elements.</li>
</ul>
All without writing a single line of code or relying on external plugins.
<h3>Reusable Styling With Class-Based Editing</h3>
Droip also has an efficient way to manage design at scale without repetitive work.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/10-droip-css-class-management-panel.jpg" />
It uses a class-based styling system that brings structure and scalability to your design process. When you style an element, those styles are automatically saved as reusable CSS classes.
Here’s what that means for you:
<ul>
<li>You can create global classes for common components like buttons, cards, or headings.</li>
<li>Reuse those styles across pages and projects with consistency.</li>
<li>Update a class once, and every instance updates instantly.</li>
<li>You can also create subclasses to make slight variations, like secondary buttons, while still inheriting styles from the parent.</li>
</ul>
<h3>CSS Variables For Global Styling</h3>
Droip takes styling even further with <a href="https://droip.com/docs/variables/">Global Variables</a>, allowing you to define design tokens like colors, fonts, spacing, and sizing that can be reused across your entire site.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/11-global-css-variables.jpg" />
You can pair these global variables with your class-based structure to:
<ul>
<li>Maintain visual consistency;</li>
<li>Update values globally with a single change;</li>
<li>Easily manage themes like switching between light and dark modes with one click.</li>
</ul>
And while Droip offers a fully visual experience, it doesn’t limit advanced users. You can write custom CSS for any class or element, and even inject JavaScript at the page or element level when needed.
<h3>Build Complex Interactions and Animations Visually</h3>
When it comes to modern animations and interactive design, Droip leaves traditional WordPress page builders far behind.
Its fully <a href="https://droip.com/interactions/">visual interaction builder</a> lets you create dynamic, immersive experiences.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/12-visual-interaction-builder.jpg" />
You can build scroll-based animations, hover and click effects, interactive sections that respond across devices, and control visibility, motion, and behavior all within a visual interface.
For advanced users, Droip includes a timeline-based editor where you can:
<ul>
<li>Create multi-step animations;</li>
<li>Fine-tune transitions with precise timing, easing, delays, and sequencing.</li>
</ul>
Even text animations get special attention. 
You can animate text by character, word, or full element. Choose custom triggers (scroll, hover, load, and so on) and select from various transition styles or create your own.
Droip's no-code website builder truly helps you move past generic and create unique animations and complex interactions.
<h3>Seamless Integration Management With Droip Apps</h3>
Droip takes the hassle out of connecting third-party tools with its intuitive Droip Apps system. You can install and manage essential integrations such as analytics, CRMs, email marketing platforms, support widgets, and more, all from within the Droip editor itself.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/13-integration-management-droip-apps.jpg" />
This centralized approach means you never have to leave your workspace. The clean, user-friendly interface guides you through the connection process visually, making setup fast and straightforward even if you’re not a technical expert.
<h3>Accessibility Is Core To The Experience</h3>
One of Droip’s standout features is its built-in focus on accessibility from day one. 
Unlike many platforms that rely on third-party plugins for accessibility, Droip integrates it directly into the core experience.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/14-accessibility-settings.jpg" />
Whether you need to enlarge editor text, reduce motion effects, use a larger cursor, or work with color-blind–friendly palettes, Droip ensures an <a href="https://droip.com/accessibility/">inclusive editing environment</a>.
But it doesn’t stop at editor settings. Droip actively helps you follow best accessibility practices, enforcing semantic HTML, prompting for proper alt text, and supporting ARIA labels. Plus, its built-in contrast checker ensures your designs aren’t just visually appealing, they’re easy to read and use for everyone.
<h3>Team Collaboration Made Easy</h3>
Collaboration is also a core part of the experience, thoughtfully designed to support teams, clients, and developers alike. With Droip’s Role Manager, you can define exactly what each role can view, edit, or manage within the builder.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/15-droip-role-management-collaboration-tools.jpg" />
You can assign custom roles to team members based on their responsibilities, like designers, developers, content editors, clients, and so on. 
For handling client reviews, it also generates a shareable view-only link that gives clients access to preview the site without giving them edit permissions or exposing the backend. Perfect for gathering feedback and approvals while maintaining full control.
<h3>Built-in Quality Control</h3>
Before you publish your site, Droip helps ensure your site is technically sound with its built-in Page Audit tool. 
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/16-droip-quality-control.jpg" />
It automatically scans your layout for:
<ul>
<li>Missing alt text on images,</li>
<li>Broken links,</li>
<li>Unassigned or duplicate classes,</li>
<li>Accessibility issues,</li>
<li>And more.</li>
</ul>
So you’re not just building beautiful pages, you’re shipping fast, accessible, SEO-ready websites with confidence.
Theme & Layout Options
Droip has a growing library of high-quality templates and modular layout options, so you’re never out of options.
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/17-droip-template-library.jpg" />
<h3>Template Kits: Full Website Packs</h3>
Droip’s Template Kits include complete multi-page website designs for every industry. Pick a template, update the content, and you’re ready to launch.
New template kits are added regularly, so you're always equipped with the latest design trends. And the best part? At no additional cost. You get access to the finest designs without ever paying extra.
<h3>Pre-Designed Pages</h3>
Do you need just a landing page or a pricing page? Droip also offers standalone pre-designed pages you can drop into your project and customize instantly.
<h3>Pre-Made Sections</h3>
Prefer to build from scratch but don’t want to start with a blank canvas? It also has ready-made sections like hero banners, testimonials, pricing blocks, and FAQs. You can visually assemble your layout in minutes using these. 
<h3>Wireframes</h3>
You can also map out your layout using wireframes before applying any styling. It’s a great way to get your content and structure right without distractions, perfect for planning UX and content flow.
How Easy Is Droip to Use?
If you want something dead simple and just need to build a basic site fast, there are other options like Elementor that can do that, but at the cost of power, performance, and flexibility.
Droip, on the other hand, has a bit of a learning curve. That’s because it’s way more powerful and is built for those who care about design control, clean output, and scalability. 
If you’re someone who wants to fine-tune every pixel, build advanced layouts, and doesn’t mind a learning curve, you’ll appreciate the level of control it offers.
Having said that, it’s not hard to use once you understand how it works. 
The learning curve, especially for complete beginners, mostly comes from understanding its powerful features like dynamic content, reusable components (called Symbols), styling logic using classes, global variables, and breakpoints, advanced interactions using custom animation timelines, etc. 
But to help you get up to speed quickly, Droip includes:
<ul>
<li>Guided onboarding to walk you through the essentials.</li>
<li>A growing <a href="https://droip.com/themes/">library of templates</a>, pages, UI components, and wireframes to kickstart your projects.</li>
<li>An AI Generator that can scaffold entire pages and layouts in seconds.</li>
<li>Detailed <a href="https://droip.com/docs/system-requirements/">documentation</a> and <a href="https://www.youtube.com/@DroipNoCode">video tutorials</a> (with more added regularly).</li>
</ul>
What Users Are Saying
For many users, Droip is more than just a builder. It’s the all-in-one tool WordPress has been waiting for. They are calling it the future of WordPress, a truly great alternative to tools like Framer and Webflow. 
<img src="https://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/18-droip-customer-reviews-feedback.jpg" />
TL;DR: Why Droip Outshines Traditional Builders
<ul>
<li>All-in-one builder with no third-party bloat.</li>
<li>Clean, performance-optimized code output.</li>
<li>Figma integration + modern visual canvas.</li>
<li>Dynamic content, advanced interactions, and global styling.</li>
<li>One price, all features, no hidden costs.</li>
</ul>
Overall Verdict: Is Droip Really Better Than Alternatives?
After putting Droip through its paces, the answer is a clear yes. Droip not only matches traditional WordPress page builders where it counts, but it surpasses them in nearly every critical area.
From its cleaner, faster code output and outstanding performance to its unparalleled design freedom and powerful built-in features, Droip solves many of the pain points that users have accepted for years. Its all-in-one approach eliminates the need for multiple plugins, saving time, money, and technical headaches.
While there is a learning curve for beginners, the payoff is huge for those who want full control, scalability, and a truly modern web design experience inside WordPress.
If you’re serious about building high-quality, scalable, and visually stunning websites, Droip isn’t just an alternative; it’s the future of WordPress site building.
Ready to experience the difference yourself? Try <a href="https://droip.com/">Droip</a> today and start building faster, cleaner, and smarter.
]]></content:encoded>
<author>hello@smashingmagazine.com (Zareen Tasnim)</author>
<enclosure url="http://files.smashing.media/articles/creating-more-than-wordpress-page-builders-droip/modern-website-builder-wordpress-droip.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Design Guidelines For Better Notifications UX]]></title>
<link>https://smashingmagazine.com/2025/07/design-guidelines-better-notifications-ux/</link>
<guid>https://smashingmagazine.com/2025/07/design-guidelines-better-notifications-ux/</guid>
<pubDate>Mon, 07 Jul 2025 13:00:00 GMT</pubDate>
<description><![CDATA[As always in design, timing matters, and so do timely notifications. Let’s explore how we might improve the notifications UX. More design patterns in our <a href="https://smart-interface-design-patterns.com">Smart Interface Design Patterns</a>, a friendly video course on UX and design patterns by Vitaly — from complex data tables and nested filters to FAQs and error messages.]]></description>
<content:encoded><![CDATA[In many products, setting notification channels on mute is a default, rather than an exception. The reason for that is their high frequency, which creates disruptions and eventually notification fatigue, when any popping messages get dismissed instantly.
There is a good reason for it: high frequency of notifications. In usability testing, it’s the most frequent complaint, yet every app desperately tries to capture a glimpse of our attention, sending more notifications our way. Let’s see how we could make the notifications UX slightly better.
This article is part of our ongoing series on <a href="/category/ux">UX</a>. You can find more details on design patterns and UX strategy in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a> 🍣 — with live UX training coming up soon. <a href="https://smart-interface-design-patterns.com">Jump to table of contents</a>.
The Many Faces Of Notifications
Notifications are distractions by nature; they bring a user’s attention to a (potentially) significant event they aren’t aware of or might want to be reminded of. As such, they can be very helpful and relevant, providing assistance and bringing structure and order to the daily routine. Until they are not.
Not every communication option is a notification. <a href="https://www.nngroup.com/articles/indicators-validations-notifications/">As Kim Salazar rightfully noted</a>, 
<blockquote>“Status communication often relies on validation, status indicators, and notifications. While they are often considered to be similar, they are actually quite different.”</blockquote>
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/2-communicating-system-status.png" />
In general, notifications can be either informational (calendar reminders, delay notifications, election night results) or encourage action (approve payment, install an update, confirm a friend request). They can stream from various sources and have various impacts.
<ul>
<li>UI notifications appear as subtle cards in UIs as users interact with the web interface — as such, they are widely accepted and less invasive than some of their counterparts.</li>
<li>In-browser push notifications are more difficult to dismiss, and draw attention to themselves even if the user isn’t accessing the UI.</li>
<li>In-app notifications live within desktop and mobile apps, and can be as humble as UI notifications, but can take a more central role with messages pushed to the home screen or the notifications center.</li>
<li>OS notifications such as software updates or mobile carrier changes also get in the mix, often appearing together with a wide variety of notes, calendar updates, and everything in between.</li>
<li>Finally, notifications can find their way into email, SMS, and social messaging apps, coming from chatbots, recommendation systems, and actual humans.</li>
</ul>
But we don’t pay the same amount of attention to every notification. It can take weeks until they eventually install a software update prompted by their OS notification, or just a few hours to confirm or decline a new LinkedIn request.
Not Every Notification Is Equal
The level of attention users grant to notifications depends on their nature, or, more specifically, <a href="https://uxdesign.cc/a-critical-analysis-of-notification-systems-4956ed86a804">how and when notifications are triggered</a>. People care more about new messages from close friends and relatives, bank transactions and important alerts, calendar notifications, and any actionable and awaited confirmations or releases.
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/3-variety-triggers-origins-information.png" />
People care less about news updates, social feed updates, announcements, new features, crash reports, promotional and automated messages in general. Most importantly, a message from another human being is always valued much higher than any automated notification.
Design For Levels Of Severity
<a href="https://www.toptal.com/designers/ux/notification-design">As Sara Vilas suggests</a>, we can break down notification design across three levels of severity: high, medium, and low attention. And then, notification types need to be further defined by specific attributes on those three levels, whether they are alerts, warnings, confirmations, errors, success messages, or status indicators.
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/4-triggers-origins-information.png" />
High Attention
<ul>
<li>Alerts (immediate attention required),</li>
<li>Errors (immediate action required),</li>
<li>Exceptions (system anomalies, something didn’t work),</li>
<li>Confirmations (potentially destructive actions that need user confirmation to proceed).</li>
</ul>
Medium Attention
<ul>
<li>Warnings (no immediate action required),</li>
<li>Acknowledgments (feedback on user actions),</li>
<li>Success messages.</li>
</ul>
Low Attention
<ul>
<li>Informational messages (aka passive notifications, something is ready to view),</li>
<li>Badges (typically on icons, signifying something new since last interaction),</li>
<li>Status indicators (system feedback).</li>
</ul>
Taking it one step further, we can map the attention against the type of messaging we are providing — very similar to <a href="https://web.archive.org/web/20240430014932/https://garden.zendesk.com/content/voice-and-tone/">Zendesk's mapping tone</a> above, which plots impact against the type of messaging, and shows how the tone should adjust — becoming more humble, real, distilled or charming.
So, notifications can be different, and different notifications are perceived differently; however, the more personal, relevant, and timely notifications are, the higher engagement we should expect.
Start Sending Notifications Slowly But Steadily
It’s not uncommon to sign up, only to realize a few moments later that the inbox is filling up with all kinds of irrelevant messages. That’s exactly the wrong thing to do. A <a href="https://medium.com/@AnalyticsAtMeta/notifications-why-less-is-more-how-facebook-has-been-increasing-both-user-satisfaction-and-app-9463f7325e7d">study by Facebook</a> showed that sending fewer notifications improved user satisfaction and long-term usage of a product.
Initially, once the notification rate was reduced, there was indeed a loss of traffic, but it has “gradually recovered over time”, and after an extended period, it had fully recovered and even turned out to be a gain.
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/5-notifications-why-less-is-more.jpg" />
A good starting point is to set up a slow default notification frequency for different types of customers. As the customer keeps using the interface, we could ask them to decide on the kind of notifications they’d prefer and their frequency.
Send notifications slowly, and over time slowly increase and/or decrease the number of notifications per type of customer. This might work much better for our retention rates.
Don’t Rely On Generic Defaults: Set Up Notification Modes
Typically, users can opt in and opt out of every single type of notification in their settings. In general, it’s a good idea, but it can also be very overwhelming — and not necessarily clear how important each notification is. Alternatively, we could provide predefined recommended options, perhaps with a “calm mode” (low frequency), a “regular mode” (medium frequency), and a “power-user mode” (high frequency).
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/6-slack-notification.jpg" />
As time passes, the format of notifications might need adjustments as well. Rather than having notifications sent one by one as events occur, users could choose a “summary mode,” with all notifications grouped into a single standalone message delivered at a particular time each day or every week.
That’s <a href="https://slackhq.com/how-to-customize-notifications-in-slack">one of the settings that Slack provides</a> when it comes to notifications; in fact, the system adapts the frequency of notifications over time, too. Initially, as Slack channels can be quite silent, the system sends notifications for every posted message.
As activities become more frequent, Slack recommends reducing the notification level so the user will be notified only when they are actually mentioned.
Make Notification Settings A Part Of Onboarding
We could also include frequency options in our onboarding design. A while back Basecamp, for example, has introduced “Always On” and “Work Can Wait” options as a part of their onboarding, so new customers can select if they wish to receive notifications as they occur (at any time), or choose specific time ranges and days when notifications can be sent.
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/7-basecamp-notifications.jpg" />
Or, the other way around, we could ask users when they don’t want to be disturbed, and suspend notifications at that time. Not every customer wants to receive work-related notifications outside of business hours or on the weekend, even if their colleagues might be working extra hours on Friday night on the other side of the planet.
Allow Users To Snooze Or Pause Notifications
User’s context changes continuously. If you notice an unusual drop in engagement rate, or if you’re anticipating an unusually high volume of notifications coming up (a birthday, wedding anniversary, or election night, perhaps), consider providing an option to mute, snooze, or pause notifications, perhaps for the next 24 hours.
This might go very much against our intuition, as we might want to re-engage the customer if they’ve gone silent all of a sudden, or we might want to maximize their engagement when important events are happening. However, it’s easy to reach a point when a seemingly harmless notification will steer a customer away, long term.
<img src="https://files.smashing.media/articles/design-guidelines-better-notifications-ux/8-notifications-models.jpeg" />
Another option would be to suggest a change of medium used to consume notifications. Users tend to associate different levels of urgency with different channels of communication.
In-app notifications, push notifications, and text messages are considered to be much more intrusive than good ol’ email, so when frequency exceeds a certain threshold, you might want to nudge users towards a switch from push notifications to daily email summaries.
Wrapping Up
As always in design, timing matters, and so do timely notifications. Start slowly, and evolve your notification frequency depending on how exactly a user actually uses the product. For every type of user, set up notification profiles: frequent users, infrequent users, one-week-experience users, one-month-experience users, and so on.
And whenever possible, allow your users to snooze and mute notifications for a while. Eventually, you might even want to suggest a change in the medium used to consume notifications. And when in doubt, postpone, rather than sending through.
Meet “Smart Interface Design Patterns”
You can find more details on design patterns and UX in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our 15h-video course with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>. Use code <a href="https://smart-interface-design-patterns.com">BIRDIE</a> to save 15% off.
<a href="https://smart-interface-design-patterns.com/"><img src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" /></a>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design & UX.
<div><div><ul><li><a href="#">
Video + UX Training</a></li><li><a href="#">Video only</a></li></ul><div><h3>Video + UX Training</h3>$ 495.00 $ 699.00
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439">
Get Video + UX Training<div></div></a>25 video lessons (15h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>. 100 days money-back-guarantee.</div><div><h3>Video only</h3><div>$ 300.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>40 video lessons (15h). Updated yearly. 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></div></div></div>
]]></content:encoded>
<author>hello@smashingmagazine.com (Vitaly Friedman)</author>
<enclosure url="http://files.smashing.media/articles/design-guidelines-better-notifications-ux/design-guidelines-better-notifications-ux.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[CSS Intelligence: Speculating On The Future Of A Smarter Language]]></title>
<link>https://smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language/</link>
<guid>https://smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language/</guid>
<pubDate>Wed, 02 Jul 2025 13:00:00 GMT</pubDate>
<description><![CDATA[CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the `if()` function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.]]></description>
<content:encoded><![CDATA[Once upon a time, CSS was purely presentational. It imperatively handled the fonts, colors, backgrounds, spacing, and layouts, among other styles, for markup languages. It was a language for looks, doing what it was asked to, never thinking or making decisions. At least, that was what it was made for when <a href="https://www.w3.org/People/howcome/">Håkon Wium Lie proposed CSS in 1994</a>, and the World Wide Web Consortium (W3C) adopted it two years later.
Fast-forward to today, a lot has changed with the addition of new features, and more are on the way that shift the style language to a more imperative paradigm. CSS now actively powers complex responsive and interactive user interfaces. With recent advancements like <a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">container queries</a>, <a href="https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/">relational pseudo-classes</a>, and <a href="https://www.w3.org/TR/css-values-5/#if-notation">the <code>if()</code> function</a>, the language once within the domains of presentations has stepped foot into the territory of logic, reducing its reliance on the language that had handled its logical aspect to date, JavaScript.
This shift presents interesting questions about CSS and its future for developers. CSS has deliberately remained within the domains of styling alone for a while now, but is it time for that to change? Also, is CSS still a presentational language as it started, or is it becoming something more and bigger? This article explores how smart CSS has become over the years, where it is heading, the problems it is solving, whether it is getting too complex, and how developers are reacting to this shift.
Historical Context: CSS’s Intentional Simplicity
A glimpse into CSS history shows a language born to separate content from presentation, making web pages easier to manage and maintain. The first official version of CSS, <a href="https://www.w3.org/TR/CSS1/">CSS1</a>, was released in 1996, and it introduced basic styling capabilities like font properties, colors, box model (padding, margin, and border), sizes (width and height), a few simple displays (none, block, and inline), and basic selectors.
Two years later, <a href="https://www.w3.org/TR/CSS2/">CSS2 was launched</a> and expanded what CSS could style in HTML with features like positioning, <code>z-index</code>, enhanced selectors, table layouts, and media types for different devices. However, there were inconsistencies within the style language, an issue CSS2.1 resolved in 2011, becoming the standard for modern CSS. It simplified web authoring and site maintenance.
CSS was largely static and declarative during the years between CSS1 and CSS2.1. Developers experienced a mix of frustrations and breakthroughs for their projects. Due to the absence of intuitive layouts like Flexbox and CSS Grid, developers relied on hacky alternatives with table layouts, positioning, or floats to get around complex designs, even though <a href="https://www.w3.org/TR/CSS1/#floating-elements">floats were originally designed for text to wrap around an obstacle</a> on a webpage, usually a media object. As a result, developers faced issues with collapsing containers and unexpected wrapping behaviour. Notwithstanding, basic styling was intuitive. A newbie could easily pick up web development today and add basic styling the next day. CSS was separated from content and logic, and as a result, it was highly performant and lightweight.
CSS3: The First Step Toward Context Awareness
Things changed <a href="https://www.smashingmagazine.com/2012/07/learning-css3-useful-reference-guide/">when CSS3 rolled out</a>. Developers had expected a single monolithic update like the previous versions, but their expectations and the reality of the latest release were unmatched. The CSS3 red carpet revealed a modular system with powerful layout tools like Flexbox, CSS Grid, and media queries, defining for the first time how developers establish responsive designs. <a href="https://www.w3.org/Style/CSS/current-work">With over 20 modules</a>, CSS3 marked the inception of a “smarter CSS”.
Flexbox’s introduction around 2012 provided a flexible, one-dimensional layout system, while CSS Grid, launched in 2017, took layout a step further by offering a two-dimensional layout framework, making complex designs with minimal code possible. These advancements, as discussed by <a href="https://origin-blog.mediatemple.net/design-creative/five-huge-css-milestones/">Chris Coyier</a>, reduced reliance on hacks like floats.
It did not stop there. There’s <a href="https://www.w3.org/TR/mediaqueries-3/">media queries</a>, a prominent release of CSS3, that is one of the major contributors to this smart CSS. With media queries, CSS can react to different devices’ screens, adjusting its styles to fit the screen dimensions, aspect ratio, and orientation, a feat that earlier versions could not easily achieve. In the fifth level, it added <a href="https://www.w3.org/TR/mediaqueries-5/#mf-user-preferences">user preference media features</a> such as <code>prefers-color-scheme</code> and <code>prefers-reduced-motion</code>, making CSS more user-centric by adapting styles to user settings, enhancing accessibility.
CSS3 marked the beginning of a context-aware CSS.
<blockquote>Context-awareness means the ability to understand and react to the situation around you or in your environment accordingly. It means systems and devices can sense critical information, like your location, time of day, and activity, and adjust accordingly.</blockquote>
In web development, the term “context-awareness” has always been used with components, but what drives a context-aware component? If you mentioned anything other than the component’s styles, you would be wrong! For a component to be considered context-aware, <a href="https://www.lukeleber.com/blog/2024-07-25-context-aware-components">it needs to feel its environment’s presence</a> and know what happens in it. For instance, for your website to update its styles to accommodate a dark mode interface, it needs to be aware of the user’s preferences. Also, to change its layout, a website needs to know the device a user is accessing it on — and thanks to user preference media queries, that is possible.
Despite these features, CSS remained largely reactive. It responded to external factors like screen size (via media queries) or input states (like <code>:hover</code>, <code>:focus</code>, or <code>:checked</code>), but it never made decisions based on the changes in its environment. Developers typically turn to JavaScript for that level of interaction. 
However, not anymore. 
For example, with container queries and, more recently, <a href="https://www.smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/">container style queries</a>, CSS now responds not only to layout constraints but to design intent. It can adjust based on a component’s environment and even its parent’s theme or state. And that’s not all. The recently specced <code>if()</code> function promises inline conditional logic, <a href="https://css-tricks.com/if-css-gets-inline-conditionals/">allowing styles to change based on conditions</a>, all of which can be achieved without scripting.
These developments suggest CSS is moving beyond presentation to handle behaviour, challenging its traditional role.
New CSS Features Driving Intelligence
Several features are currently pushing CSS towards a dynamic and adaptive edge, thereby making it smarter, but these two are worth mentioning: container style queries and the <code>if()</code> function.
<h3>What Are Container Style Queries, And Why Do They Matter?</h3>
To better understand what container style queries are, it makes sense to make a quick stop at a close cousin: container size queries introduced in the <a href="https://www.w3.org/TR/css-contain-3/">CSS Containment Module Level 3</a>.
<a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">Container size queries</a> allow developers to style elements based on the dimensions of their parent container. This is a huge win for component-based designs as it eliminates the need to shoehorn responsive styles into global media queries.
<pre><code>/* Size-based container query */
@container (min-width: 500px) {
.card {
flex-direction: row;
}
}
</code></pre>
<a href="https://css-tricks.com/css-container-queries/#aa-container-style-queries">Container style queries</a> take it a step further by allowing you to style elements based on custom properties (aka CSS variables) set on the container.
<pre><code>/* Style-based container query */
@container style(--theme: dark) {
.button {
background: black;
color: white;
}
}
</code></pre>
These features are a big deal in CSS because they unlock context-aware components. A button can change appearance based on a <code>--theme</code> property set by a parent without using JavaScript or hardcoded classes.
<h3>The <code>if()</code> Function: A Glimpse Into The Future</h3>
The CSS <code>if()</code> function might just be the most radical shift yet. When implemented (Chrome is the only one to support it, <a href="https://developer.chrome.com/blog/new-in-chrome-137?hl=en#if">as of version 137</a>), it would allow developers to write inline conditional logic directly in property declarations. Think of the ternary operator in CSS.
<pre><code>padding: if(style(--theme: dark): 2rem; else: 3rem);
</code></pre>
This hypothetical line or pseudo code, not syntax, sets the text color to white if the <code>--theme</code> variable equals <code>dark</code>, or black otherwise. Right now, the <code>if()</code> function is not supported in any browser, but it is on the radar of the CSS Working Group, and influential developers like <a href="https://lea.verou.me/blog/2024/css-conditionals/">Lea Verou</a> are already exploring its possibilities.
The New CSS: Is The Boundary Between CSS And JavaScript Blurring?
Traditionally, the separation of concerns concerning styling was thus: <a href="https://medium.com/@giosterr44/mastering-the-basics-why-html-css-javascript-are-still-essential-c0343ab485b4">CSS for how things look and JavaScript for how things behave</a>. However, features like container style queries and the specced <code>if()</code> function are starting to blur the line. CSS is beginning to behave, not in the sense of API calls or event listeners, but in the ability to conditionally apply styles based on logic or context.
As web development evolved, CSS started encroaching on JavaScript territory. CSS3 brought in animations and transitions, a powerful combination for interactive web development, which was impossible without JavaScript in the earlier days. Today, research proves that CSS has taken on several interactive tasks previously handled by JavaScript. For example, the <code>:hover</code> pseudo-class and <code>transition</code> property allow for visual feedback and smooth animations, as discussed in “<a href="https://www.smashingmagazine.com/2011/02/bringing-interactivity-to-your-website-with-web-standards/">Bringing Interactivity To Your Website With Web Standards</a>”.
That’s not all. Toggling accordions and modals existed within the domains of JavaScript before, but today, this is possible with new <a href="https://pagepro.co/blog/html-css-vs-javascript/">powerful CSS combos like the <code><details></code> and <code><summary></code> HTML tags for accordions or modals with the <code>:target</code> pseudo-class</a>. CSS can also handle tooltips using <code>aria-label</code> with <code>content: attr(aria-label)</code>, and star ratings with radio inputs and labels, as detailed in the same <a href="https://pagepro.co/blog/html-css-vs-javascript/">article</a>.
Another article, “<a href="https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/">5 things you can do with CSS instead of JavaScript</a>”, lists features like <code>scroll-behavior: smooth</code> for smooth scrolling and <code>@media (prefers-color-scheme: dark)</code> for dark mode, tasks that once required JavaScript. In the same article, you can also see that it’s possible to create a carousel without JavaScript by using the CSS scroll snapping functionality (and we’re not even talking about features designed specifically for creating carousels solely in CSS, recently <a href="https://developer.chrome.com/blog/carousels-with-css?hl=en">prototyped in Chrome</a>).
These extensions of CSS into the JavaScript domain have now left the latter with handling only complex, crucial interactions in a web application, such as user inputs, making API calls, and managing state. While the CSS pseudo-classes like <code>:valid</code> and <code>:invalid</code> can help as error or success indicators in input elements, you still need JavaScript for dynamic content updates, form validation, and real-time data fetching.
CSS now solves problems that many developers never knew existed. With JavaScript out of the way in many style scenarios, developers now have simplified codebases. The dependencies are fewer, the overheads are lower, and website performance is better, especially on mobile devices. In fact, this shift leans CSS towards a more accessible web, as CSS-driven designs are often easier for browsers and assistive technologies to process.
While the new features come with a lot of benefits, they also introduce complexities that did not exist before:
<ul>
<li>What happens when logic is spread across both CSS and JavaScript?</li>
<li>How do we debug conditional styles without a clear view of what triggered them?</li>
<li>CSS only had to deal with basic styling like colors, fonts, layouts, and spacing, which were easier for new developers to onboard. How hard does the learning curve become as these new features require understanding concepts once exclusive to JavaScript?</li>
</ul>
Developers are split. While some welcome the idea of a natural evolution of a smarter, more component-aware web, <a href="https://css-tricks.com/is-there-too-much-css-now/">others worry CSS is becoming too complex</a> — a language originally designed for formatting documents now juggling logic trees and style computation.
Divided Perspective: Is Logic In CSS Helpful Or Harmful?
While the evidence in the previous section leans towards boundary-blurring, there’s significant controversy among developers. Many modern developers argue that logic in CSS is long overdue. As web development grows more componentized, the limitations of declarative styling have become more apparent, causing proponents to see logic as a necessary evolution for a once purely styling language.
For instance, in frontend libraries like React, components often require conditional styles based on props or states. Developers have had to make do with JavaScript or CSS-in-JS solutions for such cases, but the truth remains that these solutions are not right. They introduce complexity and couple styles and logic. CSS and JavaScript are meant to have standalone concerns in web development, <a href="https://css-tricks.com/the-differing-perspectives-on-css-in-js/">but libraries like CSS-in-JS have ignored the rules and combined both</a>.
We have seen how preprocessors like SASS and LESS proved the usefulness of conditionals, loops, and variables in styling. Developers who do not accept the CSS in JavaScript approach have settled for these preprocessors. Nevertheless, like <a href="https://x.com/argyleink/status/1317304102460608512?t=rgyYyNApPOZt8iqh8NTEUQ&s=19">Adam Argyle</a>, they voice their need for native CSS solutions. With native conditionals, developers could reduce JavaScript overhead and avoid runtime class toggling to achieve conditional presentation.
<blockquote>“It never felt right to me to manipulate style settings in JavaScript when CSS is the right tool for the job. With CSS custom properties, we can send to CSS what needs to come from JavaScript.” — <a href="https://x.com/codepo8/status/1358082931122724864">Chris Heilmann</a></blockquote>
Also, Bob Ziroll <a href="https://x.com/bobziroll/status/1819078139055595669">dislikes using JavaScript for what CSS is meant to handle</a> and finds it unnecessary. This reflects a preference for using CSS for styling tasks, even when JavaScript is involved. These developers embrace CSS’s new capabilities, seeing it as a way to reduce JavaScript dependency for performance reasons. 
Others argue against it. Introducing logic into CSS is a slippery slope, and CSS could lose its core strengths — simplicity, readability, and accessibility — by becoming too much like a programming language. The fear is that developers run the risk of <a href="https://www.smashingmagazine.com/2024/02/web-development-getting-too-complex/">complicating the web more than it is supposed to be</a>.
<blockquote>“I’m old-fashioned. I like my CSS separated from my HTML; my HTML separated from my JS; my JS separated from my CSS.” — <a href="https://x.com/SaraSoueidan/status/1273181281103351812">Sara Soueidan</a></blockquote>
This view emphasises the traditional separation of concerns, arguing that mixing roles can complicate maintenance. Additionally, Brad Frost has also <a href="https://x.com/brad_frost/status/993189025132490755">expressed skepticism</a> when talking specifically about CSS-in-JS, stating that it, “doesn’t scale to non-JS-framework environments, adds more noise to an already-noisy JS file, and the demos/examples I have seen haven’t embodied CSS best practices.” This highlights concerns about scalability and best practices, suggesting that the blurred boundary might not always be beneficial.
Community discussions, such as on <a href="https://stackoverflow.com/questions/24012569/is-it-always-better-to-use-css-when-possible-instead-of-js">Stack Overflow</a>, also reflect this divide. A question like “Is it always better to use CSS when possible instead of JS?” receives answers favouring CSS for performance and simplicity, but others argue JavaScript is necessary for complex scenarios, illustrating the ongoing debate. Don’t be fooled. It might seem convenient to agree that CSS performs better than JavaScript in styling, <a href="https://css-tricks.com/myth-busting-css-animations-vs-javascript/">but that’s not always the case</a>.
A Smarter CSS Without Losing Its Soul
CSS has always stood apart from full-blown programming languages, like JavaScript, by being declarative, accessible, and purpose-driven.
If CSS is to grow more intelligent, the challenge lies not in making it more powerful for its own sake but in evolving it without compromising its major concern.
So, what might a logically enriched but still declarative CSS look like? Let’s find out.
<h3>Conditional Rules (<code>if</code>, <code>@when</code>…<code>@else</code>) With Carefully Introduced Logic</h3>
A major frontier in CSS evolution is the introduction of native conditionals via the <a href="https://chromestatus.com/feature/6313805904347136"><code>if()</code></a> function and the <code>@when</code>…<code>@else</code> at-rules, which are part of the <a href="https://drafts.csswg.org/css-conditional-5/">CSS Conditional Rules Module Level 5</a> specification. While still in the early draft stages, this would allow developers to apply styles based on evaluated conditions without turning to JavaScript or a preprocessor. Unlike JavaScript’s imperative nature, these conditionals aim to keep logic ingrained in CSS’s existing flow, aligned with the cascade and specificity.
<h3>More Powerful, Intentional Selectors</h3>
Selectors have always been one of the major strengths of CSS, and expanding them in a targeted way would make it easier to express relationships and conditions declaratively without needing classes or scripts. Currently, <a href="https://css-tricks.com/the-css-has-selector/"><code>:has()</code></a> lets developers style a parent based on a child, and <code>:nth-child(An+B [of S]?)</code> (<a href="https://www.w3.org/TR/selectors-4/">in Selectors Level 4</a>) allows for more complex matching patterns. Together, they allow greater precision without altering CSS’s nature.
<h3>Scoped Styling Without JavaScript</h3>
One of the challenges developers face in component-based frameworks like React or Vue is style scoping. Style scoping ensures styles apply only to specific elements or components and do not leak out. In the past, to achieve this, you needed to implement BEM naming conventions, CSS-in-JS, or build tools like CSS Modules. Native scoped styling in CSS, via the new experimental <a href="https://css-tricks.com/almanac/rules/s/scope/"><code>@scope</code></a> rule, allows developers to encapsulate styles in a specific context without extra tooling. This feature makes CSS more modular without tying it to JavaScript logic or complex class systems.
A fundamental design question now is whether we could empower CSS without making it like JavaScript. The truth is, to empower CSS with conditional logic, powerful selectors, and scoped rules, we don’t need it to mirror JavaScript’s syntax or complexity. The goal is declarative expressiveness, giving CSS more awareness and control while retaining its clear, readable nature, and we should focus on that. When done right, smarter CSS can amplify the language’s strengths rather than dilute them.
The real danger is not logic itself but unchecked complexity that obscures the simplicity with which CSS was built.
Cautions And Constraints: Why Smart Isn’t Always Better
The push for a smarter CSS comes with significant trade-offs alongside control and flexibility. Over the years, <a href="https://www.quora.com/In-general-does-adding-features-to-a-programming-language-make-it-better">history has shown that adding a new feature to a language or framework, or library, most likely introduces complexity</a>, not just for newbies, but also for expert developers. The danger is not in CSS gaining power but in how that power is implemented, taught, and used.
One of CSS’s greatest strengths has always been its approachability. Designers and beginners could learn the basics quickly: selectors, properties, and values. With more logic, scoping, and advanced selectors being introduced, that learning curve steepens. The risk is a widening gap between “basic CSS” and “real-world CSS”, echoing what happened with JavaScript and its ecosystem. 
As CSS becomes more powerful, developers increasingly lean on tooling to manage and abstract that power, like building systems (e.g., webpack, Vite), linters and formatters, and component libraries with strict styling conventions. This creates dependencies that are hard to escape. Tooling becomes a prerequisite, not an option, further complicating onboarding and increasing setup time for projects that used to work with a single stylesheet.
Also, more logic means more potential for unexpected outcomes. New issues might arise that are harder to spot and fix. Resources like DevTools will then need to evolve to visualise scope boundaries, conditional applications, and complex selector chains. Until then, debugging may remain a challenge. <a href="https://robkendal.co.uk/blog/why-is-css-in-js-a-bad-or-good-idea/">All of these are challenges experienced with CSS-in-JS</a>; how much more Native CSS?
We’ve seen this before. CSS history is filled with overcomplicated workarounds, like tables for the layout before Flexbox, relying on floats with clear fix hacks, and overly rigid grid systems before native CSS Grid. In each case, the hacky solution eventually became the problem. CSS got better not by mimicking other languages but by standardising thoughtful, declarative solutions. With the right power, <a href="https://rachelandrew.co.uk/archives/2020/04/07/making-things-better/">we can make CSS better</a> at the end of the day.
Conclusion
We just took a walk down the history lane of CSS, explored its presence, and peeked into what its future could be. We can all agree that CSS has come a long way from a simple, declarative language to a dynamic, context-aware, and, yes, smarter language. The evolution, of course, comes with tension: a smarter styling language with fewer dependencies on scripts and a complex one with a steeper learning curve.
This is what I conclude:
The future of CSS shouldn’t be a race to add logic for its own sake. Instead, it should be a thoughtful expansion, power balanced by clarity and innovation grounded in accessibility.
That means asking tough questions before shipping new features. It means ensuring that new capabilities help solve actual problems without introducing new barriers.
]]></content:encoded>
<author>hello@smashingmagazine.com (Gabriel Shoyombo)</author>
<enclosure url="http://files.smashing.media/articles/css-intelligence-speculating-future-smarter-language/css-intelligence-speculating-future-smarter-language.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Turning User Research Into Real Organizational Change]]></title>
<link>https://smashingmagazine.com/2025/07/turning-user-research-into-organizational-change/</link>
<guid>https://smashingmagazine.com/2025/07/turning-user-research-into-organizational-change/</guid>
<pubDate>Tue, 01 Jul 2025 10:00:00 GMT</pubDate>
<description><![CDATA[Bridging the gap between user research insights and actual organizational action — with a clear roadmap for impact.]]></description>
<content:encoded><![CDATA[This article is a sponsored by <a href="https://www.lyssna.com/">Lyssna</a>
We’ve all been there: you pour your heart and soul into conducting meticulous user research. You gather insightful data, create detailed reports, and confidently deliver your findings. Yet, months later, little has changed. Your research sits idle on someone’s desk, gathering digital dust. It feels frustrating, like carefully preparing a fantastic meal, only to have it left uneaten.
There are so many useful tools (like <a href="https://www.lyssna.com/">Lysnna</a>) to help us run incredible user research, and articles about how to get the most from them. However, there’s much less guidance about ensuring our user research gets adopted and brings about real change. So, in this post, I want to answer a simple question: How can you make sure your user research truly transforms your organization?
Introduction
<blockquote>User research is only as valuable as the impact it has.</blockquote>
When research insights fail to make their way into decisions, teams miss out on opportunities to improve products, experiences, and ultimately, business results. In this post, we’ll look at:
<ul>
<li>Why research often fails to influence organizational change;</li>
<li>How to ensure strategic alignment so research matters from day one;</li>
<li>Ways to communicate insights clearly so stakeholders stay engaged;</li>
<li>How to overcome practical implementation barriers;</li>
<li>Strategies for realigning policies and culture to support research-driven changes.</li>
</ul>
By covering each of these areas, you’ll have a clear roadmap for turning your hard-won research into genuine action.
Typical Reasons For Failure
If you’ve ever felt your research get stuck, it probably came down to one (or more) of these issues.
<h3>Strategic Misalignment</h3>
When findings aren’t tied to business objectives or ROI, they struggle to gain traction. Sharing a particular hurdle that users face will fall on deaf ears if stakeholders cannot see how that problem will impact their bottom line.
Research arriving too late is another hurdle. If you share insights after key decisions are made, stakeholders assume your input won’t change anything. Finally, research often competes with other priorities. Teams might have limited resources and focus on urgent deadlines rather than long-term user improvements.
<h3>Communication Issues</h3>
Even brilliant research can get lost in translation if it’s buried in dense reports. I’ve seen stakeholders glaze over when handed 30-page documents full of jargon. When key takeaways aren’t crystal clear, decision-makers can’t quickly act on your findings.
Organizational silos can make communication worse. Marketing might have valuable insights that product managers never see, or designers may share findings that customer support doesn’t know how to use. Without a way to bridge those gaps, research lives in a vacuum.
<h3>Implementation Challenges</h3>
Great insights require a champion. Without a clear owner, research often lives with the person who ran it, and no one else feels responsible. Stakeholder skepticism also plays a role. Some teams doubt the methods or worry the findings don’t apply to real customers.
Even if there is momentum, insufficient follow-up or progress tracking can stall things. I’ve heard teams say, “We started down that path but ran out of time.” Without regular check-ins, good ideas fade away.
<h3>Policy And Cultural Barriers</h3>
Legal, compliance, or tech constraints can limit what you propose. I once suggested a redesign to comply with new accessibility standards, but the existing technical stack couldn’t support it. Resistance due to established culture is also common. If a company’s used to launching fast and iterating later, they might see research-driven change as slowing them down.
Now that we understand what stands in the way of effective research implementation, let’s explore practical solutions to overcome these challenges and drive real organizational change.
Ensuring Strategic Alignment
When research ties directly to business goals, it becomes impossible to ignore. Here’s how to do it.
<h3>Early Stakeholder Engagement</h3>
Invite key decision-makers into the research planning phase. I like to host a kickoff session where we map research objectives to specific KPIs, like increasing conversions by 10% or reducing support tickets by 20%. When your stakeholders help shape those objectives, they’re more invested in the results.
<h3>Research Objectives Aligned With Business KPIs</h3>
While UX designers often focus on user metrics like satisfaction scores or task completion rates, it’s crucial to connect our research to business outcomes that matter to stakeholders. Start by identifying the key business metrics that will demonstrate the value of your research:
<ul>
<li>Identify which metrics matter most to the organization (e.g., conversion rate, churn, average order value).</li>
<li>Frame research questions to directly address those metrics.</li>
<li>Make preliminary hypotheses about how insights may affect the bottom line.</li>
</ul>
<h3>Develop Stakeholder-Specific Value Propositions</h3>
When presenting user research to groups, it’s easy to fall into the trap of delivering a one-size-fits-all message that fails to truly resonate with anyone. Instead, we need to carefully consider how different stakeholders will receive and act on our findings. 
The real power of user research emerges when we can connect our insights directly to what matters most for each specific audience:
<ul>
<li>For the product team: Show how insights can reduce development time by eliminating guesswork.</li>
<li>For marketing: Demonstrate how understanding user language can boost ad copy effectiveness.</li>
<li>For executives: Highlight potential cost savings or revenue gains.</li>
</ul>
<h3>ROI Framework Development</h3>
Stakeholders want to see real numbers. Develop simple templates to estimate potential cost savings or revenue gains. For example, if you uncover a usability issue that’s causing a 5% drop-off in the signup flow, translate that into lost revenue per month.
I also recommend documenting success stories from similar projects within your own organization or from case studies. When a stakeholder sees that another company boosted revenue by 15% after addressing a UX flaw, they’re more likely to pay attention.
<h3>Research Pipeline Integration</h3>
Integrate research tasks directly into your product roadmap. Schedule user interviews or usability tests just before major feature sprints. That way, findings land at the right moment — when teams are making critical decisions.
<h3>Regular Touchpoints with Strategic Teams</h3>
It’s essential to maintain consistent communication with strategic teams through regular research review meetings. These sessions provide a dedicated space to discuss new insights and findings. To keep everyone aligned, stakeholders should have access to a shared calendar that clearly marks key research milestones. Using collaborative tools like Trello boards or shared calendars ensures the entire team stays informed about the research plan and progress.
<h3>Resource Optimization</h3>
Research doesn’t have to be a massive, months-long effort each time. Build modular research plans that can scale. If you need quick, early feedback, run a five-user usability test rather than a full survey. For deeper analysis, you can add more participants later.
Addressing Communication Issues
Making research understandable is almost as important as the research itself. Let’s explore how to share insights so they stick.
<h3>Create Research One-Pagers</h3>
Condense key findings into a scannable one-pager. No more than a single sheet. Start with a brief summary of the problem, then highlight three to five top takeaways. Use bold headings and visual elements (charts, icons) to draw attention.
<h3>Implement Progressive Disclosure</h3>
Avoid dumping all details at once. Start with a high-level executive summary that anyone can read in 30 seconds. Then, link to a more detailed section for folks who want the full methodology or raw data. This layered approach helps different stakeholders absorb information at their own pace.
<h3>Use Visual Storytelling</h3>
Humans are wired to respond to stories. Transform data into a narrative by using journey maps, before/after scenarios, and user stories. For example, illustrate how a user feels at each step of a signup process, then show how proposed changes could improve their experience. 
<img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/1-example-journey-map.png" />
<h3>Regular Stakeholder Updates</h3>
Keep the conversation going. Schedule brief weekly or biweekly “research highlights” emails or meetings. These should be no more than five minutes and focus on one or two new insights. When stakeholders hear snippets of progress regularly, research stays top of mind.
<h3>Interactive Presentations</h3>
Take research readouts beyond slide decks. Host workshop-style sessions where stakeholders engage with findings hands-on. For instance, break them into small groups to discuss a specific persona and brainstorm solutions. When people physically interact with research (sticky notes, printed journey maps), they internalize it better.
Overcome Implementation Challenges
Now that stakeholders understand and value your research, let’s make sure they turn insights into action.
<h3>Establish Clear Ownership</h3>
Assign a dedicated owner for each major recommendation. Use a RACI matrix to clarify who’s Responsible, Accountable, Consulted, and Informed. I like to share a simple table listing each initiative, the person driving it, and key milestones.
<blockquote>When everyone knows who’s accountable, progress is more likely.</blockquote>
<h3>RACI Matrix Example</h3>
<table>
<thead>
<tr>
<th>Initiative</th>
<th>Responsible</th>
<th>Accountable</th>
<th>Consulted</th>
<th>Informed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Redesign Signup Flow</td>
<td>UX Lead</td>
<td>Product Manager</td>
<td>Engineering, Legal</td>
<td>Marketing, Support</td>
</tr>
<tr>
<td>Create One-Pager Templates</td>
<td>UX Researcher</td>
<td>Design Director</td>
<td>Stakeholder Team</td>
<td>All Departments</td>
</tr>
</tbody>
</table>
<h3>Build Implementation Roadmaps</h3>
Break recommendations down into phases. For example,
<ul>
<li>Phase 1: Quick usability tweaks (1–2 weeks).</li>
<li>Phase 2: Prototype new design (3–4 weeks).</li>
<li>Phase 3: Launch A/B test (2–3 weeks).</li>
</ul>
Each phase needs clear timelines, success metrics, and resources identified upfront.
<h3>Address Stakeholder Skepticism</h3>
Be transparent about your methods. Share your recruitment screeners, interview scripts, and a summary of analysis steps. Offer validation sessions where stakeholders can ask questions about how the data was collected and interpreted. When they understand the process, they trust the findings more.
<h3>Create Support Systems</h3>
Even when stakeholders agree, they need help executing. Establish mentorship or buddy programs where experienced researchers or designers guide implementation. Develop training materials, like short “how-to” guides on running usability tests or interpreting survey data. Set up feedback channels (Slack channels, shared docs) where teams can ask questions or share roadblocks.
<h3>Monitor And Track Progress</h3>
Establish regular progress reviews weekly or biweekly. Use dashboards to track metrics such as A/B test performance, error rates, or user satisfaction scores. Even a more complicated dashboard can be built using no-code tools and AI, so you no longer need to rely on developer support.
<img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/2-post-launch-backlog.png" />
Realign Policies and Culture
Even the best strategic plans and communication tactics can stumble if policies and culture aren’t supportive. Here’s how to address systemic barriers.
<h3>Create a Policy Evolution Framework</h3>
First, audit existing policies for anything that blocks research-driven changes. Maybe your data security policy requires months of legal review before you can recruit participants. Document those barriers and work with legal or compliance teams to create flexible guidelines. Develop a process for policy exception requests — so if you need a faster path for a small study, you know how to get approval without massive delays.
<h3>Technical Infrastructure Adaptation</h3>
Technology can be a silent killer of good ideas. Before proposing changes, work with IT to understand current limitations. Document technical requirements clearly so teams know what’s feasible. Propose a phased approach to any necessary infrastructure updates. Start with small changes that have an immediate impact, then plan for larger upgrades over time.
<h3>Build Cultural Buy-In</h3>
Culture shift doesn’t happen overnight. Share quick wins and success stories from early adopters in your organization. Recognize and reward change pioneers. Send a team-wide shout-out when someone successfully implements a research-driven improvement. Create a champions network across departments, so each area has at least one advocate who can spread best practices and encourage others.
<img src="https://files.smashing.media/articles/turning-user-research-into-organizational-change/3-mailchimp-personas.jpg" />
<h3>Develop a Change Management Strategy</h3>
Change management is about clear, consistent communication. Develop tailored communication plans for different stakeholder groups. For example, executives might get a one-page impact summary, while developers get technical documentation and staging environments to test new designs. Establish feedback channels so teams can voice concerns or suggestions. Finally, provide change management training for team leaders so they can guide their direct reports through transitions.
<h3>Measure Cultural Impact</h3>
Culture can be hard to quantify, but simple pulse surveys go a long way. Ask employees how they feel about recent changes and whether they are more confident using data to make decisions. Track employee engagement metrics like survey participation or forum activity in research channels. Monitor resistance patterns (e.g., repeated delays or rejections) and address the root causes proactively.
Conclusions
Transforming user research into organizational change requires a holistic approach. Here’s what matters most:
<ul>
<li>Strategic Alignment: Involve stakeholders early, tie research to KPIs, and integrate research into decision cycles.</li>
<li>Effective Communication: Use one-pagers, progressive disclosure, visual storytelling, regular updates, and interactive presentations to keep research alive.</li>
<li>Implementation Frameworks: Assign clear ownership, build phased roadmaps, address skepticism, offer support systems, and track progress.</li>
<li>Culture and Policy: Audit and update policies, adapt infrastructure gradually, foster cultural buy-in, and employ change management techniques.</li>
</ul>
When you bring all of these elements together, research stops being an isolated exercise and becomes a driving force for real, measurable improvements. Keep in mind:
<ul>
<li>Early stakeholder engagement drives buy-in.</li>
<li>Clear research-to-ROI frameworks get attention.</li>
<li>Ongoing, digestible communication keeps momentum.</li>
<li>Dedicated ownership and phased roadmaps prevent stalls.</li>
<li>Policy flexibility and cultural support enable lasting change.</li>
</ul>
This is an iterative, ongoing process. Each success builds trust and opens doors for more ambitious research efforts. Be patient, stay persistent, and keep adapting. When your organization sees research as a core driver of decisions, you’ll know you’ve truly succeeded.
]]></content:encoded>
<author>hello@smashingmagazine.com (Paul Boag)</author>
<enclosure url="http://files.smashing.media/articles/turning-user-research-into-organizational-change/turning-user-research-into-organizational-change.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Never Stop Exploring (July 2025 Wallpapers Edition)]]></title>
<link>https://smashingmagazine.com/2025/06/desktop-wallpaper-calendars-july-2025/</link>
<guid>https://smashingmagazine.com/2025/06/desktop-wallpaper-calendars-july-2025/</guid>
<pubDate>Mon, 30 Jun 2025 12:00:00 GMT</pubDate>
<description><![CDATA[July is just around the corner, and that means it’s time for a new collection of desktop wallpapers. Created with love by artists and designers from across the globe, they are bound to bring some good vibes to your screen. Enjoy!]]></description>
<content:encoded><![CDATA[For many of us, July is the epitome of summer. The time for spending every free minute outside to enjoy the sun and those seemingly endless summer days, whether it’s in a nearby park, by a lake, or on a trip exploring new places. So why not bring a bit of that summer joy to your desktop, too?
For this wallpapers post, artists and designers from across the globe once again tickled their creativity and designed desktop wallpapers that capture that very special July feeling — just like it has been a <a href="https://www.smashingmagazine.com/category/wallpapers">monthly tradition</a> here at Smashing Magazine for more then 14 years already. You’ll find their artworks compiled below, along with a selection of summery favorites from our wallpapers archives that are just too good to be forgotten. A huge thank-you to everyone who shared their designs with us this month — this post wouldn’t exist without you!
If you, too, would like to get featured in one of our upcoming wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">submit your design</a>. We can’t wait to see what you’ll come up with! Happy July!
<ul>
<li>You can click on every image to see a larger preview.</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 full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li>
</ul>
Stamped In Summer
“Moments of July marked in sunlight, sea breeze, and sky — a quiet snapshot of summer, worn at the edges like a well-traveled postcard.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/july-25-stamped-in-summer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-stamped-in-summer-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/july-25-stamped-in-summer-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/cal/july-25-stamped-in-summer-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/stamped-in-summer/nocal/july-25-stamped-in-summer-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Fried To Perfection
“This egg knows what July is all about. Soaking up the sun, relaxing without a care, and letting the warmth do its magic. Whether it’s a full vacation or just a quiet afternoon, take a moment to pause and recharge. You deserve it.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/july-25-fried-to-perfection-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-fried-to-perfection-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/july-25-fried-to-perfection-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/cal/july-25-fried-to-perfection-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/fried-to-perfection/nocal/july-25-fried-to-perfection-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Attack Of The Summer Snack
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/july-25-attack-of-the-summer-snack-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-attack-of-the-summer-snack-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/july-25-attack-of-the-summer-snack-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/cal/july-25-attack-of-the-summer-snack-cal-3840x2160.png">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/attack-of-the-summer-snack/nocal/july-25-attack-of-the-summer-snack-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Not For Messy Desks
“Before going on holidays, let’s clean up your desk! Choose this wallpaper with shapes in disorder, and then you will have to reorder your desktop shortcuts.” — Designed by <a href="https://www.philippebrouard.fr">Philippe Brouard</a> from France.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/july-25-not-for-messy-desks-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-not-for-messy-desks-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/july-25-not-for-messy-desks-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/cal/july-25-not-for-messy-desks-cal-3840x2160.jpg">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/not-for-messy-desks/nocal/july-25-not-for-messy-desks-nocal-3840x2160.jpg">3840x2160</a></li>
</ul>
The Tiny Mermaid
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/july-25-the-tiny-mermaid-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-the-tiny-mermaid-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/july-25-the-tiny-mermaid-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/cal/july-25-the-tiny-mermaid-cal-3840x2160.png">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/the-tiny-mermaid/nocal/july-25-the-tiny-mermaid-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Coastal Summer
“I was inspired by the Italian summer aesthetic when creating this wallpaper.” — Designed by <a href="https://www.instagram.com/dot.designz/?__pwa=1">Dylan Pugh</a> from the United States.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/july-25-coastal-summer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-coastal-summer-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/july-25-coastal-summer-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/cal/july-25-coastal-summer-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/coastal-summer/nocal/july-25-coastal-summer-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Enjoy The Little Things
“Sometimes the smallest things take up the most room in your heart — pause, notice, and smile.” — Designed by <a href="https://www.linkedin.com/in/hiteshpuri">Hitesh Puri</a> from Delhi, India.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/july-25-enjoy-the-little-things-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-enjoy-the-little-things-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/july-25-enjoy-the-little-things-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/cal/july-25-enjoy-the-little-things-cal-3840x2160.png">3840x2160</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/enjoy-the-little-things/nocal/july-25-enjoy-the-little-things-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Summer With Virginia
“Summer is here, and this month we share it with Virginia Apgar, a great woman who, thanks to her famous Apgar test applied to newborns, has reduced infant mortality worldwide.” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.
<a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/july-25-summer-with-virginia-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-summer-with-virginia-preview-opt.png" /></a>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/july-25-summer-with-virginia-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/cal/july-25-summer-with-virginia-cal-2560x1440.png">2560x1440</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-25/summer-with-virginia/nocal/july-25-summer-with-virginia-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Birdie July
Designed by <a href="https://pathlove.com/">Lívi Lénárt</a> from Hungary.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5448a8b6-1627-4a28-bf82-e76d385f88dd/july-20-birdie-july-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52c6aad-ac2c-4fd9-9aa6-528d7bf7bf6e/july-20-birdie-july-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52c6aad-ac2c-4fd9-9aa6-528d7bf7bf6e/july-20-birdie-july-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-20/birdie-july/nocal/july-20-birdie-july-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Diving Among Corals
“The long-awaited vacation is coming closer. After working all year, we find ourselves with months that, although we don’t stop completely, are lived differently. We enjoy the days and nights more, and if we can, the beach will keep us company. Therefore, we’ll spend this month in Australia, enjoying the coral reefs and diving without limits.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela </a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-24-diving-among-corals-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-24/diving-among-corals/nocal/july-24-diving-among-corals-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Summer Cannonball
“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1537ec9a-99ad-4cc1-8755-8ac0ee69b83b/july-17-summer-cannonball-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e8e873-674d-43b2-b5b6-3709ad2f428c/july-17-summer-cannonball-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e8e873-674d-43b2-b5b6-3709ad2f428c/july-17-summer-cannonball-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-640x1136.png">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-750x1334.png">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/summer-cannonball/nocal/july-17-summer-cannonball-nocal-2880x1800.png">2880x1800</a></li>
</ul>
Day Turns To Night
Designed by <a href="https://www.behance.net/xenialatii">Xenia Latii</a> from Germany.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2996c7ca-1d17-421e-b9e8-fb327c486367/july-16-day-turns-to-night-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8502bdc-b5a7-44e3-85a1-13c5ee8987a0/july-16-day-turns-to-night-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e8502bdc-b5a7-44e3-85a1-13c5ee8987a0/july-16-day-turns-to-night-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/day-turns-to-night/nocal/july-16-day-turns-to-night-nocal-2560x1440.jpg">2560x1440</a></li></ul>
A Flamboyance Of Flamingos
“July in South Africa is dreary and wintery so we give all the southern hemisphere dwellers a bit of color for those gray days. And for the northern hemisphere dwellers a bit of pop for their summer!” — Designed by Wonderland Collective from South Africa.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2bbc33fd-46b8-437c-ac69-ecbf96320b61/july-15-a-flamboyance-of-flamingos-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa099a9d-0d72-4083-ac98-3e84d03dc825/july-15-a-flamboyance-of-flamingos-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa099a9d-0d72-4083-ac98-3e84d03dc825/july-15-a-flamboyance-of-flamingos-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/a-flamboyance-of-flamingos/nocal/july-15-a-flamboyance-of-flamingos-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
In Space
Designed by Lieke Dol from the Netherlands.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-in-space-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/in-space/nocal/july-23-in-space-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Eternal Summer
“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds, and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44fce15a-b5f0-4933-b73b-66411fb6b698/july-17-eternal-summer-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd17eedd-d2e1-43d9-806a-1a853d0415fb/july-17-eternal-summer-preview-opt.png" /></a><ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd17eedd-d2e1-43d9-806a-1a853d0415fb/july-17-eternal-summer-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/eternal-summer/nocal/july-17-eternal-summer-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Road Trip In July
“July is the middle of summer, when most of us go on road trips, so I designed a calendar inspired by my love of traveling and summer holidays.” — Designed by Patricia Coroi from Romania.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/319ba5e3-32f3-4335-a680-5959c2a49775/july-17-road-trip-in-july-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f660eb-9d67-48e9-8de5-0b38b16181fa/july-17-road-trip-in-july-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f660eb-9d67-48e9-8de5-0b38b16181fa/july-17-road-trip-in-july-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-640x1136.jpg">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/road-trip-in-july/nocal/july-17-road-trip-in-july-nocal-2560x1440.jpg">2560x1440</a></li></ul>
DJ Little Bird
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2024/july-23-dj-little-bird-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-23/dj-little-bird/nocal/july-23-dj-little-bird-nocal-3840x2160.png">3840x2160</a></li>
</ul>
July Flavor
Designed by Natalia Szendzielorz from Poland.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/37726e2c-1f3f-4609-a499-bf44eab09dcb/july-16-july-flavour-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02dcf5d3-db10-43f8-9d98-f1dd53e6d702/july-16-july-flavour-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02dcf5d3-db10-43f8-9d98-f1dd53e6d702/july-16-july-flavour-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-540x960.jpg">540x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-600x800.jpg">600x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/july-flavour/nocal/july-16-july-flavour-nocal-2880x1800.jpg">2880x1800</a></li>
</ul>
Heated Mountains
“Warm summer weather inspired the color palette.” — Designed by Marijana Pivac from Croatia.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-18-heated-mountains-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-18/heated-mountains/nocal/july-18-heated-mountains-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Hotdog
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-22-hotdog-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/july-22/hotdog/nocal/july-22-hotdog-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Sweet Summer
“In summer, everything inspires me.” — Designed by Maria Karapaunova from Bulgaria.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-preview-opt.png" /></a>
<ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-17-sweet-summer-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/sweet-summer/nocal/july-17-sweet-summer-nocal-2560x1440.png">2560x1440</a></li></ul>
The Ancient Device
Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ec8b597-e406-4b1e-b0d2-95420b115f6c/july-21-the-ancient-device-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4f1d08-e3cd-4783-8cde-1386f34ed7c3/july-21-the-ancient-device-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4f1d08-e3cd-4783-8cde-1386f34ed7c3/july-21-the-ancient-device-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-21/the-ancient-device/nocal/july-21-the-ancient-device-nocal-3840x2160.png">3840x2160</a></li>
</ul>
Riding In The Drizzle
“Rain has come, showering the existence with new seeds of life. Everywhere life is blooming, as if they were asleep and the falling music of raindrops have awakened them. Feel the drops of rain. Feel this beautiful mystery of life. Listen to its music, melt into it.” — Designed by <a href="https://aufait.in/document-management-system">DMS Software</a> from India.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5acea4a6-5483-4425-8eeb-c7f5f0a3b295/july-19-riding-in-the-drizzle-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0828d9a5-d788-4e99-b930-5bbad01b45e2/july-19-riding-in-the-drizzle-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0828d9a5-d788-4e99-b930-5bbad01b45e2/july-19-riding-in-the-drizzle-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/riding-in-the-drizzle/nocal/july-19-riding-in-the-drizzle-nocal-2560x1440.jpg">2560x1440</a></li>
</ul>
Taste Like Summer
“In times of clean eating and the world of superfoods there is one vegetable missing. An old, forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it, dip it!” — Designed by <a href="https://www.netzbewegung.com/de/start/">Alexandra Tamgnoué</a> from Germany.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/28df075e-42b1-4990-a5d3-cf7e8b9b9b41/july-17-taste-like-summer-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3de3571f-466c-4772-a945-4e22af244f29/july-17-taste-like-summer-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3de3571f-466c-4772-a945-4e22af244f29/july-17-taste-like-summer-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/taste-like-summer/nocal/july-17-taste-like-summer-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Island River
“Make sure you have a refreshing source of ideas, plans, and hopes this July. Especially if you are to escape from urban life for a while.” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e25b7ef-1294-4f55-933a-d8e14e92affc/july-16-island-river-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c639eef9-6a52-47e8-8996-ba56f1167742/july-16-island-river-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c639eef9-6a52-47e8-8996-ba56f1167742/july-16-island-river-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/island-river/nocal/july-16-island-river-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Captain Amphicar
“My son and I are obsessed with the Amphicar right now, so why not have a little fun with it?” — Designed by <a href="https://www.3bicycles.com/">3 Bicycles Creative</a> from the United States.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2915201-289a-4723-ae4a-5d014105c0db/july-16-captain-amphicar-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/295f6033-ce57-4e72-b3e0-9de5cae96cd9/july-16-captain-amphicar-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/295f6033-ce57-4e72-b3e0-9de5cae96cd9/july-16-captain-amphicar-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/captain-amphicar/nocal/july-16-captain-amphicar-nocal-2560x1440.png">2560x1440</a></li></ul>
An Intrusion Of Cockroaches
“Ever watched Joe’s Apartment when you were a kid? Well, that movie left a soft spot in my heart for the little critters. Don’t get me wrong: I won’t invite them over for dinner, but I won’t grab my flip flop and bring the wrath upon them when I see one running in the house. So there you have it… three roaches… bringing the smack down on that pesky human… ZZZZZZZAP!!” — Designed by Wonderland Collective from South Africa.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5782cbe2-5c14-49f7-ba53-bce238c1d430/july-15-an-intrusion-of-cockroaches-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efd43660-6705-4fb6-bcc2-993e764a8a5b/july-15-an-intrusion-of-cockroaches-preview-opt.png" /></a>
<ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/efd43660-6705-4fb6-bcc2-993e764a8a5b/july-15-an-intrusion-of-cockroaches-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/an-intrusion-of-cockroaches/nocal/july-15-an-intrusion-of-cockroaches-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Tropical Lilies
“I enjoy creating tropical designs. They fuel my wanderlust and passion for the exotic, instantaneously transporting me to a tropical destination.” — Designed by Tamsin Raslan from the United States.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eedd035d-7844-4e18-826f-4f48965c4d37/july-16-tropical-lilies-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/18e34889-f79b-4fec-8d5f-e4b951e98daf/july-16-tropical-lilies-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/18e34889-f79b-4fec-8d5f-e4b951e98daf/july-16-tropical-lilies-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1440x1050.png">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-16/tropical-lilies/nocal/july-16-tropical-lilies-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Frogs In The Night
“July is coming and the nights are warmer. Frogs look at the moon while they talk about their day.” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-preview-opt.png" /></a>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-july-2023/july-19-frogs-in-the-night-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-19/frogs-in-the-night/nocal/july-19-frogs-in-the-night-nocal-2560x1440.png">2560x1440</a></li>
</ul>
Summer Never Ends
“July is a very special month to me — it’s the month of my birthday and of the best cherries.” — Designed by <a href="https://izhik.com/">Igor Izhik</a> from Canada.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e5e3757-f986-4a53-bf01-5dcbf3e50346/july-15-summer-never-ends-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3fbc34-cdd9-458f-998d-79234057df5b/july-15-summer-never-ends-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3fbc34-cdd9-458f-998d-79234057df5b/july-15-summer-never-ends-preview.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-15/summer-never-ends/nocal/july-15-summer-never-ends-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Fire Camp
“What’s better than a starry summer night with an (unexpected) friend around a fire camp with some marshmallows? Happy July!” — Designed by <a href="https://etiennemansard.com/">Etienne Mansard</a> from the UK.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a193982-ecfe-4701-9809-ae4962f3cbea/july-17-fire-camp-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6bf0b33e-80dc-42ef-8a79-273dd775e9b8/july-17-fire-camp-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6bf0b33e-80dc-42ef-8a79-273dd775e9b8/july-17-fire-camp-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1440x1050.jpg">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-2048x1536.jpg">2048x1536</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/fire-camp/nocal/july-17-fire-camp-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Cactus Hug
Designed by <a href="https://www.iliscreative.com">Ilaria Bagnasco</a> from Italy.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ba59339-0606-4f62-adee-f504e32dd5ab/july-17-cactus-hug-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4851b8-8e30-4bc2-b4f3-50270d400fdd/july-17-cactus-hug-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d4851b8-8e30-4bc2-b4f3-50270d400fdd/july-17-cactus-hug-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/cactus-hug/nocal/july-17-cactus-hug-nocal-2560x1600.jpg">2560x1600</a></li>
</ul>
Melting July
“July often brings summer heat and we all wish for something cold to take it away… If you take a closer look, you will see an ice cream melting from the sunset. Bon appetit!” — Designed by <a href="https://www.popwebdesign.de/">PopArt Studio</a> from Serbia.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c52951d6-d5e1-4c7a-ab4f-0dbf94d408a1/july-17-melting-july-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bbc2d132-c70d-4da9-bba7-ea17da755c98/july-17-melting-july-preview-opt.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bbc2d132-c70d-4da9-bba7-ea17da755c98/july-17-melting-july-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-17/melting-july/nocal/july-17-melting-july-nocal-2560x1440.jpg">2560x1440</a></li></ul>
Summer Essentials
“A few essential items for the summertime weather at the beach, park, and everywhere in-between.” — Designed by <a href="https://dribbble.com/zvandehey">Zach Vandehey</a> from the United States.
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b76a80e0-f512-46ed-897c-c4bb4209c17b/july-12-summer-essentials-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f0df6f6-c026-466b-aaf0-58320646d673/july-12-summer-essentials-preview.png" /></a>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f0df6f6-c026-466b-aaf0-58320646d673/july-12-summer-essentials-preview.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/july-12/july-12-summer_essentials_calendar__10-nocal-2560x1440.jpg">2560x1440</a></li></ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Cosima Mielke)</author>
<enclosure url="http://files.smashing.media/articles/desktop-wallpaper-calendars-july-2025/july-25-stamped-in-summer-preview-opt.png" length="0" type="image/png"/>
</item>
<item>
<title><![CDATA[Can Good UX Protect Older Users From Digital Scams?]]></title>
<link>https://smashingmagazine.com/2025/06/can-good-ux-protect-older-users-digital-scams/</link>
<guid>https://smashingmagazine.com/2025/06/can-good-ux-protect-older-users-digital-scams/</guid>
<pubDate>Wed, 25 Jun 2025 12:00:00 GMT</pubDate>
<description><![CDATA[As online scams become more sophisticated, Carrie Webster explores whether good UX can serve as a frontline defense, particularly for non-tech-savvy older users navigating today’s digital world.]]></description>
<content:encoded><![CDATA[A few years ago, my mum, who is in her 80s and not tech-savvy, almost got scammed. She received an email from what appeared to be her bank. It looked convincing, with a professional logo, clean formatting, and no obvious typos. The message said there was a suspicious charge on her account and presented a link asking her to “verify immediately.”
She wasn’t sure what to do. So she called me.
That hesitation saved her. The email was fake, and if she’d clicked on the link, she would’ve landed on a counterfeit login page, handing over her password details without knowing it.
That incident shook me. I design digital experiences for a living. And yet, someone I love almost got caught simply because a bad actor knew how to design well. That raised a question I haven’t stopped thinking about since: Can good UX protect people from online scams?
Quite apart from this incident, I see my Mum struggle with most apps on her phone. For example, navigating around her WhatsApp and YouTube apps seems to be very awkward for her. She is not used to accessing the standard app navigation at the bottom of the screen. What’s “intuitive” for many users is simply not understood by older, non-tech users. 
Brief Overview Of How Scams Are Evolving Online
<a href="https://www.macquarie.com.au/security-and-fraud/scams.html">Online scams</a> are becoming increasingly sophisticated, leveraging advanced technologies like artificial intelligence and deepfake videos to create more convincing yet fraudulent content. Scammers are also exploiting new digital platforms, including social media and messaging apps, to reach victims more directly and personally. 
Phishing schemes have become more targeted, often using personal information taken from social media to craft customised attacks. Additionally, scammers are using crypto schemes and fake investment opportunities to lure those seeking quick financial gains, making online scams more convincing, diverse, and harder to detect.
The Rise In Fraud Targeting Older, Less Tech-savvy Users
In 2021, there were more than <a href="https://theconversation.com/are-older-adults-more-vulnerable-to-scams-what-psychologists-have-learned-about-whos-most-susceptible-and-when-227991#:~:text=Social%20and%20emotional%20influences%20are,to%20fraudulent%20emails%20and%20robocalls.&text=Finally%2C%20an%20individual's%20brain%20and,make%20someone%20appear%20less%20trustworthy.">90,000 older victims of fraud</a>, according to the FBI. These cases resulted in US$1.7 billion in losses, a 74% increase compared with 2020. Even so, that may be a significant undercount since embarrassment or lack of awareness keeps some victims from reporting.
In Australia, the ACCC’s 2023 “<a href="https://www.guests.com.au/accounting-news/2024-05/accc-scam-report/">Targeting Scams</a>” report revealed that Australians aged 65 and over were the only age group to experience an increase in scam losses compared to the previous year. Their losses rose by 13.3% to $120 million, often following contact with scammers on social media platforms.
In the UK, nearly <a href="https://www.independentage.org/news-media/press-releases/new-data-shows-online-scams-cost-older-people-an-average-of-ps4000-but">three in five (61%) people aged over 65</a> have been the target of fraud or a scam. On average, older people who have been scammed have lost nearly £4,000 each.
According to <a href="https://www.ftc.gov/news-events/news/press-releases/2024/10/ftc-issues-annual-report-congress-agencys-actions-protect-older-adults">global consumer protection agencies</a>, people over 60 are more likely to lose money to online scams than any other group. That’s a glaring sign: we need to rethink how we’re designing experiences for them.
Older users are disproportionately <a href="https://silversafeandsecure.org/resources-blog/why-do-scams-target-older-people-a-short-guide">targeted by scammers</a> for several reasons:
<ul>
<li>They’re perceived as having more savings or assets.</li>
<li>They’re less likely to be digital natives, so they may not spot the red flags others do.</li>
<li>They tend to trust authority figures and brands, especially when messages appear “official.”</li>
</ul>
Scammers exploit trust. They impersonate banks, government agencies, health providers, and even family members. The one that scares me the most is the ability to use AI to mimic a loved one’s voice — anyone can be tricked by this. 
Cognitive Load And Decision Fatigue In Older Users
Imagine navigating a confusing mobile app after a long day. Now imagine you’re in your 70s or 80s; your eyesight isn’t as sharp, your finger tapping isn’t as accurate, and every new screen feels like a puzzle.
As people age, they may experience <a href="https://uark.pressbooks.pub/hbse1/chapter/cognitive-development-in-late-adulthood_ch_29/">slower processing speeds</a>, reduced working memory, and lower tolerance for complexity. That means:
<ul>
<li>Multistep processes are harder to follow.</li>
<li>Unexpected changes in layout or behaviour can cause anxiety.</li>
<li>Vague language increases confusion.</li>
</ul>
Decision fatigue hits harder, too. If a user has already made five choices on an app, they may click the 6th button without fully understanding what it does, especially if it seems to be part of the flow. 
Scammers rely on these factors. However, good UX can help to reduce it.
The Digital Literacy Gap And Common Pain Points
There’s a big difference between someone who grew up with the internet and someone who started using it in their 60s. <a>Older users often struggle with</a>:
<ul>
<li>Recognising safe vs. suspicious links;</li>
<li>Differentiating between ads and actual content;</li>
<li>Knowing how to verify sources;</li>
<li>Understanding terms like “multi-factor authentication” or “phishing”.</li>
</ul>
They may also be more likely to blame themselves when something goes wrong, leading to underreporting and repeat victimization.
Design can help to bridge some of that gap. But only if we build with their experience in mind.
The Role UX Designers Can Play In Preventing Harm
As UX designers, we focus on making things easy, intuitive, and accessible. But we can also shape how people understand risk.
Every choice, from wording to layout to colour, can affect how users interpret safety cues. When we design for the right cues, we help users avoid mistakes. When we get them wrong or ignore them altogether, we leave people vulnerable.
The good news? We have tools. We have influence. And in a world where digital scams are rising, we can use both to design for protection, not just productivity.
UX As The First Line Of Defence
The list below describes some UX design improvements that we can consider as designers:
<h3>1. Clear, Simple Design As A Defence Mechanism</h3>
<ul>
<li>Simple interfaces reduce user errors and scam risks.</li>
<li>Use linear flows, fewer input fields, and clear, consistent instructions.</li>
<li>Helps users feel confident and spot unusual activity.</li>
</ul>
<h3>2. Make Security Cues Obvious And Consistent</h3>
<ul>
<li>Users rely on visible indicators: padlocks, HTTPS, and verification badges.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/1-obvious-padlock-icon.png" />
<ul>
<li>Provide clear warnings for risky actions and unambiguous button labels.</li>
</ul>
<h3>3. Prioritize Clarity In Language</h3>
<ul>
<li>Use plain, direct language for critical actions (e.g., “Confirm $400 transfer”).</li>
<li>Avoid vague CTAs like “Continue” or playful labels like “Let’s go!”</li>
<li>Clear language reduces uncertainty, especially for older users.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/2-action-buttons-instructions.png" />
<h3>4. Focus On Accessibility And Readability</h3>
<ul>
<li>Use minimum 16px fonts and high-contrast colour schemes.</li>
<li>Provide clear spacing and headings to improve scanning.</li>
<li>Accessibility benefits everyone, not just older users.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/3-large-text-icons.jpg" />
<h3>5. Use Friction To Protect, Not Hinder</h3>
<ul>
<li>Intentional friction (e.g., verification steps or warnings) can prevent mistakes.</li>
<li>Thoughtfully applied, it enhances safety without frustrating users.</li>
</ul>
<h3>6. Embed Contextual Education</h3>
<ul>
<li>Include just-in-time tips, tooltips, and passive alerts.</li>
<li>Help users understand risks within the flow, not after the fact.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/4-tooltips.png" />
What Can’t UX Fix?
Let’s be realistic: UX isn’t magic. We can’t stop phishing emails from landing in someone’s inbox. We can’t rewrite bad policies, and we can’t always prevent users from clicking on a well-disguised trap.
I personally think that even good UX may be limited in helping people like my mother, who will never be tech-savvy. To help those like her, ultimately, additional elements like support contact numbers, face-to-face courses on how to stay safe on your phone, and, of course, help from family members as required. These are all about human contact touch points, which can never be replaced by any kind of digital or AI support that may be available.
What we can do as designers is build systems that make hesitation feel natural. We can provide visual clarity, reduce ambiguity, and inject small moments of friction that nudge users to double-check before proceeding, especially in financial and banking apps and websites. 
That hesitation might be the safeguard we need. 
Other Key Tips To Help Seniors Avoid Online Scams
<h3>1. Be Skeptical Of Unsolicited Communications</h3>
Scammers often pose as <a href="https://allseniors.org/articles/avoiding-scams-a-seniors-guide-to-online-and-phone-security">trusted entities</a> like banks, government agencies, or tech support to trick individuals into revealing personal information. Avoid clicking on links or downloading attachments from unknown sources, and never share personal details like your Medicare number, passwords, or banking information unless you’ve verified the request independently.
<h3>2. Use Strong, Unique Passwords And Enable Two-Factor Authentication</h3>
Create complex passwords that combine letters, numbers, and symbols, and avoid reusing passwords across different accounts. Whenever possible, enable two-factor authentication (2FA) to add an extra layer of security to your online accounts.
<h3>3. Stay Informed About Common Scams</h3>
<a href="https://allseniors.org/articles/avoiding-scams-a-seniors-guide-to-online-and-phone-security/">Educate yourself</a> on prevalent scams targeting seniors, such as phishing emails, romance scams, tech support fraud, and investment schemes. <a href="https://www.ageuk.org.uk/information-advice/money-legal/scams-fraud/scams-guide/">Regularly consult trusted resources</a> like the NCOA and Age UK for updates on new scam tactics and prevention strategies.
<h3>4. Verify Before You Act</h3>
If you <a href="https://www.kiplinger.com/retirement/stop-scammers-targeting-your-retirement-savings">receive a request</a> for money or personal information, especially if it's urgent, take a moment to verify its legitimacy. Contact the organization directly using official contact information, not the details provided in the suspicious message. Be particularly cautious with unexpected requests from supposed family members or friends.
<h3>5. Report Suspected Scams Promptly</h3>
If you believe you've encountered a scam, report it to the appropriate authorities. Reporting helps protect others and contributes to broader efforts to combat fraud.
For more comprehensive information and resources, consider exploring the following:
<ul>
<li><a href="https://www.ncoa.org/article/22-tips-for-seniors-to-avoid-scams/">National Council on Aging: 22 Tips for Seniors to Avoid Scams</a></li>
<li><a href="https://www.ageuk.org.uk/information-advice/money-legal/scams-fraud/scams-guide/">Age UK: Avoiding Scams Information Guide</a></li>
<li><a href="https://www.esafety.gov.au/seniors/online-scams">eSafety Commissioner: Online Scams for Seniors</a></li>
</ul>
Examples Of Good Alert/Warning UX In Banking Platforms
I recall my mother not recognising a transaction in her banking app, and she thought that money was being taken from her account. It turns out that it was a legitimate transaction made in a local cafe, but the head office was located in a suburb she was not familiar with, which caused her to think it was fraudulent. 
This kind of scenario could easily be addressed with a feature I have seen in the ING banking app (International Netherlands Group). You tap on the transaction to view more information about your transaction. 
<ul>
<li>ING bank: You can now select a transaction to get more information on the business.</li>
</ul>
<a href="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/5-ing-banking-app.gif"><img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/5-ing-banking-app.gif" /></a>ING Banking App: click on the transaction to view more details. (Source: <a href="https://helphub.ing.com.au/how-to/additional-transaction-details/">ING Help Hub</a>)
<ul>
<li>Banking apps like NAB (National Australia Bank) now interrupt suspicious transfers with messages like, “Have you spoken to this person on the phone? Scammers often pose as trusted contacts.” <a href="https://news.nab.com.au/news/nab-payment-alerts-latest/">NAB said</a> that December was the biggest month in 2024 for abandoned payments, with customers scrapping $26 million worth of payments after receiving a payment alert.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/6-nab-payment-alerts.jpg" />
<ul>
<li>Macquarie Bank has introduced additional prompts for bank transactions to confirm the user’s approval of all transactions. </li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/7-macquarie-bank-approve-transactions.png" />
<ul>
<li>Monzo Bank has added three security elements to reduce online fraud for banking transactions:<ul>
<li>Verified Locations: Sending or moving large amounts of money from locations that the account holder has marked as safe. This helps block fraudsters from accessing funds if they’re not near these trusted places.</li>
<li>Trusted Approvers: For large transactions, a trusted contact must give the green light. This adds protection if their phone is stolen or if they want to safeguard someone who may be more vulnerable.</li>
<li>Secure QR Codes: Account holders can generate a special QR code and keep it stored in a safe place. They scan it when needed to unlock extra layers of security.</li>
</ul>
</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/8-security-options-online-transactions.png" />
<ul>
<li>Email platforms like Gmail highlight spoofed addresses or impersonation attempts with yellow banners and caution icons.</li>
</ul>
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/9-gmail-yellow-banner.png" />
These interventions are not aimed at stopping users, but they can give them one last chance to rethink their transactions. That’s powerful.
Finally, here’s an example of clear UX cues that streamline the experience and guide users through their journey with greater confidence and clarity.
<img src="https://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/10-ux-trusted-experience.png" />
Conclusion
Added security features in banking apps, like the examples above, aren’t just about preventing fraud; they’re examples of thoughtful UX design. These features are built to feel natural, not burdensome, helping users stay safe without getting overwhelmed. As UX professionals, we have a responsibility to design with protection in mind, anticipating threats and creating experiences that guide users away from risky actions. Good UX in financial products isn’t just seamless; it’s about security by design.
And in a world where digital deception is on the rise, protection is usability. Designers have the power and the responsibility to make interfaces that support safer choices, especially for older users, whose lives and life savings may depend on a single click.
Let’s stop thinking of security as a backend concern or someone else’s job. Let’s design systems that are scam-resistant, age-inclusive, and intentionally clear. And don’t forget to reach out with the additional human touch to help your older family members.
When it comes down to it, good UX isn’t just helpful — it can be life-changing.
]]></content:encoded>
<author>hello@smashingmagazine.com (Carrie Webster)</author>
<enclosure url="http://files.smashing.media/articles/can-good-ux-protect-older-users-digital-scams/can-good-ux-protect-older-users-digital-scams.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Decoding The SVG <code>path</code> Element: Curve And Arc Commands]]></title>
<link>https://smashingmagazine.com/2025/06/decoding-svg-path-element-curve-arc-commands/</link>
<guid>https://smashingmagazine.com/2025/06/decoding-svg-path-element-curve-arc-commands/</guid>
<pubDate>Mon, 23 Jun 2025 10:00:00 GMT</pubDate>
<description><![CDATA[On her quest to teach you how to code vectors by hand, Myriam Frisano’s second installment of a `path` deep dive explores the most complex aspects of SVG’s most powerful element. She’ll help you understand the underlying rules and function of how curves and arcs are constructed. By the end of it, your toolkit is ready to tackle all types of tasks required to draw with code — even if some of the lines twist and turn.]]></description>
<content:encoded><![CDATA[In the <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">first part of decoding the SVG <code>path</code> pair</a>, we mostly dealt with converting things from semantic tags (<code>line</code>, <code>polyline</code>, <code>polygon</code>) into the <code>path</code> command syntax, but the <code>path</code> element didn’t really offer us any new shape options. This will change in this article as we’re learning how to draw curves and arcs, which just refer to parts of an ellipse.
TL;DR On Previous Articles
If this is your first meeting with this series, I recommend you familiarize yourself with the <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">basics of hand-coding SVG</a>, as well as <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/marker">how the <code><marker></code> works</a> and have a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate">basic understanding of animate</a>, as this guide doesn’t explain them. I also recommend knowing about the <code>M/m</code> command within the <code><path></code> <code>d</code> attribute (I wrote the aforementioned <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">article on path line commands</a> to help).
Note: This article will solely focus on the syntax of curve and arc commands and not offer an introduction to <code>path</code> as an element.
Before we get started, I want to do a quick recap of how I code SVG, which is by using JavaScript. I don’t like dealing with numbers and math, and reading SVG code that has numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and all written out, I have a much better time with this type of code, and I think you will, too.
As the goal of this article is about understanding <code>path</code> syntax and not about doing placement or how to leverage loops and other more basic things, I will not run you through the entire setup of each example. I’ll share some snippets of the code, but please note that it may be slightly adjusted from the CodePen or simplified to make the article easier to read. However, if there are specific questions about code not part of the text that’s in the CodePen demos — the comment section is open, as always.
To keep this all framework-agnostic, the code is written in vanilla JavaScript, though, in practice, TypeScript comes highly recommended when dealing with complex images.
Drawing Bézier Curves
Being able to draw lines, polygons, polylines, and compounded versions of them is all fun and nice, but <code>path</code> can also do more than just offer more cryptic implementations of basic semantic SVG tags.
One of those additional types is Bézier curves.
There are multiple different curve commands. And this is where the idea of points and control points comes in.
<blockquote>Bézier math plotting is out of scope for this article. But, there is a visually gorgeous video by Freya Holmér called <a href="https://youtu.be/aVwxzDHniEw?si=WB_3i88VVJlZS6jf">The Beauty of Bézier Curves</a> which gets into the construction of cubic and quadratic bézier curves that features beautiful animation and the math becomes a lot easier to digest.</blockquote>
Luckily, SVG allows us to draw quadratic curves with one control point and cubic curves with two control points without having to do any additional math.
So, what is a control point? A control point is the position of the handle that controls the curve. It is not a point that is drawn.
I found the best way to understand these path commands is to render them like a GUI, like Affinity and Illustrator would. Then, draw the “handles” and draw a few random curves with different properties, and see how they affect the curve. Seeing that animation also really helps to see the mechanics of these commands.
This is what I’ll be using markers and animation for in the following visuals. You will notice that the markers I use are rectangles and circles, and since they are connected to lines, I can make use of <code>marker</code> and then save myself a lot of animation time because these additional elements are rigged to the system. (And animating a single <code>d</code> command instead of <code>x</code> and <code>y</code> attributes separately makes the SVG code also much shorter.)
<h3>Quadratic Bézier Curves: <code>Q</code> & <code>T</code> Commands</h3>
The <code>Q</code> command is used to draw quadratic béziers. It takes two arguments: the control point and the end point.
So, for a simple curve, we would start with <code>M</code> to move to the start point, then <code>Q</code> to draw the curve.
<div>
<pre><code>const path = <code>M${start.x} ${start.y} Q${control.x} ${control.y} ${end.x} ${end.y}</code>;
</code></pre>
</div>
Since we have the Control Point, the Start Point, and the End Point, it’s actually quite simple to render the singular handle path like a graphics program would.
Funny enough, you probably have never interacted with a quadratic Bézier curve like with a cubic one in most common GUIs! Most of the common programs will convert this curve to a cubic curve with two handles and control points as soon as you want to play with it. 
For the drawing, I created a couple of markers, and I’m drawing the handle in red to make it stand out a bit better.
I also stroked the main <code>path</code> with a gradient and gave it a crosshatch pattern fill. (We looked at <code>pattern</code> in <a href="https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/">my first article</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient"><code>linearGradient</code></a> is fairly similar. They’re both <code>def</code> elements you can refer to via <code>id</code>.) I like seeing the fill, but if you find it distracting, you can modify the variable for it.
I encourage you to look at the example with and without the rendering of the handle to see some of the nuance that happens around the points as the control points get closer to them. 
See the Pen <a href="https://codepen.io/smashingmag/pen/LEVXLoJ">SVG Path Quadratic Bézier Curve Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
<blockquote>Quadratic Béziers are the “less-bendy” ones. These curves always remain somewhat related to “u” or “n” shapes and can’t be manipulated to be contorted. They can be squished, though.</blockquote>
Connected Bézier curves are called “Splines”. And there is an additional command when chaining multiple quadratic curves, which is the <code>T</code> command.
The <code>T</code> command is used to draw a curve that is connected to the previous curve, so it always has to follow a <code>Q</code> command (or another <code>T</code> command). It only takes one argument, which is the endpoint of the curve.
<div>
<pre><code>const path = <code>M${p1.x} ${p1.y} Q${cP.x} ${cP.y} ${p2.x} ${p2.y} T${p3.x} ${p3.y}</code>
</code></pre>
</div>
The <code>T</code> command will actually use information about our control Point <code>cP</code> within the <code>Q</code> command. 
To see how I created the following example. Notice that the inferred handles are drawn in green, while our specified controls are still rendered in red.
See the Pen <a href="https://codepen.io/smashingmag/pen/vEOQJBM">SVG Path Quadratic Curve T Command [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
OK, so the top curve takes two <code>Q</code> commands, which means, in total, there are three control points. Using a separate control point to create the scallop makes sense, but the third control point is just a reflection of the second control point through the preceding point.
This is what the <code>T</code> command does. It infers control points by reflecting them through the end point of the preceding <code>Q</code> (or <code>T</code>) command. You can see how the system all links up in the animation below, where all I’ve manipulated is the position of the main points and the first control points. The inferred control points follow along.
See the Pen <a href="https://codepen.io/smashingmag/pen/WbvYENx">SVG Path Quadratic Bézier Spline T Command Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
The <code>q</code> and <code>t</code> commands also exist, so they will use relative coordinates.
Before I go on, if you do want to interact with a cubic curve, <a href="https://yqnn.github.io/svg-path-editor/">SVG Path Editor</a> allows you to edit all path commands very nicely.
<h3>Cubic Bézier Curves: <code>C</code> And <code>S</code></h3>
Cubic Bézier curves work basically like quadratic ones, but instead of having one control point, they have two. This is probably the curve you are most familiar with.
The order is that you start with the first control point, then the second, and then the end point.
<div>
<pre><code>const path = <code>M${p1.x} ${p1.y} C${cP1.x} ${cP1.y} ${cP2.x} ${cP2.y} ${p2.x} ${p2.y}</code>;
</code></pre>
</div>
Let’s look at a visual to see it in action.
See the Pen <a href="https://codepen.io/smashingmag/pen/EajOvaL">SVG Path Cubic Bézier Curve Animation [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
<blockquote>Cubic Bézier curves are contortionists. Unlike the quadratic curve, this one can curl up and form loops and take on completely different shapes than any other SVG element. It can split the filled area into two parts, while the quadratic curve can not.</blockquote>
Just like with the <code>T</code> command, a reflecting command is available for cubic curves <code>S</code>.
When using it, we get the first control point through the reflection, while we can define the new end control point and then the end point. Like before, this requires a spline, so at least one preceding <code>C</code> (or <code>S</code>) command.
<pre><code>const path = `
M ${p0.x} ${p0.y}
C ${c0.x} ${c0.y} ${c1.x} ${c1.y} ${p1.x} ${p1.y}
S ${c2.x} ${c2.y} ${p2.x} ${p2.y}
`;
</code></pre>
I created a living visual for that as well.
See the Pen <a href="https://codepen.io/smashingmag/pen/RNPqZPz">SVG Path Cubic Bézier Spline S Command Visual [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
<blockquote>When to use <code>T</code> and <code>S</code>: The big advantage of using these chaining reflecting commands is if you want to draw waves or just absolutely ensure that your spline connection is smooth.</blockquote>
If you can’t use a reflection but want to have a nice, smooth connection, make sure your control points form a straight line. If you have a kink in the handles, your spline will get one, too.
Arcs: <code>A</code> Command
Finally, the last type of <code>path</code> command is to create arcs. Arcs are sections of circles or ellipses.
It’s my least favorite command because there are so many elements to it. But it is the secret to drawing a proper donut chart, so I have a bit of time spent with it under my belt.
Let’s look at it.
Like with any other <code>path</code> command, lowercase implies relative coordinates. So, just as there is an <code>A</code> command, there’s also an <code>a</code>.
So, an arc path looks like this:
<div>
<pre><code>const path = <code>M${start.x} ${start.y} A${radius.x} ${radius.y} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}</code>;
</code></pre>
</div>
And what the heck are <code>xAxisRotation</code>, <code>largeArcFlag</code>, and <code>sweepFlag</code> supposed to be? In short:
<ul>
<li><code>xAxisRotation</code> is the rotation of the underlying ellipse’s axes in degrees.</li>
<li><code>largeArcFlag</code> is a boolean value that determines if the arc is greater than 180°.</li>
<li><code>sweepFlag</code> is also a boolean and determines the arc direction, so does it go clockwise or counter-clockwise?</li>
</ul>
To better understand these concepts, I created this visual.
See the Pen <a href="https://codepen.io/smashingmag/pen/GgJwvZR">SVG Path Arc Command Visuals [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
<h3>Radius Size</h3>
You’ll notice in that CodePen that there are ellipses drawn for each command. In the top row, they are overlapping, while in the bottom row, they are stacked up. Both rows actually use the same <code>radius.x</code> and <code>radius.y</code> values in their arc definitions, while the distance between the start and end points increases for the second row.
The reason why the stacking happens is that the radius size is only taken into consideration if the start and end points fit within the specified ellipse. That behavior surprised me, and thus, I dug into the specs and found the following information on how the arc works:
<blockquote>“Arbitrary numerical values are permitted for all elliptical arc parameters (other than the boolean flags), but user agents must make the following adjustments for invalid values when rendering curves or calculating their geometry: If the endpoint (x, y) of the segment is identical to the current point (e.g., the endpoint of the previous segment), then this is equivalent to omitting the elliptical arc segment entirely. If either rx or ry is 0, then this arc is treated as a straight line segment (a “lineto”) joining the endpoints. If either rx or ry have negative signs, these are dropped; the absolute value is used instead. If rx, ry and x-axis-rotation are such that there is no solution (basically, the ellipse is not big enough to reach from the current point to the new endpoint) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough). See the appendix section <a href="https://svgwg.org/svg2-draft/implnote.html#ArcCorrectionOutOfRangeRadii">Correction of out-of-range radii</a> for the mathematical formula for this scaling operation.” — <a href="https://svgwg.org/svg2-draft/paths.html#ArcOutOfRangeParameters">9.5.1 Out-of-range elliptical arc parameters</a></blockquote>
So, really, that stacking is just nice and graceful error-handling and not how it was intended. Because the top row is how arcs should be used.
<blockquote>When plugging in logical values, the underlying ellipses and the two points give us four drawing options for how we could connect the two points along an elliptical path. That’s what the boolean values are for.</blockquote>
<h3><code>xAxisRotation</code></h3>
Before we get to the booleans, the crosshatch pattern shows the <code>xAxisrotation</code>. The ellipse is rotated around its center, with the degree value being in relation to the x-direction of the SVG.
So, if you work with a circular ellipse, the rotation won’t have any effect on the arc (except if you use it in a pattern like I did there).
<h3>Sweep Flag</h3>
Notice the little arrow marker to show the arc drawing direction. If the value is 0, the arc is drawn clockwise. If the value is 1, the arc is drawn counterclockwise.
<h3>Large Arc Flag</h3>
The large Arc Flag tells the path if you want the smaller or the larger arc from the ellipse. If we have a scaled case, we get exactly 180° of our ellipse.
<blockquote>Arcs usually require a lot more annoying circular number-wrangling than I am happy doing (As soon as radians come to play, I tend to spiral into rabbit holes where I have to relearn too much math I happily forget.) They are more reliant on values being related to each other for the outcome to be as expected and there’s just so much information going in. But — and that’s a bit but — arcs are wonderfully powerful!</blockquote>
Conclusion
Alright, that was a lot! However, I do hope that you are starting to see how <code>path</code> commands can be helpful. I find them extremely useful to illustrate data.
Once you know how easy it is to set up stuff like grids, boxes, and curves, it doesn’t take many more steps to create visualizations that are a bit more unique than what the standard data visualization libraries offer.
<blockquote>With everything you’ve learned in this series of articles, you’re basically fully equipped to render all different types of charts — or other types of visualizations.</blockquote>
Like, how about visualizing the underlying cubic-bezier of something like <code>transition-timing-function: ease;</code> in CSS? That’s the thing I made to figure out how I could turn those transition-timing-functions into something an <code><animate></code> tag understands.
See the Pen <a href="https://codepen.io/smashingmag/pen/gbpQxgp">CSS Cubic Beziers as SVG Animations & CSS Transition Comparisons [forked]</a> by <a href="https://codepen.io/halfapx">Myriam</a>.
SVG is fun and quirky, and the <code>path</code> element may be the holder of the most overwhelming string of symbols you’ve ever laid eyes on during code inspection. However, if you take the time to understand the underlying logic, it all transforms into one beautifully simple and extremely powerful syntax.
I hope with this pair of <code>path</code> decoding articles, I managed to expose the underlying mechanics of how path plots work. If you want even more resources that don’t require you to dive through specs, try the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">MDN tutorial about paths</a>. It’s short and compact, and was the main resource for me to learn all of this. 
However, since I wrote my deep dive on the topic, I stumbled into the beautiful <a href="https://svg-tutorial.com">svg-tutorial.com</a>, which does a wonderful job visualizing SVG coding as a whole but mostly features my favorite arc visual of them all in the <a href="https://svg-tutorial.com/editor/arc">Arc Editor</a>. And if you have a path that you’d like properly decoded without having to store all of the information in these two articles, there’s <a href="https://svg-path-visualizer.netlify.app/">SVG Path Visualizer</a>, which breaks down path information super nicely.
And now: Go forth and have fun playing in the matrix.
]]></content:encoded>
<author>hello@smashingmagazine.com (Myriam Frisano)</author>
<enclosure url="http://files.smashing.media/decoding-svg-path-element-curve-arc-commands/decoding-svg-path-element-curve-arc-commands.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Meet Accessible UX Research, A Brand-New Smashing Book]]></title>
<link>https://smashingmagazine.com/2025/06/accessible-ux-research-pre-release/</link>
<guid>https://smashingmagazine.com/2025/06/accessible-ux-research-pre-release/</guid>
<pubDate>Fri, 20 Jun 2025 16:00:00 GMT</pubDate>
<description><![CDATA[Meet “Accessible UX Research,” our upcoming book to make your UX research inclusive. Learn how to recruit, plan, and design with disabled participants in mind. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. <a href="/printed-books/accessible-ux-research/" data-product-sku="accessible-ux-research" data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-silent="true">Pre-order the book.</a>]]></description>
<content:encoded><![CDATA[UX research can take so much of the guesswork out of the design process! But it’s easy to forget just how different people are and how their needs and preferences can vary. We can’t predict the needs of every user, but we shouldn’t expect different people using the product in roughly the same way. That’s how we end up with an incomplete, inaccurate, or simply wrong picture of our customers.
There is no shortage of accessibility checklists and guidelines. But accessibility isn’t a checklist. It doesn’t happen by accident. It’s a dedicated effort to include and consider and understand different needs of different users to make sure everyone can use our products successfully. That’s why we’ve teamed up with Michele A. Williams on a shiny new book around just that.
Meet Accessible UX Research, your guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. <a href="/printed-books/accessible-ux-research/">Pre-order the book.</a>
<a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-opt.png">
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png" />
</a>
About The Book
The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a practical guide to inclusive UX research, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.
Inside, you’ll learn how to:
<ul>
<li>Plan research that includes disabled participants from the start,</li>
<li>Recruit participants with disabilities,</li>
<li>Facilitate sessions that work for a range of access needs,</li>
<li>Ask better questions and avoid unintentionally biased research methods,</li>
<li>Build trust and confidence in your team around accessibility and inclusion.</li>
</ul>
The book also challenges common assumptions about disability and urges readers to rethink what inclusion really means in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.
High-quality hardcover. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. <a href="/printed-books/accessible-ux-research/">Pre-order the book.</a>
Contents
<ol>
<li>Disability mindset: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</li>
<li>Diversity of disability: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</li>
<li>Disability in the stages of UX research: Disabled participants can and should be part of every research phase — formative, prototype, and summative.</li>
<li>Recruiting disabled participants: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</li>
<li>Designing your research: While our goal is to influence accessible products, our research execution must also be accessible.</li>
<li>Facilitating an accessible study: Preparation and communication with your participants can ensure your study logistics run smoothly.</li>
<li>Analyzing and reporting with accuracy and impact: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.</li>
<li>Disability in the UX research field: Inclusion isn’t just for research participants, it’s important for our colleagues as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</li>
</ol>
Who This Book Is For
Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…
<ol>
<li>You have been tasked to improve accessibility of your product, but need to know where to start to facilitate this successfully.</li>
<li>You want to establish a culture for accessibility in your company, but not sure how to make it work.</li>
<li>You want to move from WCAG/EAA compliance to established accessibility practices and inclusion in research practices and beyond.</li>
<li>You want to improve your overall accessibility knowledge and be viewed as an Accessibility Specialist for your organization.</li>
</ol>
<a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-opt.png">
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-varnish-opt.png" />
</a>
About the Author
<a href="https://mawconsultingllc.com/"><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/michele-williams-opt.png" /></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.
Testimonials
<blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/eric-bailey-opt.png" />“Accessible UX Research stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a solid framework for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work. This is the book I wish I had when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.” Eric Bailey, Accessibility Advocate</blockquote>
<blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/devon-pershing-opt.png" />“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a critical piece in the puzzle of actually doing and integrating that research into accessibility work day to day.” Devon Pershing, Author of The Accessibility Operations Guidebook</blockquote>
<blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/manuel-matuzovic-opt.png" />“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the depth of human experience. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.” Manuel Matuzović, Author of the Web Accessibility Cookbook</blockquote>
<blockquote><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/anna-e-cook-opt.png" />“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A strong focus on real-world application equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!” Anna E. Cook, Accessibility and Inclusive Design Specialist</blockquote>
Technical Details
<ul>
<li>ISBN: 978-3-910835-03-0 (print)</li>
<li>Quality hardcover, stitched binding, ribbon page marker.</li>
<li>Free worldwide airmail shipping from Germany starting Fall 2025.</li>
<li>eBook available for download as PDF, ePUB, and Amazon Kindle in Fall 2025.</li>
<li><a href="/printed-books/accessible-ux-research/">Pre-order the book.</a></li>
</ul>
Community Matters ❤️
Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for Smashing Members as soon as it’s out</a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)
More Smashing Books & Goodies
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="/printed-books/">printed books that stand the test of time</a>. Addy, Heather, and Steven are three of these people. Have you checked out their books already?
<div>
<div><a href="/printed-books/success-at-scale/"><img src="https://files.smashing.media/books/success-at-scale-cover-release-opt.png" /></a></div><h4><a href="/printed-books/success-at-scale/">Success at Scale</a></h4>A deep dive into how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale.<a href="/printed-books/success-at-scale/">Add to cart $44</a>
<div><a href="/printed-books/understanding-privacy/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2da7a90-acdb-43c7-82b2-5225c33ca4d7/understanding-privacy-cover-new-opt.png" /></a></div><h4><a href="/printed-books/understanding-privacy/">Understanding Privacy</a></h4>Everything you need to know to put your users first and make a better web.<a href="/printed-books/understanding-privacy/">Add to cart $44</a>
<div><a href="/printed-books/touch-design-for-mobile-interfaces/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png" /></a></div><h4><a href="/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4>Learn how touchscreen devices really work — and how people really use them.<a href="/printed-books/touch-design-for-mobile-interfaces/">Add to cart $44</a>
</div>
]]></content:encoded>
<author>hello@smashingmagazine.com (Vitaly Friedman)</author>
<enclosure url="http://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png" length="0" type="image/png"/>
</item>
<item>
<title><![CDATA[CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control]]></title>
<link>https://smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/</link>
<guid>https://smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/</guid>
<pubDate>Thu, 19 Jun 2025 15:00:00 GMT</pubDate>
<description><![CDATA[CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.]]></description>
<content:encoded><![CDATA[CSS is wild, really wild. And tricky. But let’s talk specifically about specificity.
When writing CSS, it’s close to impossible that you haven’t faced the frustration of styles not applying as expected — that’s specificity. You applied a style, it worked, and later, you try to override it with a different style and… nothing, it just ignores you. Again, specificity.
Sure, there’s the option of resorting to <code>!important</code> flags, but like all developers before us, it’s always <a href="https://cssguidelin.es/#important">risky and discouraged</a>. It’s way better to fully understand specificity than go down that route because otherwise you wind up fighting your own important styles.
Specificity 101
Lots of developers understand the concept of specificity in different ways.
<blockquote>The core idea of specificity is that the CSS Cascade algorithm used by browsers determines which style declaration is applied when two or more rules match the same element.</blockquote>
Think about it. As a project expands, so do the specificity challenges. Let’s say Developer A adds <code>.cart-button</code>, then maybe the button style looks good to be used on the sidebar, but with a little tweak. Then, later, Developer B adds <code>.cart-button .sidebar</code>, and from there, any future changes applied to <code>.cart-button</code> might get overridden by <code>.cart-button .sidebar</code>, and just like that, the specificity war begins.
<img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/1-specificity-tension.png" />
I’ve written CSS long enough to witness different strategies that developers have used to manage the specificity battles that come with CSS.
<pre><code>/* Traditional approach */
#header .nav li a.active { color: blue; }
/* BEM approach */
.header__nav-item--active { color: blue; }
/* Utility classes approach */
.text-blue { color: blue; }
/* Cascade Layers approach */
@layer components {
.nav-link.active { color: blue; }
}
</code></pre>
All these methods reflect different strategies on how to control or at least maintain CSS specificity:
<ul>
<li>BEM: tries to simplify specificity by being explicit.</li>
<li>Utility-first CSS: tries to bypass specificity by keeping it all atomic.</li>
<li>CSS Cascade Layers: manage specificity by organizing styles in layered groups.</li>
</ul>
We’re going to put all three side by side and look at how they handle specificity.
<img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/2-different-strategies-control-css-specificity.png" />
My Relationship With Specificity
I actually used to think that I got the whole picture of CSS specificity. Like the usual inline greater than ID greater than class greater than tag. But, reading <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade">the MDN docs on how the CSS Cascade truly works</a> was an eye-opener.
There’s a code I worked on in an old codebase provided by a client, which looked something like this:
<pre><code>/* Legacy code */
#main-content .product-grid button.add-to-cart {
background-color: #3a86ff;
color: white;
padding: 10px 15px;
border-radius: 4px;
}
/* 100 lines of other code here */
/* My new CSS */
.btn-primary {
background-color: #4361ee; /* New brand color */
color: white;
padding: 12px 20px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</code></pre>
Looking at this code, no way that the <code>.btn-primary</code> class stands a chance against whatever specificity chain of selectors was previously written. As far as specification goes, CSS gives the first selector a specificity score of <code>1, 2, 1</code>: one point for the ID, two points for the two classes, and one point for the element selector. Meanwhile, the second selector is scored as <code>0, 1, 0</code> since it only consists of a single class selector.
Sure, I had some options:
<ul>
<li>I could use <code>!important</code> on the properties in <code>.btn-primary</code> to override the ones declared in the stronger selector, but the moment that happens, be prepared to use it everywhere. So, I’d rather avoid it.</li>
<li>I could try going more specific, but personally, that’s just being cruel to the next developer (who might even be me).</li>
<li>I could change the styles of the existing code, but that’s adding to the specificity problem:</li>
</ul>
<pre><code>#main-content .product-grid .btn-primary {
/* edit styles directly */
}
</code></pre>
Eventually, I ended up writing the whole CSS from scratch.
<img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/3-legacy-modern-button.png" />
When nesting was introduced, I tried it to control specificity that way:
<div>
<pre><code>.profile-widget {
// ... other styles
.header {
// ... header styles
.user-avatar {
border: 2px solid blue;
&.is-admin {
border-color: gold; // This becomes .profile-widget .header .user-avatar.is-admin
}
}
}
}
</code></pre>
</div>
And just like that, I have unintentionally created high-specificity rules. That’s how easily and naturally we can drift toward specificity complexities.
So, to save myself a lot of these issues, I have one principle I always abide by: <a href="https://css-tricks.com/strategies-keeping-css-specificity-low/">keep specificity as low as possible</a>. And if the selector complexity is becoming a complex chain, I rethink the whole thing.
BEM: The OG System
The Block-Element-Modifier (BEM, for short) has been around the block (pun intended) for a long time. It is a methodological system for writing CSS that forces you to make every style hierarchy explicit. 
<pre><code>/* Block */
.panel {}
/* Element that depends on the Block */
.panel__header {}
.panel__content {}
.panel__footer {}
/* Modifier that changes the style of the Block */
.panel--highlighted {}
.panel__button--secondary {}
</code></pre>
When I first experienced BEM, I thought it was amazing, despite contrary opinions that it looked ugly. I had no problems with the double hyphens or underscores because they made my CSS predictable and simplified.
<img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/4-bem.png" />
<h3>How BEM Handles Specificity</h3>
Take a look at these examples. Without BEM:
<pre><code>/* Specificity: 0, 3, 0 */
.site-header .main-nav .nav-link {
color: #472EFE;
text-decoration: none;
}
/* Specificity: 0, 2, 0 */
.nav-link.special {
color: #FF5733;
}
</code></pre>
With BEM:
<pre><code>/* Specificity: 0, 1, 0 */
.main-nav__link {
color: #472EFE;
text-decoration: none;
}
/* Specificity: 0, 1, 0 */
.main-nav__link--special {
color: #FF5733;
}
</code></pre>
You see how BEM makes the code look predictable as all selectors are created equal, thus making the code easier to maintain and extend. And if I want to add a button to <code>.main-nav</code>, I just add <code>.main-nav__btn</code>, and if I need a disabled button (modifier), <code>.main-nav__btn--disabled</code>. Specificity is low, as I don’t have to increase it or fight the cascade; I just write a new class.
BEM’s naming principle made sure components lived in isolation, which, for a part of CSS, the specificity part, it worked, i.e, <code>.card__title</code> class will never accidentally clash with a <code>.menu__title</code> class.
<h3>Where BEM Falls Short</h3>
I like the idea of BEM, but it is not perfect, and a lot of people noticed it:
<ul>
<li>The class names can get really long.</li>
</ul>
<div>
<pre><code><div class="product-carousel__slide--featured product-carousel__slide--on-sale">

</div>
</code></pre>
</div>
<ul>
<li>Reusability might not be prioritized, which somewhat contradicts the native CSS ideology. Should a button inside a card be <code>.card__button</code> or reuse a global <code>.button</code> class? With the former, styles are being duplicated, and with the latter, the BEM strict model is being broken.</li>
<li>One of the core pains in software development starts becoming a reality — naming things. <a href="https://css-tricks.com/naming-things-is-only-getting-harder/">I’m sure you know the frustration of that already.</a></li>
</ul>
BEM is good, but sometimes you may need to be flexible with it. A hybrid system (maybe using BEM for core components but simpler classes elsewhere) can still keep specificity as low as needed.
<pre><code>/* Base button without BEM */
.button {
/* Button styles */
}
/* Component-specific button with BEM */
.card__footer .button {
/* Minor overrides */
}
</code></pre>
Utility Classes: Specificity By Avoidance
This is also called <a href="https://css-tricks.com/lets-define-exactly-atomic-css/">Atomic CSS</a>. And in its entirety, it avoids specificity.
<div>
<pre><code><button class="bg-red-300 hover:bg-red-500 text-white py-2 px-4 rounded">
A button
</button>
</code></pre>
</div>
<blockquote>The idea behind utility-first classes is that every utility class has the same specificity, which is one class selector. Each class is a tiny CSS property with a single purpose.</blockquote>
<code>p-2</code>? Padding, nothing more. <code>text-red</code>? Color red for text. <code>text-center</code>? Text alignment. It’s like how LEGOs work, but for styling. You stack classes on top of each other until you get your desired appearance.
<img src="https://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/5-specificity-by-avoidance.png" />
<h3>How Utility Classes Handle Specificity</h3>
Utility classes do not solve specificity, but rather, they take the BEM ideology of low specificity to the extreme. Almost all utility classes have the same lowest possible specificity level of (<code>0</code>, <code>1</code>, <code>0</code>). And because of this, overrides become easy; if more padding is needed, bump <code>.p-2</code> to <code>.p-4</code>.
Another example:
<pre><code><button class="bg-orange-300 hover:bg-orange-700">
This can be hovered
</button>
</code></pre>
If another class, <code>hover:bg-red-500</code>, is added, the order matters for CSS to determine which to use. So, even though the utility classes avoid specificity, the other parts of the CSS Cascade come in, which is the order of appearance, with the last matching selector declared being the winner.
<h3>Utility Class Trade-Offs</h3>
The most common issue with utility classes is that they make the code look ugly. And frankly, I agree. But being able to picture what a component looks like without seeing it rendered is just priceless.
There’s also the argument of reusability, that you repeat yourself every single time. But once one finds a repetition happening, just turn that part into a reusable component. It also has its genuine limitations when it comes to specificity:
<ul>
<li>If your brand color changes, which is a global change, and you’re deep in the codebase, you can’t just change one and have others follow like native CSS.</li>
<li>The parent-child relationship that happens naturally in native CSS is out the window due to how atomic utility classes behave.</li>
<li>Some argue the HTML part should be left as markup and the CSS part for styling. Because now, there’s more markup to scan, and if you decide to clean up:</li>
</ul>
<div>
<pre><code>
<div class="p-4 bg-yellow-100 border border-yellow-300 text-yellow-800 rounded">

<div class="alert-warning">
</code></pre>
</div>
Just like that, we’ve ended up writing CSS. Circle of life.
In my experience with utility classes, they work best for:
<ul>
<li>Speed Writing the markup, styling it, and seeing the result swiftly.</li>
<li>Predictability A utility class does exactly what it says it does.</li>
</ul>
Cascade Layers: Specificity By Design
Now, this is where it gets interesting. BEM offers structure, utility classes gain speed, and CSS Cascade Layers give us something paramount: control.
Anyways, Cascade Layers (<code>@layers</code>) groups styles and declares what order the groups should be, regardless of the specificity scores of those rules.
Looking at a set of independent rulesets:
<pre><code>button {
background-color: orange; /* Specificity: 0, 0, 1 */
}
.button {
background-color: blue; //* Specificity: 0, 1, 0*/
}
#button {
background-color: red; /* Specificity: 1, 0, 0 */
}
/* No matter what, the button is red */
</code></pre>
But with <code>@layer</code>, let’s say, I want to prioritize the <code>.button</code> class selector. I can shape how the specificity order should go:
<pre><code>@layer utilities, defaults, components;
@layer defaults {
button {
background-color: orange; /* Specificity: 0, 0, 1 */
}
}
@layer components {
.button {
background-color: blue; //* Specificity: 0, 1, 0*/
}
}
@layer utilities {
#button {
background-color: red; /* Specificity: 1, 0, 0 */
}
}
</code></pre>
Due to how <code>@layer</code> works, <code>.button</code> would win because the <code>components</code> layer is the highest priority, even though <code>#button</code> has higher specificity. Thus, before CSS could even check the usual specificity rules, the layer order would first be respected.
You just have to respect the folks over at W3C, because now one can purposely override an ID selector with a simple class, without even using <code>!important</code>. Fascinating.
<h3>Cascade Layers Nuances</h3>
Here are some things that are worth calling out when we’re talking about CSS Cascade Layers:
<ul>
<li>Specificity is still part of the game.</li>
<li><code>!important</code> acts differently than expected in <code>@layer</code> (they work in reverse!).</li>
<li><code>@layers</code> aren’t selector-specific but rather style-property-specific.</li>
</ul>
<div>
<pre><code>@layer base {
.button {
background-color: blue;
color: white;
}
}
@layer theme {
.button {
background-color: red;
/* No color property here, so white from base layer still applies */
}
}
</code></pre>
</div>
<ul>
<li><code>@layer</code> can easily be abused. I’m sure there’s a developer out there with over 20+ layer declarations that’s grown into a monstrosity.</li>
</ul>
<h3>Comparing All Three</h3>
Now, for the TL;DR folks out there, here’s a side-by-side comparison of the three: BEM, utility classes, and CSS Cascade Layers.
<table>
<thead>
<tr>
<th>Feature</th>
<th>BEM</th>
<th>Utility Classes</th>
<th>Cascade Layers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Core Idea</td>
<td>Namespace components</td>
<td>Single purpose classes</td>
<td>Control cascade order</td>
</tr>
<tr>
<td>Specificity Control</td>
<td>Low and flat</td>
<td>Avoids entirely</td>
<td>Absolute control due to Layer supremacy</td>
</tr>
<tr>
<td>Code Readability</td>
<td>Clear structure due to naming</td>
<td>Unclear if unfamiliar with the class names</td>
<td>Clear if layer structure is followed</td>
</tr>
<tr>
<td>HTML Verbosity</td>
<td>Moderate class names (can get long)</td>
<td>Many small classes that adds up quickly</td>
<td>No direct impact, stays only in CSS</td>
</tr>
<tr>
<td>CSS Organization</td>
<td>By component</td>
<td>By property</td>
<td>By priority order</td>
</tr>
<tr>
<td>Learning Curve</td>
<td>Requires understanding conventions</td>
<td>Requires knowing the utility names</td>
<td>Easy to pick up, but requires a deep understanding of CSS</td>
</tr>
<tr>
<td>Tools Dependency</td>
<td>Pure CSS</td>
<td>Often depends of third-party e.g Tailwind</td>
<td>Native CSS</td>
</tr>
<tr>
<td>Refactoring Ease</td>
<td>High</td>
<td>Medium</td>
<td>Low</td>
</tr>
<tr>
<td>Best Use Case</td>
<td>Design Systems</td>
<td>Fast builds</td>
<td>Legacy code or third-party codes that need overrides</td>
</tr>
<tr>
<td>Browser Support</td>
<td>All</td>
<td>All</td>
<td>All (except IE)</td>
</tr>
</tbody>
</table>
Among the three, each has its sweet spot:
<ul>
<li>BEM is best when:<ul>
<li>There’s a clear design system that needs to be consistent,</li>
<li>There’s a team with different philosophies about CSS (BEM can be the middle ground), and</li>
<li>Styles are less likely to leak between components.</li>
</ul>
</li>
<li>Utility classes work best when:<ul>
<li>You need to build fast, like prototypes or MVPs, and</li>
<li>Using a component-based JavaScript framework like React.</li>
</ul>
</li>
<li>Cascade Layers are most effective when:<ul>
<li>Working on legacy codebases where you need full specificity control,</li>
<li>You need to integrate third-party libraries or styles from different sources, and</li>
<li>Working on a large, complex application or projects with long-term maintenance.</li>
</ul>
</li>
</ul>
If I had to choose or rank them, I’d go for utility classes with Cascade Layers over using BEM. But that’s just me!
Where They Intersect (How They Can Work Together)
Among the three, Cascade Layers should be seen as an orchestrator, as it can work with the other two strategies. <code>@layer</code> is a fundamental tenet of the CSS Cascade’s architecture, unlike BEM and utility classes, which are methodologies for controlling the Cascade’s behavior.
<pre><code>/* Cascade Layers + BEM */
@layer components {
.card__title {
font-size: 1.5rem;
font-weight: bold;
}
}
/* Cascade Layers + Utility Classes */
@layer utilities {
.text-xl {
font-size: 1.25rem;
}
.font-bold {
font-weight: 700;
}
}
</code></pre>
On the other hand, using BEM with utility classes would just end up clashing:
<div>
<pre><code>
<div class="card__container p-4 flex items-center">
Something seems wrong
</div>
</code></pre>
</div>
I’m putting all my cards on the table: I’m a utility-first developer. And most utility class frameworks use <code>@layer</code> behind the scenes (e.g., <a href="https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web">Tailwind</a>). So, those two are already together in the bag. 
But, do I dislike BEM? Not at all! I’ve used it a lot and still would, if necessary. I just find naming things to be an exhausting exercise.
That said, we’re all different, and you might have opposing thoughts about what you think feels best. It truly doesn’t matter, and that’s the beauty of this web development space. Multiple routes can lead to the same destination.
Conclusion
So, when it comes to comparing BEM, utility classes, and CSS Cascade Layers, is there a true “winning” approach for controlling specificity in the Cascade?
First of all, CSS Cascade Layers are arguably the most powerful CSS feature that we’ve gotten in years. They shouldn’t be confused with BEM or utility classes, which are strategies rather than part of the CSS feature set.
That’s why I like the idea of combining either BEM with Cascade Layers or utility classes with Cascade Layers. Either way, the idea is to keep specificity low and leverage Cascade Layers to set priorities on those styles.
]]></content:encoded>
<author>hello@smashingmagazine.com (Victor Ayomipo)</author>
<enclosure url="http://files.smashing.media/articles/css-cascade-layers-bem-utility-classes-specificity-control/css-cascade-layers-bem-utility-classes-specificity-control.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[What I Wish Someone Told Me When I Was Getting Into ARIA]]></title>
<link>https://smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/</link>
<guid>https://smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/</guid>
<pubDate>Mon, 16 Jun 2025 13:00:00 GMT</pubDate>
<description><![CDATA[[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning about ARIA at some point.]]></description>
<content:encoded><![CDATA[If you haven’t encountered ARIA before, great! It’s a chance to learn something new and exciting. If you have heard of ARIA before, this might help you better understand it or maybe even teach you something new!
These are all things I wish someone had told me when I was getting started on my web accessibility journey. This post will: 
<ul>
<li>Provide a mindset for how to approach ARIA as a concept, </li>
<li>Debunk some common misconceptions, and </li>
<li>Provide some guiding thoughts to help you better understand and work with it. </li>
</ul>
It is my hope that in doing so, this post will help make an oft-overlooked yet vital corner of web design and development easier to approach.
What This Post Is Not
This is not a recipe book for how to use ARIA to build accessible websites and web apps. It is also not a guide for how to remediate an inaccessible experience. A lot of accessibility work is highly contextual. I do not know the specific needs of your project or organization, so trying to give advice here could easily do more harm than good. 
Instead, think of this post as a “know before you go” guide. I’m hoping to give you a good headspace to approach ARIA, as well as highlight things to watch out for when you undertake your journey. So, with that out of the way, let’s dive in!
So, What Is ARIA?
<blockquote>ARIA is what you turn to if there is not a native HTML element or attribute that is better suited for the job of communicating interactivity, purpose, and state.</blockquote>
Think of it like a spice that you sprinkle into your markup to enhance things.
Adding ARIA to your HTML markup is a way of providing additional information to a website or web app for <a href="https://webaim.org/articles/visual/blind#screenreaders">screen readers</a> and <a href="https://webaim.org/articles/motor/assistive#voicerecognition">voice control software</a>.
<ul>
<li>Interactivity means the content can be activated or manipulated. An example of this is navigating to a link’s destination.</li>
<li>Purpose means what something is used for. An example of this is a text input used to collect someone’s name.</li>
<li>State means the current status content has been placed in and controlled by <a href="https://www.w3.org/TR/wai-aria/#introstates">states, properties, and values</a>. An example of this is an accordion panel that can either be expanded or collapsed.</li>
</ul>
Here is an illustration to help communicate what I mean by this:
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/1-interactivity-purpose-state.png" />
<ul>
<li>The presence of <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML’s <code>button</code> element</a> will instruct assistive technology to report it as a button, letting someone know that it can be activated to perform a predefined action.</li>
<li>The presence of the text string “Mute” will be reported by assistive technology to clue the person into what the button is used for.</li>
<li>The presence of <a href="https://w3c.github.io/aria/#aria-pressed"><code>aria-pressed="true"</code></a> means that someone or something has previously activated the button, and it is now in a “pushed in” state that sustains its action. </li>
</ul>
This overall pattern will let people who use assistive technology know:
<ol>
<li>If something is interactive,</li>
<li>What kind of interactive behavior it performs, and </li>
<li>Its <a href="https://w3c.github.io/aria/#host_general_attrs">current state</a>.</li>
</ol>
ARIA’s History
ARIA has been around for a long time, with <a href="https://www.w3.org/TR/2006/WD-aria-role-20060926/">the first version published on September 26th, 2006</a>. 
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/2-browser.png" />
ARIA was created to provide a bridge between the limitations of HTML and the need for making interactive experiences understandable by assistive technology.
The latest version of ARIA is <a href="https://www.w3.org/TR/wai-aria-1.2/">version 1.2</a>, published on June 6th, 2023. Version 1.3 is slated to be released relatively soon, and you can read more about it in <a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/">this excellent article by Craig Abbott</a>.
You may also see it referred to as WAI-ARIA, where WAI stands for “Web Accessibility Initiative.” The <a href="https://www.w3.org/WAI/">WAI</a> is part of the <a href="https://www.w3.org/">W3C</a>, the organization that sets standards for the web. That said, most accessibility practitioners I know call it “ARIA” in written and verbal communication and leave out the “WAI-” part.
The Spirit Of ARIA Reflects The Era In Which It Was Created
The reason for this is simple: The web was a lot less mature in the past than it is now. The most popular operating system in 2006 was <a href="https://en.wikipedia.org/wiki/Windows_XP">Windows XP</a>. The iPhone didn’t exist yet; it was released a year later.
From a very high level, ARIA is a snapshot of the operating system interaction paradigms of this time period. This is because ARIA recreates them.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/3-wxpdefaultdesk.png" />
<h3>The Mindset</h3>
Smartphones with features like <a href="https://jquerymobile.com/">tappable</a>, swipeable, and draggable surfaces were far less commonplace. Single Page Application “web app” experiences were also rare, with <a href="https://en.wikipedia.org/wiki/Ajax_(programming">Ajax</a>)-based approaches being the most popular. This means that we have to build the experiences of today using the technology of 2006. In a way, this is a good thing. It forces us to take new and novel experiences and interrogate them.
Interactions that cannot be broken down into smaller, more focused pieces that map to ARIA patterns are most likely inaccessible. This is because they won’t be able to be operated by assistive technology or function on older or less popular devices. 
I may be biased, but I also think these sorts of novel interactions that can’t translate also serve as a warning that a general audience will find them to be confusing and, therefore, unusable. This belief is important to consider given that the internet serves: 
<ul>
<li>An unknown number of people,</li>
<li>Using an unknown number of devices, </li>
<li>Each with an unknown amount of personal customizations, </li>
<li>Who have their own unique needs and circumstances and </li>
<li>Have unknown motivational factors.</li>
</ul>
<h3>Interaction Expectations</h3>
Contemporary expectations for keyboard-based interaction for web content — checkboxes, radios, modals, accordions, and so on — are sourced from Windows XP and its predecessor operating systems. These interaction models are carried forward as muscle memory for older people who use assistive technology. Younger people who rely on assistive technology also learn these de facto standards, thus continuing the cycle.
What does this mean for you? Someone using a keyboard to interact with your website or web app will most likely <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows">try these Windows OS-based keyboard shortcuts first</a>. This means things like pressing: 
<ul>
<li>Enter to navigate to a link’s destination, </li>
<li>Space to activate buttons, </li>
<li>Home and End to jump to the start or end of a list of items, and so on.</li>
</ul>
<h3>It’s Also A Living Document</h3>
This is not to say that ARIA has stagnated. It is constantly being worked on with new additions, removals, and clarifications. Remember, it is now at version 1.2, with <a href="https://www.w3.org/TR/wai-aria-1.3/">version 1.3 arriving soon</a>.
In parallel, HTML as a language also reflects this evolution. Elements were originally created to support a document-oriented web and have been gradually evolving to <a href="https://open-ui.org/">support more dynamic, app-like experiences</a>. The great bit here is that this is all <a href="https://github.com/w3c/aria/">conducted in the open</a> and is something you can contribute to if you feel motivated to do so.
ARIA Has Rules For Using It
There are <a href="https://www.w3.org/TR/using-aria/#NOTES">five rules included in ARIA’s documentation</a> to help steer how you approach it:
<ol>
<li><a href="https://www.w3.org/TR/using-aria/#firstrule">Use a native element whenever possible.</a> An example would be using an anchor element (<code><a></code>) for a link rather than a <code>div</code> with a click handler and a <code>role</code> of <code>link</code>.</li>
<li><a href="https://www.w3.org/TR/using-aria/#secondrule">Don’t adjust a native element’s semantics if at all possible.</a> An example would be trying to use a heading element as a tab rather than wrapping the heading in a semantically neutral <code>div</code>.</li>
<li><a href="https://www.w3.org/TR/using-aria/#3rdrule">Anything interactive has to be keyboard operable.</a> If you can’t use it with a keyboard, it isn’t accessible. Full stop.</li>
<li><a href="https://www.w3.org/TR/using-aria/#4thrule">Do not use <code>role="presentation"</code> or <code>aria-hidden="true"</code> on a focusable element.</a> This makes something intended to be interactive unable to be used by assistive technology.</li>
<li><a href="https://www.w3.org/TR/using-aria/#fifthrule">Interactive elements must be named.</a> An example of this is using the text string “Print” for a <code>button</code> element.</li>
</ol>
Observing these five rules will do a lot to help you out. The following is more context to provide even more support.
ARIA Has A Taxonomy
There is a structured grammar to ARIA, and it is centered around roles, as well as states and properties. 
<h3>Roles</h3>
A <a href="https://www.w3.org/TR/wai-aria/#dfn-role">Role</a> is what assistive technology reads and then announces. A lot of people refer to this in shorthand as semantics. HTML elements have implied roles, which is why an anchor element will be announced as a link by screen readers with no additional work.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/4-roles.png" />
Implied roles are almost always better to use if the use case calls for them. Recall <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> here. This is usually what digital accessibility practitioners refer to when they say, “Just use semantic HTML.”
There are many reasons for favoring implied roles. The main consideration is better guarantees of support across an unknown number of operating systems, browsers, and assistive technology combinations. 
<a href="https://www.w3.org/TR/wai-aria/#roles_categorization">Roles have categories</a>, each with its own purpose. The <a href="https://www.w3.org/TR/wai-aria/#abstract_roles">Abstract role category</a> is notable in that it is an organizing <a href="https://en.wiktionary.org/wiki/supercategory">supercategory</a> not intended to be used by authors:
<blockquote>Abstract roles are used for the ontology. Authors MUST NOT use abstract roles in content.</blockquote>
<pre><code>
<h2 role="sectionhead">
Anatomy and physiology
</h2>

<section aria-labeledby="anatomy-and-physiology">
<h2 id="anatomy-and-physiology">
Anatomy and physiology
</h2>
</section>
</code></pre>
Additionally, in the same way, you can only declare ARIA on certain things, you can only declare some ARIA as children of other ARIA declarations. An example of this is the <a href="https://www.w3.org/TR/wai-aria/#listitem">the <code>listitem</code> role</a>, which requires <a href="https://www.w3.org/TR/wai-aria/#list">a role of <code>list</code></a> to be present on its parent element.
So, what’s the best way to determine if a role requires a parent declaration? The answer is to <a href="https://www.w3.org/TR/wai-aria/#role_definitions">review the official definition</a>.
<h3>States And Properties</h3>
<a href="https://www.w3.org/TR/wai-aria/#introstates">States and properties</a> are the other two main parts of ARIA‘s overall taxonomy. 
Implicit roles are provided by semantic HTML, and explicit roles are provided by ARIA. Both describe what an element is. States describe that element’s characteristics in a way that assistive technology can understand. This is done via property declarations and their companion values.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/5-role-and-state.png" />
ARIA states can change quickly or slowly, both as a result of human interaction as well as application state. When the state is changed as a result of human interaction, it is considered an “unmanaged state.” Here, a developer must supply the underlying JavaScript logic to control the interaction.
When the state changes as a result of the application (e.g., operating system, web browser, and so on), this is considered “<a href="https://www.w3.org/TR/wai-aria/#dfn-managed-state">managed state</a>.” Here, the application automatically supplies the underlying logic.
How To Declare ARIA
Think of ARIA as an extension of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">HTML attributes</a>, a suite of name/value pairs. Some values are predefined, while others are author-supplied:
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/6-predefined-author-defined.png" />
For the examples in the previous graphic, the <code>polite</code> value for <code>aria-live</code> is one of <a href="https://w3c.github.io/aria/#aria-live">the three predefined values</a> (<code>off</code>, <code>polite</code>, and <code>assertive</code>). For <code>aria-label</code>, “Save” is a text string manually supplied by the author.
You declare ARIA on HTML elements the same way you declare other attributes:
<pre><code><!--
Applies an id value of
"carrot" to the div
-->
<div id="carrot"></div>
<!--
Hides the content of this paragraph
element from assistive technology
-->

Assistive technology can't read this

<!--
Provides an accessible name of "Stop",
and also communicates that the button
is currently pressed. A type property
with a value of "button" prevents
browser form submission.
-->
<button
aria-label="Stop"
aria-pressed="true"
type="button">

</button>
</code></pre>
Other usage notes:
<ul>
<li>You can place more than one ARIA declaration on an HTML element. </li>
<li>The order of placement of ARIA when declared on an HTML element does not matter.</li>
<li>There is no limit to how many ARIA declarations can be placed on an element. Be aware that the more you add, the more complexity you introduce, and more complexity means a larger chance <a href="https://www.a11yproject.com/posts/aria-has-perfect-support/">things may break or not function as expected</a>.</li>
<li>You can declare ARIA on an HTML element and also have other non-ARIA declarations, such as <code>class</code> or <code>id</code>. The order of declarations does not matter here, either.</li>
</ul>
It might also be helpful to know that boolean attributes are treated a little differently in ARIA when compared to HTML. <a href="https://hidde.blog/">Hidde de Vries</a> writes about this in his post, <a href="https://hidde.blog/boolean-attributes-in-html-and-aria-whats-the-difference/">“Boolean attributes in HTML and ARIA: what's the difference?”</a>.
Not A Whole Lot Of ARIA Is “Hardcoded”
In this context, “hardcoding” means directly writing a static attribute or value declaration into your component, view, or page. 
A lot of ARIA is designed to be applied or conditionally modified dynamically based on <a href="https://www.freecodecamp.org/news/stateful-vs-stateless-architectures-explained/">application state</a> or as a response to someone’s action. An example of this is a show-and-hide disclosure pattern:
<ul>
<li><a href="https://w3c.github.io/aria/#aria-expanded">ARIA’s <code>aria-expanded</code> attribute</a> is toggled from <code>false</code> to <code>true</code> to communicate if the disclosure is in an expanded or collapsed state.</li>
<li><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">HTML’s <code>hidden</code> attribute</a> is conditionally removed or added in tandem to show or hide the disclosure’s full content area.</li>
</ul>
<div>
<pre><code><div class="disclosure-container">
<button
aria-expanded="false"
class="disclosure-toggle"
type="button">
How we protect your personal information
</button>
<div
hidden
class="disclosure-content">
<ul>
<li>Fast, accurate, thorough and non-stop protection from cyber attacks</li>
<li>Patching practices that address vulnerabilities that attackers try to exploit</li>
<li>Data loss prevention practices help to ensure data doesn't fall into the wrong hands</li>
<li>Supply risk management practices help ensure our suppliers adhere to our expectations</li>
</ul>

<a href="/security/">Learn more about our security best practices</a>.

</div>
</div>
</code></pre>
</div>
A common example of a hardcoded ARIA declaration you’ll encounter on the web is <a href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/">making an SVG icon inside a button decorative</a>:
<pre><code><button type="button>
<svg aria-hidden="true">

</svg>
Save
</button>
</code></pre>
Here, the string “Save” is what is required for someone to understand what the button will do when they activate it. The accompanying icon helps that understanding visually but is considered redundant and therefore <a href="https://www.w3.org/WAI/tutorials/images/decorative/">decorative</a>.
Declaring An Aria Role On Something That Already Uses That Role Implicitly Does Not Make It “Extra” Accessible
An implied role is all you need if you’re using semantic HTML. Explicitly declaring its role via ARIA does not confer any additional advantages.
<pre><code><!--
You don't need to declare role="button" here.
Using the <button> element will make assistive
technology announce it as a button. The
role="button" declaration is redundant.
-->
<button role="button">
Save
</button>
</code></pre>
You might occasionally run into these redundant declarations on <a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html">HTML sectioning elements</a>, such as <code><main role="main"></code>, or <code><footer role="contentinfo"></code>. This isn’t needed anymore, and you can just use the <code><main></code> or <code><footer></code> elements.
The reason for this is historic. These declarations were done for support reasons, in that it was a stop-gap technique for assistive technology that needed to be updated to support these <a href="https://www.w3.org/html/logo/">new-at-the-time HTML elements</a>.
Contemporary assistive technology does not need these redundant declarations. Think of it the same way that we don’t have to use vendor prefixes for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">CSS <code>border-radius</code> property</a> anymore.
Note: There is an exception to this guidance. There are circumstances where certain complex and complicated markup patterns don’t work as expected for assistive technology. In these cases, we want to hardcode the implicit role as explicit ARIA to ensure it works. This assistive technology support concern is <a href="#the-more-aria-you-add-to-something-the-greater-the-chance-something-will-behave-unexpectedly">covered in more detail later in this post</a>.
You Don’t Need To Say What A Control Is; That Is What Roles Are For
Both implicit and explicit roles are announced by screen readers. You don’t need to include that part for things like the interactive element’s text string or <a href="https://w3c.github.io/aria/#aria-label">an <code>aria-label</code></a>.
<pre><code>
<button
aria-label="Save button"
type="button">

</button>

<button
aria-label="Save"
type="button">

</button>
</code></pre>
Had we used the string value of “Save button” for our Save button, a screen reader would announce it along the lines of, “Save button, button.” That’s <a href="https://theideaplace.net/tooltip-should-not-start-an-accessible-name/">redundant</a> and confusing.
ARIA Roles Have Very Specific Meanings
We sometimes refer to website and web app navigation colloquially as menus, especially if it’s an e-commerce-style <a href="https://www.nngroup.com/articles/mega-menus-work-well/">mega menu</a>.
In ARIA, <a href="https://w3c.github.io/aria/#menu">menus mean something very specific</a>. Don’t think of global or in-page navigation or the like. Think of menus in this context as what appears when you click the Edit menu button on your application’s menubar.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/7-menu.png" />
Using a role improperly because its name seems like an appropriate fit at first glance creates confusion for people who do not have the context of the visual UI. Their expectations will be set with the announcement of the role, then subverted when it does not act the way it is supposed to.
Imagine if you click on a link, and instead of taking you to another webpage, it sends something completely unrelated to your printer instead. It’s sort of like that.
Declaring <code>role="menu"</code> is a common example of a misapplied role, but there are others. The best way to know what a role is used for? <a href="https://www.w3.org/TR/wai-aria/#role_definitions">Go straight to the source</a> and read up on it. 
Certain Roles Are Forbidden From Having Accessible Names
These roles are <code>caption</code>, <code>code</code>, <code>deletion</code>, <code>emphasis</code>, <code>generic</code>, <code>insertion</code>, <code>paragraph</code>, <code>presentation</code>, <code>strong</code>, <code>subscript</code>, and <code>superscript</code>. 
This means you can try and provide an accessible name for one of these elements — say via <code>aria-label</code> — but it won’t work because it’s disallowed by <a href="https://www.w3.org/TR/wai-aria-1.2/#namefromprohibited">the rules of ARIA’s grammar</a>.
<div>
<pre><code>

$39.95


<code title="let JavaScript example">
let submitButton = document.querySelector('button[type="submit"]');
</code>
</code></pre>
</div>
For these examples, recall that the role is implicit, sourced from the declared HTML element.
Note here that sometimes a browser will make an attempt regardless and overwrite the author-specified string value. This overriding is a confusing act for all involved, which led to the rule being established in the first place. 
You Can’t Make Up ARIA And Expect It To Work
I’ve witnessed some developers guess-adding CSS classes, such as <code>.background-red</code> or <code>.text-white</code>, to their markup and being rewarded if the design visually updates correctly. 
The reason this works is that someone previously added those classes to the project. With ARIA, the people who add the content we can use are the <a href="https://www.w3.org/WAI/about/groups/ariawg/">Accessible Rich Internet Applications Working Group</a>. This means each new version of ARIA has a predefined set of properties and values. Assistive technology is then updated to parse those attributes and values, <a href="https://ericwbailey.website/published/it-needs-to-map-back-to-a-role/#edicts-still-need-to-be-carried-out">although this isn’t always a guarantee</a>.
Declaring ARIA, which isn’t part of that predefined set, means assistive technology won’t know what it is and consequently won’t announce it.
<pre><code><!--
There is no "selectpanel" role in ARIA.
Because of this, this code will be announced
as a button and not as a select panel.
-->
<button
role="selectpanel"
type="button">
Choose resources
</button>
</code></pre>
ARIA Fails Silently
This speaks to the previous section, where ARIA won’t understand words spoken to it that exist outside its limited vocabulary.
There are no console errors for malformed ARIA. There’s also no alert dialog, beeping sound, or flashing light for your operating system, browser, or assistive technology. This fact is yet another reason why it is so important to <a href="https://webaim.org/articles/nvda/">test with actual assistive technology</a>. 
<a href="https://webaim.org/articles/screenreader_testing/">You don’t have to be an expert</a> here, either. There is a good chance your code needs updating if you set something to announce as a specific <a href="https://www.w3.org/TR/wai-aria/#introstates">state</a> and assistive technology in its default configuration does not announce that state.
ARIA Only Exposes The Presence Of Something To Assistive Technology
Applying ARIA to something does not automatically “unlock” capabilities. It only sends a hint to assistive technology about how the interactive content should behave. 
For assistive technology like screen readers, that hint could be for how to announce something. For assistive technology like <a href="https://www.afb.org/node/16207/refreshable-braille-displays">refreshable Braille displays</a>, it could be for how it raises and lowers its pins. For example, declaring <code>role="button"</code> on a <code>div</code> element does not automatically make it clickable. You will still need to:
<ul>
<li>Target the <code>div</code> element in JavaScript, </li>
<li>Tie it to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event">click event</a>, </li>
<li>Author the interactive logic that it performs when clicked, and then </li>
<li>Accommodate <a href="https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.html">all the other expected behaviors</a>.</li>
</ul>
This all makes me wonder why you can’t save yourself some work and use a <code>button</code> element in the first place, but that is a different story for a different day. 
Additionally, adjusting an element’s role via ARIA does not modify the element’s native functionality. For example, you can declare <code>role="image"</code> on a <code>div</code> element. However, attempting to declare the <code>alt</code> or <code>src</code> attributes on the <code>div</code> won’t work. This is because <code>alt</code> and <code>src</code> are <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">not supported attributes for <code>div</code></a>.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/8-image%20element-div.png" />
Declaring an ARIA Role On Something Will Override Its Semantics, But Not Its Behavior
This speaks to the previous section on ARIA only exposing something’s presence. Don’t forget that certain HTML elements have primary and secondary interactive capabilities built into them.
For example, an anchor element’s primary capability is navigating to whatever URL value is provided for its <code>href</code> attribute. Secondary capabilities for an anchor element include copying the URL value, opening it in a new tab or incognito window, and so on.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/9-right-click.png" />
These secondary capabilities are still preserved. However, it may not be apparent to someone that they can use them — or use them in the way that they’d expect — depending on what is announced. 
The opposite is also true. When an element has no capabilities, having its role adjusted does not grant it any new abilities. Remember, <a href="#aria-only-exposes-the-presence-of-something-to-assistive-technology">ARIA only announces</a>. This is why that <code>div</code> with a <code>role</code> of <code>button</code> assigned to it won’t do anything when clicked if no companion JavaScript logic is also present.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/keyboard-support.png" />
You Will Need To Declare ARIA To Make Certain Interactions Accessible
A lot of the previous content may make it seem like ARIA is something you should avoid using altogether. This isn’t true. Know that this guidance is written to help steer you to situations where HTML does not offer the capability to describe an interaction out of the box. This space is where you want to use ARIA.
Knowing how to identify this area requires spending some time learning what HTML elements there are, as well as what they are and are not used for. I quite like <a href="https://html5doctor.com/">HTML5 Doctor’s Element Index</a> for upskilling on this. 
Certain ARIA States Require Certain ARIA Roles To Be Present
This is analogous to how HTML has both <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a> and attributes that can only be used on a per-element basis. For example, <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code> can be used on any HTML element</a> or role. However, <a href="https://w3c.github.io/aria/#aria-posinset"><code>aria-posinset</code> can only be used with <code>article</code>, <code>comment</code>, <code>listitem</code>, <code>menuitem</code>, <code>option</code>, <code>radio</code>, <code>row</code>, and <code>tab</code> roles</a>. Remember here that these roles can be provided by either HTML or ARIA.
Learning what states require which roles can be achieved by <a href="https://www.w3.org/TR/wai-aria/#state_prop_def">reading the official reference</a>. Check for the “Used in Roles” portion of each entry’s characteristics:
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/11-used-in-roles.png" />
Automated code scanners — like <a href="https://www.deque.com/axe/">axe</a>, <a href="https://wave.webaim.org/">WAVE</a>, <a href="https://www.tpgi.com/arc-platform/arc-toolkit/">ARC Toolkit</a>, <a href="https://pa11y.org/">Pa11y</a>, <a href="https://github.com/IBMa/equal-access#equal-access">equal-access</a>, and so on — can catch this sort of thing if they are written in error. I’m a big fan of implementing these sorts of checks as part of a <a href="https://en.wikipedia.org/wiki/Continuous_integration">continuous integration</a> strategy, as it makes it a code quality concern shared across the whole team.
ARIA Is More Than Web Browsers
Speaking of technology that listens, it is helpful to know that the ARIA you declare instructs the browser to speak to the operating system the browser is installed on. Assistive technology then listens to <a href="https://www.w3.org/TR/wai-aria/#dfn-accessibility-tree">what the operating system reports</a>. It then communicates that to the person using the computer, tablet, smartphone, and so on.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/12-flowchart-four-steps.png" />
A person can then instruct assistive technology to request the operating system to take action on the web content displayed in the browser. 
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/13-flowchart-four-steps.png" />
This interaction model is by design. It is done to make interaction from assistive technology indistinguishable from interaction performed without assistive technology. 
There are a few reasons for this approach. The most important one is <a href="https://css-tricks.com/accessibility-events/">it helps preserve the privacy and autonomy</a> of the <a href="https://accessaces.com/what-disabled-people-have-to-give-up-in-the-name-of-accessibility/">people who rely on assistive technologies</a>.
Just Because It Exists In The ARIA Spec Does Not Mean Assistive Technology Will Support It
This support issue was touched on earlier and is a difficult fact to come to terms with. 
Contemporary developers enjoy the hard-fought, hard-won benefits of <a href="https://www.webstandards.org/">the web standards movement</a>. This means you can declare HTML and know that it will <a href="https://www.w3.org/standards/">work with every major browser</a> out there. ARIA does not have this. Each assistive technology vendor has its own interpretation of the ARIA specification. Oftentimes, these interpretations are convergent. Sometimes, they’re not. 
Assistive technology vendors also have support roadmaps for their products. Some assistive technology vendors:
<ul>
<li>Will eventually add support, </li>
<li>May never, and some </li>
<li>Might do so in a way that contradicts how other vendors choose to implement things.</li>
</ul>
There is also the operating system layer to contend with, which I’ll cover in more detail in a little bit. Here, the mechanisms used to communicate with assistive technology are dusty, oft-neglected areas of software development. 
With these layers comes a scenario where the assistive technology can support the ARIA declared, but the operating system itself cannot communicate the ARIA’s presence, or vice-versa. The reasons for this are varied but ultimately boil down to a historic lack of support, prioritization, and resources. However, I am <a href="https://aria-at.w3.org/">optimistic that this is changing</a>. 
Additionally, there is no equivalent to <a href="https://caniuse.com/">Caniuse</a>, <a href="https://web.dev/baseline">Baseline</a>, or <a href="https://webstatus.dev/">Web Platform Status</a> for assistive technology. The closest analog we have to support checking resources is <a href="https://a11ysupport.io/">a11ysupport.io</a>, but know that it is the painstaking work of a single individual. Its content may not be up-to-date, as the work is both Herculean in its scale and Sisyphean in its scope. Because of this, I must re-stress <a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/">the importance of manually testing with assistive technology</a> to determine if the ARIA you use works as intended.
How To Determine ARIA Support
There are three main layers to determine if something is supported:
<ol>
<li>Operating system and version.</li>
<li>Assistive technology and version,</li>
<li>Browser and browser version.</li>
</ol>
<h3>1. Operating System And Version</h3>
Each operating system (e.g., Windows, macOS, Linux) has its own way of <a href="https://alistapart.com/article/semantics-to-screen-readers/">communicating what content is present to assistive technology</a>. Each piece of assistive technology has to accommodate how to parse that communication.
Some assistive technology is incompatible with certain operating systems. An example of this is not being able to use <a href="https://support.apple.com/guide/voiceover/get-started-vo4be8816d70/10/mac/15.0">VoiceOver</a> with Windows, or <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> with macOS. Furthermore, each version of each operating system has slight variations in what is reported and how. Sometimes, the operating system needs to be updated to “teach” it the updated AIRA vocabulary. Also, do not forget that things like <a href="https://github.com/FreedomScientific/standards-support/issues">bugs and regressions</a> can occur.
<h3>2. Assistive Technology And Version</h3>
There is no “one true way” to make assistive technology. Each one is built to address different access needs and wants and is done so in an opinionated way — think how different web browsers have different features and UI. 
Each piece of assistive technology that consumes web content has its own way of communicating this information, and this is by design. It works with what the operating system reports, filtered through things like heuristics and preferences.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/14-voice-control.png" />
Like operating systems, assistive technology also has different versions with what each version is capable of supporting. They can also be susceptible to bugs and regressions.
Another two factors worth pointing out here are upgrade hesitancy and lack of financial resources. Some people who rely on assistive technology are hesitant to upgrade it. This is based on a very understandable fear of breaking an important mechanism they use to interact with the world. This, in turn, translates to scenarios like holding off on updates until absolutely necessary, as well as disabling auto-updating functionality altogether.
Lack of financial resources is sometimes referred to as <a href="https://stimpunks.org/glossary/crip-tax/">the disability or crip tax</a>. <a href="https://www.un.org/development/desa/disabilities/resources/factsheet-on-persons-with-disabilities/disability-and-employment.html">Employment rates tend to be lower for disabled populations</a>, and with that comes less money to spend on acquiring new technology and updating it. This concern can and does apply to operating systems, browsers, and assistive technology.
<h3>3. Browser And Browser Version</h3>
Some assistive technology works better with one browser compared to another. This is due to the underlying mechanics of how the browser reports its content to assistive technology. Using Firefox with NVDA is an example of this.
Additionally, the support for this reporting sometimes only gets added for newer versions. Unfortunately, it also means support can sometimes accidentally regress, and people don’t notice before releasing the browser update — again, this is due to a historic lack of resources and prioritization.
The Less Commonly-Used The ARIA You Declare, The Greater The Chance You’ll Need To Test It
Common ARIA declarations you’ll come across include, but are not limited to:
<ul>
<li><code>aria-label</code>,</li>
<li><code>aria-labelledby</code>,</li>
<li><code>aria-describedby</code>,</li>
<li><code>aria-hidden</code>,</li>
<li><code>aria-live</code>.</li>
</ul>
These are more common because they’re more supported. They are more supported because many of these declarations have been around for a while. Recall <a href="#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">the previous section that discussed actual assistive technology support</a> compared to what the ARIA specification supplies.
Newer, more esoteric ARIA, or historically deprioritized declarations, may not have that support yet or may never. An example of how complicated this can get is <a href="https://w3c.github.io/aria/#aria-controls"><code>aria-controls</code></a>. 
<code>aria-controls</code> is a part of ARIA that has been around for a while. <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> had support for <code>aria-controls</code>, but then removed it after user feedback. Meanwhile, every other screen reader I’m aware of never bothered to add support.
What does that mean for us? Determining support, or lack thereof, is best accomplished by manual testing with assistive technology. 
The More ARIA You Add To Something, The Greater The Chance Something Will Behave Unexpectedly
This fact takes into consideration the complexities in preferences, different levels of support, bugs, regressions, and other concerns that come with ARIA’s usage.
Philosophically, it’s a lot like adding more interactive complexity to your website or web app via JavaScript. The larger the surface area your code covers, the bigger the chance something unintended happens.
Consider the amount of ARIA added to a component or discrete part of your experience. The more of it there is declared nested into <a href="https://dom.spec.whatwg.org/">the Document Object Model (DOM)</a>, the more it interacts with parent ARIA declarations. This is because assistive technology reads what the DOM exposes to help determine intent.
A lot of contemporary development efforts are isolated, feature-based work that focuses on one small portion of the overall experience. Because of this, they may not take this holistic nesting situation into account. This is another reason why — you guessed it — manual testing is so important.
Anecdotally, <a href="https://webaim.org/projects/million/#aria">WebAIM’s annual Millions report</a> — an accessibility evaluation of the top 1,000,000 websites — touches on this phenomenon:
<blockquote>Increased ARIA usage on pages was associated with higher detected errors. The more ARIA attributes that were present, the more detected accessibility errors could be expected. This does not necessarily mean that ARIA introduced these errors (these pages are more complex), but pages typically had significantly more errors when ARIA was present.</blockquote>
Assistive Technology May Support Your Invalid ARIA Declaration
There is a chance that ARIA, which is authored inaccurately, will actually function as intended with assistive technology. While I do not recommend betting on this fact to do your work, I do think it is worth mentioning when it comes to things like debugging.
This is due to the wide range of familiarity there is with people who author ARIA. 
Some of the more mature assistive technology vendors try to accommodate the lower end of this familiarity. This is done in order to better enable the people who use their software to actually get what they need.
There isn’t an exhaustive list of what accommodations each piece of assistive technology has. Think of it like <a href="https://quandyfactory.com/blog/39/the_virtue_of_forgiving_html_parsers">the forgiving nature of a browser’s HTML parser</a>, where the ultimate goal is to render content for humans.
<code>aria-label</code> Is Tricky
<a href="https://w3c.github.io/aria/#aria-label"><code>aria-label</code></a> is one of the most common ARIA declarations you’ll run across. It’s also one of the most misused.
<a href="https://benmyers.dev/blog/dont-use-aria-label-on-static-text-elements/"><code>aria-label</code> can’t be applied to non-interactive HTML elements</a>, but oftentimes is. It <a href="https://adrianroselli.com/2019/11/aria-label-does-not-translate.html">can’t always be translated</a> and is oftentimes <a href="https://ericwbailey.website/published/what-they-dont-tell-you-when-you-translate-your-app/#you%E2%80%99ll-need-to-translate-%2F-localize-more-than-you-think-you-will">overlooked for localization efforts</a>. Additionally, it can make things frustrating to operate for people who use voice control software, where the visible label differs from what the underlying code uses.
Another problem is when it overrides an interactive element’s pre-existing accessible name. For example:
<pre><code>
<a
aria-label="Our services"
href="/services/">
Services
</a>
</code></pre>
This is a violation of <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG Success Criterion 2.5.3: Label in Name</a>, pure and simple. I have also seen it used as a way to provide a <a href="https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html">control hint</a>. This is also a WCAG failure, in addition to being an antipattern:
<div>
<pre><code>
<a
aria-label="Click this link to learn more about our unique and valuable services"
href="/services/">
Services
</a>
</code></pre>
</div>
These factors — along with other considerations — are why I consider <a href="https://ericwbailey.website/published/aria-label-is-a-code-smell/"><code>aria-label</code> a code smell</a>.
<code>aria-live</code> Is Even Trickier
Live region announcements are <a href="https://w3c.github.io/aria/#aria-live">powered by <code>aria-live</code></a> and are an important part of communicating updates to an experience to people who use screen readers.
Believe me when I say that getting <code>aria-live</code> to work properly is tricky, even under the best of scenarios. I won’t belabor the specifics here. Instead, I’ll point you to <a href="https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/">“Why are my live regions not working?”</a>, a fantastic and comprehensive article published by TetraLogical.
The ARIA Authoring Practices Guide Can Lead You Astray
Also referred to as the APG, the <a href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices Guide</a> should be treated with a decent amount of caution.
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/15-apg-caution.png" />
<h3>The Downsides</h3>
The guide was originally authored to help demonstrate ARIA’s capabilities. As a result, its code examples near-exclusively, overwhelmingly, and disproportionately favor ARIA. 
Unfortunately, the APG’s latest redesign also makes it far more approachable-looking than its surrounding W3C documentation. This is coupled with <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">demonstrating UI patterns</a> in a way that signals it’s a self-serve resource whose code can be used out of the box.
These factors create a scenario where people assume everything can be used as presented. This is not true. 
Recall that just because ARIA is listed in the spec <a href="#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">does not necessarily guarantee it is supported</a>. Adrian Roselli writes about this in detail in his post, <a href="https://adrianroselli.com/2023/04/no-apgs-support-charts-are-not-can-i-use-for-aria.html">“No, APG’s Support Charts Are Not ‘Can I Use’ for ARIA”</a>.
Also, remember <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> and know that <a href="#aria-has-rules-for-using-it">an ARIA-first approach is counter to the specification’s core philosophy of use</a>.
In my experience, this has led to developers assuming they can copy-paste code examples or reference how it’s structured in their own efforts, and everything will just work. This leads to mass frustration:
<ul>
<li>Digital accessibility practitioners have to explain that “doing the right thing” isn’t going to work as intended.</li>
<li>Developers then have to revisit their work to update it.</li>
<li>Most importantly, people who rely on assistive technology risk not being able to use something.</li>
</ul>
This is to say nothing about things like timelines and resourcing, working relationships, reputation, and brand perception.
<h3>The Upside</h3>
The APG’s main strength is highlighting what keyboard keypresses people will expect to work on each pattern. 
Consider <a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction">the listbox pattern</a>. It details keypresses you may expect (arrow keys, Space, and Enter), as well as less-common ones (<a href="https://en.wikipedia.org/wiki/Typeahead">typeahead</a> selection and making multiple selections). Here, we need to <a href="#the-spirit-of-aria-reflects-the-era-in-which-it-was-created">remember that ARIA is based on the Windows XP era</a>. The keyboard-based interaction the APG suggests is built from the muscle memory established from the UI patterns used on this operating system.
While your tree view component may look visually different from the one on your operating system, <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows">people will expect it to be keyboard operable in the same way</a>. Honoring this expectation will go a long way to ensuring your experiences are not only accessible but also intuitive and efficient to use.
Another strength of the APG is giving <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">standardized, centralized names to UI patterns</a>. Is it a dropdown? A listbox? A combobox? A select menu? <a href="https://adrianroselli.com/2020/03/stop-using-drop-down.html">Something else</a>? 
When it comes to digital accessibility, these terms all have specific meanings, as well as expectations that come with them. Having a common vocabulary when discussing how an experience should work goes a long way to ensuring everyone will be on the same page when it comes time to make and maintain things.
macOS VoiceOver Can Also Lead You Astray
<a href="https://support.apple.com/guide/voiceover/welcome/mac">VoiceOver on macOS</a> has been <a href="https://www.applevis.com/forum/macos-mac-apps/state-screen-readers-macos">experiencing a lot of problems</a> over the last few years. If I could wager a guess as to why this is, as an outsider, it is that Apple’s priorities are <a href="https://www.apple.com/visionos/visionos-2/">focused elsewhere</a>.
The bulk of web development efforts are conducted on macOS. This means that well-intentioned developers will reach for VoiceOver, as it comes bundled with macOS and is therefore more convenient. However, macOS VoiceOver usage has a drastic minority share for desktops and laptops. It is under 10% of usage, with Windows-based JAWS and NVDA occupying a combined 78.2% majority share:
<img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/16-webaim-pie-chart.png" />
<h3>The Problem</h3>
The sad, sorry truth of the matter is that macOS VoiceOver, in its current state, has a lot of problems. It should only be used to confirm that it can operate the experience the way Windows-based screen readers can. 
This means testing on Windows with NVDA or JAWS will create an experience that is far more accurate to what most people who use screen readers on a laptop or desktop will experience. 
<h3>Dealing With The Problem</h3>
Because of this situation, I heavily encourage a workflow that involves:
<ol>
<li>Creating an experience’s underlying markup,</li>
<li>Testing it with NVDA or JAWS to set up baseline expectations, </li>
<li>Testing it with macOS VoiceOver to identify what doesn’t work as expected.</li>
</ol>
Most of the time, I find myself having to <a href="#declaring-an-aria-role-on-something-that-already-uses-that-role-implicitly-does-not-make-it-extra-accessible">declare redundant ARIA on the semantic HTML I write</a> in order to address missed expected announcements for macOS VoiceOver. 
macOS VoiceOver testing is still important to do, as it is not the fault of the person who uses macOS VoiceOver to get what they need, and we should ensure they can still have access.
You can use apps like <a href="https://www.virtualbox.org/">VirtualBox</a> and <a href="https://www.microsoft.com/en-us/evalcenter/evaluate-windows-11-enterprise">Windows evaluation Virtual Machines</a> to use Windows in your macOS development environment. Services like <a href="https://assistivlabs.com/">AssistivLabs</a> also make on-demand, preconfigured testing easy.
What About iOS VoiceOver?
Despite sharing the same name, <a href="https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios">VoiceOver on iOS</a> is a completely different animal. As software, it is separate from its desktop equivalent and also enjoys <a href="https://webaim.org/projects/screenreadersurvey10/#mobileplatforms">a whopping 70.6% usage share</a>. 
With this knowledge, know that it’s also important to test the ARIA you write on mobile to make sure it works as intended.
You Can Style ARIA
ARIA attributes can be targeted via CSS the way other HTML attributes can. Consider this HTML markup for the main navigation portion of a small e-commerce site:
<pre><code><nav aria-label="Main">
<ul>
<li>
<a href="/home/">Home</a>
<a href="/products/">Products</a>
<a aria-current="true" href="/about-us/">About Us</a>
<a href="/contact/">Contact</a>
</li>
</ul>
</nav>
</code></pre>
The presence of <code>aria-current="true"</code> on the “About Us” link will tell assistive technology to <a href="https://tink.uk/using-the-aria-current-attribute/">announce that it is the current part of the site someone is on</a> if they are navigating through the main site navigation.
We can also tie that indicator of being the current part of the site into something that is shown visually. Here’s how you can target the attribute in CSS:
<pre><code>nav[aria-label="Main"] [aria-current="true"] {
border-bottom: 2px solid #ffffff;
}
</code></pre>
This is an incredibly powerful way to <a href="https://css-tricks.com/user-facing-state/">tie application state to user-facing state</a>. Combine it with modern CSS like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a> and <a href="https://developer.chrome.com/docs/web-platform/view-transitions">view transitions</a> and you have the ability to create robust, sophisticated UI with less reliance on JavaScript.
You Can Also Use ARIA When Writing UI Tests
<a href="https://en.wikipedia.org/wiki/Software_testing">Tests</a> are great. They help guarantee that the code you work on will continue to do what you intended it to do.
A lot of web UI-based testing will use the presence of classes (e.g., <code>.is-expanded</code>) or data attributes (ex, <code>data-expanded</code>) to verify a UI’s existence, position and states. These types of selectors also have a far greater likelihood to be changed as time goes on when compared to semantic code and ARIA declarations. 
This is something my coworker Cam McHenry touches on in his great post, <a href="https://camchenry.com/blog/how-i-write-accessible-playwright-tests">“How I write accessible Playwright tests”</a>. Consider this piece of <a href="https://playwright.dev/">Playwright</a> code, which checks for the presence of a button that toggles open an edit menu:
<div>
<pre><code>// Selects an element with a role of <code>button</code>
// that has an accessible name of "Edit"
const editMenuButton = await page.getByRole('button', { name: "Edit" });
// Requires the edit button to have a property
// of <code>aria-haspopup</code> with a value of <code>true</code>
expect(editMenuButton).toHaveAttribute('aria-haspopup', 'true');
</code></pre>
</div>
The test selects UI based on outcome rather than appearance. That’s a far more reliable way to target things in the long-term.
This all helps to create a virtuous feedback cycle. It enshrines semantic HTML and ARIA’s presence in your front-end UI code, which helps to guarantee accessible experiences don’t regress. Combining this with styling, you have a powerful, self-contained system for building robust, accessible experiences. 
ARIA Is Ultimately About Caring About People
Web accessibility can be about enabling important things like scheduling medical appointments. It is also about fun things like chatting with your friends. It’s also used for every web experience that lives in between. 
Using semantic HTML — supplemented with a judicious application of ARIA — helps you enable these experiences. To sum things up, ARIA:
<ul>
<li>Has been around for a long time, and its spirit reflects the era in which it was first created;</li>
<li>Has a governing taxonomy, vocabulary, and rules for use and is declared in the same way HTML attributes are;</li>
<li>Is mostly used for dynamically updating things, controlled via JavaScript;</li>
<li>Has highly specific use cases in mind for each of its roles;</li>
<li>Fails silently if mis-authored;</li>
<li>Only exposes the presence of something to assistive technology and does not confer interactivity;</li>
<li>Requires input from the web browser, but also the operating system, in order for assistive technology to use it;</li>
<li>Has a range of actual support, complicated by the more of it you use;</li>
<li>Has some things to watch out for, namely <code>aria-label</code>, the ARIA Authoring Practices Guide, and macOS VoiceOver support;</li>
<li>Can also be used for things like visual styling and writing resilient tests;</li>
<li>Is best evaluated by using actual assistive technology.</li>
</ul>
Viewed one way, ARIA is arcane, full of misconceptions, and fraught with potential missteps. Viewed another, ARIA is a beautiful and elegant way to programmatically communicate the interactivity and state of a user interface.
I choose the second view. At the end of the day, using ARIA helps to ensure that disabled people can use a web experience the same way everyone else can. 
Thank you to <a href="https://adrianroselli.com/">Adrian Roselli</a> and <a href="https://janmaarten.com/">Jan Maarten</a> for their feedback.
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility">What the Heck is ARIA? A Beginner’s Guide to ARIA for Accessibility</a>,” Kat Shaw</li>
<li>“<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a>,” Léonie Watson & Chaals McCathie Nevile</li>
<li>“<a href="https://alistapart.com/article/semantics-to-screen-readers/">Semantics to Screen Readers</a>,” Melanie Richards</li>
<li>“<a href="https://www.tpgi.com/what-aria-does-not-do/">What ARIA does not do</a>,” Steve Faulkner</li>
<li>“<a href="https://html5accessibility.com/stuff/2024/07/15/what-aria-still-does-not-do/">What ARIA still does not do</a>,” stevef</li>
<li>“<a href="https://www.deque.com/blog/apg-support-tables-why-they-matter/">APG support tables — why they matter</a>,” Michael Fairchild</li>
<li>“<a href="https://adrianroselli.com/2023/02/aria-vs-html.html">ARIA vs HTML</a>,” Adrian Roselli</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Eric Bailey)</author>
<enclosure url="http://files.smashing.media/articles/what-i-wish-someone-told-me-aria/what-i-wish-someone-told-me-aria.jpg" length="0" type="image/jpg"/>
</item>
<item>
<title><![CDATA[Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS]]></title>
<link>https://smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/</link>
<guid>https://smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/</guid>
<pubDate>Wed, 11 Jun 2025 13:00:00 GMT</pubDate>
<description><![CDATA[In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.]]></description>
<content:encoded><![CDATA[I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar 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.
<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>)
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.
The Initial Markup
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>.
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>.
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.
<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
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.
Initially, we can call <code>console.log</code> to ensure the handler fires only when expected:
<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>
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. 
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.
<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>
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. 
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.
<div>
<pre><code>// handler for moving the highlight
const moveHighlight = () => {
const activeNavItem = document.querySelector('a.active');
const highlighterElement = document.querySelector('#highlight');
const width = activeNavItem.offsetWidth;
const itemPos = activeNavItem.getBoundingClientRect();
const navbarPos = navbar.getBoundingClientRect()
const relativePosX = itemPos.left - navbarPos.left;
const styles = {
left: <code>${relativePosX}px</code>,
width: <code>${width}px</code>,
};
Object.assign(highlighterElement.style, styles);
}
</code></pre>
</div>
Let’s call our new function when the click event fires:
<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>
Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads:
<pre><code>// handler for moving the highlight
const moveHighlight = () => {
// ...
}
// display the highlight when the page loads
moveHighlight();
</code></pre>
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.
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>.
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.
Using The View Transition API
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 native-app-like user experience featured in frameworks like <a href="https://docs.astro.build/en/guides/view-transitions/">Astro</a>. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality.
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. 
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:
<pre><code><nav>
- <div id="highlight"></div>
<a href="#" class="active">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</code></pre>
<pre><code>- #highlight {
- z-index: 0;
- position: absolute;
- height: 100%;
- width: 0;
- left: 0;
- box-sizing: border-box;
- transition: all 0.2s ease;
- }
+ nav a::after {
+ content: " ";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border: none;
+ box-sizing: border-box;
+ }
</code></pre>
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.
<pre><code>nav a.active::after {
border: 2px solid green;
view-transition-name: highlight;
}
</code></pre>
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.
<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(() => {
document.querySelector('nav a.active').classList.remove('active');
event.target.classList.add('active');
});
});
</code></pre>
</div>
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!
Adjusting The View Transition
At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.
<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>)
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.
<pre><code>::view-transition-old(highlight) {
height: 100%;
}
::view-transition-new(highlight) {
height: 100%;
}
</code></pre>
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:
<div>
<pre><code>const navbar = document.querySelector('nav');
// change the item that has the .active class applied
const setActiveElement = (elem) => {
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(() => setActiveElement(event.target));
});
</code></pre>
</div>
Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links.
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>.
Conclusion
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 native-app-like interactions without breaking the bank. 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.
<h3>Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>getBoundingClientRect()</code> method documentation</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API documentation</a></li>
<li>“<a href="https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/">View Transitions: Handling Aspect Ratio Changes</a>” by Jake Archibald</li>
</ul>
]]></content:encoded>
<author>hello@smashingmagazine.com (Blake Lundquist)</author>
<enclosure url="http://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/creating-moving-highlight-navigation-bar-javascript-css.jpg" length="0" type="image/jpg"/>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=http%3A//rss1.smashingmagazine.com/feed/"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//rss1.smashingmagazine.com/feed/

Home · About · News · Docs · Terms