Articles on Smashing Magazine — For Web Designers And Developers

The Site-Search Paradox: Why The Big Box Always Wins

hello@smashingmagazine.com (Carrie Webster) — Thu, 26 Mar 2026 10:00:00 GMT

Why The Big Box Always Wins — Smashing Magazine

By About The Author

11 min read
UX, Design, User Research

Success in modern UX isn’t about having the most content. It’s about having the most findable content. Yet even with more data and better tools than ever, internal search often fails, leaving users to rely on global search engines to find a single page on a local site. Why does the “Big Box” still win, and how can we bring users back?

In the early days of the web, the search bar was a luxury, added to a site once it became “too big” to navigate by clicking. We treated it like an index at the back of a book: a literal, alphabetical list of words that pointed to specific pages. If you typed the exact word the author used, you found what you needed. If you didn’t, you were met with a “0 Results Found” screen that felt like a digital dead end.

Twenty-five years later, we are still building search bars that act like 1990s index cards, even though the humans using them have been fundamentally rewired. Today, when a user lands on your site and can’t find what they need in the global navigation within seconds, they don’t try to learn your taxonomy. They head for the search box. But if that box fails them, and demands they use your specific brand vocabulary, or punishes them for a typo, they do something that should keep every UX designer awake at night. They leave your site, go to Google, and type site:yourwebsite.com [query]. Or, worse still, they just type in their query and end up on a competitor’s website. I personally use Google over a site’s search nearly every time.

This is the Site-Search Paradox. In an era where we have more data and better tools than ever, our internal search experiences are often so poor that users prefer to use a trillion-dollar global search engine to find a single page on a local site. As Information Architects and UX designers, we have to ask, why does the “Big Box” win, and how can we take our users back?

The “Syntax Tax” And The Death Of Exact Match

The primary reason site search fails is what I call the Syntax Tax. This is the cognitive load we place on users when we require them to guess the exact string of characters we’ve used in our database.

Research by Origin Growth on Search vs Navigate shows that roughly 50% of users go straight to the search bar upon landing on a site. For example, when a user types “sofa” into a furniture site that has categorised everything under “couches,” and the site returns nothing, the user doesn’t think, “Ah, I should try a synonym.” They think, “This site doesn’t have what I want.”

This is a failure of Information Architecture (IA). We’ve built our systems to match strings (literal sequences of letters) rather than things (the concepts behind the words). When we force users to match our internal vocabulary, we are taxing their brainpower.

Keyword Search vs. Semantic Search. (Image source: Gerrid Smith) (Large preview)

Why Google Wins: It’s Not Power, It’s Context

It is easy to throw our hands up and say, “We can’t compete with Google’s engineering.” But Google’s success isn’t just about raw power; it’s about contextual understanding. While we often treat search as a technical utility, Google treats it as an IA challenge.

Data from the Baymard Institute reveals that 41% of e-commerce sites fail to support even basic symbols or abbreviations, and this often leads to users abandoning a site after a single failed search attempt. Google wins because it uses stemming and lemmatization — IA techniques that recognize “running” and “ran” are the same intent. Most internal searches are “blind” to this context, treating “Running Shoe” and “Running Shoes” as entirely different entities.

If your site search can’t handle a simple plural or a common misspelling, you are effectively charging your users a tax for being human.

User Query Friction vs. User Flow. (Image source: Created with Gemini) (Large preview)

The UX Of “Maybe”: Designing For Probabilistic Results

In traditional IA, we think in binaries: A page is either in a category, or it isn’t. A search result is either a match or it isn’t. Modern search, which users now expect, is probabilistic. It deals in “confidence levels.”

According to Forresters, users who use search are 2–3 times more likely to convert than those who don’t, if the search works. And 80% of users on e-commerce sites exit a site due to poor search results.

As designers, we rarely design for the middle ground. We design a “Results Found” page and a “No Results” page. We miss the most important state: The “Did You Mean?” State. A well-designed search interface should provide “Fuzzy” matches. Instead of a cold “0 Results Found” screen, we should be using our metadata to say, “We didn’t find that in ‘Electronics,’ but we found 3 matches in ‘Accessories’.” By designing for “Maybe,” we can keep the user in the flow.

Case Study: The Cost Of “Invisible” Content

To understand why IA is the fuel for the search engine, we must look at how data is structured behind the scenes. In my 25 years of practice, I’ve seen that the “findability” of a page is directly tied to its structured metadata.

Consider a large-scale enterprise I worked with that had over 5,000 technical documents. Their internal search was returning irrelevant results because the “Title” tag of every document was the internal SKU number (e.g., “DOC-9928-X”) rather than the human-readable name.

By reviewing the search logs, we discovered that users were searching for “installation guide.” Because that phrase didn’t appear in the SKU-based title, the engine ignored the most relevant files. We implemented a Controlled Vocabulary, which was a set of standardised terms that mapped SKUs to human language. Within three months, the “Exit Rate” from the search page dropped by 40%. This wasn’t an algorithmic fix; it was an IA fix. It proves that a search engine is only as good as the map we give it.

The Internal Language Gap

Throughout my two decades in UX, I’ve noticed a recurring theme: internal teams often suffer from “The curse of knowledge.” We become so immersed in our own corporate vocabulary, or sometimes referred to as business jargon, that we forget the user doesn’t speak our language.

I once worked with a financial institution that was frustrated by high call volumes to their support centre. Users were complaining they couldn’t find “loan payoff” information on the site. When we looked at the search logs, “loan payoff” was the #1 searched term that resulted in zero hits.

Why? Because the institution’s IA team had labelled every relevant page under the formal term “Loan Release.” To the bank, a “payoff” was a process, but a “Loan Release” was the legal document that was the “thing” in the database. Because the search engine was looking for literal character strings, it refused to connect the user’s desperate need with the company’s official solution.

This is where the IA professional must act as a translator. By simply adding “loan payoff” as a hidden metadata keyword to the Loan Release pages, we solved a multi-million dollar support problem. We didn’t need a faster server; we needed a more empathetic taxonomy.

The 4-step Site-search Audit Framework

If you want to reclaim your search box from Google, you cannot simply “set it and forget it.” You must treat search as a living product. Here is the framework I use to audit and optimise search experiences:

Phase 1: The “Zero-result” Audit

Pull your search logs from the last 90 days. Filter for all queries that returned zero results. Group these into three buckets:

True gaps

Content the user wants that you simply don’t have (a signal for your content strategy team).
Synonym gaps

Content you have, but described in words the user doesn’t use (e.g., “Sofa” vs “Couch”).
Format gaps

The user is looking for a “video” or “PDF,” but your search only indexes HTML text.

Phase 2: Query Intent Mapping

Analyse the top 50 most common queries. Are they Navigational (looking for a specific page), Informational (looking for “how to”), or Transactional (looking for a specific product)? Your search UI should look different for each. A navigational search should “Quick-Link” the user directly to the destination, bypassing the results page entirely.

Phase 3: The “Fuzzy” Matching Test

Intentionally mistype your top 10 products. Use plurals, common typos, and American vs. British English spellings (e.g., “Color” vs. “Colour”). If your search fails these tests, your engine lacks “stemming” support. This is a technical requirement you must advocate for to your engineering team.

Phase 4: Scoping And Filtering UX

Look at your results page. Does it offer filters that actually make sense? If a user searches for “shoes,” they should see filters for Size and Colour. Generic filters can be as bad as no filters.

To stop the exodus to Google, we must move beyond the “Box” and look at the scaffolding.

Step A: Implement semantic scaffolding.

Don’t just return a list of links. Use your IA to provide context. If a user searches for a product, show them the product, but also show them the manual, the FAQs, and the related parts. This “associative” search mimics how the human brain works and how Google operates.

Step B: Stop being a librarian, start being a concierge.

A librarian tells you exactly where the book is on the shelf. A concierge listens to what you want to achieve and gives you a recommendation. Your search bar should use predictive text not just to complete words, but to suggest intentions.

Using A Google-powered Search Bar

Using a “Google-powered” search bar, as seen on the University of Chicago website, is essentially an admission that a site’s internal organisation has become too complex for its own navigation to handle. While it is a quick “fix” for massive institutions to ensure users find something, it is generally a poor choice for businesses with deep content.

Example of a university website using Google-powered search. (Source: University of Chicago) (Large preview)

By delegating the search to Google, you surrender the user experience to an outside algorithm. You lose the ability to promote specific products, you expose your users to third-party ads, and you train your customers to leave your ecosystem the moment they need help. For a business, search should be a curated conversation that guides a customer toward a goal, not a generic list of links that pushes them back to the open web.

Shows search results with useful options when there are no exact matches. Additional suggestions are provided, including a “Did you mean” feature to help connect users with similar items. (Image source: Crate & Barrel) (Large preview)

The Simple Search UX Checklist

Here is a final checklist for reference when you are building the search experience for your users. Work with your product team to ensure you are engaging with the right team members.

Kill the dead-end.

Never just say “No results found.” If an exact match isn’t there, suggest a similar category, a popular product, or a way to contact support.
Fix “almost” matches.

Make sure the search can handle plurals (like “plant” vs. “plants”) and common typos. Users shouldn’t be punished for a slip of the thumb.
Predict the user’s goal.

Use an “auto-suggest” menu to show helpful actions (like “Track my order”) or categories, not just a list of words.
Talk like a human.

Look at your search logs to see the words people actually use. If they type “couch” and you call it “sofa,” create a bridge in the background so they find what they need anyway.
Smart filtering.

Only show filters that matter. If someone searches for “shoes,” show them size and color filters, not a generic list that applies to the whole site.
Show, don’t just list.

Use small thumbnails and clear labels in the search results so users can see the difference between a product, a blog post, and a help article at a glance.
Speed is trust.

If the search takes more than a second, use a loading animation. If it’s too slow, people will immediately go back to Google.
Check the “failure” logs.

Once a month, look at what people searched for that returned zero results. This is your “to-do list” for fixing your site’s navigation.

Conclusion: The Search Bar Is A Conversation

The search box is the only place on your site where the user tells us exactly, in their own words, what they want. When we fail to understand those words, when we let the “Big Box” of Google do the work for us, we aren’t just losing a page view. We are losing the opportunity to prove that we understand our customers.

Success in modern UX isn’t about having the most content; it’s about having the most findable content. It’s time to stop taxing users for their syntax and start designing for their intent.

By moving from literal string matching to semantic understanding, and by supporting our search engines with robust, human-centered Information Architecture, we can finally close the gap.

(yk)

Generated by Readability.php.

Testing Font Scaling For Accessibility With Figma Variables

hello@smashingmagazine.com (Ruben Ferreira Duarte) — Tue, 24 Mar 2026 13:00:00 GMT

Testing Font Scaling For Accessibility With Figma Variables — Smashing Magazine

By About The Author

17 min read
Accessibility, Figma, Tools

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

Building a true culture of digital accessibility in a company is a mission of resilience and perseverance. It’s not difficult for the discourse on accessibility to fall into the usual clichés. Accessibility is very important for people. The accessibility of digital products and services promotes inclusion. Or even, all professionals on the teams should be involved in accessibility work. Of course. No one in their right mind will dispute any of these statements (I hope).

However, the second part of this conversation, which very few companies reach, is “how?” How do we make this happen in the midst of the day-to-day work of digital transformation teams, which, as we all know, are immersed in demanding scripts, often with a very limited number of people available? Most of the time, the choice ends up being between “we do this” and “that.” And it shouldn’t, because, in these cases, I never saw accessibility winning in this equation.

It shouldn’t be this way. You don’t need to be this way. First of all, because choosing between accessibility and anything else isn’t the right choice. Accessibility is no longer just another feature to be added to the others. It’s an added value for the business and, currently, a legal obligation that can have serious consequences for companies. On the other hand, there are intelligent, optimized, and impactful ways to incorporate accessibility principles into the natural dynamics of teams. It’s possible to work on accessibility without turning team operations upside down. In essence, that’s what AccessibilityOps does. Empowering people and providing teams with simple processes so they can integrate accessibility work into their daily routines without disproportionate effort.

Accessibility And Design

Working on digital accessibility in design can involve several actions. It’s clear that we need to pay particular attention to color and how it’s used to convey meaning. Of course, the interaction sizes of elements must be comfortable. But, most importantly, we must think about design from a versatile perspective. An interface isn’t a poster. We can control many aspects of that design, but how users interact with the interface is subject to an endless number of variables. The type of device, context, purpose, network quality, etc. All of this greatly affects each person’s experience and interaction. Along with all this, when digital accessibility concerns are brought into the design process, it adds even more variables.

(Large preview)

People often use what are called assistive technologies and strategies. Basically, these are technological tools or, at the very least, “tricks” that people resort to in order to find more comfortable usage models. The famous screen readers, commonly associated with the use of blind people (but which are not only useful to them), for example, are an assistive technology. Changing colors or color contrasts between different elements is also an assistive technology. Increasing the font size (which we discussed in this text) is another example. There are countless assistive technologies and strategies. Almost as many as the different contexts of use for each person.

We Don’t Control Everything

In other words (and this is the “bad news” for us designers), “our design” is subject, from the users’ perspective, to transformations that we don’t control. It will be “transformed” by the user, ensuring that they can interact with the application and everything it offers in the most comfortable way possible. And that’s a good thing. If this happens and everything goes well, we will have surely done our accessibility work very well, and we all deserve congratulations. If the user applies any of these support technologies and strategies and still cannot use the digital application, it’s a sign that something is not working as it should.

Oh, and speaking of which. Don’t even think about blocking the use of these technologies or support strategies. They may be “destroying” your beautiful design, but they are allowing more and more people to actually use the app. In the end, wasn’t that exactly what we promised we wanted to do? Design for (all) people. Without exception?

Increase Font Size

How many times have we heard someone — friends, family, or even colleagues — complaining that this or that text is too small? Text plays a very important role in the digital experience. Much information is conveyed through text: instructions for use, button captions, or interactive elements. All of this uses text as a communication tool. If reading all these elements is difficult, naturally, the experience is severely impaired.

Comfortable text reading, regardless of its function, is a non-negotiable principle. This reading can be facilitated by using comfortable sizes in the design. However, supporting technologies and strategies, through the functionality of increasing font size, can also help improve readability. According to APPT data, 26% of Android and iOS mobile device users increase the default font size (data from February 2026). One in four users increases the font size on their smartphone. This is a very significant sample of people, making this functionality unavoidable in design processes.

(Large preview)

Compliance With Guidelines

Increasing font size in interfaces can represent a huge design challenge. It’s important to understand that, suddenly, some text elements, due to user actions, can double in size from their initial size.

“With the exception of captions and text images, text can be resized without assistive technology up to 200% without loss of content or functionality.”
— Success criterion 1.4.4, “Resizing Text” of the Web Content Accessibility Guidelines (WCAG), version 2.2

This success criterion is at the AA compliance level, meaning this is an absolutely mandatory feature according to any legal framework.

It’s easy to understand the 200% in this success criterion. If we assume we design the interfaces at a 100% scale, meaning the element size is the initial size, then increasing the text by up to 200% will correspond to doubling the initial size. Other enlargement scales can also be used, such as 120%, 140%, and so on. In other words, we have to ensure that users can increase the text to double its initial size through supporting technologies or strategies (and this is not a minor detail).

To comply with this standard, we don’t need to provide text size increase tools in the interfaces. In practice, these features are nothing more than redundancy. Devices already allow this to be done in a standardized way. Users who really need this setting know it (because, without it, their lives would be much more difficult). Well, they already have this setting applied across their device. And that means we can eliminate these additional interface elements, simplifying the experience.

(Large preview)

Standardized Access

An important concept to remember about assistive technologies, particularly in this case regarding increasing font size, is that most devices already have many of these tools installed by default. In other words, in many cases, users don’t need to purchase their own software or buy a specific type of device just to have this functionality.

Whether on mobile devices or even in web browsers, in the vast majority of cases, it’s easy to find installed features that allow you to increase the default font size we’re using throughout the interface. This principle of increasing font size can be applied to digital products, such as apps, or even to any type of website running on the standard web browsers used today.

iPhones

On iPhone devices, the font size increase feature is integrated by default. To use this feature, simply access the “Settings” panel, select “Accessibility,” and within the “Vision” options group, access the “Text Size and Display” feature and configure the desired font size increase on that screen.

(Large preview)

Google Chrome

Web browsers also offer, by default, the functionality to increase font size. For example, in Google Chrome, this feature is available in the “Options” panel, specifically in the “Appearance” area. In the list of options that appear in this group, simply select the “Font size” option. Normally, the “Medium — Recommended” option will be selected. You can change this setting to any other available font size. Try, for example, the “Very large” option.

(Large preview)

Test In Figma

To ensure that digital accessibility work becomes effective in the daily lives of teams, it is essential to find simple work processes. Actions or initiatives that can be integrated into the team’s routine, that address accessibility in an integrated way, and do not require a dramatic transformation of the current reality. If that were necessary, he believes, it wouldn’t happen most of the time. Therefore, designing simple work processes is half the battle for accessibility to truly happen, in this case, also within a design team.

Regarding testing font size increases in design, we have extraordinary tools at our disposal today. Those who remember the days of designing complex interfaces in Adobe Photoshop will recognize the differences in the tools we have today (and thankfully so). It’s now possible, through tools like Figma, to create such dynamism in design that testing font size increases for accessibility becomes almost unavoidable for the team.

(Large preview)

Note: To take this test, you need to have a strong grasp of Figma’s text styles, auto layouts, and variables. These three are fundamental tools for success without much extra effort. If you haven’t yet mastered these features, it’s highly recommended that you start there. Don’t skip steps. Learning is a gradual process that must be followed in a structured, step-by-step manner.

Where Do We Want To Go?

The font size increase test in Figma that we want to perform is simple. We want to have a set of variables available for all the text styles we use in the interface, allowing us to choose whether we want to see the interface with the text at a scale of 100%, 120%, 140%, 160%, 180%, or 200%. As we apply this set of variables (much like applying variables for light and dark mode), we observe the transformations of the text in the interface and understand to what extent adaptations are needed in each version of the interface with different typographic scales.

(Large preview)

How Do We Make This Happen?

For this test to go so smoothly, you need to do some groundwork. Design systems can greatly help optimize much of this initial work. But I won’t lie to you. For the test to work well, your design needs to have a very serious level of organization and systematization.

This isn’t really a guide, because each team will have its own work model, and these recommendations can be applied in different ways (and that’s okay). However, for this test to work, it’s important to ensure certain assumptions in the design. To help you phase the implementation of this test model, here are some steps to follow. Step-by-step instructions to guide you in organizing your files and ensuring you can fully execute this test in the simplest and most practical way possible.

1. Designing The Interfaces

It all starts with the design. Before any testing, the focus should, as it should, be on the design of each interface that we will want to test later. At this stage, there is still no specific concern with the font size increase test that we will perform later. Naturally, all interface design should, from the outset, follow the most basic accessibility recommendations applied to design.

(Large preview)

2. Apply Auto Layouts To All Elements

In every screen design you create, you’ll need to ensure you apply auto layouts perfectly. This is a very important step. It’s this consistent application of auto layouts to the entire structure and design elements that will later guarantee the scalability of the interface when we start testing font size increases. You really can’t underestimate this step. If you don’t pay it the attention it deserves, you’ll see when we test typographic scaling in the interfaces, everything breaking down like an elephant in a china shop.

(Large preview)

3. Structuring And Applying Text Styles

To perform our font size increase test, we’ll also need you to have applied text styles to each interface design. You probably even started creating them as you were drawing. Great. If you haven’t done so, it’s important that you do it now. For the test to work perfectly, we really need this. Don’t leave any text element in the design without a text style applied.

(Large preview)

4. Define The Set Of Variables 100%

This test forces a fairly high degree of optimization. In practice, this means we will have to use Figma variables for all the characteristics of the text styles we have in the interface. At this stage, you must define Figma “number” variables for at least the font-size and line-height of the text styles you applied to the drawing. With this step, you are defining the font size increase scale values for a 100% visualization model, that is, the initial and reference version of the drawing. It is important that you structure these variables for each text style in the drawing because, subsequently, we will have to consider the enlargement scale of each of these text elements.

(Large preview)

5. Apply The Variables To The Text Styles

Having defined the variables for the 100% scale text styles, you must now apply them to the elements of the text styles already created. Don’t forget to apply variables at least to the font-size and line-height characteristics. If you have more typographical variables, that’s fine. But you should at least have variables applied to font-size and line-height. This is really very important.

(Large preview)

6. Define The Variables For Increasing The Text Size

Now that you have the variables applied to the 100% scale text styles, the next step is to create the variables for the other font size increase scales. In practice, you have to create the variables that will tell the system what font size each text style will grow to when the increase scale is 120%, 140%, 160%, etc.

To define the font-size and line-height values, simply multiply the initial value by the scale percentage. For example, if a text style has a font-size of 16px, the size for the 120% scale will be 16 multiplied by 1.2, which gives a result of 19.2. Repeat this calculation for all font-size and line-height values of the font size increase scale percentages you choose.

You can also choose whether or not to apply rounding to the final values. This is an approximate test, and therefore any differences that may arise from rounding will not affect the final perception of the test result.

(Large preview)

7. Apply Variables To Different Scale Versions

The moment of truth has arrived. The next step is to understand if we have everything working so that the test runs perfectly. Therefore, you should copy the original interface and apply the set of variables for each of the font size increase rates that make sense to you. Repeat this process for all the font size increase percentages you have defined.

As a suggestion, you can use the 120%, 140%, 160%, 180%, and 200% increase percentages as a reference. If you want to simplify, you can reduce the number of scaling percentages you are working with. Regardless of the number of percentages you are working with, you should always work with the minimum of 100% and 200% scales.

(Large preview)

8. Identify Areas For Improvement

By applying different font size increase scales to the same screen, it’s easy to understand where improvements might be needed. This is where the real test of increasing font size in interface design and the most interesting accessibility work begins.

In your analysis of the various screens, keep some important aspects in mind:

The fact that the text appears gigantic isn’t a problem and doesn’t “ruin” the design. Remember that this can mean the difference between someone being able to use a particular product or service or not.
An accessibility problem exists when increasing the font size makes it impossible for the user to read certain texts or to activate certain controls.
For text elements that are already very large, increasing the font size might not make sense. Doing so could make those elements disproportionate, which wouldn’t improve readability (since they are already a good size) and would occupy completely unnecessary space.
If there are elements that appear to be popping out of the screen, the first step is to confirm how you are applying auto layout. Many design aspects can be easily resolved with the proper use of auto layout.
Regardless of the scale of font size increase, it is essential to maintain the visual hierarchy of the typography, as this readability is important for perceiving the different levels of information present on the screen.
This test can help identify elements that may need adjustments directly in the code to function well at a given scale of increase. Not everything can be solved through design alone, and that’s perfectly fine. Accessibility is essentially a team effort.

(Large preview)

9. Make Corrections And Adjustments To The Design

Finally, based on the various screens with different text enlargement scales applied, you can make the design changes that make sense. Some of these adjustments may only be necessary in code. In these cases, you document all these suggestions and pass them on to the development team. It is also crucial to reinforce (again) that some of the problems you may encounter in the design can be quickly resolved in the design process, with the simple and correct application of auto-layout properties.

(Large preview)

10. Go Back To The Beginning And Repeat The Process

This is a cyclical approach. This means you should repeat these steps, or variations thereof, as many times as necessary throughout the project. It’s natural that, over time and with process optimization, some of these steps will cease to make sense. That’s absolutely not a problem. But the most important thing to realize here is that accessibility and this process of testing font size increases shouldn’t be done just once, and that’s it. It’s a test to be done many, many times throughout the day-to-day work of each project and team.

(Large preview)

The Role Of Design Systems

At first glance, this list of steps might seem like a complex exercise. But it’s not. This is because the vast majority, if not all, of these steps are easy to execute in any context where a design system exists. In fact, design systems have become an unavoidable standard in the Product Design industry. We can discuss what each team calls a design system, but the truth is that it’s very difficult today to find a Product Design team that doesn’t have, at the very least, a minimally structured library of components and styles.

(Large preview)

With this foundation, whether more or less documented, it’s very easy to apply this type of font size increase test using Figma variables. Furthermore, if your design system already has, for example, structured variables for light and dark mode, it means you’re already applying the exact same principles we used to perform this test. So, nothing new.

Working with design systems involves a level of structuring and organization that is also very useful for creating this type of test. There’s a myth that design systems limit creativity. This is not true. Design systems help solve the “bureaucratic” part of design, so we can actually have more time for what matters: in this case, testing accessibility and building more and more products and services that are truly accessible to the greatest number of people.

Example File

It’s always easier to see an example than just read a description of a process. If this is true in many disciplines of knowledge, in design, this premise makes even more sense. Therefore, in this Figma file, freely published and openly available to the community, you’ll find a practical example of the entire testing process described here. Remember that this is just an example. There may be countless ways to perform this type of test within the context of a Figma file.

(Large preview)

Be sure to look at this approach with a critical eye. It’s a suggestion for testing font size increases that follows a specific process. Despite this, the approach should be adapted to your team’s specific reality, processes, and level of maturity. Simply copying formulas from other teams without understanding if they make sense in our own context is a sure way to make accessibility efforts disproportionate. Every situation is unique. This approach attempts to simplify accessibility work as much as possible in this specific context. And remember: if something happens, however small, it’s a step forward, not a step backward. And that should be celebrated by everyone on the team.

(yk)

Generated by Readability.php.

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly

hello@smashingmagazine.com (Godstime Aburu) — Fri, 20 Mar 2026 13:00:00 GMT

Why They Break And How To Fix Them Properly — Smashing Magazine

By About The Author

12 min read
CSS, Tools, Techniques, JavaScript

Dropdowns often work perfectly until they’re placed inside a scrollable panel, where they can get clipped, and half the menu disappears behind the container’s edge. Godstime Aburu explains why this happens and offers practical solutions to fix it.

The scenario is almost always the same, which is a data table inside a scrollable container. Every row has an action menu, a small dropdown with some options, like Edit, Duplicate, and Delete. You build it, it seems to work perfectly in isolation, and then someone puts it inside that scrollable div and things fall apart. I’ve seen this exact bug in three different codebases: the container, the stack, and the framework, all different. The bug, though, is totally identical.

The dropdown gets clipped at the container’s edge. Or it shows up behind content that should logically be below it. Or it works fine until the user scrolls, and then it drifts. You reach for z-index: 9999. Sometimes it helps, but other times it does absolutely nothing. That inconsistency is the first clue that something deeper is happening.

The reason it keeps coming back is that three separate browser systems are involved, and most developers understand each one on its own but never think about what happens when all three collide: overflow, stacking contexts, and containing blocks.

Three browser systems: overflow clipping, stacking contexts, and containing blocks. (Large preview)

Once you understand how all three interact, the failure modes stop feeling random. In fact, they become predictable.

The Three Things Actually Causing This

Let’s look at each of those items in detail.

The Overflow Problem

When you set overflow: hidden, overflow: scroll, or overflow: auto on an element, the browser will clip anything that extends beyond its bounds, including absolutely positioned descendants.

.scroll-container {
  overflow: auto;
  height: 300px;
  /* This will clip the dropdown, full stop */
}

.dropdown {
  position: absolute;
  /* Doesn't matter -- still clipped by .scroll-container */
}

That surprised me the first time I ran into it. I’d assumed position: absolute would let an element escape a container’s clipping. It doesn’t.

In practice, that means an absolutely positioned menu can be cut off by any ancestor that has a non-visible overflow value, even if that ancestor isn’t the menu’s containing block. Clipping and positioning are separate systems. They just happen to collide in ways that look completely random until you understand both.

See the Pen [Overflow & Clipping [forked]](https://codepen.io/smashingmag/pen/RNGZNPw) by BboyGT.

See the Pen Overflow & Clipping [forked] by BboyGT.

This is also an accessibility problem, not just a visual one. When a dropdown is clipped, it’s still in the DOM. A keyboard user can still focus on it. They just can’t see what they’re focusing on. In my testing, I saw screen readers announce menu items that were invisible to sighted users. That disconnect is a real problem. It’s also the kind of thing that passes a visual review completely fine.

The Stacking Context Trap

Think of a stacking context as a sealed layer. Whatever is inside it is painted together, as one block. Nothing inside it can escape above something outside it, no matter what z-index you use.

The thing is, a lot of CSS properties create a new stacking context. I didn’t know half of these triggered a new context until I started debugging z-index issues and had to look them up.

position with a z-index value other than auto;
opacity less than 1;
transform, filter, perspective, clip-path, or mask;
will-change referencing any of the above;
isolation: isolate;
contain: layout or paint.

This is exactly why z-index: 9999 sometimes does nothing. If your dropdown is trapped inside a stacking context that paints below another stacking context, its z-index value doesn’t matter at all. z-index is only compared between siblings in the same stacking context. That’s how a modal with z-index: 1 can sit on top of your dropdown with z-index: 9999. They are not in the same context. The comparison never happens.

That kind of z-index war is never going to be won. You’re fighting in the wrong arena.

The dropdown’s z-index: 9999 only competes inside the card’s stacking context. The card paints below the modal, so the fight never happens. (Large preview)

See the Pen [Stacking Contexts [forked]](https://codepen.io/smashingmag/pen/zxKdxGL) by BboyGT.

See the Pen Stacking Contexts [forked] by BboyGT.

The Containing Block Surprise

I learned something uncomfortable about containing blocks early on: Absolute positioning does not mean “position anywhere.” The browser finds the nearest positioned ancestor and treats it as the reference frame for that element’s coordinates and dimensions.

If that ancestor is deep inside a scroll container, the dropdown’s coordinates are calculated relative to it. When the container scrolls, those coordinates don’t update. The trigger moves. The dropdown stays put.

Why Absolute Positioning Fails Alone

For a long time, position: absolute was my default answer for dropdowns. It works in isolation. The moment you put it inside a real application, though, things start breaking in ways that don’t feel connected to anything you changed.

In a clean DOM, position: absolute works fine. Real applications are just messier. There’s almost always something up the ancestor tree that creates an unexpected stacking context or clips descendants.

I ran into this with a dropdown inside a table, which lived inside a scrollable div, where a card component somewhere up the tree had transform: translateZ(0) applied as a GPU compositing hint. That transform created a new stacking context. The dropdown was trapped below everything outside the card that had a non-auto z-index. And the scroll container was clipping it regardless.

Debugging this felt like following a trail of ghosts with three different ancestors, three different failure modes, and one invisible dropdown. Once I stopped trying to patch the symptom and started tracing which ancestor was responsible, the root cause became obvious.

The Fixes That Actually Work

Here’s what does work.

Portals: The Fix That Ultimately Worked For Me

What finally worked for me was getting the dropdown out of the problematic part of the DOM entirely, rendering it directly as a child of document.body instead. In React and Vue, this is called a portal. In vanilla JavaScript, it’s just document.body.appendChild().

Once it’s at the body level, none of the ancestor clipping or stacking context problems apply. The dropdown is outside all of it. z-index works the way you expect it to.

Portalling moves the dropdown out of the ancestor tree entirely. The overflow and stacking context problems don’t follow it because it’s no longer a descendant of either ancestor. (Large preview)

Here’s a React example using createPortal:

import { createPortal } from 'react-dom';
import { useState, useEffect, useRef } from 'react';

function Dropdown({ anchorRef, isOpen, children }) {
  const [position, setPosition] = useState({ top: 0, left: 0 });

  useEffect(() => {
    if (isOpen && anchorRef.current) {
      const rect = anchorRef.current.getBoundingClientRect();
      setPosition({
        top: rect.bottom + window.scrollY,
        left: rect.left + window.scrollX,
      });
    }
  }, [isOpen, anchorRef]);

  if (!isOpen) return null;

  return createPortal(
    
      {children}
    ,
    document.body
  );
}

See the Pen [Portal Fix [forked]](https://codepen.io/smashingmag/pen/Kwgvwdv) by BboyGT.

See the Pen Portal Fix [forked] by BboyGT.

In my case, the fix required explicit accessibility work. When I portal-led the menu out of the DOM to escape clipping, I also had to restore the logical relationship for keyboard and screen reader users, move focus into the menu when it opens, and reliably return focus to the trigger on close. That extra bit of JavaScript fixes the accessibility gap the portal creates.




  Edit
  Duplicate
  Delete

Portals fixed the clipping quickly, but they came with trade-offs, and I learned the hard way. In one repo, the dropdown lost theme context because it rendered outside the provider. In another repo, the close animation felt detached because events were routed differently. Each required a small targeted fix, context forwarding, explicit focus restoration, or moving the animation into the portal, but together they show portals are a surgical tool, not a one-click replacement.

Fixed Positioning (And Why It’s Trickier Than It Looks)

Fixed positioning can feel like a simple solution. Instead of being positioned relative to an ancestor, the element is positioned relative to the viewport itself. But transforms, and other properties as we saw earlier, create containing blocks that can prevent a position: fixed element from escaping a container.

.dropdown-menu {
  position: fixed;
  /* Coordinates set via JavaScript */
}


function positionDropdown(trigger, dropdown) {
  const rect = trigger.getBoundingClientRect();
  dropdown.style.top = `${rect.bottom}px`;
  dropdown.style.left = `${rect.left}px`;
}

While debugging, I found a transform on an ancestor that stole the containing block, which explained why the menu behaved as if it were stuck even though it was supposedly fixed.

position: fixed uses the viewport as its containing block — until an ancestor has transform, filter, or will-change. (Large preview)

And, of course, we can’t ignore accessibility. Fixed elements that appear over content must still be keyboard-reachable. If the focus order doesn’t naturally move into the fixed dropdown, you’ll need to manage it using code. It’s also worth checking that it doesn’t sit over other interactive content with no way to dismiss it. That one bites you in keyboard testing.

CSS Anchor Positioning: Where I Think This Is Heading

CSS Anchor Positioning is the direction I’m most interested in right now. I wasn’t sure how much of the spec was actually usable when I first looked at it. It lets you declare the relationship between a dropdown and its trigger directly in CSS, and the browser handles the coordinates.

.trigger {
  anchor-name: --my-trigger;
}

.dropdown-menu {
  position: absolute;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: flip-block, flip-inline;
}

The position-try-fallbacks property is what makes this worth using over a manual calculation. The browser tries alternative placements before giving up, so a dropdown at the bottom of the viewport automatically flips upward instead of getting cut off.

Browser support is solid in Chromium-based browsers and growing in Safari. Firefox needs a polyfill. The @oddbird/css-anchor-positioning package covers the core spec. I’ve hit layout edge cases with it that required fallbacks I didn’t anticipate, so treat it as a progressive enhancement or pair it with a JavaScript fallback for Firefox.

In short, promising but not universal yet. Test in your target browsers.

And as far as accessibility is concerned, declaring a visual relationship in CSS doesn’t tell the accessibility tree anything. aria-controls, aria-expanded, aria-haspopup — that part is still on you.

Sometimes The Fix Is Just Moving The Element

Before reaching for a portal or making coordinate calculations, I always ask one question first: Does this dropdown actually need to live inside the scroll container?

If it doesn’t, moving the markup to a higher-level wrapper eliminates the problem entirely, with no JavaScript and no coordinate calculations.

This isn’t always possible. If the button and dropdown are encapsulated in the same component, moving one without the other means rethinking the whole API. But when you can do it, there’s nothing to debug. The problem just doesn’t exist.

What Modern CSS Still Doesn’t Solve

CSS has come a long way here, but there are still places it lets you down.

The position: fixed and transform issues are still there. It’s in the spec intentionally, which means no CSS workaround exists. If you’re using an animation library that wraps your layout in a transformed element, you’re back to needing portals or anchor positioning.

CSS Anchor Positioning is promising, but new. As mentioned earlier, Firefox still needs a polyfill at the time I’m writing this. I’ve hit layout edge cases with it that required fallbacks I didn’t anticipate. If you need consistent behavior across all browsers today, you’re still reaching for JavaScript for the tricky parts.

The addition I’ve actually changed my workflow for is the HTML Popover API, now available in all modern browsers. Elements with the popover attribute render in the browser’s top layer, above everything, with no JavaScript positioning needed.


Popover content

Escape handling, dismiss-on-click-outside, and solid accessibility semantics come free for things like tooltips, disclosure widgets, and simple overlays. It’s the first tool I reach for now.

That said, it doesn’t solve positioning. It solves layering. You still need anchor positioning or JavaScript to align a popover to its trigger. The Popover API handles the layering. Anchor positioning handles the placement. Used together, they cover most of what you’d previously reach for a library to do.

A Decision Guide For Your Situation

After going through all of this the hard way, here’s how I actually think about the choice now.

Four questions that cover most real-world dropdown bugs. Accessibility applies regardless of which path you take. (Large preview)

Use a portal.

I’d use this when the trigger lives deep in nested scroll containers. I used this pattern for table action menus and paired it with focus restoration and accessibility checks. It’s the most reliable option, but budget time for the extra wiring.
Use fixed positioning.

This is for when you’re in vanilla JavaScript or a lightweight framework and can verify no ancestor applies transforms or filters. It’s simple to set up and simple to debug, as long as that one constraint holds.
Use CSS Anchor Positioning.

Reach for this when your browser support allows it. If Firefox support is required, pair it with the @oddbird polyfill. This is where the platform is ultimately heading and will eventually become your go-to approach.
Restructure the DOM.

Use this when the architecture permits it, and you want zero runtime complexity. I believe it’s likely the most underrated option.
Combine patterns.

Do this when you want anchor positioning as your primary approach, paired with a JavaScript fallback for unsupported browsers. Or a portal for DOM placement paired with getBoundingClientRect() for coordinate accuracy.

Conclusion

I used to treat this bug as a one-off issue — something to patch and move on from. But once I sat with it long enough to understand all three systems involved — overflow clipping, stacking contexts, and containing blocks — it stopped feeling random. I could look at a broken dropdown and immediately trace which ancestor was responsible. That shift in how I read the DOM was the real takeaway.

There’s no single right answer. What I reached for depended on what I could control in the codebase: portals when the ancestor tree was unpredictable; fixed positioning when it was clean and simple; moving the element when nothing was stopping me; and anchor positioning now, where I can.

Whatever you end up choosing, don’t treat accessibility as the last step. In my experience, that’s exactly when it gets skipped. The ARIA relationships, the focus management, the keyboard behavior — those aren’t polish. They’re part of what makes the thing actually work.

Check out the full source code in my GitHub repo.

Modal vs. Separate Page: UX Decision Tree

hello@smashingmagazine.com (Vitaly Friedman) — Thu, 19 Mar 2026 15:00:00 GMT

UX Decision Tree — Smashing Magazine

By About The Author

7 min read
Design, User Experience, UI, Design Patterns

How to choose between modals and pages, when to avoid modals, and how to determine the right level of interruption or navigation. Brought to you by Smart Interface Design Patterns, a friendly video course on UX and design patterns by Vitaly.

You probably have been there before. How do we choose between showing a modal to users, and when do we navigate them to a separate, new page? And does it matter at all?

Actually, it does. The decision influences users’ flow, their context, their ability to look up details, and with it error frequency and task completion. Both options can be disruptive and frustrating — at the wrong time, and at the wrong place.

So we’d better get it right. Well, let’s see how to do just that.

Modals vs. Dialogs vs. Overlays vs. Lightboxes

While we often speak about a single modal UI component, we often ignore fine, intricate nuances between all the different types of modals. In fact, not every modal is the same. Modals, dialogs, overlays, and lightboxes — all sound similar, but they are actually quite different:

Understanding modal vs. nonmodal and lightbox vs. nonlightbox dialog boxes for good UX. (Image source: Popups by NN/g) (Large preview)

Dialog

A generic term for “conversation” (user ↔ system).
Overlay

A small content panel displayed on top of a page.
Modal

User must interact with overlay + background disabled.
Nonmodal

User must interact with overlay + background enabled.
Lightbox

Dimmed background to focus attention on the modal.

As Anna Kaley highlights, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and break users’ flow. They are interruptive by nature, and typically with a high level of severity without a strong need for that.

The many sides of modals and overlays. A little tree to understand the differences for UI components. (Image source: Ryan Neufeld) (Large preview)

Surely users must be slowed down and interrupted if the consequences of their action have a high impact, but for most scenarios non-modals are much more subtle and a more friendly option to bring something to the user’s attention. If anything, I always suggest it to be a default.

Modals → For Single, Self-Contained Tasks

As designers, we often dismiss modals as irrelevant and annoying — and often they are! — yet they have their value as well. They can be very helpful to warn users about potential mistakes or help them avoid data loss. They can also help perform related actions or drill down into details without interrupting the current state of the page.

But the biggest advantage of modals is that they help users keep the context of the current screen. It doesn’t mean just the UI, but also edited input, scrolling position, state of accordions, selection of filters, sorting, and so on.

Nonmodal in action: large and small overlays for filters and a modal for customization work well on Yahoo! Finance. (Large preview)

At times, users need to confirm a selection quickly (e.g., filters as shown above) and then proceed immediately from there. Auto-save can achieve the same, of course, but it’s not always needed or desired. And blocking the UI is often not a good idea.

However, modals aren’t used for any tasks. Typically, we use them for single, self-contained tasks where users should jump in, complete a task, and then return to where they were. Unsurprisingly, they do work well for high-priority, short interactions (e.g., alerts, destructive actions, quick confirmations).

When modals help:

🚫 Modals are often disruptive, invasive, and confusing.

🚫 They make it difficult to compare and copy-paste.

✅ Yet modals allow users to maintain multiple contexts.

✅ Useful to prevent irreversible errors and data loss.

✅ Useful if sending users to a new page would be disruptive.

✅ Show a modal only if users will value the disruption.

✅ By default, prefer non-blocking dialogs (“nonmodals”).

✅ Allow users to minimize, hide, or restore the dialog later.

✅ Use a modal to slow users down, e.g., verify complex input.

✅ Give a way out with “Close”, ESC key, or click outside the box.

Pages → For Complex, Multi-Step Workflows

Wizards or tabbed navigation within modals doesn’t work too well, even in complex enterprise products — there, side panels or drawers typically work better. Troubles start when users need to compare or reference data points — yet modals block this behavior, so they re-open the same page in multiple tabs instead.

Perhaps, we use Too Many Modals. A not-very-modal-friendly project by Adrian Egger. (Large preview)

For more complex flows and multi-step processes, standalone pages work best. Pages also work better when they demand the user’s full attention, and reference to the previous screen isn’t very helpful. And drawers work for sub-tasks that are too complex for a simple modal, but don’t need a full page navigation.

When to avoid modals:

🚫 Avoid modals for error messages.

🚫 Avoid modals for feature notifications.

🚫 Avoid modals for onboarding experience.

🚫 Avoid modals for complex, lengthy multi-step-tasks.

🚫 Avoid multiple nested modals and use prev/next instead.

🚫 Avoid auto-triggered modals unless absolutely necessary.

Avoid Both For Repeated Tasks

In many complex, task-heavy products, users will find themselves performing the same tasks repeatedly, over and over again. There, both modals and new page navigations add friction because they interrupt the flow or force users to gather missing data between all the different tabs or views.

Too often, users end up with a broken experience, full of never-ending confirmations, exaggerated warnings, verbose instructions, or just missing reference points. As Saulius Stebulis mentioned, in these scenarios, expandable sections or in-place editing often work better — they keep the task anchored to the current screen.

In practice, in many scenarios, users don’t complete their tasks in isolation. They need to look up data, copy-paste values, refine entries in different places, or just review similar records as they work through their tasks.

Overlays and drawers are more helpful in maintaining access to background data during the task. As a result, the context always stays in its place, available for reference or copy-paste. Save modals and page navigation for moments where the interruption genuinely adds value — especially to prevent critical mistakes.

Modals vs. Pages: A Decision Tree

A while back, Ryan Neufeld put together a very helpful guide to help designers choose between modals and pages. It comes with a handy PNG cheatsheet and a Google Doc template with questions broken down across 7 sections.

It’s lengthy, extremely thorough, but very easy to follow:

A flowchart to choose between page vs. modal, with the page being the default, and modals reserved for interruption and focus. Put together by wonderful Ryan Neufeld. (Large preview)

It might look daunting, but it’s a quite simple 4-step process:

Context of the screen.

First, we check if users need to maintain the context of the underlying screen.
Task complexity and duration.

Simpler, focused, non-distracting tasks could use a modal, but long, complex flows need a page.
Reference to underlying page.

Then, we check if users often need to refer to data in the background or if the task is a simple confirmation or selection.
Choosing the right overlay.

Finally, if an overlay is indeed a good option, it guides us to choose between modal or nonmodal (leaning towards a nonmodal).

Wrapping Up

Whenever possible, avoid blocking the entire UI. Have a dialog floating, partially covering the UI, but allowing navigation, scrolling, and copy-pasting. Or show the contents of the modal as a side drawer. Or use a vertical accordion instead. Or bring users to a separate page if you need to show a lot of detail.

But if you want to boost users’ efficiency and speed, avoid modals at all costs. Use them to slow users down, to bundle their attention, to prevent mistakes. As Therese Fessenden noted, no one likes to be interrupted, but if you must, make sure it’s absolutely worth the cost.

Meet “Smart Interface Design Patterns”

You can find a whole section about modals and alternatives in Smart Interface Design Patterns, 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. Jump to a free preview. Use code BIRDIE to save 15% off.

Meet Smart Interface Design Patterns, our video course on interface design & UX.

Useful Resources

Different Types of Popups, by Anna Kaley
Best Practices for Designing UI Modals, by Uxcel
We Use Too Many Damn Modals: UX Guidelines, by Adrian Egger
Modal & Nonmodal Dialogs, by Therese Fessenden
Modern Enterprise UI Design: Modal Dialogs, by James Jacobs
Modals in Design Systems

(yk)

Generated by Readability.php.

Anime vs. Marvel/DC: Designing Digital Products With Emotion In Flow

hello@smashingmagazine.com (Alan Cohen) — Tue, 17 Mar 2026 10:00:00 GMT

Designing Digital Products With Emotion In Flow — Smashing Magazine

By About The Author

9 min read
Design, UX, Inspiration

Design is about pacing and feelings as much as pixels and patterns. Alan Cohen explores Emotion in Flow and Emotion in Conflict, showing how anime like Dan Da Dan and superhero films like James Gunn’s Superman manage emotional shifts and translating those ideas into practical patterns for product design.

Design isn’t only pixels and patterns. It’s pacing and feelings, too. Some products feel cinematic as they guide us through uncertainty, relief, confidence, and calm without yanking us around. That’s Emotion in Flow. Others undercut their own moments with a joke in the wrong place, a surprise pop-up, or a jumpy transition. That’s Emotion in Conflict.

These aren’t UX-only ideas. You can see them everywhere in entertainment. And the clearest way to feel the difference is to compare how anime handles emotional shifts versus how Marvel and DC films stumble. We’ll use two specific examples, one from Dan da Dan (anime series on Netflix) and one from James Gunn’s Superman movie, to define the two concepts, and then translate them into practical product design patterns you can apply right away.

Note: We’ll focus on digital products, including apps, SaaS, and web.

Emotion In Flow (Anime: Dan da Dan)

In Dan da Dan, the tonal range is wild, horror, comedy, tenderness, yet it flows.

Example: In one arc, the protagonists are on a bizarre, comedic quest involving the “golden genitals” of one of the main characters (yes, really), and in another, we’re drawn into a heartbreaking story of a mother whose child is kidnapped. On paper, that shift should be a car crash. On screen, it’s coherent and emotionally legible.

Why does this work on screen?

Continuity of stakes.

Even when a gag lands, the characters’ goals and danger stay intact. Humor releases tension after a mini‑resolution; it doesn’t deny the threat.
Clear mood cues.

Music, framing, pacing, and character reactions telegraph the next feeling. You’re primed for the shift, so you ride it rather than getting yanked.
One emotional anchor.

Relationships remain the North Star, so the scene’s heart doesn’t get lost when the tone moves.

How does this translate to UX?

Good products do the same: prepare, transition, resolve, so users stay immersed as the emotional tone shifts.

Dan da Dan: from humor to empathy, flawlessly. (Large preview)

Emotion In Conflict (Marvel/DC: James Gunn’s Superman)

Lois & Clark are having a heartfelt, intimate conversation, a slow, human moment, while in the background a running gag plays out (a monster getting clobbered with a giant baseball bat). The gag steals the focus right when the scene asks you to feel something real. The result is a tonal clash that punctures the emotion instead of releasing it.

Why does this fail on screen?

Increased cognitive load.

What’s happening here maps directly to cognitive load theory. When a scene (or interface) asks users to process two competing emotional signals at once, it introduces extraneous cognitive load, mental effort that has nothing to do with the task or moment itself. Instead of focusing on the emotional beat, attention is split between signals that don’t resolve each other. In products, this is what happens when humor, promotions, or unexpected UI changes intrude on high-stakes moments: users are forced to interpret tone and intent at the same time they’re trying to act, which slows comprehension and increases stress.
Competing beats at the same time.

The joke overlaps the climax of a serious beat; the audience pays attention to the switch rather than the feeling.
No tonal handoff.

There’s no transition that lands the intimacy before humor arrives, so the moment feels undercut rather than resolved.

How does this translate to UX?

In products, this is the confetti-before-confirmation problem, the cheeky error in a money flow, or the promo modal that appears right in the middle of a critical task. This also spikes cognitive load: users must process the humor while trying to fix a problem, which slows them down and increases stress.

Heartfelt conversation disrupted by background gag in James Gunn’s Superman. (Large preview)

Quick Definitions

Emotion in Flow

Emotional shifts feel earned, telegraphed, and timed so they resolve prior beats. Immersion holds.
Emotion in ConflictA jarring switch (or hard cut) that punctures a live emotional beat. Immersion breaks.

Now that we’ve named it: how does this connect to UX?

How Emotions Shape Product Memorability

People don’t remember the average of an experience; they remember peaks and the ending. If your flow’s peak is frustration, or your ending is messy, that’s what sticks. So design the emotional curve on purpose.

Emotions live across three layers (from Don Norman’s Emotional Design), and your product needs to line them up:

Visceral (gut): First-impression signals: visuals, motion, haptics, sound.

Examples: A steady skeleton loader calms more than a jittery spinner; a gentle success chime/haptic tap lets the win land without shouting; consistent easing/direction tells the eye what changed.
Behavioral (doing): Can I complete my task smoothly? Friction here means stress.

Examples: Three clear payment steps with predictable progress; error states that explain what happened and how to recover; inline validation instead of end-of-form explosions.
Reflective (meaning): The story I tell myself after, “Was that worth it? Do I trust this?”

Examples: A tidy wrap-up screen (“Done. You’ll get X by Friday.”) gives closure; a small recap (“You saved €18 this year”) creates pride without fireworks.

Microinteractions are the emotional glue. Each one has a trigger (I tap Pay), rules (what the system does), feedback (progress and a clear result), and loops or modes (what happens if the user tries again). Get these right, and your transitions bridge feelings. Get them wrong, and they break the flow.

The beat sheet: uncertainty → clarity → anticipation → achievement → calm. (Large preview)

The emotional beat sheet maps cleanly onto Norman’s layers of experience:

Uncertainty lives in the visceral and early behavioral layers, where users rely on sensory cues (motion, clarity, feedback) to understand what’s happening.
Clarity is firmly in the behavioral layer, the moment when the system’s intent and the user’s next action lock into place.
Anticipation is a blend of behavioral (the user is doing something with purpose) and reflective (the user is already predicting the outcome and imagining what comes next).
Achievement is a reflective peak, where the user evaluates success, trust, and whether the experience “felt right.”
Calm/Closure is primarily reflective, helping users wrap up the meaning of the interaction and decide if the product is trustworthy and worth returning to.

In real products, this sequence doesn’t disappear when things go wrong. Errors, latency, and degraded states are not exceptions to the emotional arc — they are part of it. Seen through a narrative lens, these moments are the obstacles in the hero’s journey. A well-designed recovery state acknowledges the setback, clarifies what happened, and guides the next step without introducing new emotional noise. When failure is treated as a beat instead of a rupture, emotional flow can be preserved even under stress.

UX Examples: Emotion In Flow vs. Emotion In Conflict

Emotion In Flow

Checkout done right (Stripe/Apple Pay style): short steps, clear progress, and a crisp success state (a checkmark with an optional soft haptic). The peak (success) lands, and the end gives closure (receipt or next step).

Two screens: Review & Pay → Payment Successful. (Large preview)

Pickup status (ride‑hailing apps, e.g., Uber, Free Now, or Bolt): progressive updates maintain orientation and reduce anxiety (“Driver arriving”, “2 min away”, “Arrived”). Uncertainty turns into clarity, with gentle motion preparing each transition.

Pickup status from the Uber app. (Large preview)

Emotion In Conflict

Note: We’re not naming specific products here — we respect the work behind them. Instead, we’re showing the patterns that cause emotional conflict and exactly how to fix them.

Jokes in serious moments.

Cheeky copy-in-error states for money/health/security. Users are stressed; humor amplifies irritation.
Celebration before resolution.

Confetti, fireworks, or loud sounds before confirmation. The party interrupts the climax.
Hard state jumps.

Surprise modals/promos mid‑task, full‑screen takeovers without preparation. Feels like an abrupt cut during an emotional beat.

Examples of Emotion in Conflict in product design: joking tone in a high-stakes error, premature celebration before confirmation, surprise promo takeover mid-checkout. All three break the emotional arc and disrupt user trust. (Large preview)

What You Can Do To Ensure Emotion in Flow

Here’s a Notion page with the full template you can duplicate:

Emotional beat sheet template.

1. Write The Emotional Beat Sheet First

For each core flow (onboarding, payment, recovery), map the feelings per step: uncertainty → clarity → anticipation → achievement → calm. Attach copy, motion, and microinteractions to each beat. (Who carries the emotion where?)

2. Align Tone With Task Risk

Create a tone matrix (risk level × state). In high‑risk errors, be calm, plain, and solution‑oriented. Save playfulness for low‑risk contexts.

Template snippets:

High‑risk error: “We couldn’t verify your ID. Try again or contact support.”
Low‑risk empty state: “Nothing here yet. Want to start with a sample?”

This is where many mature products quietly drift into emotional conflict. Over time, teams add delight by habit rather than intent.

A useful self-check is to ask: If we removed every playful or celebratory element from this step, would the flow still feel humane — or were those elements masking friction?

Good emotional design clarifies experience; great emotional design doesn’t need decoration to compensate for confusion.

3. Design Peak And End On Purpose

Engineer one clear peak (the moment of success) and one clean end (confirmation and what happens next). Measure recall and satisfaction at both points.

4. Use Microinteractions As Bridges, Not Spotlights

Prepare: Small, consistent motion hints before a big state change.
Confirm: Success gets a subtle settle, with a slightly slower ease-out and an optional light haptic.
Recover: Repeated failure gracefully shifts tone from upbeat to supportive and guides the next step.

5. Test For Emotional Continuity

In usability sessions, don’t just ask “Was that easy?” Instead, you can ask “What feeling changed here?” If you hear “confused → amused → confused,” you’ve got conflict, not flow. Iterate transitions, not just screens.

How To Avoid Emotion in Conflict: Fast Checklist

Red flags → fixes:

Jokes in serious moments → swap for calm, direct language, and a clear recovery path.
Celebration before resolution → move celebration to after confirmation; tone it down for high‑risk tasks.
Hard state jumps → pre‑announce transitions; keep framing consistent; use meaningful motion to preserve continuity.
Cross‑team tone drift → centralize voice & tone guidelines with examples per risk level and state.

There are moments when breaking emotional flow is intentional and necessary. Security warnings, legal confirmations, and safety-critical alerts often benefit from abrupt tonal shifts. In these cases, disruption signals importance and demands attention. The problem isn’t emotional conflict itself; it’s accidental conflict. When designers choose disruption deliberately, users understand the stakes instead of feeling whiplash.

Conclusion

Great experiences are directed experiences. Dan da Dan shows how to move through feelings without losing us: it prepares, transitions, and resolves. The Superman scene shows the opposite: a gag colliding with a heartfelt beat.

Do the former. Map your emotional beats, align tone to task risk, and let microinteractions bridge feelings so users remember the right peak and the right end, not the whiplash in the middle.

(yk)

Generated by Readability.php.

Moving From Moment.js To The JS Temporal API

hello@smashingmagazine.com (Joe Attardi) — Fri, 13 Mar 2026 13:00:00 GMT

Moving From Moment.js To The JS Temporal API — Smashing Magazine

By About The Author

18 min read
JavaScript, API, Coding

The way JavaScript handles time has evolved significantly, from the built-in Date API to Moment.js and now Temporal. The new standard fills gaps in the original Date API while addressing limitations found in Moment and other libraries. Joe Attardi shares practical “recipes” for migrating Moment-based code to the new Temporal API.

Almost any kind of application written in JavaScript works with times or dates in some capacity. In the beginning, this was limited to the built-in Date API. This API includes basic functionality, but is quite limited in what it can do.

Third-party libraries like Moment.js, and later built-in APIs such as the Intl APIs and the new Temporal API, add much greater flexibility to working with times and dates.

The Rise And Fall Of Moment.js

Moment.js is a JavaScript library with powerful utilities for working with times and dates. It includes missing features from the basic Date API, such as time zone manipulation, and makes many common operations simpler. Moment also includes functions for formatting dates and times. It became a widely used library in many different applications.

However, Moment also had its share of issues. It’s a large library, and can add significantly to an application’s bundle size. Because the library doesn’t support tree shaking (a feature of modern bundlers that can remove unused parts of libraries), the entire Moment library is included even if you only use one or two of its functions.

Another issue with Moment is the fact that the objects it creates are mutable. Calling certain functions on a Moment object has side effects and mutates the value of that object. This can lead to unexpected behavior or bugs.

In 2020, the maintainers of Moment decided to put the library into maintenance mode. No new feature development is being done, and the maintainers recommend against using it for new projects.

There are other JavaScript date libraries, such as date-fns, but there’s a new player in town, an API built directly into JavaScript: Temporal. It’s a new standard that fills in the holes of the original Date API as well as solves some of the limitations found in Moment and other libraries.

What Is Temporal?

Temporal is a new time and date API being added to the ECMAScript standard, which defines modern JavaScript. As of March 2026, it has reached Stage 4 of the TC39 process (the committee that oversees proposals and additions to the JavaScript language), and will be included in the next version of the ECMAScript specification. It has already been implemented in several browsers: Chrome 144+ and Firefox 139+, with Safari expected to follow soon. A polyfill is also available for unsupported browsers and Node.js.

The Temporal API creates objects that, generally, represent moments in time. These can be full-time and date stamps in a given time zone, or they can be a generic instance of “wall clock” time without any time zone or date information. Some of the main features of Temporal include:

Times with or without dates.

A Temporal object can represent a specific time on a specific date, or a time without any date information. A specific date, without a time, can also be represented.
Time zone support.

Temporal objects are fully time zone aware and can be converted across different time zones. Moment supports time zones, too, but it requires the additional moment-timezone library.
Immutability.

Once a Temporal object is created, it cannot be changed. Time arithmetic or time zone conversions do not modify the underlying object. Instead, they generate a new Temporal object.
1-based indexing.

A common source of bugs with the Date API (as well as with Moment) is that months are zero-indexed. This means that January is month 0, rather than month 1 as we all understand in real life. Temporal fixes this by using 1-based indexing — January is month 1.
It’s built into the browser.

Since Temporal is an API in the browser itself, it adds nothing to your application’s bundle size.

It’s also important to note that the Date API isn’t going away. While Temporal supersedes this API, it is not being removed or deprecated. Many applications would break if browsers suddenly removed the Date API. However, also keep in mind that Moment is now considered a legacy project in maintenance mode.

In the rest of the article, we’ll look at some “recipes” for migrating Moment-based code to the new Temporal API. Let’s start refactoring!

Creating Date And Time Objects

Before we can manipulate dates and times, we have to create objects representing them. To create a Moment object representing the current date and time, use the moment function.

const now = moment();
console.log(now); 
// Moment<2026-02-18T21:26:29-05:00>

This object can now be formatted or manipulated as needed.

// convert to UTC
// warning: This mutates the Moment object and puts it in UTC mode!
console.log(now.utc()); 
// Moment<2026-02-19T02:26:29Z>

// print a formatted string - note that it's using the UTC time now
console.log(now.format('MM/DD/YYYY hh:mm:ss a')); 
// 02/19/2026 02:27:07 am

The key thing to remember about Moment is that a Moment object always includes information about the time and the date. If you only need to work with time information, this is usually fine, but it can cause unexpected behavior in situations like Daylight Saving Time or leap years, where the date can have an effect on time calculations.

Temporal is more flexible. You can create an object representing the current date and time by creating a Temporal.Instant object. This represents a point in time defined by the time since “the epoch” (midnight UTC on January 1, 1970). Temporal can reference this instant in time with nanosecond-level precision.

const now = Temporal.Now.instant();

// see raw nanoseconds since the epoch
console.log(now.epochNanoseconds);
// 1771466342612000000n

// format for UTC
console.log(now.toString());
// 2026-02-19T01:55:27.844Z

// format for a particular time zone
console.log(now.toString({ timeZone: 'America/New_York' }));
// 2026-02-18T20:56:57.905-05:00

Temporal.Instant objects can also be created for a specific time and date by using the from static method.

const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');

// Format the instant in the local time zone. Note that this only controls
// the formatting - it does not mutate the object like `moment.utc` does.
console.log(myInstant.toString({ timeZone: 'America/New_York' }));
// 2026-02-18T21:10:00-05:00

You can also create other types of Temporal objects, including:

Temporal.PlainDate: A date with no time information.
Temporal.PlainTime: A time with no date information.
Temporal.ZonedDateTime: A date and time in a specific time zone.

Each of these has a from method that can be called with an object specifying the date and/or time, or a date string to parse.

// Just a date
const today = Temporal.PlainDate.from({
  year: 2026,
  month: 2, // note we're using 2 for February
  day: 18
});
console.log(today.toString());
// 2026-02-18

// Just a time
const lunchTime = Temporal.PlainTime.from({
  hour: 12
});
console.log(lunchTime.toString());
// 12:00:00 

// A date and time in the US Eastern time zone
const dueAt = Temporal.ZonedDateTime.from({
  timeZone: 'America/New_York',
  year: 2026,
  month: 3,
  day: 1,
  hour: 12,
  minute: 0,
  second: 0
});
console.log(dueAt.toString());
// 2026-03-01T12:00:00-05:00[America/New_York]

Parsing

We’ve covered programmatic creation of date and time information. Now let’s look at parsing. Parsing is one area where Moment is more flexible than the built-in Temporal API.

You can parse a date string by passing it to the moment function. With a single argument, Moment expects an ISO date string, but you can use alternative formats if you provide a second argument specifying the date format being used.

const isoDate = moment('2026-02-21T09:00:00');
const formattedDate = moment('2/21/26 9:00:00', 'M/D/YY h:mm:ss');

console.log(isoDate);
// Moment<2026-02-21T09:00:00-05:00>

console.log(formattedDate);
// Moment<2026-02-21T09:00:00-05:00>

In older versions, Moment would make a best guess to parse any arbitrarily formatted date string. This could lead to unpredictable results. For example, is 02-03-2026 February 2 or March 3? For this reason, newer versions of Moment display a prominent deprecation warning if it’s called without an ISO formatted date string (unless the second argument with the desired format is also given).

Temporal will only parse a specifically formatted date string. The string must be compliant with the ISO 8601 format or its extension, RFC 9557. If a non-compliant date string is passed to a from method, Temporal will throw a RangeError.

// Using an RFC 9557 date string
const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[America/New_York]');
console.log(myDate.toString({ timeZone: 'America/New_York' }));
// 2026-02-21T09:00:00-05:00

// Using an unknown date string
const otherDate = Temporal.Instant.from('2/21/26 9:00:00');
// RangeError: Temporal error: Invalid character while parsing year value.

The exact requirements of the date string depend on which kind of Temporal object you’re creating. In the above example, Temporal.Instant requires a full ISO 8601 or RFC 9557 date string specifying the date and time with a time zone offset, but you can also create PlainDate or PlainTime objects using just a subset of the date format.

const myDate = Temporal.PlainDate.from('2026-02-21');
console.log(myDate.toString());
// 2026-02-21

const myTime = Temporal.PlainTime.from('09:00:00');
console.log(myTime.toString());
// 09:00:00

Note that these strings must still comply with the expected format, or an error will be thrown.

// Using a non-compliant time strings. These will all throw a RangeError.
Temporal.PlainTime.from('9:00');
Temporal.PlainTime.from('9:00:00 AM');

Pro tip: Handling non-ISO strings
Because Temporal prioritizes reliability, it won’t try to guess the format of a string like 02-01-2026. If your data source uses such strings, you will need to do some string manipulation to rearrange the values into an ISO string like 2026-02-01 before attempting to use it with Temporal.

Formatting

Once you have a Moment or Temporal object, you’ll probably want to convert it to a formatted string at some point.

This is an instance where Moment is a bit more terse. You call the object’s format method with a string of tokens that describe the desired date format.

const date = moment();

console.log(date.format('MM/DD/YYYY'));
// 02/22/2026

console.log(date.format('MMMM Do YYYY, h:mm:ss a'));
// February 22nd 2026, 8:18:30 pm

On the other hand, Temporal requires you to be a bit more verbose. Temporal objects, such as Instant, have a toLocaleString method that accepts various formatting options specified as properties of an object.

const date = Temporal.Now.instant();

// with no arguments, we'll get the default format for the current locale
console.log(date.toLocaleString());
// 2/22/2026, 8:23:36 PM (assuming a locale of en-US)

// pass formatting options to generate a custom format string
console.log(date.toLocaleString('en-US', {
  month: 'long',
  day: 'numeric',
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
}));
// February 22, 2026 at 8:23 PM

// only pass the fields you want in the format string
console.log(date.toLocaleString('en-US', {
  month: 'short',
  day: 'numeric'
}));
// Feb 22

Temporal date formatting actually uses the Intl.DateTimeFormat API (which is already readily available in modern browsers) under the hood. That means you can create a reusable DateTimeFormat object with your custom formatting options, then pass Temporal objects to its format method. Because of this, it doesn’t support custom date formats like Moment does. If you need something like 'Q1 2026' or other specialized formatting, you may need some custom date formatting code or reach for a third-party library.

const formatter = new Intl.DateTimeFormat('en-US', {
  month: '2-digit',
  day: '2-digit',
  year: 'numeric'
});

const date = Temporal.Now.instant();
console.log(formatter.format(date));
// 02/22/2026

Moment’s formatting tokens are simpler to write, but they aren’t locale-friendly. The format strings “hard code” things like month/day order. The advantage of using a configuration object, as Temporal does, is that it will automatically adapt to any given locale and use the correct format.

const date = Temporal.Now.instant();

const formatOptions = {
  month: 'numeric',
  day: 'numeric',
  year: 'numeric'
};


console.log(date.toLocaleString('en-US', formatOptions));
// 2/22/2026

console.log(date.toLocaleString('en-GB', formatOptions));
// 22/02/2026

Date calculations

In many applications, you’ll need to end up performing some calculations on a date. You may want to add or subtract units of time (days, hours, seconds, etc.). For example, if you have the current date, you may want to show the user the date 1 week from now.

Moment objects have methods such as add and subtract that perform these operations. These functions take a value and a unit, for example: add(7, 'days'). One very important difference between Moment and Temporal, however, is that when performing these date calculations, the underlying object is modified and its original value is lost.

const now = moment();

console.log(now);
// Moment<2026-02-24T20:08:36-05:00>

const nextWeek = now.add(7, 'days');
console.log(nextWeek);
// Moment<2026-03-03T20:08:36-05:00>

// Gotcha - the original object was mutated
console.log(now);
// Moment<2026-03-03T20:08:36-05:00>

To avoid losing the original date, you can call clone on the Moment object to create a copy.

const now = moment();
const nextWeek = now.clone().add(7, 'days');

console.log(now);
// Moment<2026-02-24T20:12:55-05:00>

console.log(nextWeek);
// Moment<2026-03-03T20:12:55-05:00>

On the other hand, Temporal objects are immutable. Once you’ve created an object like an Instant, PlainDate, and so on, the value of that object will never change. Temporal objects also have add and subtract methods.

Temporal is a little picky about which time units can be added to which object types. For example, you can’t add days to an Instant:

const now = Temporal.Now.instant();
const nextWeek = now.add({ days: 7 });
// RangeError: Temporal error: Largest unit cannot be a date unit

This is because Instant objects represent a specific point in time in UTC and are calendar-agnostic. Because the length of a day can change based on time zone rules such as Daylight Saving Time, this calculation isn’t available on an Instant. You can, however, perform this operation on other types of objects, such as a PlainDateTime:

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toLocaleString());
// 2/24/2026, 8:23:59 PM

const nextWeek = now.add({ days: 7 });

// Note that the original PlainDateTime remains unchanged
console.log(now.toLocaleString());
// 2/24/2026, 8:23:59 PM

console.log(nextWeek.toLocaleString());
// 3/3/2026, 8:23:59 PM

You can also calculate how much time is between two Moment or Temporal objects.

With Moment’s diff function, you need to provide a unit for granularity, otherwise it will return the difference in milliseconds.

const date1 = moment('2026-02-21T09:00:00');
const date2 = moment('2026-02-22T10:30:00');

console.log(date2.diff(date1));
// 91800000

console.log(date2.diff(date1, 'days'));
// 1

To do this with a Temporal object, you can pass another Temporal object to its until or since methods. This returns a Temporal.Duration object containing information about the time difference. The Duration object has properties for each component of the difference, and also can generate an ISO 8601 duration string representing the time difference.

const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00');
const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');

// largestUnit specifies the largest unit of time to represent
// in the duration calculation
const diff = date2.since(date1, { largestUnit: 'day' });

console.log(diff.days);
// 1

console.log(diff.hours);
// 1

console.log(diff.minutes);
// 30

console.log(diff.toString());
// P1DT1H30M
// (ISO 8601 duration string: 1 day, 1 hour, 30 minutes)

Comparing Dates And Times

Moment and Temporal both let you compare dates and times to determine which comes before the other, but take different approaches with the API.

Moment provides methods such as isBefore, isAfter, and isSame to compare two Moment objects.

const date1 = moment('2026-02-21T09:00:00');
const date2 = moment('2026-02-22T10:30:00');

console.log(date1.isBefore(date2));
// true

Temporal uses a static compare method to perform a comparison between two objects of the same type. It returns -1 if the first date comes before the second, 0 if they are equal, or 1 if the first date comes after the second. The following example shows how to compare two PlainDate objects. Both arguments to Temporal.PlainDate.compare must be PlainDate objects.

const date1 = Temporal.PlainDate.from({ year: 2026, month: 2, day: 24 });
const date2 = Temporal.PlainDate.from({ year: 2026, month: 3, day: 24 });

// date1 comes before date2, so -1
console.log(Temporal.PlainDate.compare(date1, date2));

// Error if we try to compare two objects of different types
console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant()));
// TypeError: Temporal error: Invalid PlainDate fields provided.

In particular, this makes it easy to sort an array of Temporal objects chronologically.

// An array of Temporal.PlainDate objects
const dates = [ ... ];

// use Temporal.PlainDate.compare as the comparator function
dates.sort(Temporal.PlainDate.compare);

Time Zone Conversions

The core Moment library doesn’t support time zone conversions. If you need this functionality, you also need to install the moment-timezone package. This package is not tree-shakable, and therefore can add significantly to your bundle size. Once you’ve installed moment-timezone, you can convert Moment objects to different time zones with the tz method. As with other Moment operations, this mutates the underlying object.

// Assuming US Eastern time
const now = moment();
console.log(now);
// Moment<2026-02-28T20:08:20-05:00>

// Convert to Pacific time.
// The original Eastern time is lost.
now.tz('America/Los_Angeles');
console.log(now);
// Moment<2026-02-28T17:08:20-08:00>

Time zone functionality is built into the Temporal API when using a Temporal.ZonedDateTime object. These objects include a withTimeZone method that returns a new ZonedDateTime representing the same moment in time, but in the specified time zone.

// Again, assuming US Eastern time
const now = Temporal.Now.zonedDateTimeISO();
console.log(now.toLocaleString());
// 2/28/2026, 8:12:02 PM EST

// Convert to Pacific time
const nowPacific = now.withTimeZone('America/Los_Angeles');
console.log(nowPacific.toLocaleString());
// 2/28/2026, 5:12:02 PM PST

// Original object remains unchanged
console.log(now.toLocaleString());
// 2/28/2026, 8:12:02 PM EST

Note: The formatted values returned by toLocaleString are, as the name implies, locale-dependent. The sample code was developed in the en-US locale, so the format is like this: 2/28/2026, 5:12:02 PM PST. In another locale, this may be different. For example, in the en-GB locale, you would get something like 28/2/2026, 17:12:02 GMT-8.

A Real-world Refactoring

Suppose we’re building an app for scheduling events across time zones. Part of this app is a function, getEventTimes, which takes an ISO 8601 string representing the time and date of the event, a local time zone, and a target time zone. The function creates formatted time and date strings for the event in both time zones.

If the function is given an input string that’s not a valid time/date string, it will throw an error.

Here’s the original implementation, using Moment (also requiring use of the moment-timezone package).

import moment from 'moment-timezone';

function getEventTimes(inputString, userTimeZone, targetTimeZone) {
  const timeFormat = 'MMM D, YYYY, h:mm:ss a z';

  // 1. Create the initial moment in the user's time zone
  const eventTime = moment.tz(
    inputString,
    moment.ISO_8601, // Expect an ISO 8601 string
    true, // Strict parsing
    userTimeZone
  );
  
  // Throw an error if the inputString did not represent a valid date
  if (!eventTime.isValid()) {
    throw new Error('Invalid date/time input');
  }

  // 2. Calculate the target time
  // CRITICAL: We must clone, or 'eventTime' changes forever!
  const targetTime = eventTime.clone().tz(targetTimeZone);

  return {
    local: eventTime.format(timeFormat),
    target: targetTime.format(timeFormat),
  };
}

const schedule = getEventTimes(
  '2026-03-05T15:00-05:00',
  'America/New_York',
  'Europe/London',
);

console.log(schedule.local);
// Mar 5, 2026, 3:00:00 pm EST

console.log(schedule.target); 
// Mar 5, 2026, 8:00:00 pm GMT

In this example, we’re using an expected date format of ISO 8601, which is helpfully built into Moment. We’re also using strict parsing, which means Moment won’t try to guess with a date string that doesn’t match the format. If a non-ISO date string is passed, it will result in an invalid date object, and we throw an error.

The Temporal implementation looks similar, but has a few key differences.

function getEventTimes(inputString, userTimeZone, targetTimeZone) {
  // 1. Parse the input directly into an Instant, then create
  // a ZonedDateTime in the user's zone.
  const instant = Temporal.Instant.from(inputString);
  const eventTime = instant.toZonedDateTimeISO(userTimeZone);

  // 2. Convert to the target zone
  // This automatically returns a NEW object; 'eventTime' is safe.
  const targetTime = eventTime.withTimeZone(targetTimeZone);

  // 3. Format using Intl (built-in)
  const options = {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'short'
  };

  return {
    local: eventTime.toLocaleString(navigator.language, options),
    target: targetTime.toLocaleString(navigator.language, options)
  };
}

const schedule = getEventTimes(
  '2026-03-05T15:00-05:00',
  'America/New_York',
  'Europe/London',
);

console.log(schedule.local);
// Mar 5, 2026, 3:00:00 PM EST

console.log(schedule.target);
// Mar 5, 2026, 8:00:00 PM GMT

With Moment, we have to explicitly specify a format string for the resulting date strings. Regardless of the user’s location or locale, the event times will always be formatted as Mar 5, 2026, 3:00:00 pm EST.

Also, we don’t have to explicitly throw an exception. If an invalid string is passed to Temporal.Instant.from, Temporal will throw the exception for us. One thing to note is that even with strict parsing, the Moment version is still more lenient. Temporal requires the time zone offset at the end of the string.

You should also note that since we’re using navigator.language, this code will only run in a browser environment, as navigator is not defined in a Node.js environment.

The Temporal implementation uses the browser’s current locale (navigator.language), so the user will automatically get event times formatted in their local time format. In the en-US locale, this is Mar 5, 2026, 3:00:00 pm EST. However, if the user is in London, for example, the event times will be formatted as 5 Mar 2026, 15:00:00 GMT-5.

Summary

Action	Moment.js	Temporal
Current time	`moment()`	`Temporal.Now.zonedDateTimeISO()`
Parsing ISO	`moment(str)`	`Temporal.Instant.from(str)`
Add time	`.add(7, 'days')` (mutates)	`.add({ days: 7 })` (new object)
Difference	`.diff(other, 'hours')`	`.since(other).hours`
Time zone	`.tz('Zone/Name')`	`.withTimeZone('Zone/Name')`

At first glance, the difference may be slightly different (and in the case of Temporal, sometimes more verbose and more strict) syntax, but there are several key advantages to using Temporal over Moment.js:

Being more explicit means fewer surprises and unintended bugs. Moment may appear to be more lenient, but it involves “guesswork,” which can sometimes result in incorrect dates. If you give Temporal something invalid, it throws an error. If the code runs, you know you’ve got a valid date.
Moment can add significant size to the application’s bundle, particularly if you’re using the moment-timezone package. Temporal adds nothing (once it’s shipped in your target browsers).
Immutability gives you the confidence that you’ll never lose or overwrite data when performing date conversions and operations.
Different representations of time (Instant, PlainDateTime, ZonedDateTime) depending on your requirements, where Moment is always a wrapper around a UTC timestamp.
Temporal uses the Intl APIs for date formatting, which means you can have locale-aware formatting without having to explicitly specify tokens.

Notes On The Polyfill

As mentioned earlier, there is a Temporal polyfill available, distributed as an npm package named @js-temporal/polyfill. If you want to use Temporal today, you’ll need this polyfill to support browsers like Safari that haven’t shipped the API yet. The bad news with this is that it will add to your bundle size. The good news is that it still adds significantly less than moment or moment-timezone. Here is a comparison of the bundle sizes as reported by Bundlephobia.com, a website that presents information on npm package sizes (click on each package name to see the Bundlephobia analysis):

The polyfill also has historically had some performance issues around memory usage, and at the time of writing, it’s considered to be in an alpha state. Because of this, you may not want to use it in production until it reaches a more mature state.

The other good news is that hopefully the polyfill won’t be needed much longer (unless you need to support older browsers, of course). At the time of writing, Temporal has shipped in Chrome, Edge, and Firefox. It’s not quite ready in Safari yet, though it appears to be available with a runtime flag on the latest Technology Preview.

(gg, yk)

Generated by Readability.php.

Beyond `border-radius`: What The CSS `corner-shape` Property Unlocks For Everyday UI

hello@smashingmagazine.com (Brecht De Ruyte) — Thu, 12 Mar 2026 10:00:00 GMT

What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine

By About The Author

12 min read
CSS, UI, Web Design

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

When I first started building websites, rounded corners required five background images, one for each corner, one for the body, and a prayer that the client wouldn’t ask for a different radius. Then the border-radius property landed, and the entire web collectively sighed with relief. That was over fifteen years ago, and honestly, we’ve been riding that same wave ever since. Just as then, I hope that we can look at this feature as a progressive enhancement slowly making its way to other browsers.

I like a good border-radius like any other guy, but the fact is that it only gives us one shape. Round. That’s it. Want beveled corners? Clip-path. Scooped ticket edges? SVG mask. Squircle app icons? A carefully tuned SVG that you hope nobody asks you to animate. We’ve been hacking around the limitations of border-radius for years, and those hacks come with real trade-offs: borders don’t follow clip-paths, shadows get cut off, and you end up with brittle code that breaks the moment someone changes a padding value.

Well, the new corner-shape changes all of that.

What Is `corner-shape`?

The corner-shape property is a companion to border-radius. It doesn’t replace it; it modifies the shape of the curve that border-radius creates. Without border-radius, corner-shape does nothing. But together, they’re a powerful pair.

The property accepts these values:

round: the default, same as regular border-radius,
squircle: a superellipse, the smooth Apple-style rounded square,
bevel: a straight line between the two radius endpoints (snipped corners),
scoop: an inverted curve, creating concave corners,
notch: sharp inward cuts,
square: effectively removes the rounding, overriding border-radius.

And you can set different values per corner, just like border-radius:

*corner-shape: bevel round scoop squircle;
/* top-left, top-right, bottom-right, bottom-left */

You can also use the superellipse() function with a numeric parameter for fine-grained control.

.element { 
  border-radius: 25px;
  corner-shape: superellipse(0); /* equal to 'bevel' */
}

So the question here might be: why not call this property “border-shape” instead? Well, first of all, that is something completely different that we’ll get to play around with soon. Second, it does apply to a bit more than borders, such as outlines, box shadows, and backgrounds. That’s the thing that the clip-path property could never do.

Why Progressive Enhancement Matters Here

At the time of writing (March 2026), corner-shape is only supported in Chrome 139+ and other Chromium-based browsers. That’s a significant chunk of users, but certainly not everyone. The temptation is to either ignore the property until it’s everywhere or to build demos that fall apart without it.

I don’t think either approach is right. The way I see it, corner-shape is the perfect candidate for progressive enhancement, just as border-radius was in the age of Internet Explorer 6. The baseline should use the techniques we already know, such as border-radius, clip-path, radial-gradient masks and look intentionally good. Then, for browsers that support corner-shape, we upgrade the experience. Sometimes this can be as simple as just providing a more basic default; sometimes it might need to be a bit more.

Every demo in this article is created with that progressive enhancement idea. The structure for the demos looks like:

@layer base, presentation, demo;

The presentation layer contains the full polished UI using proven techniques. The demo layer wraps everything in @supports:

@layer demo {
  @supports (corner-shape: bevel) {
    /* upgrade styles here */
  }
}

No fallback banners, no “your browser doesn’t support this” messages. Just two tiers of design: good and better. I thought it could be nice just to show some examples. There are a few out there already, but I hope I can add a bit of extra inspiration on top of those.

Demo 1: Product Cards With Ribbon Badges

Every e-commerce site has them: those little “New” or “Sale” badges pinned to the corner of a product card. Traditionally, getting that ribbon shape means reaching for clip-path: polygon() or a rotated pseudo-element, let’s call it “fiddly code” that has the chance to fall apart the moment someone changes a padding value.

But here’s the thing: we don’t need the ribbon shape in the baseline. A simple badge with slightly rounded corners tells the same story and looks perfectly fine:

.product__badge {
  border-radius: 0 4px 4px 0;
  background-color: var(--badge-bg);
}

That’s it. A small, clean label sitting flush against the left edge of the card. Nothing fancy, nothing broken. It works in every browser.

(Large preview)

For browsers that support corner-shape, we enhance:

@layer demo {
  /* If the browser supports `corner-shape` */
  @supports (corner-shape: bevel) {
    .product {
      border-radius: 40px;
      corner-shape: squircle;
    }

    .product__badge {
      padding: 0.35rem 1.4rem 0.35rem 1rem;
      border-radius: 0 16px 16px 0;
      corner-shape: round bevel bevel round;
    }
  }
}

The round bevel bevel round combination creates a directional ribbon. Round where it meets the card edge, beveled to a point on the other side. No clip-path, no pseudo-element tricks. Borders, shadows, and backgrounds all follow the declared shape because it is the shape.

The cards themselves upgrade from border-radius: 12px to a larger size and the squircle corner-shape, that smooth superellipse curve that makes standard rounding look slightly off by comparison. Designers will notice immediately. Everyone else will just say it “feels more premium.”

(Large preview)

Hot tip: Using the squircle value on card components is one of those upgrades where the before-and-after difference can be subtle in isolation, but transformative across an entire page. It’s the iOS effect: once everything uses superellipse curves, plain circular arcs start looking out of place. In this demo, I did exaggerate a bit.

See the Pen [Corner-shape: Labels [forked]](https://codepen.io/smashingmag/pen/GgjNwQE) by utilitybend.

See the Pen Corner-shape: Labels [forked] by utilitybend.

This is the “component library demo”, the one that shows corner-shape isn’t just for hero sections. It’s practical, everyday UI: solid buttons, outlined buttons, status tags, directional arrows, notification badges.

The set-up is intentionally clean. Standard border-radius: 10px buttons with a polished typeface. Everything works, everything looks professional. You could do this without hesitation.

The corner-shape layer turns it into a showcase. Each button type gets its own shape to demonstrate the range of what’s possible:

@layer demo {
  @supports (corner-shape: bevel) {
    .btn--primary {
      corner-shape: bevel;
      transition: corner-shape 0.3s ease;

      &:hover {
        corner-shape: squircle;
      }
    }

    .btn--secondary {
      border-radius: 25px;
      corner-shape: superellipse(0.5);
    }

    .btn--danger {
      border-radius: 16px;
      corner-shape: squircle;
    }

    .btn--notch {
      border-radius: 12px;
      corner-shape: notch;
    }

    .btn--scoop {
      border-radius: 14px;
      corner-shape: scoop;
    }
  }
}

Before. (Large preview)

After. (Large preview)

The primary button starts beveled, faceted, and gem-like, and softens to squircle on hover. Because corner-shape values animate via their superellipse() equivalents, the transition is smooth. It’s a fun interaction that used to be hard to achieve but is now a single property (used alongside border-radius, of course).

The secondary button uses superellipse(0.5), a value that is between a standard circle and a squircle, combined with a larger border-radius for a distinctive pill-like shape. The danger button gets a more prominent squircle with a generous radius. And notch and scoop each bring their own sharp or concave personality.

Beyond buttons, the status tags get corner-shape: notch, those sharp inward cuts that give them a machine-stamped look. The directional arrow tags use round bevel bevel round (and its reverse for the back arrow), replacing what used to require clip-path: polygon(). Now borders and shadows work correctly across all states.

See the Pen [Corner-shape: Buttons & Tags [forked]](https://codepen.io/smashingmag/pen/gbwLQdG) by utilitybend.

See the Pen Corner-shape: Buttons & Tags [forked] by utilitybend.

Demo 3: Testimonial Cards

This demo is probably my favourite one. At its foundation, these are just testimonial cards with serif typography, a sandy palette, and scooped corners on the featured card. The design language is intentionally different from the clean geometric buttons demo, and that’s the point. corner-shape merely adds that extra “edge”.

The basis is standard border-radius: 16px cards. The featured testimonial spans full width with a subtle gradient and a decorative open quote mark. Normal cards alternate in a two-column grid. It already looks like something from a premium marketing site.

The corner-shape layer adds character:

@layer demo {
  /* Progressive enhancement */
  @supports (corner-shape: scoop) {
    .testimonial {
      border-radius: 20px;
      corner-shape: squircle;
    }

    .testimonial--featured {
      border-radius: 24px;
      corner-shape: scoop;
    }

    .testimonial:not(.testimonial--featured):nth-child(even) {
      corner-shape: scoop round;
    }

    .testimonial__avatar {
      border-radius: 28%;
      corner-shape: squircle;
    }
  }
}

The featured card gets full scoop corners, concave on all four sides, creating an organic, almost hand-crafted feel that matches the serif typography. Even-numbered cards mix scoop round, giving each one a slightly different personality without any extra markup.

The author avatars switch from circles to squircle. A small touch that makes it a bit more “different”.

Fallback. (Large preview)

Supported. (Large preview)

Hot tip: corner-shape: scoop pairs beautifully with serif fonts and warm color palettes. The concave curves echo the organic shapes found in editorial design, calligraphy, and print layouts. For geometric sans-serif designs, stick with squircle or bevel.

See the Pen [Corner-shape: Testimonials [forked]](https://codepen.io/smashingmag/pen/RNGoqvZ) by utilitybend.

See the Pen Corner-shape: Testimonials [forked] by utilitybend.

Demo 4: Pricing Cards

Every SaaS site needs a pricing page, and the visual hierarchy challenge is always the same: make one plan stand out without the others feeling neglected. This demo solves it with corner-shape.

This is quite similar to the last demo in that we once again have a nice baseline for browsers that don’t yet support corner-shape. We have three cards in a row, where the featured plan is distinguished by a warm gradient background, a stronger border, and a “Most Popular” badge.

The enhancement takes it further:

@layer demo {
  @supports (corner-shape: squircle) {
    .plan {
      border-radius: 20px;
      corner-shape: squircle;
    }

    .plan--featured {
      border-radius: 24px;
      corner-shape: scoop;
    }

    .plan__badge {
      inset-inline-start: 50%;
      translate: -50% 0;
      padding-inline: 1.2rem;
      border-radius: 10px;
      corner-shape: bevel;
    }

    .plan__cta {
      border-radius: 12px;
      corner-shape: squircle;
    }
  }
}

Regular plans get squircle for that premium feel. The featured plan gets scoop, concave corners that immediately set it apart from its neighbors. The “Most Popular” badge centers itself and takes on corner-shape: bevel, creating a gem-like, faceted shape that feels like a jewel pinned to the card. The CTA buttons get squircle to match the card language.

Before. (Large preview)

After. (Large preview)

What I like about this demo is how the shape hierarchy mirrors the content hierarchy. The most important element (featured plan) gets the most distinctive shape (scoop). The badge gets the sharpest shape (bevel). Everything else gets a simpler upgrade (squircle). Shape becomes a tool for visual emphasis, not just decoration.

See the Pen [Corner-shape: Pricing [forked]](https://codepen.io/smashingmag/pen/vEXyQMZ) by utilitybend.

See the Pen Corner-shape: Pricing [forked] by utilitybend.

Demo 5: Music Player

The final demo is a warm dark UI for a music player with album art, playback controls, genre tags, and a listening queue. It’s the most visually complex demo, and it shows how corner-shape works across many different element types within a single cohesive design.

This time, I went for a dark warm palette built on oklch(18% 0.015 40), and standard rounded corners throughout. The album art gets border-radius: 12px, queue items get border-radius: 12px, genre tags get border-radius: 5px. It looks good. It’s a complete, polished player.

And then once again, we add some enhancements:

@layer demo {
  @supports (corner-shape: squircle) {
    .now-playing {
      border-radius: 20px;
      corner-shape: squircle;
    }

    .now-playing__art {
      border-radius: 16px;
      corner-shape: squircle;
    }

    .now-playing__swatch {
      border-radius: 26%;
      corner-shape: squircle;
    }

    .queue-item {
      border-radius: 14px;
      corner-shape: scoop round;
    }

    .tag {
      border-radius: 8px;
      corner-shape: bevel;
    }
  }
}

The player card and album art get squircle, the same curves used for app icons and album thumbnails. Album art swatches go from border-radius: 22% to a proper squircle at 26%, which is a subtle but meaningful difference in the visual elements you stare at while listening.

Queue items get scoop round, resulting in concave corners on the top-left and bottom-left, and round on the right. It gives each row a distinctive feel without overwhelming the layout. Genre tags get bevel for that sharp feeling.

The Play button also gets corner-shape: squircle on its existing border-radius: 50% to fit the album covers. On the surface, the difference is barely noticeable, but it contributes to the overall feel of the player.

See the Pen [Corner-shape: Music player [forked]](https://codepen.io/smashingmag/pen/ogzYQRB) by utilitybend.

See the Pen Corner-shape: Music player [forked] by utilitybend.

Before. (Large preview)

After. (Large preview)

Browser Support

As of writing, corner-shape is available in Chrome 139+ and Chromium-based browsers. Firefox and Safari don’t support it yet. The spec lives in CSS Borders and Box Decorations Module Level 4, which is a W3C Working Draft as of this writing.

For practical use, that’s fine. That’s the whole point of how these demos are built. The presentation layer delivers a polished, complete UI to every browser. The demo layer is a bonus for supporting browsers, wrapped in @supports (corner-shape: ...). I lived through the time when border-radius was only available in Firefox. Somewhere along the line, it seems like we have forgotten that not every website needs to look exactly the same in every browser. What we really want is: no “broken” layouts and no “your browser doesn’t support this” messages, but rather a beautiful experience that just works, and can progressively enhance a bit of extra joy. In other words, we’re working with two tiers of design: good and better.

Wrapping Up

The approach I keep coming back to is: don’t design for corner-shape, and don’t design around the lack of it. Design a solid baseline with border-radius and then enhance it. The presentation layer in every demo looks intentionally good. It’s not a degraded version waiting for a better browser. It’s a complete design. The demo layer adds a dimension that border-radius alone can’t express.

What surprises me most about corner-shape is the range it offers — the amazing powerhouse we have with this single property: squircle for that premium, superellipse feel on cards and avatars; bevel for directional elements and gem-like badges; scoop for editorial warmth and visual hierarchy; notch for mechanical precision on tags; and superellipse() for fine control between round and squircle. And the ability to mix values per corner (round bevel bevel round, scoop round) opens up shapes that would have required SVG masks or clip-path hacks.

We went from five background images to border-radius, to corner-shape. Each step removed a category of workarounds. I’m excited to see what designers do with this one.

Building Dynamic Forms In React And Next.js

hello@smashingmagazine.com (Sunil Sandhu) — Tue, 10 Mar 2026 13:00:00 GMT

Building Dynamic Forms In React And Next.js — Smashing Magazine

By About The Author

14 min read
JavaScript, React, Coding

Some forms stay UI, while others quietly become rule engines. Here’s why these two different approaches exist and how to choose between them.

There’s a mental model most React developers share without ever discussing it out loud. That forms are always supposed to be components. This means a stack like:

React Hook Form for local state (minimal re-renders, ergonomic field registration, imperative interaction).
Zod for validation (input correctness, boundary validation, type-safe parsing).
React Query for backend: submission, retries, caching, server sync, and so on.

And for the vast majority of forms — your login screens, your settings pages, your CRUD modals — this works really well. Each piece does its job, they compose cleanly, and you can move on to the parts of your application that actually differentiate your product.

But every once in a while, a form starts accumulating things like visibility rules that depend on earlier answers, or derived values that cascade through three fields. Maybe even entire pages that should be skipped or shown based on a running total.

You handle the first conditional with a useWatch and an inline branch, which is fine. Then another. Then you’re reaching for superRefine to encode cross-field rules that your Zod schema can’t express in the normal way. Then, step navigation starts leaking business logic. At some point, you look at what you’ve built and realize that the form isn’t really UI anymore. It’s more of a decision process, and the component tree is just where you happened to store it.

This is where I think the mental model for forms in React breaks down, and it’s really nobody’s fault. The RHF + Zod stack is excellent at what it was designed for. The issue is that we tend to keep using it past the point where its abstractions match the problem because the alternative requires a different way of thinking about forms entirely.

This article is about that alternative. To show this, we’ll build the exact same multi-step form twice:

With React Hook Form + Zod wired to React Query for submission,
With SurveyJS, which treats a form as data — a simple JSON schema — rather than a component tree.

Same requirements, same conditional logic, same API call at the end. Then we’ll map exactly what moved and what stayed, and lay out a practical way to decide which model you should use, and when.

The form we’re building:

(Large preview)

This form will use a 4-step flow:

Step 1: Details

First name (required),
Email (required, valid format).

Step 2: Order

Unit price,
Quantity,
Tax rate,
Derived:
- Subtotal,
- Tax,
- Total.

Step 3: Account & Feedback

Do you have an account? (Yes/No)
- If Yes → username + password, both required.
- If No → email already collected in step 1.
Satisfaction rating (1–5)
- If ≥ 4 → ask “What did you like?”
- If ≤ 2 → ask “What can we improve?”

Step 4: Review

Only appears if total >= 100
Final submission.

This is not extreme. But it’s enough to expose architectural differences.

Part 1: Component-Driven (React Hook Form + Zod)

Installation

npm install react-hook-form zod @hookform/resolvers @tanstack/react-query

Zod Schema

Let’s start with the Zod schema, because that’s usually where the shape of the form gets established. For the first two steps — personal details and order inputs — everything is straightforward: required strings, numbers with minimums, and an enum. The interesting part starts when you try to express the conditional rules.

import { z } from "zod";

export const formSchema = z.object({  
  firstName: z.string().min(1, "Required"),  
  email: z.string().email("Invalid email"),  
  price: z.number().min(0),  
  quantity: z.number().min(1),  
  taxRate: z.number(),  
  hasAccount: z.enum(["Yes", "No"]),  
  username: z.string().optional(),  
  password: z.string().optional(),  
  satisfaction: z.number().min(1).max(5),  
  positiveFeedback: z.string().optional(),  
  improvementFeedback: z.string().optional(),  
}).superRefine((data, ctx) => {  
  if (data.hasAccount === "Yes") {  
    if (!data.username) {  
      ctx.addIssue({ code: "custom", path: ["username"], message: "Required" });  
    }  
    if (!data.password || data.password.length < 6) {  
      ctx.addIssue({ code: "custom", path: ["password"], message: "Min 6 characters" });  
    }  
  }

  if (data.satisfaction >= 4 && !data.positiveFeedback) {  
    ctx.addIssue({ code: "custom", path: ["positiveFeedback"], message: "Please share what you liked" });  
  }

  if (data.satisfaction <= 2 && !data.improvementFeedback) {  
    ctx.addIssue({ code: "custom", path: ["improvementFeedback"], message: "Please tell us what to improve" });  
  }  
});

export type FormData = z.infer;

Notice that username and password are typed as optional() even though they’re conditionally required because Zod’s type-level schema describes the shape of the object, not the rules governing when fields matter.

The conditional requirement has to live inside superRefine, which runs after the shape is validated and has access to the full object. That separation is not a flaw; it’s just what the tool is designed for: superRefine is where cross-field logic goes when it can’t be expressed in the schema structure itself.

What’s also notable here is what this schema doesn’t express. It has no concept of pages, no concept of which fields are visible at which point, and no concept of navigation. All of that will live somewhere else.

Form Component

import { useForm, useWatch } from "react-hook-form";  
import { zodResolver } from "@hookform/resolvers/zod";  
import { useMutation } from "@tanstack/react-query";  
import { useState, useMemo } from "react";  
import { formSchema, type FormData } from "./schema";

const STEPS = ["details", "order", "account", "review"];

type OrderPayload = FormData & { subtotal: number; tax: number; total: number };

export function RHFMultiStepForm() {  
  const [step, setStep] = useState(0);

  const mutation = useMutation({
    mutationFn: async (payload: OrderPayload) => {
      const res = await fetch("/api/orders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error("Failed to submit");
      return res.json();
    },
  });

  const {  
    register,  
    control,  
    handleSubmit,  
    formState: { errors },  
  } = useForm({  
    resolver: zodResolver(formSchema),  
    defaultValues: {  
      price: 0,  
      quantity: 1,  
      taxRate: 0.1,  
      satisfaction: 3,  
      hasAccount: "No",  
    },  
  });  

  const price = useWatch({ control, name: "price" });  
  const quantity = useWatch({ control, name: "quantity" });  
  const taxRate = useWatch({ control, name: "taxRate" });  
  const hasAccount = useWatch({ control, name: "hasAccount" });  
  const satisfaction = useWatch({ control, name: "satisfaction" });  

  const subtotal = useMemo(() => (price ?? 0) * (quantity ?? 1), [price, quantity]);  
  const tax = useMemo(() => subtotal * (taxRate ?? 0), [subtotal, taxRate]);  
  const total = useMemo(() => subtotal + tax, [subtotal, tax]);  

  const onSubmit = (data: FormData) => mutation.mutate({ ...data, subtotal, tax, total });  

  const showSubmit = (step === 2 && total < 100) || (step === 3 && total >= 100)

  return (  
      
      {step === 0 && (  
        <>  
            
            
          
      )}

      {step === 1 && (  
        <>  
            
            
          

          Subtotal: {subtotal}  
          Tax: {tax}  
          Total: {total}  
          
      )}

      {step === 2 && (  
        <>  
          

          {hasAccount === "Yes" && (  
            <>  
                
                
              
          )}

          

          {satisfaction >= 4 && (  
              
          )}

          {satisfaction <= 2 && (  
            <textarea {...register("improvementFeedback")} />  
          )}  
        </>  
      )}

      {step === 3 && total >= 100 && <div>Review and submit</div>}

      <div>  
        {step > 0 && <button type="button" onClick={() => setStep(step - 1)}>Back</button>}  
        {showSubmit ? (  
          <button type="submit" disabled={mutation.isPending}>  
            {mutation.isPending ? "Submitting…" : "Submit"}  
          </button>  
        ) : step < STEPS.length - 1 ? (  
          <button type="button" onClick={() => setStep(step + 1)}>Next</button>  
        ) : null}  
      </div>  
      {mutation.isError && <div>Error: {mutation.error.message}</div>}  
    </form>  
  );  
}
</code></pre></div><figure><p data-default-tab="result" data-height="480" data-slug-hash="gbwwmNO" data-theme-id="light" data-user="smashingmag">See the Pen [SurveyJS-03-RHF [forked]](https://codepen.io/smashingmag/pen/gbwwmNO) by <a href="https://codepen.io/sixthextinction">sixthextinction</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/gbwwmNO">SurveyJS-03-RHF [forked]</a> by <a href="https://codepen.io/sixthextinction">sixthextinction</a>.</figcaption></figure><p>There’s quite a lot happening here, and it’s worth slowing down to notice where things ended up.</p><ul><li>The derived values — <code>subtotal</code>, <code>tax</code>, <code>total</code> — are computed in the component via <code>useWatch</code> and <code>useMemo</code> because they depend on live field values and there’s no other natural place for them.</li><li>The visibility rules for <code>username</code>, <code>password</code>, <code>positiveFeedback</code>, and <code>improvementFeedback</code> live in JSX as inline conditionals.</li><li>The step-skipping logic — the review page only appearing when <code>total >= 100</code> — is embedded into the <code>showSubmit</code> variable and the render condition on step 3.</li><li>Navigation itself is just a <code>useState</code> counter that we’re manually incrementing.</li><li>React Query handles retries, caching, and invalidation. The form just calls <code>mutation.mutate</code> with validated data.</li></ul><p>None of this is <em>wrong,</em> per se. This is still idiomatic React, and the component is quite performant thanks to how RHF isolates re-renders.</p><p>But if you were to hand this to someone who hadn’t written it and ask them to explain <em>under what conditions the review page appears</em>, they’d have to trace through <code>showSubmit</code>, the step 3 render condition, and the nav button logic — three separate places — to reconstruct a rule that could have been stated in one line.</p><p><strong>The form works, yes, but the behavior isn’t really inspectable as a system.</strong> It has to be executed mentally.</p><p>More importantly, changing it requires engineering involvement. Even a small tweak, like adjusting when the review step shows up, means editing the component, updating validation, opening a pull request, waiting for review, and deploying again.</p><h2 id="part-2-schema-driven-surveyjs">Part 2: Schema-Driven (SurveyJS)</h2><p>Now let’s build the same flow using a schema.</p><h3 id="installation-1">Installation</h3><pre><code>npm install survey-core survey-react-ui @tanstack/react-query
</code></pre><ul><li><code>survey-core</code><br></br>The MIT-licensed platform-independent runtime engine that powers SurveyJS’s form rendering — the part we care about here. It takes a JSON schema, builds an internal model from it, and handles everything that would otherwise live in your React component: evaluating visibility expressions, computing derived values, managing page state, tracking validation, and deciding what “complete” means given which pages were actually shown.</li><li><code>survey-react-ui</code><br></br>The UI / rendering layer that connects that model to React. It’s essentially a <code><Survey model={model} /></code> component that re-renders whenever the engine’s state changes. SurveyJS UI libraries are also available for <a href="https://www.npmjs.com/package/survey-angular">Angular</a>, <a href="https://www.npmjs.com/package/survey-vue3-ui">Vue3</a>, and many other frameworks.</li></ul><p>Together, they give you a fully functional, multi-page form runtime without writing a single line of control flow.</p><p>The schema format itself is, as said before, just a JSON — no DSL or anything proprietary. You can inline it, import it from a file, fetch it from an API, or store it in a database column and hydrate it at runtime.</p><h3 id="the-same-form-as-data">The Same Form, As Data</h3><p>Here’s the same form, this time expressed as a JSON object. The schema defines everything: structure, validation, visibility rules, derived calculations, page navigation — and hands it to a <code>Model</code> that evaluates it at runtime. Here’s what that looks like in full:</p><div><pre><code>export const surveySchema = {  
  title: "Order Flow",  
  showProgressBar: "top",  
  pages: [  
    {  
      name: "details",  
      elements: [  
        { type: "text", name: "firstName", isRequired: true },  
        { type: "text", name: "email", inputType: "email", isRequired: true, validators: [{ type: "email", text: "Invalid email" }] }  
      ]  
    },  
    {  
      name: "order",  
      elements: [  
        { type: "text", name: "price", inputType: "number", defaultValue: 0 },  
        { type: "text", name: "quantity", inputType: "number", defaultValue: 1 },  
        {  
          type: "dropdown",  
          name: "taxRate",  
          defaultValue: 0.1,  
          choices: [  
            { value: 0.05, text: "5%" },  
            { value: 0.1, text: "10%" },  
            { value: 0.15, text: "15%" }  
          ]  
        },  
        {  
          type: "expression",  
          name: "subtotal",  
          expression: "{price} * {quantity}"  
        },  
        {  
          type: "expression",  
          name: "tax",  
          expression: "{subtotal} * {taxRate}"  
        },  
        {  
          type: "expression",  
          name: "total",  
          expression: "{subtotal} + {tax}"  
        }  
      ]  
    },  
    {  
      name: "account",  
      elements: [  
        {  
          type: "radiogroup",  
          name: "hasAccount",  
          choices: ["Yes", "No"]  
        },  
        {  
          type: "text",  
          name: "username",  
          visibleIf: "{hasAccount} = 'Yes'",  
          isRequired: true  
        },  
        {  
          type: "text",  
          name: "password",  
          inputType: "password",  
          visibleIf: "{hasAccount} = 'Yes'",  
          isRequired: true,  
          validators: [{ type: "text", minLength: 6, text: "Min 6 characters" }]  
        },  
        {  
          type: "rating",  
          name: "satisfaction",  
          rateMin: 1,  
          rateMax: 5  
        },  
        {  
          type: "comment",  
          name: "positiveFeedback",  
          visibleIf: "{satisfaction} >= 4"  
        },  
        {  
          type: "comment",  
          name: "improvementFeedback",  
          visibleIf: "{satisfaction} <= 2"  
        }  
      ]  
    },  
    {  
      name: "review",  
      visibleIf: "{total} >= 100",  
      elements: []  
    }  
  ]  
};
</code></pre></div><p>Compare this to the RHF version for a moment.</p><ul><li>The <code>superRefine</code> block that conditionally required <code>username</code> and <code>password</code> is gone. <code>visibleIf: "{hasAccount} = 'Yes'"</code> combined with <code>isRequired: true</code> handles both concerns together, on the field itself, where you’d expect to find them.</li><li>The <code>useWatch</code> + <code>useMemo</code> chain that computed <code>subtotal</code>, <code>tax</code>, and <code>total</code> is replaced by three <code>expression</code> fields that reference each other by name.</li><li>The review page condition, which in the RHF version was reconstructable only by tracing through <code>showSubmit</code>, the step 3 render branch.</li><li>And finally, the nav button logic is a single <code>visibleIf</code> property on the page object.</li></ul><p>The same logic is there. It’s just that the schema gives it a place to live where it’s visible in isolation, rather than spread across the component.</p><p>Also, note that the schema uses <code>type: 'expression'</code> for subtotal, tax, and total. <a href="https://surveyjs.io/form-library/documentation/api-reference/expression-model">Expression</a> is read-only and used mainly to display calculated values. SurveyJS also supports <code>type: 'html'</code> for static content, but for calculated values, <code>expression</code> is the right choice.</p><p>Now for the React side.</p><h3 id="rendering-and-submission">Rendering And Submission</h3><p>Very simple. Wire <code>onComplete</code> to your API the same way — via <code>useMutation</code> or plain <code>fetch</code>:</p><div><pre><code>import { useState, useEffect, useRef } from "react";  
import { useMutation } from "@tanstack/react-query";  
import { Model } from "survey-core";  
import { Survey } from "survey-react-ui";  
import "survey-core/survey-core.css";

export function SurveyForm() {  
  const [model] = useState(() => new Model(surveySchema));

  const mutation = useMutation({
    mutationFn: async (data) => {
      const res = await fetch("/api/orders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      if (!res.ok) throw new Error("Failed to submit");
      return res.json();
    },
  });

  const mutationRef = useRef(mutation);
  mutationRef.current = mutation;
  useEffect(() => {  
    const handler = (sender) => mutationRef.current.mutate(sender.data);  
    model.onComplete.add(handler);  
    return () => model.onComplete.remove(handler);  
  }, [model]); // ref avoids re-registering handler every render (mutation object identity changes)

  return (
    <>
      <Survey model={model} />  
      {mutation.isError && <div>Error: {mutation.error.message}</div>}
    </>
  );
}
</code></pre></div><figure><p data-default-tab="result" data-height="480" data-slug-hash="emddWNV" data-theme-id="light" data-user="smashingmag">See the Pen [SurveyJS-03-SurveyJS [forked]](https://codepen.io/smashingmag/pen/emddWNV) by <a href="https://codepen.io/sixthextinction">sixthextinction</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/emddWNV">SurveyJS-03-SurveyJS [forked]</a> by <a href="https://codepen.io/sixthextinction">sixthextinction</a>.</figcaption></figure><ul><li><code>onComplete</code> fires when the user reaches the end of the last <em>visible</em> page. So if <code>total</code> never crosses 100 and the review page is skipped, it still fires correctly because SurveyJS evaluates visibility before deciding what “last page” means.</li><li>Then, <code>sender.data</code> contains all answers along with the calculated values (<code>subtotal</code>, <code>tax</code>, <code>total</code>) as first-class fields, so the API payload is identical to what the RHF version assembled manually in <code>onSubmit</code>.</li><li>The <code>mutationRef</code> pattern is the same one you’d reach for anywhere you need a stable event handler over a value that changes on every render — nothing SurveyJS-specific about it.</li></ul><p>The React component no longer contains any business logic at all. There’s no <code>useWatch</code>, no conditional JSX, no step counter, no <code>useMemo</code> chain, no <code>superRefine</code>. React is doing what it’s actually good at: rendering a component and wiring it to an API call.</p><h2 id="what-moved-out-of-react">What Moved Out Of React?</h2><table><thead><tr><th>Concern</th><th>RHF Stack</th><th>SurveyJS</th></tr></thead><tbody><tr><td>Visibility</td><td>JSX branches</td><td><code>visibleIf</code></td></tr><tr><td>Derived values</td><td><code>useWatch</code> / <code>useMemo</code></td><td><code>expression</code></td></tr><tr><td>Cross-field rules</td><td><code>superRefine</code></td><td>Schema conditions</td></tr><tr><td>Navigation</td><td><code>step</code> state</td><td>Page <code>visibleIf</code></td></tr><tr><td>Rule location</td><td>Distributed across files</td><td>Centralized in the schema</td></tr></tbody></table><p>What stays in React is layout, styling, submission wiring, and app integration, which is to say, <strong>the things React is actually designed for</strong>.</p><p>Everything else moved into the schema, and because the schema is just a JSON object, it can be stored in a database, versioned independently of your application code, or edited through internal tooling without requiring a deploy.</p><p>A product manager who needs to change the threshold that triggers the review page can do that without touching the component. That’s a meaningful operational difference for teams where form behavior evolves frequently and isn’t always driven by engineers.</p><h2 id="when-to-use-each-approach">When To Use Each Approach?</h2><p>Here’s a good rule of thumb that works for me: <strong>imagine deleting the form entirely</strong>. What would you lose?</p><ul><li>If it’s screens, you want component-driven forms.</li><li>If it’s business logic, like thresholds, branching rules, and conditional requirements that encode real decisions, you want a schema engine.</li></ul><p>Similarly, if the changes coming your way are mostly about labels, fields, and layout, RHF will serve you fine. If they’re about conditions, outcomes, and rules that your ops or legal team might need to adjust on a Tuesday afternoon without filing a ticket, the schema model with SurveyJS is the more honest fit.</p><p><strong>These two approaches are not really in competition with each other.</strong> They address different classes of problems, and the mistake worth avoiding is mismatching the abstraction to the weight of the logic — treating a rule system like a component because that’s the familiar tool, or reaching for a policy engine because a form grew to three steps and acquired a conditional field.</p><p>The form we built here sits near the boundary deliberately, complex enough to expose the difference but not so extreme that the comparison feels rigged. Most real forms that have gotten unwieldy in your codebase probably sit near that same boundary, and the question is usually just whether anyone has named what they actually are.</p><p><strong>Use React Hook Form + Zod when:</strong></p><ul><li>Forms are CRUD-oriented;</li><li>Logic is shallow and UI-driven;</li><li>Engineers own all behavior;</li><li>Backend remains the source of truth.</li></ul><p><strong>Use SurveyJS when:</strong></p><ul><li>Forms encode business decisions;</li><li>Rules evolve independently of UI;</li><li>Logic must be visible, auditable, or versioned;</li><li>Non-engineers influence behavior;</li><li>The same form must run across multiple frontends.</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Persuasive Design: Ten Years Later</h1>
<p>hello@smashingmagazine.com (Anders Toxboe) — Mon, 09 Mar 2026 11:00:00 GMT</p>
<h1>Ten Years Later — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>24 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/psychology">Psychology</a>,
<a href="http://www.smashingmagazine.com/category/usability">Usability</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Many product teams still lean on usability improvements and isolated behavioral tweaks to address weak activation, drop-offs, and low retention – only to see results plateau or slip into shallow gamification. Anders Toxboe updates persuasive design for today’s reality, clarifying what has actually held up over the last decade and how modern frameworks can guide both discovery and ideation.</section></p><p>Ten years ago, persuasive design was a relatively new frontier in the field of UX. In a 2015 Smashing article, I was among those who <a href="https://www.smashingmagazine.com/2015/10/beyond-usability-designing-with-persuasive-patterns">showed a way</a> for practitioners to move from being primarily focused on improving usability and removing friction to also guide users toward a desired outcome. The premise was simple: by leveraging <strong>psychology</strong>, we could influence user behavior and drive outcomes like higher sign-ups, faster and richer onboarding, and stronger retention and engagement.</p><p>A decade later, that promise has proven true — but not in the same way many of us expected. Most product teams still face familiar problems: high bounce rates, weak activation, and users dropping off before experiencing core value. Usability improvements help, but they don’t always address the behavioral gap that sits underneath these patterns.</p><p>Persuasive design didn’t disappear — it matured.</p><p>Today, the more useful version of this work is often called <strong>behavioral design</strong>: a way to align product experiences with the real drivers of human behavior, with an ethical mindset. Done well, it can improve conversion, onboarding completion, engagement, and long-term use without slipping into manipulation.</p><p>Here’s what I’ll cover:</p><ul><li>What has held up from the last decade of persuasive design;</li><li>What didn’t hold up, especially the limits of pattern-first gamification;</li><li>What changed in how we model behavior, from triggers to context and systems;</li><li>How to use <strong>modern behavioral frameworks</strong> to improve both discovery and ideation;</li><li>A practical way to run this work as a team, using a <strong>five-exercise workshop sequence</strong>, you can adapt to your product.</li></ul><p>The goal is not to add more tactics to your toolkit. It’s to help you build a repeatable, shared approach to diagnosing behavioral barriers and designing solutions that support both users’ goals and business outcomes.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="is-persuasion-the-same-as-deception">Is Persuasion The Same As Deception?</h2><p>Behavioral Design is not about slapping <a href="https://www.deceptive.design/">deceptive patterns</a> or superficial “growth hacks” onto your UI. It’s about understanding what truly enables or hinders your users on their way to achieving their goal and then designing experiences that guide them to success.</p><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/1-behavioral-design.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/1-behavioral-design.png">Large preview</a>)</figcaption></figure><p>Behavioral design is more about bridging the gap between <strong>what users want</strong> (achieving their goals, feeling value) and <strong>what businesses need</strong> (activation, retention, revenue), creating win-win outcomes where good UX and good business results align.</p><p>But like with all powerful tools, they can be used both for good and bad. The difference lies in the <strong>intention of the designer</strong>. Some designers argue for not promoting behavioral or persuasive design, while others argue that we need to understand the tools to learn how to use them well and how we can easily, and often mindlessly, fall into the trap of promoting an unethical lens.</p><p>If we are not enlightened, then how can we judge what represents good and bad practice? If we do not understand how psychology works, then we lack the awareness needed to spot our biases. If we don’t understand these tools, we can’t spot when they’re misused.</p><p>The difference between persuasion and deception is intention, plus accountability.</p><h2 id="a-decade-later-what-have-we-learned">A Decade Later, What Have We learned?</h2><p>In the early 2010s, many teams treated persuasive design as almost synonymous with gamification. If you added points, badges, and leaderboards, you were doing psychology. And to be fair, those surface mechanics did work in some cases, at least in the short term. They could nudge people through onboarding flows or encourage a few extra logins. But over the decade, their limits became clear. Once the novelty wore off, many of these systems felt shallow. Users learned to ignore streaks that did not connect to anything meaningful or dropped out when they realized the game layer was not helping them reach a real goal.</p><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/2-persuasive-design.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/2-persuasive-design.png">Large preview</a>)</figcaption></figure><p>This is where <strong>self-determination theory</strong> has quietly reshaped how serious teams think about motivation. It distinguishes between <strong>extrinsic motivators</strong>, such as rewards, points, and status, and <strong>intrinsic drivers</strong> like autonomy, competence, and relatedness. Put simply, if your “gamification” fights against what people actually care about, it will eventually fail. The interventions that have survived are the ones that support intrinsic needs. A language learning streak that makes you feel more capable and shows progress can work because it makes the core activity feel more meaningful and manageable. A badge that only exists to move a dashboard number, on the other hand, quickly becomes noise.</p><h2 id="lesson-1-from-quick-fixes-to-behavioral-strategy">Lesson 1: From Quick Fixes To Behavioral Strategy</h2><p>One key lesson from the past decade is that behavioral design creates the most value when it moves beyond isolated fixes and becomes a <strong>deliberate strategy</strong>. Many product teams start with a narrow goal: improve a sign-up rate, reduce drop-off, or boost early retention. When standard UX optimizations plateau, they turn to psychology for a quick lift, often with success.</p><p>The biggest opportunity is not one more uplift on a stubborn metric, but having a systematic way to understand and shape behavior across the product.</p><blockquote>Behavioral design isn’t about hacks.<br></br>It’s about helping people succeed.</blockquote><p>Common signals are easy to recognize: people sign up but never finish onboarding; they click around once and never return; key features sit unused. A behavioral strategy doesn’t just ask “<em>What can we change on this screen?”</em> It asks what is happening in the user’s mind and context at those moments.</p><p>That might lead you to design an onboarding experience that uses <a href="https://learningloop.io/plays/psychology/triggers">curiosity</a> and the <a href="https://learningloop.io/plays/psychology/goal-gradient-effect">goal-gradient effect</a> to guide people to a clear first win, instead of hoping they read a help doc. Or it might lead you to design for exploration and commitment over time: <a href="https://ui-patterns.com/patterns/Social-proof">social proof</a> where it actually matters, <a href="https://learningloop.io/plays/psychology/appropriate-challenges">appropriate challenges</a> that stretch but don’t overwhelm, <a href="https://ui-patterns.com/patterns/ProgressiveDisclosure">progressive disclosure</a> so advanced features show up when people are ready, and the right <a href="https://learningloop.io/plays/psychology/triggers">triggers</a> at the most <a href="https://ui-patterns.com/patterns/Kairos">opportune moment</a> instead of random nags.</p><blockquote>Great products aren’t just easy to use.<br></br>They’re easier to commit to.</blockquote><p>Product psychology has shifted from scattered hypotheses to a <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">growing library of repeatable patterns</a>. Those patterns only shine when they sit inside a coherent behavioral model: what users are trying to achieve, what blocks them, and which levers the team will pull at each stage.</p><p>Simple nudges, inspired by <a href="https://www.amazon.com/Nudge-Improving-Decisions-Health-Happiness/dp/014311526X">Thaler and Sunstein</a>, have helped popularize behavioral thinking in design. But we’ve also learned that <a href="https://betteregulation.lumsa.it/repost-rednmr-publication-book-%E2%80%9Cnudge-final-edition%E2%80%9D-juli-ponce-sol%C3%A9">nudges alone rarely solve deeper behavioral challenges</a>. A behavioral strategy goes further: it blends tactics, grounds them in real motivations, and ties experiments to a clear theory of change. The goal is not a one-off win on today’s dashboard, but a way of working that compounds over time.</p><h3 id="lesson-2-game-mechanics-alone-are-not-enough">Lesson 2: Game Mechanics Alone Are Not Enough</h3><p>Game mechanics alone are no longer a credible behavioral strategy. Ten years ago, adding points, badges, and leaderboards was almost shorthand for “we’re doing psychology.” Today, most teams have learned the hard way that this is decoration unless it serves a real need.</p><p>A behavioral approach starts with a blunt question: What is the game layer in service of, and for whom? Does it help people make progress that matters to them, or does it just keep a dashboard happy? If it ignores intrinsic motivation, it will look clever in a slide deck and brittle in production.</p><p>In practice, that means points and streaks are not treated as automatic upgrades anymore. Teams ask whether a mechanic helps users feel more competent, more in control, or more connected to others. A streak only makes sense if it reflects real progress in a skill the user cares about. A leaderboard only adds value if people actually want to compare themselves and if the ranking helps them decide what to do next. If it does not pass those tests, it is clutter, not a motivational engine.</p><blockquote>Streaks and badges only work when they support something users truly value.</blockquote><p>The most effective products now start with the intrinsic side. They are clear about what the product helps users become or achieve, and only then ask whether a game mechanic can amplify that journey. When game elements are added, they live in the core loop rather than on top of it. They show mastery, mark meaningful milestones, and reinforce self-driven goals. That is the difference between treating gamification as a paint job and using it to support users on a path they already care about.</p><h3 id="lesson-3-from-cause-and-effect-to-holistic-systems-thinking">Lesson 3: From Cause And Effect To Holistic Systems Thinking</h3><p>Early persuasive design often assumed a simple logic: find the broken step, add the right lever, and users move forward. Nice on a slide, rarely true in reality.</p><p>People don’t act for a single reason. They have context, history, competing goals, mood, time pressure, trust issues, and different definitions of success. Two users can take the same step for completely different reasons. The same user can behave differently on a different day.</p><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/3-holistic-systems-thinking-persuasive-design.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/3-holistic-systems-thinking-persuasive-design.png">Large preview</a>)</figcaption></figure><p>That’s why <a href="https://en.wikipedia.org/wiki/Systems_thinking">systems thinking</a> matters. Behavior is shaped by feedback loops and delays, not just one trigger. Outcomes we care about, trust, competence, and habit, are built over time. A change that boosts this week’s conversion can still weaken next month’s retention.</p><p>If you have ever shipped a “conversion win” and then watched support tickets, refunds, or churn go up, you have felt this. The local metric improved. The system got worse.</p><p>Your design structures either enable people or box them in. Defaults, navigation, feedback, pacing, rewards — each of these decisions reshapes the system and therefore the journeys people take through it.</p><p>So the job is not to perfect a single funnel. It is to build an environment where multiple valid paths can succeed, and where the system supports long-term goals, not just short-term clicks.</p><blockquote>The job isn’t to perfect one funnel, but to support multiple valid paths.</blockquote><p>A mature behavioral strategy is explicit about that. It is designed for several paths instead of one “happy flow,” supports autonomy instead of forcing compliance, and looks at downstream effects instead of only first-step conversion.</p><h3 id="lesson-4-from-triggers-to-context">Lesson 4: From Triggers To Context</h3><p>The same shift has happened in the frameworks we use. A decade ago, the <a href="https://www.behaviormodel.org/">Fogg Behavior Model</a> (FBM) was everywhere. It gave teams a simple trio: motivation, ability, trigger — and a clear message: shouting louder with prompts does not fix low motivation or poor ability. That alone was a useful upgrade.</p><p>Fogg’s own work has moved on, too. With Tiny Habits, the focus leans more on identity, emotion, and making behaviors feel easy and personally meaningful. That mirrors a broader shift in the field: away from “fire more prompts” and toward designing environments where the right behavior feels natural.</p><p>Teams eventually ran into the same wall: prompts do not fix low capability or missing opportunity. You cannot nag people into skills they do not have or into contexts that do not exist. That is where many teams that work deeply with behavior change have gravitated toward <a href="https://thedecisionlab.com/reference-guide/organizational-behavior/the-com-b-model-for-behavior-change">COM-B</a> as a more complete foundation.</p><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/4-fogg-behavior-com-b.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/4-fogg-behavior-com-b.png">Large preview</a>)</figcaption></figure><p>COM-B breaks behavior into <strong>capability</strong>, <strong>opportunity</strong>, and <strong>motivation</strong>. It starts with a blunt check: can people actually do this, and does their environment let them? That maps well to modern products, where behavior happens across devices, channels, and moments, not on a single screen. It also plugs into broader behavior change work in health and public policy, so we do not have to reinvent everything inside UX.</p><p>Thinking this way nudges teams away from simple cause-and-effect stories. A drop in completion rate is no longer “the button is bad” or “we need more reminders,” but a question about how skills, context, and motivation interact. A capability issue might need a better interface and better education. An opportunity issue might be about device access, timing, or social surroundings, not layout. Motivation might be shaped as much by pricing and brand trust as by any in-product message.</p><blockquote>Modern behavioral design is less about activating clicks and more about shaping conditions where action feels easy and meaningful.</blockquote><p>This broader lens also makes cross-functional work simpler. Product, design, marketing, and data can share one behavior model and still see their own responsibilities in it. Designers shape perceived capability and opportunity in the interface, marketing shapes motivational framing and triggers, and operations shape the structural opportunity in the service. Instead of everyone pushing their own levers in isolation, COM-B helps teams see that they are working on different parts of the same system.</p><h3 id="lesson-5-psychology-can-also-be-used-to-design-and-decode-discovery">Lesson 5: Psychology Can Also Be Used To Design And Decode Discovery</h3><p>COM-B is often used as a bridge between discovery and ideation. On the discovery side, it gives structure to research. You can use it to design interview guides, read analytics, and make sense of observational studies. It was built to diagnose what needs to change for a behavior to shift, which maps neatly onto early product discovery.</p><blockquote>Good discovery doesn’t just ask what users say, but examines what their behavior reveals.</blockquote><p>Instead of asking <em>“Why did you stop using the product?”</em> and writing down the first answer, you deliberately walk through capability, opportunity, and motivation. You ask things like:</p><ul><li>Can users actually do this, given their skills and knowledge?</li><li>Does their context help or hinder them in practice?</li><li>How strong is their motivation compared with other demands on their time and money?</li></ul><p>You walk through recent experiences in detail: which device they used, what time of day it was, who else was around, and what else they were juggling. You talk about how important this behavior is compared with everything else in their life and what trade-offs they make. To participants, these questions feel natural. Under the hood, you are systematically covering all three parts of COM-B, in line with how behavior change practitioners use the model in qualitative work.</p><p>You can look at behavioral data in the same way. Funnel drop-offs, time on task, and click patterns are clues: are people stuck because they cannot progress, because the environment gets in the way, or because they do not care enough to continue? Modern analytics tools make it easier to watch what people actually do rather than only what they report, and combining quantitative and qualitative data gives you a fuller picture than either alone.</p><p>When there is a gap between what people say and what they do, you treat it as a <strong>signal</strong> rather than an irritation. Someone might say that saving for retirement is very important, but never set up a recurring transfer. A user might claim that onboarding was simple, while their session shows repeated back and forth between steps. Those mismatches are often where biases, habits, and emotional barriers live. By labelling them in terms of capability, opportunity, and motivation, and linking them to specific barriers like <a href="https://learningloop.io/plays/psychology/risk-aversion">risk aversion</a>, <a href="https://learningloop.io/plays/psychology/analysis-paralysis">analysis paralysis</a>, <a href="https://learningloop.io/plays/psychology/status-quo-bias">status quo bias</a> or <a href="https://learningloop.io/plays/psychology/present-bias">present bias</a>, you move from vague “insights” to a structured map of what is actually in the way.</p><blockquote>The gap between what people say and what they do is not noise — it’s the map.</blockquote><p>The output of this kind of discovery is not just personas and journeys. You also get a clear statement of the current behavior, the target behavior, and the behavioral barriers and enablers that sit between them.</p><h3 id="lesson-6-use-behavioral-discovery-in-your-ideation">Lesson 6: Use Behavioral Discovery In Your Ideation</h3><p>The bridge from discovery to ideation can be a single sentence template:</p><blockquote>From <strong>current behavior</strong> to <strong>target behavior</strong>, by <strong>doing X</strong>, because of <strong>barrier Y</strong>.</blockquote><p>This “from–to–by–why” framing forces teams to say what they actually believe. You are not just saying “add a checklist.” You are saying: “We believe a checklist will help new users feel more capable, which will increase the chance they complete setup in their first session.” Now it is a <strong>behavioral hypothesis</strong> you can test with <a href="https://learningloop.io/playbook-collections/validation-patterns/">experiments</a>, not just a design idea you hope for.</p><p>From there, you can generate several variants that express the same principle in different ways and design experiments around them. You might try a few messages that all lean on <a href="https://learningloop.io/plays/psychology/loss-aversion">loss aversion</a>, or several ways of simplifying a high-friction step, or different forms of <a href="https://learningloop.io/plays/psychology/social-proof">social proof</a> that vary in tone and proximity.</p><p>The important shift is that you are no longer throwing ideas at the wall. You are deliberately targeting the capability, opportunity, or motivation issues that discovery surfaced, and testing which levers actually work in your context.</p><blockquote>Every idea should answer one question: which barrier are we trying to change?</blockquote><p>Over time, this loop between behavioral discovery and ideation turns into a local playbook. You learn that in your product, some principles reliably help your users and others fall flat. You also learn that patterns from glowing case studies do not automatically transfer. Even gamification and behavior change research often emphasize <strong>context-specific</strong>, <strong>user-centred</strong> implementations rather than generic recipes.</p><p>This dual use of psychology in discovery and ideation is one of the bigger shifts of the past decade. A product trio can look at a stubborn drop-off point and ask, together, “Is this a capability, opportunity, or motivation issue?” Then they generate ideas that target that part of the system instead of guessing. That shared language makes behavioral design less of a specialist add-on and more of a normal way for cross-functional teams to reason about their work.</p><h2 id="a-decade-later-what-has-proven-to-work-in-practice">A Decade Later: What Has Proven To Work In Practice</h2><p>If the first decade of persuasive design taught us anything, it is that behavioral insight is cheap until a team can act on it together.</p><p>Methods matter.</p><p>Over time, a small set of workshop formats has consistently helped product teams uncover behavioral barriers, align on opportunities, and generate solutions grounded in real psychology instead of surface patterns. As behavioral design has grown from tactical nudges into a strategic discipline, an obvious question keeps coming up: <strong>How do teams actually do this work together in practice?</strong></p><p>How do product managers, designers, researchers, and engineers move from scattered observations (“people seem confused here”) to a shared behavioral diagnosis, and then to targeted ideas that reflect the real drivers of capability, opportunity, and motivation?</p><p>One effective way to make this concrete is through a workshop format. The aim is to help teams:</p><ul><li>Interpret research through a behavioral lens,</li><li>Surface capability, opportunity, and motivation gaps,</li><li>Prioritize high-potential opportunities, and</li><li>Generate ideas that are both psychologically sound and ethically considered.</li></ul><p>Real product work is messy and full of feedback loops; nobody follows a perfect step-by-step checklist. But for learning, and especially for introducing behavioral design into a team for the first time, a structured sequence of exercises gives people a mental model. It shows the journey from early discovery to behavioral clarity, from opportunities to ideas, and finally to interventions that have been stress-tested through an ethical lens.</p><p>The exercises below are one such recipe. The order is intentional: each step builds on the previous one to move from empathy and insight to prioritized opportunities, concrete concepts, and responsible solutions. No team will follow it letter-perfect every time, but it reflects how behavioral design work tends to unfold when it goes well.</p><p>Before diving into the details, here is the full recipe and how each exercise contributes to the bigger behavioral design process:</p><ol><li><strong>Behavioral Empathy Mapping</strong><br></br>Builds a shared understanding of the user’s psychological landscape: emotions, habits, misconceptions, and sources of friction.</li><li><strong>Behavioral Journey Mapping</strong><br></br>Maps the user’s flow over time, and overlays behavioral enablers and obstacles.</li><li><strong>Behavior Scoring</strong><br></br>Prioritizes which behavioral opportunities to tackle first based on impact, feasibility, and evidence.</li><li><strong>Ideas First, Patterns Later</strong><br></br>Encourages context-first ideation, then uses <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">persuasive patterns</a> to refine and strengthen promising concepts.</li><li><strong>Dark Reality</strong><br></br>Evaluates ethical risks, unintended consequences, and potential misuse.</li></ol><p><strong>A note on timing:</strong> In practice, this sequence can be run in different formats depending on constraints. For a compact format, teams often run Exercises 1–3 in a half-day workshop, and Exercises 4–5 in a second half-day session. With more time, the work can be spread across a full week: discovery synthesis early in the week, prioritization mid-week, and ideation plus ethical review toward the end. The structure matters more than the schedule; the goal is to preserve the progression from understanding → prioritization → ideation → reflection.</p><p>Below is a brief walkthrough of each exercise as I typically facilitate them in workshops in tandem with a library of <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">persuasive patterns</a>.</p><h3 id="exercise-1-behavioral-empathy-mapping">Exercise 1: Behavioral Empathy Mapping</h3><p>The first step is building a shared, psychologically informed understanding of users. <a href="https://learningloop.io/plays/workshop-exercise/behavioral-empathy-mapping">Behavioral Empathy Mapping</a> extends traditional empathy mapping by paying attention to what users attempt, avoid, postpone, misunderstand, or feel uncertain about. These subtle behavioral signals often reveal more than stated needs or pain points.</p><p><strong>Goal:</strong> Understand what drives or blocks the target behavior by capturing what users think, feel, say, and do — and spotting behavioral barriers and enablers.</p><p><strong>Steps:</strong></p><ol><li>On a whiteboard or large paper, draw an empathy map: <em>Thinking & Feeling, Seeing, Saying & Doing, and Hearing</em>.</li><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/5-empathy-map.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/5-empathy-map.png">Large preview</a>)</figcaption></figure><li>Add research insights by letting everyone silently add sticky notes from interviews, data, support logs, or observations into the quadrants. One insight per note.</li><li><strong>Identify barriers and enablers.</strong><br></br>Cluster notes that make the behavior <strong>harder</strong> (barriers) or <strong>easier</strong> (enablers).</li></ol><p><strong>Output:</strong> A focused map of the psychological and contextual forces shaping the target behavior, ready to feed into Behavioral Journey Mapping.</p><h3 id="exercise-2-behavioral-journey-mapping">Exercise 2: Behavioral Journey Mapping</h3><p>Once you understand the user’s mindset and context, the next step is to map how those forces play out across time. <a href="https://learningloop.io/plays/workshop-exercise/behavioral-journey-mapping">Behavioral Journey Mapping</a> overlays the user’s goals, actions, emotions, and environment onto the product journey, highlighting the specific moments where behavior tends to stall or shift.</p><p>Unlike traditional journey maps, the behavioral version focuses on where capability breaks down, where the environment works against the user, and where motivation fades or conflicts arise. These become early signals of where change is both needed and possible.</p><p>The output shows the team precisely where the product is asking too much, where users lack support, or where additional motivation or clarity might be required.</p><p><strong>Goal:</strong> Map the steps from the user’s starting point to the target behavior, and capture the key enablers and barriers along the way.</p><p><strong>Steps:</strong></p><ol><li>Draw a horizontal line from A (starting point) to B (target behavior).</li><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/6-behavioral-journey-mapping.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/6-behavioral-journey-mapping.png">Large preview</a>)</figcaption></figure><li>Have everyone write the steps a user takes from A to B on sticky notes (one per note). Include actions inside and outside the product.</li><li>Place the notes in order along the line. Merge duplicates and align on a shared sequence.</li><li>Extend the vertical axis with two rows:<ul><li><strong>Enablers</strong> (what could help users move forward),</li><li><strong>Barriers</strong> (what could slow or stop users).</li></ul></li><figure><a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/7-behavioral-journey-mapping.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/persuasive-design-ten-years-later/7-behavioral-journey-mapping.png">Large preview</a>)</figcaption></figure><li>Look for steps with many barriers or few enablers. These are behavioral hot spots.</li><li>Highlight the steps where a good nudge could meaningfully help users complete the journey.</li></ol><p><strong>Output:</strong> A clear, behavior-focused journey showing <strong>where users struggle, why, and which moments offer the most leverage for change</strong>.</p><h3 id="exercise-3-behavior-scoring">Exercise 3: Behavior Scoring</h3><p>With a clearer picture of the user journey and what moments could benefit from a behaviorally helpful hand, you are now ready to identify the behavior it makes most sense to focus on trying to influence.</p><p><strong>Goal:</strong> Decide which potential target behaviors <a href="https://learningloop.io/plays/workshop-exercise/behavior-scoring">are worth focusing on first</a>, based on impact, ease of change, and ease of measurement.</p><p><strong>Steps:</strong></p><ol><li>List potential target behaviors. Based on the output of the Behavioral Journey Mapping, list behaviors that could potentially be targeted. One behavior per sticky note. Be as concrete as possible (what users do, where, and when).</li><li>Create a table with the following columns:<ul><li><strong>Impact of behavior change</strong> (how much it could move the goal),</li><li><strong>Ease of change</strong> (how realistic it is to influence),</li><li><strong>Ease of measurement</strong> (how straightforward it is to track).</li></ul></li><table><thead><tr><th>Potential target behaviors</th><th>Impact of behavior change</th><th>Ease of change</th><th>Ease of measurement</th><th>Total</th></tr></thead><tbody><tr><td>…</td><td></td><td></td><td></td><td></td></tr><tr><td>…</td><td></td><td></td><td></td><td></td></tr><tr><td>…</td><td></td><td></td><td></td><td></td></tr></tbody></table><li>Enter each listed behavior into the table and score them from 0 to 10 in each column.</li><li>Sort behaviors by total score and discuss the highest-scoring ones:<ul><li>Do they make sense given what you know about users and constraints?</li></ul></li><li>Select the primary target behaviors you want to carry into the next exercises.<br></br>Optionally, note “bonus behaviors” that might follow as a side effect.</li></ol><p><strong>Output:</strong> A small set of prioritized target behaviors with a clear rationale for why they matter now, and a list of lower-priority behaviors you may revisit later.</p><p>A filled-out Behavior Scoring table could look like this:</p><table><thead><tr><th>Potential target behaviors</th><th>Impact of behavior change</th><th>Ease of change</th><th>Ease of measurement</th><th>Total</th></tr></thead><tbody><tr><td>User completes onboarding checklist in first session.</td><td>8</td><td>6</td><td>9</td><td>23</td></tr><tr><td>User invites at least one teammate within 7 days.</td><td>9</td><td>4</td><td>8</td><td>21</td></tr><tr><td>User watches the full product tour video.</td><td>4</td><td>7</td><td>6</td><td>17</td></tr><tr><td>User reads help documentation during onboarding.</td><td>3</td><td>5</td><td>4</td><td>12</td></tr></tbody></table><p>In this case, the checklist completion emerges as the strongest initial focus: it has high impact, is realistically influenceable through design changes, and can be measured reliably. Inviting a teammate may be strategically important, but it may require broader changes beyond interface design, making it a secondary focus.</p><h3 id="exercise-4-ideas-first-patterns-later">Exercise 4: Ideas First, Patterns Later</h3><p>Once the team has agreed on which behavior matters most, the next risk is jumping too quickly to familiar psychological tricks. One of the clearest lessons has been that starting with “the pattern” often leads to generic solutions that feel clever but fail in context.</p><p>This exercise deliberately <a href="https://learningloop.io/plays/workshop-exercise/ideas-first-patterns-later">separates idea generation from psychological framing</a>.</p><p><strong>Goal:</strong> Generate solutions grounded in user context first, then use <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">psychological principles</a> to sharpen and strengthen them.</p><p><strong>Steps:</strong></p><ol><li>Start by restating the prioritized target behavior and the key barrier identified during journey mapping. Keep this visible throughout the exercise.</li><li>Then give the team a short, focused ideation window (10–15 minutes).<br></br>The rule here is simple: no references to behavioral models, cognitive biases, or persuasive patterns yet. Ideas should come directly from the user context, constraints, and moments uncovered earlier.</li><li>Collect ideas on a shared surface and group similar concepts. Look for multiple ways of solving the same underlying problem (cluster them together).</li><li><p>Only now do you introduce a library of psychological principles and techniques. I developed the <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">persuasive patterns</a> for this exact purpose. The goal of this step is not to replace ideas, but to refine them:</p><ul><li>Which ideas could be strengthened by reducing friction?</li><li>Which might benefit from clearer feedback, social signals, or better timing?</li><li>Are there alternative ways to achieve the same effect more respectfully or more clearly?</li></ul><p>Patterns are used as lenses, not prescriptions. If a pattern does not improve clarity, agency, or usefulness in this context, it is simply ignored.</p></li></ol><p><strong>Output:</strong> A refined set of solution concepts that are grounded in real user context and supported, where appropriate, by behavioral principles rather than driven by them.</p><p>This sequencing helps teams avoid “pattern-first design,” where ideas are reverse-engineered to fit a theory instead of addressing real human situations.</p><h3 id="exercise-5-dark-reality">Exercise 5: Dark Reality</h3><p>Before ideas turn into experiments or shipped features, they need one final test. Not for feasibility or metrics, but for <a href="https://learningloop.io/plays/workshop-exercise/dark-reality">ethics</a>.</p><p>Over the years, this step has proven critical. Many persuasive solutions only reveal their downside when you imagine them working too well, or being applied in the wrong hands, or used on the wrong day by the wrong person.</p><p><strong>Goal:</strong> Surface ethical risks, unintended consequences, and potential misuse before implementation.</p><p><strong>Steps:</strong></p><ol><li>Take one or two of the strongest ideas from the previous exercise.</li><li>Imagine worst-case scenarios by asking the team to deliberately shift perspective:<ul><li>What if a competitor used this against us?</li><li>What if this nudges users when they’re stressed, tired, or vulnerable?</li><li>What happens if this works repeatedly over months, not once?</li><li>Could this create pressure, guilt, or dependence?</li></ul></li><li>Capture concerns around autonomy, trust, fairness, inclusivity, or long-term well-being.</li><li>For each risk, explore ways to soften or counterbalance the effect:<ul><li>Clearer intent or transparency,</li><li>Lower frequency or gentler timing,</li><li>Explicit opt-outs,</li><li>Alternative paths forward.</li></ul></li><li>Some ideas are reshaped. Some are paused.<br></br>Some survive intact, but now with greater confidence.</li></ol><p><strong>Output:</strong> Solutions that have been stress-tested ethically, with known risks acknowledged and mitigated rather than ignored.</p><p>The teams that get the most out of behavioral design rarely have a single “psychology expert.” Instead, their team shares a vocabulary around product psychology and knows how to communicate around customer problem behaviorally.</p><blockquote>A shared vocabulary turns psychology into cross-functional work.</blockquote><p>When patterns and principles are shared:</p><ul><li>Product, design, engineering, and marketing can talk about behavior without talking past each other.</li><li>Discovery insights are easier to interpret because common barriers and drivers have names.</li><li>Ideas can be framed as <strong>behavioral hypotheses</strong> (“we believe this will increase early competence…”) instead of vague guesses.</li></ul><p>The <a href="https://learningloop.io/playbook-collections/persuasive-patterns/">Persuasive Patterns</a> collection grew from this need: giving teams a common language and a concrete set of examples to point at. Whether used as a printed deck in a workshop or as long-form references during everyday work, the goal is the same: make product psychology something the whole team can see and discuss.</p><p>Persuasive design was often framed as a bag of tricks. Today, the work looks different:</p><ul><li>Game mechanics are used to support <strong>intrinsic motivation</strong>, not drive vanity engagement.</li><li>Frameworks like COM-B and systems thinking help teams see <strong>behavior in context</strong>, not as a single trigger.</li><li>Behavioral insight is used to shape <strong>discovery and ideation</strong>, not just last-minute copy changes.</li><li><strong>Ethics</strong> is part of the design brief, not an afterthought.</li></ul><p>The next step is not more sophisticated nudges. It is a more systematic practice: simple methods, shared language, and a habit of asking <em>“What is really going on in our users’ lives here?”</em></p><p>If you start by focusing on one behavioral problem, use a couple of the exercises in this article, and give your team a shared set of patterns to reference, you are already practicing persuasive design in the way it has evolved over the last ten years: grounded in evidence, respectful of users, and aimed at outcomes that matter on both sides of the screen.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Human Strategy In An AI-Accelerated Workflow</h1>
<p>hello@smashingmagazine.com (Carrie Webster) — Fri, 06 Mar 2026 08:00:00 GMT</p>
<h1>Human Strategy In An AI-Accelerated Workflow — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>10 min read</li><li><a href="http://www.smashingmagazine.com/category/workflow">Workflow</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a>,
<a href="http://www.smashingmagazine.com/category/ux">UX</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>UX design is entering a new phase, with designers shifting from makers of outputs to directors of intent. AI can now generate wireframes, prototypes, and even design systems in minutes, but UX has never been only about creating interfaces. It’s about navigating ambiguity, advocating for humans in systems optimised for efficiency, and solving their problems through thoughtful design.</section></p><p>I’ve been working in User Experience design for more than twenty years. Long enough to have seen the many job titles, from when stakeholders asked us to “just make it pretty” to when wireframes were delivered as annotated PDFs. I’ve seen many tools come and go over the years, methodologies rise and fall, and entire platforms disappear.</p><p>Yet, nothing has unsettled designers quite like AI.</p><p>When generative AI tools first entered my workflow, my reaction wasn’t excitement — it was <strong>unease</strong>, with a little bit of <strong>curiosity</strong>. Watching an interface appear in seconds, complete with sensible spacing, readable typography, and halfway-decent copy, triggered a very real fear: <em>If a machine can do this, where does that leave me?</em></p><p>That fear is now widespread. Designers at every level ask the same question, often quietly, <em>“Will an AI agent replace me by next week/month/year?”</em> While the difference between next week and next year seems a lot, it depends on where you are in your career and the speed at which your employer chooses to engage with AI tools. I have been lucky in several roles to be working with organisations that haven’t allowed the use of AI tools due to data security concerns. If you’re interested in any of these conversations, you can view the discussions happening on platforms like <a href="https://www.reddit.com/r/UXDesign/comments/1oqs2k8/in_reality_how_bad_is_the_ai_replacement/">Reddit</a>.</p><p>Fearing the takeover of AI in our roles is not irrational. We’re seeing AI generate wireframes, prototypes, personas, usability summaries, accessibility suggestions, and entire design systems. Tasks that once took days can now literally take minutes.</p><p>Here’s the uncomfortable truth: If your role is largely about producing artefacts, drawing buttons, aligning components, or translating instructions into screens, then parts of that work are already being automated.</p><p>Still, UX design has <em>never</em> truly been about just creating a user interface.</p><blockquote>UX is about navigating ambiguity. It’s about advocating for humans in systems optimised for efficiency. It’s about translating messy human needs and equally messy business goals into experiences that feel coherent, fair, sensible, and usable. It’s about solving human problems by creating a useful and effective user experience.</blockquote><p>AI isn’t replacing that work. Rather, it’s amplifying everything <em>around</em> it. The real shift happening is that designers are moving from being <strong>makers of outputs</strong> to <strong>directors of intent</strong>. From creators to curators. From hands-on executors to strategic decision-makers. That feels exciting to me. And the creativity and ingenuity this brings to the world of UX.</p><p>And that shift doesn’t reduce our value as UX designers, but it does redefine it.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="what-ai-does-better-than-us-the-boring-stuff">What AI Does Better Than Us (The “Boring” Stuff)</h2><p>Let’s be clear, AI <em>is</em> better than humans at certain aspects of design work. Fighting that reality only keeps us stuck in fear.</p><h3 id="speed-and-volume">Speed And Volume</h3><p>AI is exceptionally good at generating large volumes of ideas quickly. For example, layout variations, copy options, component structures, and onboarding flows can all be produced in seconds. In early-stage design, this changes everything. Instead of spending hours sketching three concepts, you can review thirty. That doesn’t eliminate creativity but does expand the playground.</p><p><a href="https://www.mckinsey.com/capabilities/tech-and-ai/our-insights/the-economic-potential-of-generative-ai-the-next-productivity-frontier">McKinsey estimates</a> that generative AI can reduce the time spent on creative and design-related tasks by up to <strong>70%</strong>, particularly during ideation and exploration phases.</p><figure><a href="https://www.mckinsey.com/capabilities/tech-and-ai/our-insights/the-economic-potential-of-generative-ai-the-next-productivity-frontier#/"></img></a><figcaption>McKinseys report on generative AI. (Image source: <a href="https://www.mckinsey.com/capabilities/tech-and-ai/our-insights/the-economic-potential-of-generative-ai-the-next-productivity-frontier#/">McKinsey</a>) (<a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/1-mckinseys-report-generative-ai.png">Large preview</a>)</figcaption></figure><p>AI can also help with the research side of UX, for example, exploring the habits of a certain demographic, and <a href="https://persona.qcri.org/blog/what-is-an-ai-generated-persona/"><strong>creating personas</strong></a>. While this can reduce research time required, the designer is still required to guardrail this by providing accurate prompts and <a href="https://uxpsychology.substack.com/p/the-problem-with-ai-generated-personas"><strong>reviewing generated responses</strong></a>. I have personally found that using AI to assist with the initial research for design projects is incredibly useful, specifically when there is limited time and access to users.</p><h3 id="consistency-and-rule-adherence">Consistency And Rule Adherence</h3><p>Design systems live or die by consistency. AI excels at following rules relentlessly, colour tokens, spacing systems, typography scales, and accessibility standards. It doesn’t forget. It doesn’t get tired. It doesn’t “eyeball it.”</p><p>AI’s precision makes it incredibly valuable for maintaining large-scale design systems, especially in enterprise or government environments where consistency and compliance matter more than novelty. This is one component of my UX role that I am happy to hand over to AI to manage!</p><h3 id="data-processing-at-scale">Data Processing At Scale</h3><p>AI can analyse behavioural data at volumes challenging, if not impossible, for a human team to reasonably process. User journey paths, scroll depth, heatmaps to identify mouse interactions, conversion funnels — AI can identify patterns and anomalies almost instantly.</p><p>Behavioural analytics platforms increasingly rely on AI to surface insights that designers might otherwise miss. <a href="https://contentsquare.com/guides/behavior-analytics/">Contentsquare</a>, an AI-powered analytics platform, talks about the impacts and benefits of utilising behavioural analytics data. I’ve always said that quantitative data tells us the “what”, and qualitative data tells us the “why”. This is the human component of research where we get to connect with the users to understand the reason driving the behaviour.</p><figure><a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/2-session-replay-tool-display.png"></img></a><figcaption>An example of a session replay tool display. (Image Source: <a href="https://contentsquare.com/guides/behavior-analytics/">Contentsquare</a>) (<a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/2-session-replay-tool-display.png">Large preview</a>)</figcaption></figure><p>The key insight here is simple: <strong>Analysing large volumes of behavioural data was never where our highest value lay</strong>.</p><p>If AI can take on repetitive production, system enforcement, and raw data analysis, designers would be free to focus on interpretation, judgment, and human meaning, the hardest parts of the job.</p><h2 id="what-humans-do-better-than-ai-the-heart-stuff">What Humans Do Better Than AI (The “Heart” Stuff)</h2><p>For all its power, AI has a fundamental limitation: it has never and will never be human.</p><h3 id="empathy-is-lived-experience">Empathy Is Lived Experience</h3><p>AI can describe frustration. It can summarise user feedback. It can mimic empathetic language. But it has never <em>felt</em> the quiet rage of a broken form, the anxiety of submitting sensitive data, or the shame of not understanding an interface that assumes too much.</p><p>Empathy in UX isn’t a dataset. It’s a <strong>lived, embodied understanding of human vulnerability</strong>. This is why user interviews still matter. Why contextual inquiry still matters. Why designers who deeply understand their users consistently make better decisions.</p><p>In a previous role where I was designing an incredibly complex fraud alert platform, the key to successful outcomes of that design was based on my understanding of the variety of issues faced by customers. I accessed this information directly from members of the customer-facing team. This information was stored in their brain and based on direct experience with customers. No AI could know or access these goldmines of human experiences.</p><p>As the <a href="https://www.nngroup.com/articles/definition-user-experience/">Nielsen Norman Group</a> reminds us, good UX design is not about interfaces. It’s about <strong>communication</strong> and <strong>understanding</strong>.</p><h3 id="ethics-require-judgment">Ethics Require Judgment</h3><p>AI optimises for the objectives we give it. If the goal is engagement, it will try to maximise engagement — regardless of long-term harm.</p><p>It doesn’t inherently recognise dark patterns, manipulation, or emotional exploitation. Infinite scroll, variable rewards, and addictive loops are all patterns AI can enthusiastically optimise unless a human intervenes.</p><p><a href="https://www.humanetech.com/the-cht-perspective">The Center for Humane Technology</a> has documented how algorithmic optimisation can unintentionally undermine wellbeing.</p><p>Ethical UX design requires designers who can say, <em>“We could do this, but we shouldn’t.”</em></p><figure><a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/3-ethical-design-choices.png"></img></a><figcaption>Ethical design choices require human review. (Image source: <a href="https://uxdesign.cc/considerations-and-responsibilities-for-ethical-designers-829450fcb972">Medium</a>) (<a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/3-ethical-design-choices.png">Large preview</a>)</figcaption></figure><h3 id="strategy-lives-in-context">Strategy Lives In Context</h3><p>AI doesn’t sit in stakeholder meetings. It doesn’t hear what’s implied but not stated. It doesn’t understand organisational politics, regulatory nuance, or long-term positioning.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aDesigners%20act%20as%20translators%20between%20business%20intent%20and%20human%20impact.%20That%20translation%20relies%20on%20trust,%20relationships,%20and%20context,%20not%20pattern%20recognition.%0a&url=https://smashingmagazine.com%2f2026%2f03%2fhuman-strategy-ai-accelerated-workflow%2f">Designers act as translators between business intent and human impact. That translation relies on trust, relationships, and context, not pattern recognition.</a></p></blockquote><p>This is why senior designers increasingly operate at the intersection of product, strategy, and culture.</p><p><strong>The lesson is clear:</strong> As AI takes over execution, human designers become the guardians of intent.</p><h2 id="how-the-daily-work-of-a-designer-is-changing">How The Daily Work Of A Designer Is Changing</h2><p>This shift isn’t theoretical. It’s already reshaping daily design practice.</p><h3 id="from-designing-to-prompting">From Designing To Prompting</h3><p>Designers are moving from manipulating pixels to articulating intent. Clear goals, constraints, and priorities become the input.</p><p>Instead of asking AI to “draw a dashboard,” the task becomes:</p><ul><li>“Create a dashboard that reduces cognitive load for first-time users.”</li><li>“Explore layouts optimised for accessibility and low vision.”</li></ul><p>Prompting isn’t about clever wording; it’s about clarity of thinking and <strong>understanding the intent of the outcomes</strong>. You may need to tweak your prompts as you go, but this is all part of the learning process of directing AI to deliver the outcomes needed.</p><figure><a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/4-design-screens.png"></img></a><figcaption>Four design screens created by Uizard Autodesigner, complete with user flow mapping. (Image source: <a href="https://uizard.io/blog/5-ai-generated-ui-designs/#5-ai-generated-ui-design-examples">Uizard.io</a>) (<a href="https://files.smashing.media/articles/human-strategy-ai-accelerated-workflow/4-design-screens.png">Large preview</a>)</figcaption></figure><h3 id="from-making-to-choosing">From Making To Choosing</h3><p>AI produces options. Designers make decisions.</p><p>A significant portion of future design work will involve reviewing, critiquing, and refining AI-generated outputs, and then selecting what best serves the user and aligns with ethical, business, and accessibility goals.</p><p>This mirrors how experienced designers already work: mentoring juniors, reviewing their concepts, and guiding direction, but at a much greater scale, given the sheer number of design options AI tools can generate.</p><h3 id="the-movie-director-metaphor">The Movie Director Metaphor</h3><p>I often describe the modern designer as a movie director. A director doesn’t operate the camera, build the set, or act every role, but they are responsible for the story, the emotional intent, and the audience experience.</p><p>AI tools are the crew. Designers are responsible for the meaning of the story.</p><h2 id="a-real-world-shift-what-this-looks-like-in-practice">A Real-World Shift: What This Looks Like In Practice</h2><p>To make this less abstract, let’s ground it in a familiar scenario.</p><p>Ten years ago, a designer might spend days producing wireframes for a new feature, carefully crafting each screen, annotating every interaction, and defending each decision in reviews. Much of the designer’s perceived value lived in the artefacts themselves.</p><p>Today, that same feature can be scaffolded in an afternoon with AI support. But here’s what hasn’t changed — the hard conversations.</p><p>The UX designer still has to ask:</p><ul><li><em>Who is this actually for?</em></li><li><em>What problem are we solving, and for whom?</em></li><li><em>What happens when this fails?</em></li><li><em>Who might this unintentionally exclude or disadvantage?</em></li></ul><p>In practice, I’ve seen senior designers spend less time inside design tools and more time facilitating workshops, synthesising messy inputs, mediating between stakeholders, and protecting user needs when trade-offs arise.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAI%20accelerates%20production,%20but%20it%20does%20not%20remove%20the%20designer%e2%80%99s%20responsibility.%20In%20fact,%20it%20increases%20it.%20When%20options%20are%20cheap%20and%20plentiful,%20discernment%20becomes%20a%20scarce%20skill.%0a&url=https://smashingmagazine.com%2f2026%2f03%2fhuman-strategy-ai-accelerated-workflow%2f">AI accelerates production, but it does not remove the designer’s responsibility. In fact, it increases it. When options are cheap and plentiful, discernment becomes a scarce skill.</a></p></blockquote><h2 id="conclusion-how-to-prepare-right-now">Conclusion: How To Prepare Right Now</h2><p><strong>Don’t panic — practice.</strong></p><p>Avoiding AI won’t preserve your relevance. Learning to use it thoughtfully will.</p><p>Start small:</p><ul><li>Explore <a href="https://www.figma.com/ai/"><strong>Figma’s AI features</strong></a>.</li><li>Use AI for ideation, not final decisions.</li><li>Treat outputs as conversation starters, not answers.</li></ul><p>Confidence comes from familiarity, not avoidance.</p><p><strong>Invest In Human Skills.</strong></p><p>The most resilient designers will double down on:</p><ul><li>Psychology and behavioural science;</li><li>Communication and facilitation;</li><li>Ethics, accessibility, and inclusion;</li><li>Strategic thinking and storytelling.</li></ul><p>These skills compound over time, and they can’t be automated.</p><p><strong>The designer’s responsibility in an AI-accelerated world:</strong></p><p>There’s an uncomfortable implication in all of this that we don’t talk about enough: when AI makes it easier to design <em>anything</em>, designers become more accountable for what gets released into the world. Bad design used to be excused by constraints. Limited time, limited tools, limited data. Those excuses are disappearing. When AI removes friction from execution, the <strong>ethical and strategic responsibility</strong> lands squarely on human shoulders.</p><p>This is where UX designers can, and must, step up as stewards of quality, accessibility, and humanity in digital systems.</p><h3 id="final-thought">Final Thought</h3><p>AI won’t take your job. But a designer who knows how to think critically, direct intelligently, and collaborate effectively with AI might take the job of a designer who doesn’t.</p><p>The future of UX is no less human. It’s more intentional than ever.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Now Shipping: Accessible UX Research, A New Smashing Book By Michele Williams</h1>
<p>hello@smashingmagazine.com (Ari Stiles) — Tue, 03 Mar 2026 15:00:00 GMT</p>
<h1>Accessible UX Research, A New Smashing Book By Michele Williams — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>8 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/accessibility">Accessibility</a>,
<a href="http://www.smashingmagazine.com/category/smashing-books">Smashing Books</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Our newest Smashing Book, “Accessible UX Research” by Michele Williams, is finally shipping worldwide — and we couldn’t be happier! This book is about research, but you’ll also learn about assistive technology, different types of disability, and how to build accessibility into the entire design process. This thoughtful book will get you thinking about ways to make your UX research more inclusive and thorough, no matter your budget or timeline. <a href="#about-the-book">Jump to the book details</a> or <a data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-product-sku="accessible-ux-research" data-silent="true" href="http://www.smashingmagazine.com/printed-books/accessible-ux-research/">order your copy now.</a></section></div><p>Good UX research is at the root of great products. It takes the guesswork out of our designs and helps us solve problems before they grow. One of the best ways to make our research effective is to keep it inclusive — testing with users with different needs and abilities, and using their feedback to <strong>build products that work for more people</strong>.</p><p>Our newest book, <em>Accessible UX Research</em>, can help you plan and execute great user research. Dr. Michele Williams draws from years of experience to build a clear, easy-to-follow roadmap. This book has something for everyone who wants to build digital products well:</p><ul><li>If you are <strong>just getting started with research</strong>, you will find helpful tips for making your research more inclusive. You will also get a primer on how to ask better questions, understand your own biases, and how to use your limited time and budget effectively.</li><li>If you are an <strong>accessibility-minded professional</strong>, you will find a deep well of details on different assistive technologies, how to include them in your testing environment, and ways to record and share your results to create a real impact on the products you make.</li><li>If you are a <strong>developer</strong>, a <strong>manager</strong>, or just <strong>someone who wants to understand</strong> how different abilities impact each user’s experience, you will find the history, clear descriptions, and cultural touchpoints you need in order to make sense of all the accessibility and inclusion recommendations you encounter.</li></ul><figure><a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-coffee.png" title="Tap for a large preview of the book."></img></a></figure><h2 id="about-the-book">About The Book</h2><p>The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a <strong>practical guide to inclusive UX research</strong>, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.</p><p>Inside, you’ll learn how to:</p><ul><li><strong>Plan research</strong> that includes disabled participants from the start,</li><li><strong>Recruit participants</strong> with disabilities,</li><li><strong>Facilitate sessions</strong> that work for a range of access needs,</li><li><strong>Ask better questions</strong> and avoid unintentionally biased research methods,</li><li><strong>Build trust and confidence</strong> in your team around accessibility and inclusion.</li></ul><p>The book also challenges common assumptions about disability and urges readers to <strong>rethink what inclusion really means</strong> in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.</p><p><em>324 pages. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. <a href="https://smashed.by/accessibleresearchsample"><strong>Download a free sample</strong></a> (PDF, 2.3MB) or <a data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-product-sku="accessible-ux-research" data-silent="true" href="http://www.smashingmagazine.com/printed-books/accessible-ux-research/">get the book right away.</a></em></p><p><em>Please note: We’ve found a way to get printed books to our US customers! After several months of dealing with customs and tariff issues, we are happy to announce that all of our books — including this brand-new one — are once again <strong>shipping worldwide</strong>.</em></p><figure><a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-24-opt.png" title="Tap for a large preview."></img></a><figcaption>With a foreword by Jared Smith of WebAIM and an extensive interview with a disabled researcher, “Accessible UX Research” brings together insights from throughout the Accessibility community. Photo by Marc Thiele. (<a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-24-opt.png">Large preview</a>)</figcaption></figure><figure><a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-44-opt.png" title="Tap for a large preview."></img></a><figcaption>The book includes tips and strategies to help anyone doing research at any point in the product design cycle. Photo by Marc Thiele. (<a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-44-opt.png">Large preview</a>)</figcaption></figure><h2 id="contents">Contents</h2><p>In <em>Accessible UX Research</em>, Michele Williams takes you on a deep dive into the <strong>real world of UX research</strong>, with a roadmap for including users with different abilities and needs.</p><div aria-multiselectable="true" id="TOC"><dl data-handler="Accordion"><dt aria-expanded="false" id="accordion-item-0" tabindex="0"><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-0"><p>For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</p></dd><dt aria-expanded="false" id="accordion-item-1" tabindex="0"><div><p>2. Diversity of Disability</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-1"><p>Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</p></dd><dt aria-expanded="false" id="accordion-item-2" tabindex="0"><div><p>3. Disability in the Stages of UX Research</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-2"><p>Disabled participants can and should be part of every research phase — formative, prototype, and summative.</p></dd><dt aria-expanded="false" id="accordion-item-3" tabindex="0"><div><p>4. Recruiting Disabled Participants</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-3"><p>Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</p></dd><dt aria-expanded="false" id="accordion-item-4" tabindex="0"><div><p>5. Designing Your Research</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-4"><p>While our goal is to influence accessible products, our research execution must also be accessible.</p></dd><dt aria-expanded="false" id="accordion-item-4" tabindex="0"><div><p>6. Facilitating An Accessible Study</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-4"><p>Preparation and communication with your participants can ensure your study logistics run smoothly.</p></dd><dt aria-expanded="false" id="accordion-item-4" tabindex="0"><div><p>7. Analyzing and Reporting with Accuracy and Impact</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-4"><p>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.</p></dd><dt aria-expanded="false" id="accordion-item-4" tabindex="0"><div><p>8. Disability in the UX Research Field</p></div><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-4"><p>Inclusion isn’t just for research <em>participants</em>, it’s important for our <em>colleagues</em> as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</p></dd><dt aria-expanded="false" id="accordion-item-4" tabindex="0"><p><span>+</span></p></dt><dd aria-hidden="true" id="accordion-desc-4"><p>In the appendix, you’ll find helpful summaries and tips to optimize your testing environment and your interactions with participants.</p></dd><span></span></dl></div><figure><a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-27-opt.png" title="Tap for a large preview."></img></a><figcaption>You’ll find plenty of useful references in the appendix at the end of the book. You’ll refer to these pages again and again. Photo by Marc Thiele. (<a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-27-opt.png">Large preview</a>)</figcaption></figure><h2 id="about-the-author">About the Author</h2><p><a href="https://mawconsultingllc.com/"></img></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.</p><h2 id="testimonials">Testimonials</h2><blockquote></img>“<em>Accessible UX Research</em> stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a <strong>solid framework</strong> for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.<p>This is <strong>the book I wish I had</strong> when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”</p><p>Eric Bailey, Accessibility Advocate</p></blockquote><blockquote></img>“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a <strong>critical piece in the puzzle</strong> of actually doing and integrating that research into accessibility work day to day.”<p>Devon Pershing, Author of <em>The Accessibility Operations Guidebook</em></p></blockquote><blockquote></img>“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the <strong>depth of human experience</strong>. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”<p>Manuel Matuzović, Author of the <em>Web Accessibility Cookbook</em></p></blockquote><blockquote></img>“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A <strong>strong focus on real-world application</strong> equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”<p>Anna E. Cook, Accessibility and Inclusive Design Specialist</p></blockquote><h2 id="technical-details">Technical Details</h2><ul><li>ISBN: <span>978-3-910835-03-0</span> (print)</li><li><strong>Quality hardcover</strong>, stitched binding, ribbon page marker.</li><li>Free worldwide airmail <strong>shipping from Germany</strong>.</li><li>eBook available for download as <strong>PDF, ePUB, and Amazon Kindle</strong>.</li></ul><figure><a href="https://files.smashing.media/articles/accessible-ux-research-release/accessible-ux-research-09-opt.png" title="Tap for a large preview of the book."></img></a></figure><p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em></a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p><h2 id="more-smashing-books-and-goodies">More Smashing Books & Goodies</h2><p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p><p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="http://www.smashingmagazine.com/printed-books/">printed books that stand the test of time</a>. Trine, Heather, and Steven are three of these people. Have you checked out their books already?</p><div><figure><div><a href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/">The Ethical Design Handbook</a></h4><p>A practical guide on ethical design for digital products.</p><p><a data-component="AddToCart" data-product-path="/printed-books/ethical-design-handbook/" data-product-sku="ethical-design-handbook" href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/">Add to cart <span>$44</span></a></p></figcaption></figure><figure><div><a href="http://www.smashingmagazine.com/printed-books/understanding-privacy/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/understanding-privacy/">Understanding Privacy</a></h4><p>Everything you need to know to put your users first and make a better web.</p><p><a data-component="AddToCart" data-product-path="/printed-books/understanding-privacy/" data-product-sku="understanding-privacy" href="http://www.smashingmagazine.com/printed-books/understanding-privacy/">Add to cart <span>$44</span></a></p></figcaption></figure><figure><div><a href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4><p>Learn how touchscreen devices really work — and how people really use them.</p><p><a data-component="AddToCart" data-product-path="/printed-books/touch-design-for-mobile-interfaces/" data-product-sku="touch-design-for-mobile-interfaces" href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Add to cart <span>$44</span></a></p></figcaption></figure></div><div></img>
<span>(cm, il)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Getting Started With The Popover API</h1>
<p>hello@smashingmagazine.com (Godstime Aburu) — Mon, 02 Mar 2026 10:00:00 GMT</p>
<h1>Getting Started With The Popover API — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>15 min read</li><li><a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/html">HTML</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>What happens if you rebuild a single tooltip using the browser’s native model without the aid of a library? The Popover API turns tooltips from something you simulate into something the browser actually understands. Opening and closing, keyboard interaction, Escape handling, and much of the accessibility now come from the platform itself, not from ad-hoc JavaScript.</section></p><p>Tooltips feel like the smallest UI problem you can have. They’re tiny and usually hidden. When someone asks how to build one, the traditional answer almost always comes back using some JavaScript library. And for a long time, that was the sensible advice.</p><p>I followed it, too.</p><p>On the surface, a tooltip is simple. Hover or focus on an element, show a little box with some text, then hide it when the user moves away. But once you ship one to real users, the edges start to show. Keyboard users <code>Tab</code> into the trigger, but never see the tooltip. Screen readers announce it twice, or not at all. The tooltip flickers when you move the mouse too quickly. It overlaps content on smaller screens. Pressing <code>Esc</code> does not close it. Focus gets lost.</p><p>Over time, my tooltip code grew into something I didn’t really want to own anymore. Event listeners piled up. Hover and focus had to be handled separately. Outside clicks needed special cases. ARIA attributes had to be kept in sync by hand. Every small fix added another layer of logic.</p><p>Libraries helped, but they were also more like black boxes I worked around instead of fully understanding what was happening behind the scenes.</p><p>That was what pushed me to look at the newer <a href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute">Popover API</a>. I wanted to see what would happen if I rebuilt a single tooltip using the browser’s native model without the aid of a library.</p><p>As we start, it’s worth noting that, as with any new feature, there are some things with it that are still being ironed out. That said, it currently enjoys great browser support, although there are several pieces to the overall API that are in flux. It’s worth keeping an eye on <a href="https://caniuse.com/?search=popover+api">Caniuse</a> in the meantime.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><p>Before the Popover API, using a tooltip library was not a shortcut. It was the default. Browsers didn’t have a native concept of a tooltip that worked across mouse, keyboard, and assistive technology. If you cared about correctness, your only option was to use a library, and that is exactly what I did.</p><p>At a high level, the pattern was always the same: a trigger element, a hidden tooltip element, and JavaScript to coordinate the two.</p><div><pre><code><button class="info">?</button>
<div class="tooltip" role="tooltip">Helpful text</div>
</code></pre></div><figure><a href="https://files.smashing.media/articles/getting-started-popover-api/1-popover-api.png"></img></a><figcaption>The old approach required ~60 lines of JavaScript with five event listeners and manual state management. The new approach is about 10 lines of declarative HTML with zero event listeners. (<a href="https://files.smashing.media/articles/getting-started-popover-api/1-popover-api.png">Large preview</a>)</figcaption></figure><p>The library handled the wiring that allowed the element to show on hover or focus, hide on blur or mouse leave, and reposition/resize on scroll.</p><figure><p></p></figure><p>None of it was accidental. It was merely compensating for gaps in web platform features.</p><h2 id="why-i-used-a-library">Why I Used A Library</h2><p>The library was doing real work for me: positioning, flipping at viewport edges, event coordination across input types, and scroll awareness inside complex layouts. Positioning alone justified the dependency. Handling scroll containers, transforms, and responsive layouts correctly is not simple.</p><p>The real issues showed up in <strong>accessibility behavior</strong>, not visuals. The tooltip worked, but not all the time. Here’s where things started to fray at the seams:</p><ul><li>Tooltips sometimes appeared late or not at all.</li><li>Tabbing quickly could skip them entirely.</li><li>Escape dismissal was not reliable.</li></ul><figure><p></p><figcaption>Keyboard navigation with the old implementation: Tabbing quickly causes tooltips to be skipped entirely, and Escape dismissal is unreliable.</figcaption></figure><p>I also ran into issues trying to sync hover and focus behavior:</p><ul><li>Mouse users expect immediacy.</li><li>Keyboard users expect predictability.</li><li>Supporting both meant delays and edge cases.</li></ul><figure><p></p><figcaption>This timing mismatch creates an inconsistent experience across input methods.</figcaption></figure><p>Not to mention, there were issues with <strong>assistive technologies</strong>, particularly screen readers: Sometimes the tooltip was announced, sometimes it wasn’t, and sometimes it was announced twice.</p><figure><p></p><figcaption>Screen reader behavior with custom tooltips.</figcaption></figure><p>Keeping ARIA attributes in sync required manual updates. Miss one state change, and the tooltip became confusing or invisible to the accessibility tree.</p><h2 id="this-was-not-bad-code">This Was Not Bad Code</h2><p>The implementation was tested, the library was solid, and the behavior was reasonable given the tools available at the time.</p><blockquote>The core problem was not the code. It was that the web platform lacked proper affordances.</blockquote><p>For example, the browser has no real way of knowing that the element was a tooltip. Everything was built from conventions: generic elements, event listeners, manually-managed ARIA, and custom dismissal logic.</p><figure><a href="https://files.smashing.media/articles/getting-started-popover-api/2-before-after-popover-api.png"></img></a><figcaption>Before: A tangled web of event listeners, state management, and manual ARIA updates. After: The browser understands the relationship declaratively. (<a href="https://files.smashing.media/articles/getting-started-popover-api/2-before-after-popover-api.png">Large preview</a>)</figcaption></figure><p>Over time, the tooltip could become fragile. Small changes carried risk. Minor fixes caused regressions. Worse, adding new tooltips inherited the same complexity. Things technically worked, but never felt settled or complete.</p><p>That was the state of things when I decided to rebuild the tooltip using the browser’s native <a href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute">Popover API</a>.</p><h2 id="the-moment-i-tried-the-popover-api">The Moment I Tried The Popover API</h2><p>I didn’t switch to using the Popover API because I wanted to experiment with something new. I switched because I was tired of maintaining tooltip behavior that I believed the browser should have already understood.</p><p>I was skeptical at first. Most new web APIs promise simplicity, but still require glue, edge-case handling, or fallback logic that quietly recreates the same complexity that you were trying to escape.</p><p>So, I tried the Popover API in the smallest way possible. Here’s what that looked like:</p><div><pre><code><!-- popovertarget creates the connection to id="tip-1" -->
<button popovertarget="tip-1">?</button>

<!-- popover="manual": browser manages this as a popover -->
<!-- role="tooltip": tells assistive technology what this is -->
<div id="tip-1" popover="manual" role="tooltip">
  This button triggers a helpful tip.
</div>
</code></pre></div><figure><p></p><figcaption>The complete tooltip implementation using the Popover API</figcaption></figure><p>No event listeners. No state tracking. No ARIA updates handled in JavaScript. I focused the button, and the tooltip appeared. I pressed the <code>Esc</code> key, and it disappeared.</p><p>A few things became obvious within minutes:</p><h3 id="i-didn-t-write-any-javascript-to-open-or-close-it">I Didn’t Write Any JavaScript To Open Or Close It</h3><p>The browser handled invocation entirely through HTML. The relationship between trigger and tooltip was explicit.</p><h3 id="the-esc-key-just-worked">The <code>Esc</code> Key Just Worked</h3><p>I didn’t add a key listener. Pressing the <code>Esc</code> key properly closed the tooltip because the browser understands that popovers should be dismissible.</p><h3 id="aria-state-automatically-synced">ARIA State Automatically Synced</h3><p>The <code>aria-expanded</code> attribute updated on its own when the popover opened and closed. There was no need for manual bookkeeping and no risk of stale state.</p><figure><p></p><figcaption>The browser’s DevTools showing <code>aria-expanded</code> automatically updating from <code>false</code> to <code>true</code> as the popover opens.</figcaption></figure><p>This was the moment that the Popover API stopped feeling like a convenience and more like true bona fide platform behavior.</p><p>What surprised me most was not the reduced code but the <strong>change in responsibility</strong>. Before, the tooltip existed because my JavaScript said so. Now, it exists because the browser understands what it is supposed to be and its role in the markup. The tooltip is no longer simply a box positioned near a button anymore, but participating in the browser’s focus model, the accessibility tree, and native dismissal rules.</p><p>That’s when my migration to the Popover API started.</p><h3 id="understanding-invoker-commands">Understanding Invoker Commands</h3><p>The <code>popovertarget</code> and <code>popovertargetaction</code> attributes are part of HTML’s invoker commands, a declarative way to control interactive elements without JavaScript.</p><ul><li><code>popovertarget="id"</code>: Connects the button to a popover element.</li><li><code>popovertargetaction</code>: Specifies what should happen:<ul><li><code>show</code>: Only opens the popover.</li><li><code>hide</code>: Only closes the popover.</li><li><code>toggle</code>(default): Opens the popover if closed and closes it if it’s open.</li></ul></li></ul><p>This means you can have multiple triggers for the same tooltip:</p><div><pre><code><button popovertarget="help-tip" popovertargetaction="show">
  Show Help
</button>

<button popovertarget="help-tip" popovertargetaction="hide">
  Close Help
</button>

<div id="help-tip" popover="manual" role="tooltip">
  Help content
</div>
</code></pre></div><p>The browser coordinates everything with no JavaScript needed for the basic interaction.</p><h2 id="free-accessibility-wins">Free Accessibility Wins</h2><p>This is the part that made me switch completely. I expected the Popover API to reduce code. I didn’t expect it to remove entire categories of accessibility bugs I had been chasing for years. Before the migration, my tooltip system looked fine at the very least. Keyboard support existed, ARIA attributes were present, and screen readers usually behaved accordingly. But “usually” did a lot of heavy lifting.</p><p>Once I swapped in native popovers, three things changed immediately.</p><figure><a href="https://files.smashing.media/articles/getting-started-popover-api/3-accessibility-tree-comparison.png"></img></a><figcaption>Custom implementations use fragile JavaScript to connect triggers and tooltips. The Popover API creates a native browser connection that assistive technology can trust. (<a href="https://files.smashing.media/articles/getting-started-popover-api/3-accessibility-tree-comparison.png">Large preview</a>)</figcaption></figure><h3 id="1-the-keyboard-just-works">1. The Keyboard “Just Works”</h3><p>Keyboard support depended on multiple layers lining up correctly: focus had to trigger the tooltip, blur had to hide it, <code>Esc</code> had to be wired manually, and timing mattered. If you missed one edge case, the tooltip would either stay open too long or disappear before it could be read.</p><p>With the <code>popover</code> attribute set to <code>auto</code> or <code>manual</code>, the browser takes over the basics: <code>Tab</code> and <code>Shift</code>+<code>Tab</code> behave normally, <code>Esc</code> closes the tooltip every time, and no extra listeners are required.</p><pre><code><div popover="manual">
  Helpful explanation
</div>
</code></pre><p>What disappeared from my codebase were global keydown handlers, <code>Esc</code>-specific cleanup logic, and state checks during keyboard navigation. The keyboard experience stopped being something I had to maintain, and it became a browser guarantee.</p><h3 id="2-screenreader-predictability">2. Screenreader Predictability</h3><p>This was the biggest improvement. Even with careful ARIA work, the behavior varied, as I outlined earlier. Every small change felt risky. Using a popover with a proper role looks and feels a lot more stable and predictable as far as what’s going to happen:</p><pre><code><div popover="manual" role="tooltip">
  Helpful explanation
</div>
</code></pre><p>And here’s another win: After the switch, <a href="https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/">Lighthouse</a> stopped flagging incorrect ARIA state warnings for the interaction, largely because there are no longer custom ARIA states for me to accidentally get wrong.</p><figure><a href="https://files.smashing.media/articles/getting-started-popover-api/4-manual-aria-popover-api.png"></img></a><figcaption>Before the migration, Lighthouse flagged accessibility warnings about incorrect ARIA state management. After switching to the Popover API, the audit score improved. (<a href="https://files.smashing.media/articles/getting-started-popover-api/4-manual-aria-popover-api.png">Large preview</a>)</figcaption></figure><h3 id="3-focus-management">3. Focus Management</h3><p>Focus used to be fragile. Before, I had rules like: let focus trigger show tooltip, move focus into tooltip and don’t close, blur trigger when it’s too close, and close tooltip and restore focus manually. This worked until it didn’t.</p><p>With the Popover API, the browser enforces a simpler model where focus can more naturally move into the popover. Closing the popover returns focus to the trigger, and there are no invisible focus traps or lost focus moments. And I didn’t add focus restoration code; I removed it.</p><figure><p></p><figcaption>Tab to focus the trigger, the tooltip appears, press <code>Escape</code> to dismiss, and focus automatically returns to the trigger.</figcaption></figure><h2 id="where-the-popover-api-maybe-still-isn-t-enough">Where The Popover API Maybe Still Isn’t Enough</h2><p>As much as the Popover API has simplified my code and improved semantics, it still has not completely eliminated JavaScript. That’s not totally a bad thing because what’s changed is that JavaScript is no longer a key dependency. I am no longer compensating for missing platform behavior anymore. I am much more focused on <em>intent</em>.</p><p>Here are a few places where I could see the API continue to improve.</p><h3 id="tooltip-timing-still-matters">Tooltip Timing Still Matters</h3><p>Native popovers open and close immediately. That is usually the expected behavior, but not always ideal for what we consider to be tooltips. In those cases, instant dismissal can feel unstable when you move your mouse a few pixels too quickly or accidentally brush past the trigger — the tooltip will flash, then disappear, which can be jarring.</p><p>I want to be able to control that timing and apply delays between hover or focus and opening the tooltip. So I still add small delays. What changed was how much of the interaction logic I actually needed to own. Before, even basic open and close behavior required JavaScript. With the Popover API, and especially with HTML invoker commands, that responsibility shifts back to the browser.</p><pre><code><button
  popovertarget="help-tip"
  popovertargetaction="show">
  ?
</button>

<div id="help-tip" popover="manual" role="tooltip">
  This button triggers a helpful tip.
</div>
</code></pre><p>At this point, the browser handles invocation, dismissal, and ARIA state on its own. There’s no JavaScript involved just to make the tooltip appear or disappear.</p><p>JavaScript only comes back in when I want intentional behavior. In this case, a short delay before hiding the tooltip, and cancelling if the pointer moves into it. This isn’t about accessibility fixes. It’s about human behavior.</p><p>It’s worth noting that CSS is beginning to explore this space as well. The emerging interest/invoker work introduces <a href="https://css-tricks.com/a-first-look-at-the-interest-invoker-api-for-hover-triggered-popovers/#aa-interest-delay-and-the-css-of-it-all">ways to express entry and exit delays directly in CSS</a>, which could remove this small bit of JavaScript entirely. For now, I still handle it imperatively, but the direction of the platform is clear.</p><pre><code>let hideTimeout;

const show = () => {
  clearTimeout(hideTimeout);
  tooltip.showPopover();
};

const hide = () => {
  hideTimeout = setTimeout(() => {
    tooltip.hidePopover();
  }, 200);
};
</code></pre><p>The difference is that this logic stays small and local. It no longer defines how the tooltip works. It simply refines how it feels.</p><h3 id="hover-intent-with-invoker-commands">Hover Intent With Invoker Commands</h3><p>The browser does not know why someone hovers over an element or focuses on it. Was it intentional, or was the pointer just passing through? That part has always required some judgment.</p><p>What changed is where that logic lives. With invoker commands handling the core open and close behavior, JavaScript no longer owns the interaction model. It only adds intent on top of it.</p><pre><code><button
 popovertarget="help-tip"
 popovertargetaction="show">
  ?
</button>
</code></pre><p>The platform manages invocation, dismissal, and ARIA state. JavaScript is only needed when we want behavior that the browser cannot infer, such as a short delay before hiding or cancelling dismissal if the pointer moves into the tooltip.</p><pre><code>let hideTimeout;

const show = () => {
clearTimeout(hideTimeout);
  tooltip.showPopover();
};

const hide = () => {
  hideTimeout = setTimeout(() => {
    tooltip.hidePopover();
  }, 200);
};
</code></pre><p>And again, CSS is beginning to explore this space with new interaction primitives, which may reduce the need for custom hover intent code even further.</p><h3 id="manual-popovers-and-focus">Manual Popovers And Focus</h3><p>For <code>popover="manual"</code>, the browser does not restore focus automatically the way it can for auto popovers. That responsibility remains explicit. When a tooltip opens on focus and closes on blur, I return focus deliberately to the trigger:</p><pre><code>tooltip.hidePopover();
trigger.focus();
</code></pre><p>This is not a limitation but a clear boundary between platform behavior and person intent.</p><h3 id="the-honest-take">The Honest Take</h3><p>The Popover API does not magically solve tooltips. It stopped forcing me to rebuild fragile infrastructure. I still write JavaScript and think about edge cases, but now I am solving product problems instead of recreating UI primitives the browser should already understand.</p><p>Even after migrating my tooltips to the Popover API, I did not walk away thinking libraries were old and obsolete. They have earned their place, just in more specific situations.</p><h3 id="1-large-or-mature-design-systems">1. Large Or Mature Design Systems</h3><p>If you are maintaining a large design system used across multiple teams, a tooltip library can still make sense because centralized behavior, documented patterns, and consistent defaults across products. In those environments, changing the underlying interaction model is not just a technical decision; it is an organizational one. A well-maintained library gives teams guardrails, especially when not everyone is deeply familiar with accessibility nuances.</p><h3 id="2-complex-positioning-requirements">2. Complex Positioning Requirements</h3><p>For most tooltips, native positioning is enough, but if you need collision detection across nested scroll containers, custom flipping logic, or fine-grained control over offsets and boundaries, libraries like <a href="https://floating-ui.com">Floating UI</a> still shine. They are optimized for geometry problems that the platform is only beginning to address.</p><p>It is also worth mentioning <a href="https://css-tricks.com/css-anchor-positioning-guide/">CSS anchor positioning</a>, which is starting to cover many of the problems that tooltip libraries historically solved. Anchors allow a popover to be positioned relative to a trigger using pure CSS, including viewport-aware placement and edge flipping. This moves even more responsibility back to the platform instead of JavaScript.</p><p>That said, anchor positioning is still new and <a href="https://css-tricks.com/css-anchor-positioning-guide/#aa-known-bugs">there are known issues,</a> although the good news is that they are part of Interop, meaning <a href="https://webstatus.dev/features/popover?q=baseline_date%3A2025-01-01..2025-12-31&start=25">we can look forward to full and consistent browser support</a>. For teams that need consistent cross-browser behavior today, libraries remain the practical choice. The direction is clear that the platform is steadily absorbing work that once required dedicated positioning engines.</p><h3 id="3-teams-without-accessibility-experience">3. Teams Without Accessibility Experience</h3><p>This one matters. If a team does not have strong accessibility knowledge, a good library can act as a safety net, though it will not guarantee perfect accessibility. It can, however, prevent the many common mistakes. The Popover API gives you better defaults, but it still assumes you know when to add roles, labels, focus management, and testing. Without that understanding, even native tools can be misused.</p><h2 id="the-decision-line">The Decision Line</h2><p>For me, the choice now looks like this:</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aUse%20the%20Popover%20API%20for%20simplicity,%20clarity,%20and%20platform-aligned%20behavior.%20Use%20a%20library%20when%20scale,%20customization,%20or%20constraints%20demand%20it.%20It%e2%80%99s%20not%20about%20purity.%20It%e2%80%99s%20about%20choosing%20the%20right%20level%20of%20abstraction%20for%20the%20problem%20in%20front%20of%20you.%0a&url=https://smashingmagazine.com%2f2026%2f03%2fgetting-started-popover-api%2f">Use the Popover API for simplicity, clarity, and platform-aligned behavior. Use a library when scale, customization, or constraints demand it. It’s not about purity. It’s about choosing the right level of abstraction for the problem in front of you.</a></p></blockquote><p>And sometimes the right tool is still a library — just no longer by default.</p><figure><a href="https://files.smashing.media/articles/getting-started-popover-api/5-popover-api-browser-support.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/getting-started-popover-api/5-popover-api-browser-support.png">Large preview</a>)</figcaption></figure><h2 id="conclusion">Conclusion</h2><p>The Popover API means that tooltips are no longer something you simulate. They’re something the browser understands. Opening, closing, keyboard behavior, Escape handling, and a big chunk of accessibility now come from the platform itself, not from ad-hoc JavaScript.</p><p>That does not mean tooltip libraries are obsolete because they still make sense for complex design systems, heavy customization, or legacy constraints, but <strong>the default has shifted</strong>. For the first time, the simplest tooltip can also be the most correct one. If you are curious, try this experiment: Simply replace just one tooltip in your product with the Popover API, do not rewrite everything, do not migrate a whole system, and just pick one and see what disappears from your code.</p><p>When the platform gives you a better primitive, the win is not just fewer lines of JavaScript, but it is fewer things you have to worry about at all.</p><p>Check out the full source code in <a href="https://github.com/BboyGT/PopOver-API">my GitHub repo</a>.</p><h3 id="further-reading">Further Reading</h3><p>For deeper dives into popovers and related APIs:</p><ul><li>“<a href="https://css-tricks.com/poppin-in/">Poppin’ In</a>”, Geoff Graham</li><li>“<a href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/">Clarifying the Relationship Between Popovers and Dialogs</a>”, Zell Liew</li><li>“<a href="https://una.im/popover-hint/">What is popover=hint?</a>”, Una Kravets</li><li>“<a href="https://css-tricks.com/invoker-commands-additional-ways-to-work-with-dialog-popover-and-more/">Invoker Commands</a>”, Daniel Schwarz</li><li>“<a href="https://css-tricks.com/creating-an-auto-closing-notification-with-an-html-popover/">Creating an Auto-Closing Notification with an HTML Popover</a>”, Preethi</li><li><a href="https://open-ui.org/components/popover.research.explainer/">Open UI Popover API Explainer</a></li><li>“<a href="https://css-tricks.com/popover-the-balloons/">Pop(over) the Balloons</a>”, John Rhea</li><li>“<a href="https://css-tricks.com/css-anchor-positioning-guide/">CSS Anchor Positioning</a>”, Juan Diego Rodríguez</li></ul><p>MDN also <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">offers comprehensive technical documentation</a> for the Popover API.</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Fresh Energy In March (2026 Wallpapers Edition)</h1>
<p>hello@smashingmagazine.com (Cosima Mielke) — Sat, 28 Feb 2026 09:00:00 GMT</p>
<h1>Fresh Energy In March (2026 Wallpapers Edition) — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers is for you. Designed by the community for the community, the wallpapers in this collection are the perfect opportunity to get your desktop ready for spring — and, who knows, maybe they’ll spark some new ideas, too. Enjoy!</section></p><p>Blooming flowers, longer days, milder temperatures — with March just around the corner, the world is slowly but surely <strong>awakening from its winter slumber</strong>, fueling us with fresh energy. And even if spring is far away in your part of the world, you might sense that 2026 has gained full speed by now, making it the perfect moment to turn those plans and ideas you’ve been carrying around into action.</p><p>To accompany you on all those adventures that March may bring, we have a new collection of desktop wallpapers for you, just as it has been a <a href="https://www.smashingmagazine.com/category/wallpapers">monthly tradition</a> here at Smashing Magazine for more than 14 years already. Designed by artists and designers from across the globe, each wallpaper comes in a <strong>variety of screen resolutions</strong> and can be downloaded for free. A huge thank-you to everyone who shared their designs with us — this post wouldn’t be possible without your kind support!</p><p>If <em>you</em>, too, would like to <strong>get featured</strong> 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 can’t wait to see what you’ll come up with! Happy March!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li></ul><h2 id="timid-blossom-03-2026">Timid Blossom</h2><p>With Spring knocking and other seasons fighting to get attention, March greets us with blossoms. — Designed by <a href="https://www.gingeritsolutions.com/">Ginger It Solutions</a> from Serbia.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/mar-26-timid-blossom-full.png" title="Timid Blossom"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/mar-26-timid-blossom-preview.png" title="Timid Blossom - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-320x480.png" title="Timid Blossom - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-640x480.png" title="Timid Blossom - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-800x480.png" title="Timid Blossom - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-800x600.png" title="Timid Blossom - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1024x768.png" title="Timid Blossom - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1024x1024.png" title="Timid Blossom - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1152x864.png" title="Timid Blossom - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1280x720.png" title="Timid Blossom - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1280x800.png" title="Timid Blossom - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1280x960.png" title="Timid Blossom - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1280x1020.png" title="Timid Blossom - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1400x1050.png" title="Timid Blossom - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1440x900.png" title="Timid Blossom - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1600x1200.png" title="Timid Blossom - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1680x1050.png" title="Timid Blossom - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1680x1200.png" title="Timid Blossom - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1920x1080.png" title="Timid Blossom - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1920x1200.png" title="Timid Blossom - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-1920x1440.png" title="Timid Blossom - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/cal/mar-26-timid-blossom-cal-2560x1440.png" title="Timid Blossom - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-320x480.png" title="Timid Blossom - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-640x480.png" title="Timid Blossom - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-800x480.png" title="Timid Blossom - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-800x600.png" title="Timid Blossom - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1024x768.png" title="Timid Blossom - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1024x1024.png" title="Timid Blossom - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1152x864.png" title="Timid Blossom - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1280x720.png" title="Timid Blossom - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1280x800.png" title="Timid Blossom - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1280x960.png" title="Timid Blossom - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1280x1020.png" title="Timid Blossom - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1400x1050.png" title="Timid Blossom - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1440x900.png" title="Timid Blossom - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1600x1200.png" title="Timid Blossom - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1680x1050.png" title="Timid Blossom - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1680x1200.png" title="Timid Blossom - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1920x1080.png" title="Timid Blossom - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1920x1200.png" title="Timid Blossom - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-1920x1440.png" title="Timid Blossom - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/timid-blossom/nocal/mar-26-timid-blossom-nocal-2560x1440.png" title="Timid Blossom - 2560x1440">2560x1440</a></li></ul><h2 id="cascade-style-sheet-03-2026">Cascade Style Sheet</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/mar-26-cascade-style-sheet-full.png" title="Cascade Style Sheet"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/mar-26-cascade-style-sheet-preview.png" title="Cascade Style Sheet - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-640x480.png" title="Cascade Style Sheet - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-800x480.png" title="Cascade Style Sheet - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-800x600.png" title="Cascade Style Sheet - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1024x768.png" title="Cascade Style Sheet - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1024x1024.png" title="Cascade Style Sheet - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1152x864.png" title="Cascade Style Sheet - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1280x720.png" title="Cascade Style Sheet - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1280x800.png" title="Cascade Style Sheet - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1280x960.png" title="Cascade Style Sheet - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1280x1024.png" title="Cascade Style Sheet - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1366x768.png" title="Cascade Style Sheet - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1400x1050.png" title="Cascade Style Sheet - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1440x900.png" title="Cascade Style Sheet - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1600x1200.png" title="Cascade Style Sheet - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1680x1050.png" title="Cascade Style Sheet - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1680x1200.png" title="Cascade Style Sheet - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1920x1080.png" title="Cascade Style Sheet - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1920x1200.png" title="Cascade Style Sheet - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-1920x1440.png" title="Cascade Style Sheet - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-2560x1440.png" title="Cascade Style Sheet - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/cal/mar-26-cascade-style-sheet-cal-3840x2160.png" title="Cascade Style Sheet - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-640x480.png" title="Cascade Style Sheet - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-800x480.png" title="Cascade Style Sheet - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-800x600.png" title="Cascade Style Sheet - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1024x768.png" title="Cascade Style Sheet - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1024x1024.png" title="Cascade Style Sheet - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1152x864.png" title="Cascade Style Sheet - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1280x720.png" title="Cascade Style Sheet - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1280x800.png" title="Cascade Style Sheet - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1280x960.png" title="Cascade Style Sheet - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1280x1024.png" title="Cascade Style Sheet - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1366x768.png" title="Cascade Style Sheet - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1400x1050.png" title="Cascade Style Sheet - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1440x900.png" title="Cascade Style Sheet - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1600x1200.png" title="Cascade Style Sheet - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1680x1050.png" title="Cascade Style Sheet - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1680x1200.png" title="Cascade Style Sheet - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1920x1080.png" title="Cascade Style Sheet - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1920x1200.png" title="Cascade Style Sheet - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-1920x1440.png" title="Cascade Style Sheet - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-2560x1440.png" title="Cascade Style Sheet - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/cascade-style-sheet/nocal/mar-26-cascade-style-sheet-nocal-3840x2160.png" title="Cascade Style Sheet - 3840x2160">3840x2160</a></li></ul><h2 id="im-not-okay,-but-its-okay-03-2026">I’m Not Okay, But It’s Okay</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/mar-26-im-not-ok-but-its-ok-full.png" title="I’m Not Okay, But It’s Okay"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/mar-26-im-not-ok-but-its-ok-preview.png" title="I’m Not Okay, But It’s Okay - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-640x480.png" title="I’m Not Okay, But It’s Okay - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-800x480.png" title="I’m Not Okay, But It’s Okay - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-800x600.png" title="I’m Not Okay, But It’s Okay - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1024x768.png" title="I’m Not Okay, But It’s Okay - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1024x1024.png" title="I’m Not Okay, But It’s Okay - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1152x864.png" title="I’m Not Okay, But It’s Okay - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1280x720.png" title="I’m Not Okay, But It’s Okay - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1280x800.png" title="I’m Not Okay, But It’s Okay - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1280x960.png" title="I’m Not Okay, But It’s Okay - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1280x1024.png" title="I’m Not Okay, But It’s Okay - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1366x768.png" title="I’m Not Okay, But It’s Okay - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1400x1050.png" title="I’m Not Okay, But It’s Okay - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1440x900.png" title="I’m Not Okay, But It’s Okay - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1600x1200.png" title="I’m Not Okay, But It’s Okay - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1680x1050.png" title="I’m Not Okay, But It’s Okay - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1680x1200.png" title="I’m Not Okay, But It’s Okay - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1920x1080.png" title="I’m Not Okay, But It’s Okay - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1920x1200.png" title="I’m Not Okay, But It’s Okay - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-1920x1440.png" title="I’m Not Okay, But It’s Okay - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-2560x1440.png" title="I’m Not Okay, But It’s Okay - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/cal/mar-26-im-not-ok-but-its-ok-cal-3840x2160.png" title="I’m Not Okay, But It’s Okay - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-640x480.png" title="I’m Not Okay, But It’s Okay - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-800x480.png" title="I’m Not Okay, But It’s Okay - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-800x600.png" title="I’m Not Okay, But It’s Okay - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1024x768.png" title="I’m Not Okay, But It’s Okay - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1024x1024.png" title="I’m Not Okay, But It’s Okay - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1152x864.png" title="I’m Not Okay, But It’s Okay - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1280x720.png" title="I’m Not Okay, But It’s Okay - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1280x800.png" title="I’m Not Okay, But It’s Okay - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1280x960.png" title="I’m Not Okay, But It’s Okay - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1280x1024.png" title="I’m Not Okay, But It’s Okay - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1366x768.png" title="I’m Not Okay, But It’s Okay - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1400x1050.png" title="I’m Not Okay, But It’s Okay - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1440x900.png" title="I’m Not Okay, But It’s Okay - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1600x1200.png" title="I’m Not Okay, But It’s Okay - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1680x1050.png" title="I’m Not Okay, But It’s Okay - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1680x1200.png" title="I’m Not Okay, But It’s Okay - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1920x1080.png" title="I’m Not Okay, But It’s Okay - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1920x1200.png" title="I’m Not Okay, But It’s Okay - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-1920x1440.png" title="I’m Not Okay, But It’s Okay - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-2560x1440.png" title="I’m Not Okay, But It’s Okay - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-26/im-not-ok-but-its-ok/nocal/mar-26-im-not-ok-but-its-ok-nocal-3840x2160.png" title="I’m Not Okay, But It’s Okay - 3840x2160">3840x2160</a></li></ul><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://www.smashingmagazine.com/printed-books/form-design-patterns/"><div></img></source></picture></div></a></div></aside></div><h2 id="lets-spring">Let’s Spring</h2><p>“After some freezing months, it’s time to enjoy the sun and flowers. It’s party time, colors are coming, so let’s spring!” — Designed by <a href="https://www.colorsfera.com">Colorsfera</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5aedaccc-20d2-4802-9796-ae246644813f/march-15-lets-spring-full-opt.png" title="Let’s Spring!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46e37736-fa97-4d04-9ac1-921571a5d844/march-15-lets-spring-preview-opt.png" title="Let’s Spring! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-320x480.png" title="Let’s Spring! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1024x768.png" title="Let’s Spring! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1024x1024.png" title="Let’s Spring! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x800.png" title="Let’s Spring! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x960.png" title="Let’s Spring! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1280x1024.png" title="Let’s Spring! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1400x1050.png" title="Let’s Spring! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1440x900.png" title="Let’s Spring! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1600x1200.png" title="Let’s Spring! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1680x1050.png" title="Let’s Spring! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1680x1200.png" title="Let’s Spring! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1080.png" title="Let’s Spring! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1200.png" title="Let’s Spring! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-1920x1440.png" title="Let’s Spring! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/lets-spring/nocal/march-15-lets-spring-nocal-2560x1440.png" title="Let’s Spring! - 2560x1440">2560x1440</a></li></ul><h2 id="spring-is-coming">Spring Is Coming</h2><p>This March, our calendar design epitomizes the heralds of spring. Soon enough, you’ll be waking up to the singing of swallows, in a room full of sunshine, filled with the empowering smell of daffodil, the first springtime flowers. Spring is the time of rebirth and new beginnings, creativity and inspiration, self-awareness, and inner reflection. Have a budding, thriving spring! — Designed by <a href="https://www.popwebdesign.net/illustrations.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-22-spring-is-coming-full-opt.png" title="Spring Is Coming"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-22-spring-is-coming-preview-opt.png" title="Spring Is Coming - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-320x480.jpg" title="Spring Is Coming - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-640x480.jpg" title="Spring Is Coming - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-800x480.jpg" title="Spring Is Coming - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-800x600.jpg" title="Spring Is Coming - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1024x768.jpg" title="Spring Is Coming - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1024x1024.jpg" title="Spring Is Coming - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1152x864.jpg" title="Spring Is Coming - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x720.jpg" title="Spring Is Coming - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x800.jpg" title="Spring Is Coming - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x960.jpg" title="Spring Is Coming - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1280x1024.jpg" title="Spring Is Coming - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1366x768.jpg" title="Spring Is Coming - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1440x900.jpg" title="Spring Is Coming - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1440x1050.jpg" title="Spring Is Coming - 1440x1050">1440x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1600x1200.jpg" title="Spring Is Coming - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1680x1050.jpg" title="Spring Is Coming - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1680x1200.jpg" title="Spring Is Coming - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1080.jpg" title="Spring Is Coming - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1200.jpg" title="Spring Is Coming - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-1920x1440.jpg" title="Spring Is Coming - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-22/spring-is-coming/nocal/mar-22-spring-is-coming-nocal-2560x1440.jpg" title="Spring Is Coming - 2560x1440">2560x1440</a></li></ul><h2 id="explore-the-forest">Explore The Forest</h2><p>This month, I want to go to the woods and explore my new world in sunny weather. — Designed by Zi-Cing Hong from Taiwan.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8cd5d4f3-bbf7-44cf-823c-a3ea3a1ad477/mar-18-explore-the-forest-full-opt.png" title="Explore The Forest"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9f6c238-b0dc-4c83-8608-225fbc102c53/mar-18-explore-the-forest-preview-opt.png" title="Explore The Forest - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1024x768.png" title="Explore The Forest - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1152x864.png" title="Explore The Forest - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x720.png" title="Explore The Forest - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x800.png" title="Explore The Forest - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1280x960.png" title="Explore The Forest - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1366x768.png" title="Explore The Forest - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1400x1050.png" title="Explore The Forest - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1440x900.png" title="Explore The Forest - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1600x1200.png" title="Explore The Forest - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1680x1050.png" title="Explore The Forest - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1080.png" title="Explore The Forest - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1200.png" title="Explore The Forest - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-1920x1440.png" title="Explore The Forest - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/explore-the-forest/nocal/mar-18-explore-the-forest-nocal-2560x1440.png" title="Explore The Forest - 2560x1440">2560x1440</a></li></ul><h2 id="coffee-break">Coffee Break</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-coffee-break-full-opt.png" title="Coffee Break"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-coffee-break-preview-opt.png" title="Coffee Break - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-640x480.png" title="Coffee Break - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-800x480.png" title="Coffee Break - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-800x600.png" title="Coffee Break - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1024x768.png" title="Coffee Break - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1024x1024.png" title="Coffee Break - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1152x864.png" title="Coffee Break - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1280x720.png" title="Coffee Break - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1280x800.png" title="Coffee Break - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1280x960.png" title="Coffee Break - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1280x1024.png" title="Coffee Break - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1366x768.png" title="Coffee Break - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1400x1050.png" title="Coffee Break - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1440x900.png" title="Coffee Break - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1600x1200.png" title="Coffee Break - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1680x1050.png" title="Coffee Break - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1680x1200.png" title="Coffee Break - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1920x1080.png" title="Coffee Break - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1920x1200.png" title="Coffee Break - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-1920x1440.png" title="Coffee Break - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-2560x1440.png" title="Coffee Break - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/coffee-break/nocal/mar-25-coffee-break-nocal-3840x2160.png" title="Coffee Break - 3840x2160">3840x2160</a></li></ul><h2 id="time-to-wake-up">Time To Wake Up</h2><p>Rays of sunlight had cracked into the bear’s cave. He slowly opened one eye and caught a glimpse of nature in blossom. Is it spring already? Oh, but he is so sleepy. He doesn’t want to wake up, not just yet. So he continues dreaming about those sweet sluggish days while everything around him is blooming. — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/79516b2e-d9c6-4ab3-985b-e45eac96be42/mar-19-time-to-wake-up-full-opt.png" title="Time To Wake Up"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/595f9f16-ceb3-4d9b-8284-fc7a3f493295/mar-19-time-to-wake-up-preview-opt.png" title="Time To Wake Up - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-320x480.jpg" title="Time To Wake Up - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-640x480.jpg" title="Time To Wake Up - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-800x480.jpg" title="Time To Wake Up - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-800x600.jpg" title="Time To Wake Up - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1024x768.jpg" title="Time To Wake Up - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1024x1024.jpg" title="Time To Wake Up - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1152x864.jpg" title="Time To Wake Up - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x720.jpg" title="Time To Wake Up - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x800.jpg" title="Time To Wake Up - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x960.jpg" title="Time To Wake Up - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1280x1024.jpg" title="Time To Wake Up - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1366x768.jpg" title="Time To Wake Up - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1400x1050.jpg" title="Time To Wake Up - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1440x900.jpg" title="Time To Wake Up - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1600x1200.jpg" title="Time To Wake Up - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1680x1050.jpg" title="Time To Wake Up - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1680x1200.jpg" title="Time To Wake Up - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1080.jpg" title="Time To Wake Up - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1200.jpg" title="Time To Wake Up - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-1920x1440.jpg" title="Time To Wake Up - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/time-to-wake-up/nocal/mar-19-time-to-wake-up-nocal-2560x1440.jpg" title="Time To Wake Up - 2560x1440">2560x1440</a></li></ul><h2 id="so-tire">So Tire</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-so-tire-full-opt.png" title="So Tire"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-so-tire-preview-opt.png" title="So Tire - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-640x480.png" title="So Tire - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-800x480.png" title="So Tire - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-800x600.png" title="So Tire - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1024x768.png" title="So Tire - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1024x1024.png" title="So Tire - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1152x864.png" title="So Tire - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1280x720.png" title="So Tire - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1280x800.png" title="So Tire - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1280x960.png" title="So Tire - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1280x1024.png" title="So Tire - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1366x768.png" title="So Tire - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1400x1050.png" title="So Tire - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1440x900.png" title="So Tire - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1600x1200.png" title="So Tire - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1680x1050.png" title="So Tire - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1680x1200.png" title="So Tire - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1920x1080.png" title="So Tire - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1920x1200.png" title="So Tire - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-1920x1440.png" title="So Tire - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-2560x1440.png" title="So Tire - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/so-tire/nocal/mar-25-so-tire-nocal-3840x2160.png" title="So Tire - 3840x2160">3840x2160</a></li></ul><h2 id="botanica">Botanica</h2><p>Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/98a1c385-d14e-49bc-91c5-df5551b37799/mar-21-botanica-full-opt.png" title="Botanica"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74e88326-57b4-4d3e-a31a-dc718b75c3a4/mar-21-botanica-preview-opt.png" title="Botanica - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-320x480.jpg" title="Botanica - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-640x480.jpg" title="Botanica - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-800x480.jpg" title="Botanica - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-800x600.jpg" title="Botanica - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1024x768.jpg" title="Botanica - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1024x1024.jpg" title="Botanica - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1152x864.jpg" title="Botanica - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x720.jpg" title="Botanica - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x800.jpg" title="Botanica - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x960.jpg" title="Botanica - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1280x1024.jpg" title="Botanica - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1400x1050.jpg" title="Botanica - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1440x900.jpg" title="Botanica - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1600x1200.jpg" title="Botanica - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1680x1050.jpg" title="Botanica - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1680x1200.jpg" title="Botanica - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1080.jpg" title="Botanica - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1200.jpg" title="Botanica - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-1920x1440.jpg" title="Botanica - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/botanica/nocal/mar-21-botanica-nocal-2560x1440.jpg" title="Botanica - 2560x1440">2560x1440</a></li></ul><h2 id="music-from-the-past">Music From The Past</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2025/mar-24-music-from-the-past-full-opt.png" title="Music From The Past"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2025/mar-24-music-from-the-past-preview-opt.png" title="Music From The Past - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-640x480.png" title="Music From The Past - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-800x480.png" title="Music From The Past - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-800x600.png" title="Music From The Past - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1024x768.png" title="Music From The Past - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1024x1024.png" title="Music From The Past - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1152x864.png" title="Music From The Past - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x720.png" title="Music From The Past - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x800.png" title="Music From The Past - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x960.png" title="Music From The Past - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1280x1024.png" title="Music From The Past - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1366x768.png" title="Music From The Past - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1400x1050.png" title="Music From The Past - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1440x900.png" title="Music From The Past - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1600x1200.png" title="Music From The Past - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1680x1050.png" title="Music From The Past - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1080.png" title="Music From The Past - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1200.png" title="Music From The Past - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-1920x1440.png" title="Music From The Past - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-2560x1440.png" title="Music From The Past - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/music-from-the-past/nocal/mar-24-music-from-the-past-nocal-3840x2160.png" title="Music From The Past - 3840x2160">3840x2160</a></li></ul><h2 id="queen-bee">Queen Bee</h2><p>Spring is coming! Birds are singing, flowers are blooming, bees are flying&mldr; Enjoy this month! — Designed by Melissa Bogemans from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9c43d932-e478-4d77-95d8-c4ae8d8c80f0/mar-19-queen-bee-full-opt.png" title="Queen Bee"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/885ef955-c69b-4d99-b5fc-286f35b6e0e3/mar-19-queen-bee-preview-opt.png" title="Queen Bee - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-320x480.png" title="Queen Bee - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-640x480.png" title="Queen Bee - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-800x480.png" title="Queen Bee - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-800x600.png" title="Queen Bee - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1024x768.png" title="Queen Bee - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1024x1024.png" title="Queen Bee - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1152x864.png" title="Queen Bee - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x720.png" title="Queen Bee - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x800.png" title="Queen Bee - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x960.png" title="Queen Bee - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1280x1024.png" title="Queen Bee - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1400x1050.png" title="Queen Bee - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1440x900.png" title="Queen Bee - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1600x1200.png" title="Queen Bee - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1680x1050.png" title="Queen Bee - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1680x1200.png" title="Queen Bee - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1080.png" title="Queen Bee - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1200.png" title="Queen Bee - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-1920x1440.png" title="Queen Bee - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-19/queen-bee/nocal/mar-19-queen-bee-nocal-2560x1440.png" title="Queen Bee - 2560x1440">2560x1440</a></li></ul><h2 id="marching-forward">MARCHing Forward</h2><p>“If all you want is a little orange dinosaur MARCHing (okay, I think you get the pun) across your monitor, this wallpaper was made just for you! This little guy is my design buddy at the office and sits by (and sometimes on top of) my monitor. This is what happens when you have designer’s block and a DSLR.” — Designed by Paul Bupe Jr from Statesboro, GA.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/280c36ae-ad54-439e-8fee-1708a25b6a81/mar-14-marching-forward-full-opt.png" title="MARCHing Forward!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44a39397-6c4b-4c6c-96ee-b7ca060c3e1e/mar-14-marching-forward-preview-opt.png" title="MARCHing Forward! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1024x768.png" title="MARCHing Forward! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1280x1024.png" title="MARCHing Forward! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1440x900.png" title="MARCHing Forward! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1920x1080.png" title="MARCHing Forward! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-1920x1200.png" title="MARCHing Forward! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/marching-forward/nocal/mar-14-marching-forward-nocal-2560x1440.png" title="MARCHing Forward! - 2560x1440">2560x1440</a></li></ul><h2 id="spring-bird">Spring Bird</h2><p>Designed by Nathalie Ouederni from France.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4992d67d-5607-46fb-afc5-edb09be2cc30/mar-17-spring-bird-full-opt.png" title="Spring Bird"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/062168cd-738b-4836-bc6f-26e8e49d917b/mar-17-spring-bird-preview-opt.png" title="Spring Bird - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1024x768.jpg" title="Spring Bird - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1280x1024.jpg" title="Spring Bird - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1440x900.jpg" title="Spring Bird - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1680x1200.jpg" title="Spring Bird - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1920x1200.jpg" title="Spring Bird - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-2560x1440.jpg" title="Spring Bird - 2560x1440">2560x1440</a></li></ul><h2 id="awakening">Awakening</h2><p>“I am the kind of person who prefers the cold but I do love spring since it’s the magical time when flowers and trees come back to life and fill the landscape with beautiful colors.” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a961483-4838-4bea-99f5-8939ffdff62e/mar-15-wake-up-full-opt.png" title="Wake up!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a44be9ea-24bd-4614-aa0d-c45b03012f43/mar-15-wake-up-preview-opt.png" title="Wake up! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-320x480.jpg" title="Wake up! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-640x480.jpg" title="Wake up! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-640x1136.jpg" title="Wake up! - 640x1136">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-750x1334.jpg" title="Wake up! - 750x1334">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-800x480.jpg" title="Wake up! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-800x600.jpg" title="Wake up! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1024x768.jpg" title="Wake up! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1024x1024.jpg" title="Wake up! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1152x864.jpg" title="Wake up! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1242x2208.jpg" title="Wake up! - 1242x2208">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x720.jpg" title="Wake up! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x800.jpg" title="Wake up! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x960.jpg" title="Wake up! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1280x1024.jpg" title="Wake up! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1366x768.jpg" title="Wake up! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1400x1050.jpg" title="Wake up! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1440x900.jpg" title="Wake up! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1600x1200.jpg" title="Wake up! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1680x1050.jpg" title="Wake up! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1680x1200.jpg" title="Wake up! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1080.jpg" title="Wake up! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1200.jpg" title="Wake up! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-1920x1440.jpg" title="Wake up! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/wake-up/nocal/mar-15-wake-up-nocal-2560x1440.jpg" title="Wake up! - 2560x1440">2560x1440</a></li></ul><h2 id="fresh-lemons">Fresh Lemons</h2><p>Designed by Nathalie Ouederni from France.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4de34052-8b80-4845-b76c-2ae71e6d94b4/mar-15-fresh-lemons-full-opt.png" title="Fresh lemons"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1eb6ae3d-a3a0-4107-8b61-1995b717749c/mar-15-fresh-lemons-preview-opt.png" title="Fresh lemons - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-320x480.jpg" title="Fresh lemons - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1024x768.jpg" title="Fresh lemons - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1280x1024.jpg" title="Fresh lemons - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1440x900.jpg" title="Fresh lemons - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1600x1200.jpg" title="Fresh lemons - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1680x1200.jpg" title="Fresh lemons - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-1920x1200.jpg" title="Fresh lemons - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-15/fresh-lemons/nocal/mar-15-fresh-lemons-nocal-2560x1440.jpg" title="Fresh lemons - 2560x1440">2560x1440</a></li></ul><h2 id="jingzhe">Jingzhe</h2><p>“Jīngzhé is the third of the 24 solar terms in the traditional East Asian calendars. The word 驚蟄 means ‘the awakening of hibernating insects’. 驚 is ‘to start’ and 蟄 means ‘hibernating insects’. Traditional Chinese folklore says that during Jingzhe, thunderstorms will wake up the hibernating insects, which implies that the weather is getting warmer.” — Designed by <a href="https://www.pixiv.net/member.php?id=8059765">Sunny Hong</a> from Taiwan.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-17-jingzhe-full-opt.png" title="Jingzhe"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2023/mar-17-jingzhe-preview-opt.png" title="Jingzhe - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-800x600.png" title="Jingzhe - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1280x720.png" title="Jingzhe - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1280x1024.png" title="Jingzhe - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1366x768.png" title="Jingzhe - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1400x1050.png" title="Jingzhe - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1680x1200.png" title="Jingzhe - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1920x1080.png" title="Jingzhe - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-2560x1440.png" title="Jingzhe - 2560x1440">2560x1440</a></li></ul><h2 id="waiting-for-spring">Waiting For Spring</h2><p>“As days are getting longer again and the first few flowers start to bloom, we are all waiting for spring to finally arrive.” — Designed by Naioo from Germany.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e54c2a3-a50c-4624-a055-0f8edfe8e203/march-12-waiting-for-spring-15-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/80ae8715-1dcc-4a97-9fcf-f39f2374b148/march-12-waiting-for-spring-15-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-12/march-12-waiting_for_spring__15-nocal-1920x1200.jpg">1920x1200</a></li></ul><h2 id="happy-birthday-dr-seuss">Happy Birthday Dr. Seuss!</h2><p>“March 2nd marks the birthday of the most creative and extraordinary author ever, Dr. Seuss! I have included an inspirational quote about learning to encourage everyone to continue learning new things every day.” — Designed by <a href="https://www.safiabegum.com/">Safia Begum</a> from the United Kingdom.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c44c6a7a-2ab2-4a54-bf9a-d7ca5a616066/mar-17-happy-birthday-dr-seuss-full-opt.png" title="Happy Birthday Dr. Seuss!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d3c8f6c7-dfce-4108-bbfe-b9f4ada9ec56/mar-17-happy-birthday-dr-seuss-preview-opt.png" title="Happy Birthday Dr. Seuss! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-800x450.png" title="Happy Birthday Dr. Seuss! - 800x450">800x450</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1280x720.png" title="Happy Birthday Dr. Seuss! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1366x768.png" title="Happy Birthday Dr. Seuss! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1440x810.png" title="Happy Birthday Dr. Seuss! - 1440x810">1440x810</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1600x900.png" title="Happy Birthday Dr. Seuss! - 1600x900">1600x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1680x945.png" title="Happy Birthday Dr. Seuss! - 1680x945">1680x945</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1920x1080.png" title="Happy Birthday Dr. Seuss! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-2560x1440.png" title="Happy Birthday Dr. Seuss! - 2560x1440">2560x1440</a></li></ul><h2 id="spring-is-inevitable">Spring Is Inevitable</h2><p>“Spring is round the corner. And very soon plants will grow on some other planets too. Let’s be happy about a new cycle of life.” — Designed by <a href="https://izhik.com">Igor Izhik</a> from Canada.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/301954ac-cca9-449b-aa18-f55fac6acd3f/mar-16-spring-is-inevitable-full-opt.png" title="Spring Is Inevitable!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/97e11614-864e-4ee3-8b3b-5686d165ffd8/mar-16-spring-is-inevitable-preview-opt.png" title="Spring Is Inevitable! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1024x768.jpg" title="Spring Is Inevitable! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1024x1024.jpg" title="Spring Is Inevitable! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1152x864.jpg" title="Spring Is Inevitable! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1280x720.jpg" title="Spring Is Inevitable! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1280x800.jpg" title="Spring Is Inevitable! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1280x960.jpg" title="Spring Is Inevitable! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1280x1024.jpg" title="Spring Is Inevitable! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1400x1050.jpg" title="Spring Is Inevitable! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1440x900.jpg" title="Spring Is Inevitable! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1600x1200.jpg" title="Spring Is Inevitable! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1680x1050.jpg" title="Spring Is Inevitable! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1680x1200.jpg" title="Spring Is Inevitable! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1920x1080.jpg" title="Spring Is Inevitable! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1920x1200.jpg" title="Spring Is Inevitable! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-1920x1440.jpg" title="Spring Is Inevitable! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-2560x1440.jpg" title="Spring Is Inevitable! - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/spring-is-inevitable/nocal/mar-16-spring-is-inevitable-nocal-2560x1600.jpg" title="Spring Is Inevitable! - 2560x1600">2560x1600</a></li></ul><h2 id="ballet">Ballet</h2><p>“A day, even a whole month, isn’t enough to show how much a woman should be appreciated. Dear ladies, any day or month are yours if you decide so.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3644cf1c-73ff-4407-b5ad-9107f25220cc/mar-17-ballet-full-opt.png" title="Ballet"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c18c06c4-3981-490d-addc-e91f24ae0ccd/mar-17-ballet-preview-opt.png" title="Ballet - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-320x480.png" title="Ballet - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-640x480.png" title="Ballet - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800x480.png" title="Ballet - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800x600.png" title="Ballet - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024x768.png" title="Ballet - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024x1024.png" title="Ballet - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1152x864.png" title="Ballet - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x720.png" title="Ballet - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x800.png" title="Ballet - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x960.png" title="Ballet - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280x1040.png" title="Ballet - 1280x1040">1280x1040</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1400x1050.png" title="Ballet - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1440x900.png" title="Ballet - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1600x1200.png" title="Ballet - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680x1050.png" title="Ballet - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680x1200.png" title="Ballet - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1080.png" title="Ballet - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1200.png" title="Ballet - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920x1440.png" title="Ballet - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-2560x1440.png" title="Ballet - 2560x1440">2560x1440</a></li></ul><h2 id="pizza-time">Pizza Time</h2><p>“Who needs an excuse to look at pizza all month?” — Designed by <a href="https://www.behance.net/jamesmitchell23">James Mitchell</a> from the United Kingdom.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4049a0bc-303d-4a8a-8bc5-028fc93d6643/mar-17-pizza-time-full-opt.png" title="Pizza Time!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/08e46754-3ebf-436e-b870-7738acf14494/mar-17-pizza-time-preview-opt.png" title="Pizza Time! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280x720.png" title="Pizza Time! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280x800.png" title="Pizza Time! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1366x768.png" title="Pizza Time! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1440x900.png" title="Pizza Time! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1680x1050.png" title="Pizza Time! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920x1080.png" title="Pizza Time! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920x1200.png" title="Pizza Time! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2560x1440.png" title="Pizza Time! - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2880x1800.png" title="Pizza Time! - 2880x1800">2880x1800</a></li></ul><h2 id="imagine">Imagine</h2><p>Designed by <a href="https://www.behance.net/romanaaguia">Romana Águia Soares</a> from Portugal.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fb7b3cdc-bcdd-40b6-a60c-6a3fc81d1532/mar-18-imagine-full-opt.png" title="Imagine"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c177c354-d75f-4dbf-850a-c39881a3379a/mar-18-imagine-preview-opt.png" title="Imagine - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-640x480.jpg" title="Imagine - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1024x768.jpg" title="Imagine - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1024x1024.jpg" title="Imagine - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1152x864.jpg" title="Imagine - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1280x720.jpg" title="Imagine - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1280x800.jpg" title="Imagine - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1280x960.jpg" title="Imagine - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1280x1024.jpg" title="Imagine - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1366x768.jpg" title="Imagine - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1400x1050.jpg" title="Imagine - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1440x900.jpg" title="Imagine - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1600x1200.jpg" title="Imagine - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1680x1050.jpg" title="Imagine - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1680x1200.jpg" title="Imagine - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1920x1080.jpg" title="Imagine - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1920x1200.jpg" title="Imagine - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-1920x1440.jpg" title="Imagine - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/imagine/nocal/mar-18-imagine-nocal-2560x1440.jpg" title="Imagine - 2560x1440">2560x1440</a></li></ul><h2 id="questions">Questions</h2><p>“Doodles are slowly becoming my trademark, so I just had to use them to express this phrase I’m fond of recently. A bit enigmatic, philosophical. Inspiring, isn’t it?” — Designed by <a href="https://www.behance.net/marpad">Marta Paderewska</a> from Poland.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50511280-eddb-4e2c-98e1-51cf72219eca/mar-16-questions-full-opt.png" title="Questions"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55440170-e0d7-427c-b21f-d943b8ee7df0/mar-16-questions-preview-opt.png" title="Questions - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-640x480.png" title="Questions - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-800x480.png" title="Questions - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-800x600.png" title="Questions - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1024x768.png" title="Questions - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1024x1024.png" title="Questions - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1152x864.png" title="Questions - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x720.png" title="Questions - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x800.png" title="Questions - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x960.png" title="Questions - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1280x1024.png" title="Questions - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1366x768.png" title="Questions - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1400x1050.png" title="Questions - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1440x900.png" title="Questions - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1600x1200.png" title="Questions - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1680x1050.png" title="Questions - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1680x1200.png" title="Questions - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1080.png" title="Questions - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1200.png" title="Questions - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-1920x1440.png" title="Questions - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-16/questions/nocal/mar-16-questions-nocal-2560x1440.png" title="Questions - 2560x1440">2560x1440</a></li></ul><h2 id="the-unknown">The Unknown</h2><p>I made a connection, between the dark side and the unknown lighted and catchy area. — Designed by <a href="https://www.behance.net/valentinkeleti">Valentin Keleti</a> from Romania.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/42049be6-738a-4751-89a3-c661805f0c1a/mar-18-the-unknown-full-opt.png" title="The Unknown"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55fd74da-c62f-4c39-a0ad-faa8b649df8a/mar-18-the-unknown-preview-opt.png" title="The Unknown - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-320x480.jpg" title="The Unknown - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-640x480.jpg" title="The Unknown - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-800x480.jpg" title="The Unknown - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-800x600.jpg" title="The Unknown - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1024x768.jpg" title="The Unknown - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1024x1024.jpg" title="The Unknown - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1152x864.jpg" title="The Unknown - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1280x720.jpg" title="The Unknown - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1280x800.jpg" title="The Unknown - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1280x960.jpg" title="The Unknown - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1280x1024.jpg" title="The Unknown - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1366x768.jpg" title="The Unknown - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1400x1050.jpg" title="The Unknown - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1440x900.jpg" title="The Unknown - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1600x1200.jpg" title="The Unknown - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1680x1050.jpg" title="The Unknown - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1680x1200.jpg" title="The Unknown - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1920x1080.jpg" title="The Unknown - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1920x1200.jpg" title="The Unknown - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-1920x1440.jpg" title="The Unknown - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-unknown/nocal/mar-18-the-unknown-nocal-2560x1440.jpg" title="The Unknown - 2560x1440">2560x1440</a></li></ul><h2 id="lets-get-outside">Let’s Get Outside</h2><p>Designed by <a href="https://pathlove.com/">Lívia Lénárt</a> from Hungary.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe3c753-896e-4bb1-915f-53adb712ef7d/mar-18-lets-get-outside-full-opt.png" title="Let’s Get Outside! "></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7596279f-3fdb-41d6-937f-1a8cc0434092/mar-18-lets-get-outside-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1024x768.jpg" title="Let’s Get Outside! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1280x1024.jpg" title="Let’s Get Outside! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1366x768.jpg" title="Let’s Get Outside! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1600x1200.jpg" title="Let’s Get Outside! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1680x1200.jpg" title="Let’s Get Outside! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1920x1080.jpg" title="Let’s Get Outside! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-1920x1200.jpg" title="Let’s Get Outside! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/lets-get-outside/nocal/mar-18-lets-get-outside-nocal-2560x1440.jpg" title="Let’s Get Outside! - 2560x1440">2560x1440</a></li></ul><h2 id="fresh-flow">Fresh Flow</h2><p>It’s time for the water to go down the mountains, it’s time for the rivers to get rid of ice blocks, it’s time for the ground to feed the plants, it’s time to go out and take a deep breath. I imagined these ideas with interlacing colored lines. — Designed by <a href="https://www.philippebrouard.fr">Philippe Brouard</a> from France.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-24-fresh-flow-full-opt.png" title="Fresh Flow"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-24-fresh-flow-preview-opt.png" title="Fresh Flow - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1024x768.jpg" title="Fresh Flow - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1366x768.jpg" title="Fresh Flow - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1600x1200.jpg" title="Fresh Flow - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1080.jpg" title="Fresh Flow - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1200.jpg" title="Fresh Flow - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-1920x1440.jpg" title="Fresh Flow - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2560x1440.jpg" title="Fresh Flow - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2560x1600.jpg" title="Fresh Flow - 2560x1600">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-2880x1800.jpg" title="Fresh Flow - 2880x1800">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-24/fresh-flow/nocal/mar-24-fresh-flow-nocal-3840x2160.jpg" title="Fresh Flow - 3840x2160">3840x2160</a></li></ul><h2 id="st-patricks-day">St. Patrick’s Day</h2><p>On the 17th March, raise a glass and toast St. Patrick on St. Patrick’s Day, the Patron Saint of Ireland. — Designed by <a href="https://www.everincreasingcircles.com/">Ever Increasing Circles</a> from the United Kingdom.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2ceb983-8187-411d-aa06-8773b397e5f3/mar-21-st-patricks-day-full-opt.png" title="St. Patrick’s Day"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eecc7027-ca1c-4dc9-bc69-eafa3d6ed56f/mar-21-st-patricks-day-preview-opt.png" title="St. Patrick’s Day - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-320x480.jpg" title="St. Patrick’s Day - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-640x480.jpg" title="St. Patrick’s Day - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-800x480.jpg" title="St. Patrick’s Day - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-800x600.jpg" title="St. Patrick’s Day - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1024x768.jpg" title="St. Patrick’s Day - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1024x1024.jpg" title="St. Patrick’s Day - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1080x1080.jpg" title="St. Patrick’s Day - 1080x1080">1080x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1152x864.jpg" title="St. Patrick’s Day - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x720.jpg" title="St. Patrick’s Day - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x800.jpg" title="St. Patrick’s Day - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x960.jpg" title="St. Patrick’s Day - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1280x1024.jpg" title="St. Patrick’s Day - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1366x768.jpg" title="St. Patrick’s Day - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1400x1050.jpg" title="St. Patrick’s Day - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1440x900.jpg" title="St. Patrick’s Day - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1600x1200.jpg" title="St. Patrick’s Day - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1680x1050.jpg" title="St. Patrick’s Day - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1680x1200.jpg" title="St. Patrick’s Day - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1080.jpg" title="St. Patrick’s Day - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1200.jpg" title="St. Patrick’s Day - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-1920x1440.jpg" title="St. Patrick’s Day - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-21/st-patricks-day/nocal/mar-21-st-patricks-day-nocal-2560x1440.jpg" title="St. Patrick’s Day - 2560x1440">2560x1440</a></li></ul><h2 id="sending-friendships-to-march">Sending FriendShips To March</h2><p>Designed by João Acácio from Portugal.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-18-sending-friendships-to-march-full-opt.png" title="Sending FriendShips to March"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-18-sending-friendships-to-march-preview-opt.png" title="Sending FriendShips to March - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-800x600.png" title="Sending FriendShips to March - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1024x768.png" title="Sending FriendShips to March - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1152x864.png" title="Sending FriendShips to March - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1280x720.png" title="Sending FriendShips to March - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1280x800.png" title="Sending FriendShips to March - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1280x960.png" title="Sending FriendShips to March - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1280x1024.png" title="Sending FriendShips to March - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1366x768.png" title="Sending FriendShips to March - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1400x1050.png" title="Sending FriendShips to March - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1440x900.png" title="Sending FriendShips to March - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1600x1200.png" title="Sending FriendShips to March - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1680x1050.png" title="Sending FriendShips to March - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1680x1200.png" title="Sending FriendShips to March - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1920x1080.png" title="Sending FriendShips to March - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1920x1200.png" title="Sending FriendShips to March - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-1920x1440.png" title="Sending FriendShips to March - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/sending-friendships-to-march/nocal/mar-18-sending-friendships-to-march-nocal-2560x1440.png" title="Sending FriendShips to March - 2560x1440">2560x1440</a></li></ul><h2 id="bee-utiful-smile">Bee-utiful Smile</h2><p>Designed by <a href="https://www.doreenbethge.de/">Doreen Bethge</a> from Germany.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-bee-utiful-smile-full-opt.png" title="Bee-utiful Smile"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-march-2026/mar-25-bee-utiful-smile-preview-opt.png" title="Bee-utiful Smile - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-640x480.png" title="Bee-utiful Smile - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-800x600.png" title="Bee-utiful Smile - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1024x768.png" title="Bee-utiful Smile - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1152x864.png" title="Bee-utiful Smile - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1280x720.png" title="Bee-utiful Smile - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1280x800.png" title="Bee-utiful Smile - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1280x960.png" title="Bee-utiful Smile - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1400x1050.png" title="Bee-utiful Smile - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1440x900.png" title="Bee-utiful Smile - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1600x1200.png" title="Bee-utiful Smile - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1680x1050.png" title="Bee-utiful Smile - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1920x1080.png" title="Bee-utiful Smile - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1920x1200.png" title="Bee-utiful Smile - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-1920x1440.png" title="Bee-utiful Smile - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-2560x1440.png" title="Bee-utiful Smile - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/mar-25/bee-utiful-smile/nocal/mar-25-bee-utiful-smile-nocal-3200x2000.png" title="Bee-utiful Smile - 3200x2000">3200x2000</a></li></ul><h2 id="sakura">Sakura</h2><p>Designed by Evacomics from Singapore.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2b8b17ba-fe17-40fc-8913-2d08dcc9d148/mar-14-sakura-full-opt.png" title="Sakura"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/131f7dc1-1695-41ad-8218-c030fd4bcd16/mar-14-sakura-preview-opt.png" title="Sakura - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-320x480.jpg" title="Sakura - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-768x1024.jpg" title="Sakura - 768x1024">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-1024x768.jpg" title="Sakura - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-1280x800.jpg" title="Sakura - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-1280x1024.jpg" title="Sakura - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-1440x900.jpg" title="Sakura - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-1920x1080.jpg" title="Sakura - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/march-14/sakura/nocal/mar-14-sakura-nocal-2560x1440.jpg" title="Sakura - 2560x1440">2560x1440</a></li></ul><h2 id="get-featured-next-month">Get Featured Next Month</h2><p>Feeling inspired? We’ll publish the <strong>April wallpapers</strong> on March 31, so if you’d like to be a part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/"><strong>submit your design</strong></a>. We are already looking forward to it!</p></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Say Cheese! Meet SmashingConf Amsterdam 🇳🇱</h1>
<p>hello@smashingmagazine.com (Iris Lješnjanin) — Thu, 26 Feb 2026 11:00:00 GMT</p>
<h1>Say Cheese! Meet SmashingConf Amsterdam 🇳🇱 — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>7 min read</li><li><a href="http://www.smashingmagazine.com/category/events">Events</a>,
<a href="http://www.smashingmagazine.com/category/smashingconf">SmashingConf</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Meet our brand new conference for designers and UI engineers who love the web. That’s <a href="https://smashingconf.com/amsterdam-2026">SmashingConf Amsterdam</a>, taking place in the legendary Pathé Tuschinski, on April 13–16, 2026.</section></div><p>We’ve been passionate about <strong>design & UX</strong> for years. We’ve published articles on <a href="https://www.smashingmagazine.com/category/design-systems">design systems</a> and <a href="https://www.smashingmagazine.com/category/design-patterns/">usability</a>, <a href="https://www.smashingmagazine.com/category/accessibility/">inclusive design</a> and product design, UX research and enterprise UX. Now it’s time to bring it all together: In-person. In a new location. With a new spirit of curiosity and community. And it’s happening this April!</p><p>Meet the first <a href="https://smashingconf.com/amsterdam-2026">SmashingConf Amsterdam</a> 🇳🇱 taking place on April 13–16, 2026! A <strong>conference for designers and UI engineers</strong> all around UX and front-end: design systems, accessibility, Figma, UX writing, <strong>modern CSS and AI</strong>.. all while enjoying the best views, fun and <em>gezelligheid</em> that Amsterdam has to offer!</p><figure><a href="https://smashingconf.com/amsterdam-2026" title="SmashingConf Amsterdam 2026"></img></a></figure><h3 id="gezelligheid-meets-modern-tech">“Gezelligheid” Meets Modern Tech</h3><p>Perhaps one of the most difficult Dutch words to translate directly into English is the Dutch word Gezelligheid (pronounced guh-ZELL-uhk-hyde). It’s a foundational concept in Dutch culture that translates loosely to <strong>coziness, conviviality, and a warm, social, or inviting atmosphere</strong> — and that’s exactly what <a href="https://smashingconf.com/amsterdam-2026/">SmashingConf Amsterdam</a> has to offer! 🙌</p><h2 id="what-should-you-expect">What Should You Expect?</h2><p>Ever since launching our first-ever SmashingConf back in 2012, each one has always focused on how folks in the industry work, how they fail and how they succeed. We kindly encourage our speakers to share <strong>lessons learned</strong> and show how they work. Don’t be surprised by speakers sitting down and showing their design process, or setting up a Figma board and <strong>designing live</strong> with the audience!</p><p><a href="https://smashingconf.com/amsterdam-2026/">SmashingConf Amsterdam</a> is a premier, single-track conference curated for front-end developers, UI engineers, and UX designers. Unlike traditional conferences that rely on polished slide decks, SmashingConf is distinguished by its <strong>“live-work” philosophy</strong>. Speakers are encouraged to show their actual workflows—coding live, designing in Figma, and troubleshooting in real-time—to provide actionable insights rather than high-level theory.</p><figure><a href="https://smashingconf.com/freiburg-2025"></img></a><figcaption>You can find previous conference talks on our <a href="https://www.youtube.com/@SmashingMagazineVideos">YouTube channel</a>, or take a look at photos from last year’s edition in <a href="https://marcthiele.com/photos/smashingconf-freiburg-2025">Freiburg</a> and <a href="https://marcthiele.com/photos/smashingconf-new-york-2025">New York</a>.</figcaption></figure><p>All of our Smashing conferences are <strong>friendly and inclusive</strong>. In fact, we know many attendees by names, and we love friendships emerging as people get together and learn together, during the talks as well as in the workshops. Plus, we design our <a href="https://smashingmagazine.us1.list-manage.com/track/click?u=16b832d9ad4b28edf261f34df&id=9b1f4b6fbb&e=bfa05a2218">side events</a> to help everyone take part in meaningful, respectful conversations.</p><p><em>Already convinced, but need to convince your manager? We’ve got your back! <a href="https://smashingconf.com/pdf/convinceyourboss-amsterdam-2026.pdf">Download the Convince Your Boss PDF</a> to tip the scales in your favor. We’ve prepared a “<a href="https://smashingconf.com/amsterdam-2026/convince-your-boss">letter to the boss</a>” template for you as well. Good luck!</em></p><h2 id="meet-the-speakers">Meet the Speakers</h2><p>Expect <strong>10 practical talks</strong> from friendly, knowledgeable and approachable speakers who are bound to inspire you. <a href="https://smashingconf.com/amsterdam-2026/schedule">See schedule →</a></p><p>Meet <a href="https://smashingconf.com/amsterdam-2026/speakers/kevin-j-powell/">Kevin Powell</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/nick-dilallo/">Nick DiLallo</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/sara-soueidan/">Sara Soueidan</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/tj-pitre/">TJ Pitre</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/calvin-robertson/">Calvin Robertson</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/christine-vallaure/">Christine Vallaure</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/nathan-curtis/">Nathan Curtis</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/nadieh-bremer/">Nadieh Bremer</a>, <a href="https://smashingconf.com/amsterdam-2026/speakers/chris-kolb/">Chris Kolb</a>, and of course the <em>Mystery Speaker</em>.</p><figure><a href="https://smashingconf.com/amsterdam-2026/speakers"></img></a><figcaption>We are truly proud of the fantastic line-up for SmashingConf Amsterdam 2026! <a href="https://smashingconf.com/amsterdam-2026/">See you there?</a></figcaption></figure><p>Our speakers are very approachable and there is enough time for you to <strong>ask all your questions</strong> and get all the answers, in 1:1-conversations or in round tables.</p><h2 id="full-day-workshops-immersive-hands-on-learning">Full-Day Workshops: Immersive, Hands-On Learning</h2><p>If you attend a conference, why not join a practical workshop as well? Beyond the main stage sessions, the event offers a curated selection of <a href="https://smashingconf.com/amsterdam-2026/workshops">seven full-day workshops</a>. These are designed for deep-dive practical learning, allowing you to <strong>spend an entire day mastering a specific topic</strong> of your choice under the guidance of a world-class expert.</p><p>On <strong>April 13 and April 16</strong>, we run two full-days of training focusing around tangible, applicable insights that you can use right after the workshop. That way, you can dive even more into design systems, accessibility testing or complex interface design patterns. Plenty of topics to choose from, and bundle discounts are available, too: You can <a href="https://smashingconf.com/amsterdam-2026/registration">save €100 when signing up for the conference and a workshop →</a></p><h3 id="smashing-in-person-workshops">Smashing In-Person Workshops</h3><ul><li><a href="https://smashingconf.com/amsterdam-2026/workshops/christine-vallaure-figma/">Figma Deep Dive</a> with Christine Vallaure.</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/tj-pitre-ai-powered-design-systems/">Building Context-Based Design Systems for AI-Driven Product Teams</a> with TJ Pitre</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/sara-soueidan-frontend-accessibility">Front-End Accessibility Workshop with Sara Soueidan</a>.</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/vitaly-friedman-complex-UIs/">Designing For Complex UIs, 2026 Edition</a> with Vitaly Friedman</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/kevin-powell-css-toolkit/">The New CSS Toolkit</a> with Kevin Powell.</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/nathan-curtis-design-systems/">Architecting Component Anatomy, Props and Slots</a> with Nathan Curtis.</li><li><a href="https://smashingconf.com/amsterdam-2026/workshops/vitaly-friedman-measure-ux/">How To Measure UX and Design Impact</a> with Vitaly Friedman.</li></ul><h2 id="the-venue-pathé-tuschinski">The Venue: Pathé Tuschinski</h2><p>We definitely don’t choose <strong>venues</strong> randomly. We love the contrast of beautiful historical venues and digital craftsmanship, so for Amsterdam, we’ve chosen the magnificent <a href="https://smashingconf.com/amsterdam-2026/locations">Pathé Tuschinski</a> — an unforgettable venue that will make quite an impression on you! (Pathé Tuschinski will be our home for both conference days.)</p><figure><a href="https://smashingconf.com/amsterdam-2026/locations"></img></a><figcaption>Our new adventure: the SmashingConf will take place in the magnificent <a href="https://smashingconf.com/amsterdam-2026/locations">Pathé Tuschinski</a> in the heart of historic Amsterdam, the Netherlands, on April 13–16, 2026.</figcaption></figure><p>Walking into Pathé Tuschinski feels like stepping into a <strong>living masterpiece</strong>. Opened in 1921, the legendary cinema contains so much detail — from the ornate ceilings to the glowing wall sconces.</p><figure><a href="https://smashingconf.com/amsterdam-2026/locations"></img></a><figcaption>That’s Pathé Tuschinski, a magnificent venue in the heart of Amsterdam, the Netherlands.</figcaption></figure><p>The main auditorium is <strong>designed with comfort</strong> in mind. Plush, spacious seats ensure that you’ll be able to enjoy a perfectly unobstructed view of the stage or screen — no craning your neck, no dodging tall heads!</p><h2 id="side-events-before-during-and-after">Side Events Before, During and After</h2><p>While in Amsterdam, Why not explore the neighborhood and the city itself? At the end of the day, it’s about the fringe experiences that transform into something unforgettable!</p><ul><li><strong>Friedman’s Fabulous Fries Feestje</strong> 🍟<br></br>Join the one-and-only Vitaly for a little feestje (that’s Dutch for “small party”) through a few cool neighborhoods of the city, sharing his best tips on bitterballen, fries, ice cream, and more. It’s a great way to connect with fellow attendees before the main event even begins, and bond over cones of perfectly crispy Dutch fries!</li><li><strong>Smashing Sloep (Canal Tour)</strong> 🚤<br></br>Enjoy a chill, 2-hour cruise through the Amsterdam iconic canals, navigating past historic canal houses and under low stone bridges. You’ll share a sloepje with 6–7 fellow attendees, and choose your own route. The fee of €30,– is not included in your conference ticket, so make sure you register separately (friends and family are welcome to join in, too!).</li><li><strong>Jam Session</strong> 🎤<br></br>Lightning talks, drinks and snacks: it’s the perfect setting to meet fellow attendees and “geek out” the night before the conference. This event is for attendees only, and you can pick up your badge early and skip the registration lines on Tuesday morning. The atmosphere is open, friendly and energizing, so make sure to join in!</li><li><strong>Sports & Morning Rituals</strong> 🧘<br></br>It’s all about keeping the energy high and clearing your head. Whether you’re a runner or more of a yoga cat, we’ve got just what you need. You can join speakers and attendees for a 5k run, and then if you like, join a mindfulness session with a few minutes of functional stretches followed by guided meditation and stillness. You do you!</li><li><strong>Bitterballen & Beer</strong> 🍺<br></br>You can’t be in the Netherlands without embracing local flavor. Breaks come with bitterballen — the iconic Dutch crispy meat snacks — paired with cold beer. It’s not just catering; it’s culture.</li></ul><p>Together, these <a href="https://smashingmagazine.us1.list-manage.com/track/click?u=16b832d9ad4b28edf261f34df&id=9b1f4b6fbb&e=bfa05a2218">side events</a> turn a conference ticket into a full experience — part learning, part adventure, part community. Inside Pathé Tuschinski, you get the “back to the future” inspiration. Outside, you get the human connections that make it all more meaningful!</p><h2 id="team-tickets">Team Tickets? 👫👭</h2><p>Bring the entire team to SmashingConf, and save some of your training budget along the way as well. With our <a href="https://smashingconf.com/amsterdam-2026/registration">friendly bundle tickets</a> and team discounts, we’ve got your back! If you want to come with a large team, or are interested in something special, <a href="mailto:hello@smashingconf.com">please send us a short email</a> and we’ll get back to you right away!</p><h2 id="we-can-t-wait-to-see-you">We Can’t Wait To See You!</h2><p>As we are getting ready for the event, we couldn’t be more excited to meet you in Amsterdam. Let’s boost our design and UX skills, together, and create memorable experiences that will last for a while. 🧡</p><figure><a href="https://smashingconf.com/amsterdam-2026" title="SmashingConf Amsterdam 2026"></img></a></figure><p>Ah, perhaps your <strong>manager needs a little bit convincing</strong>? We’ve got your back! <a href="https://smashingconf.com/pdf/convinceyourboss-amsterdam-2026.pdf"><strong>Download the Convince Your Boss PDF</strong></a> to tip the scales in your favor. And we’ve prepared a “<a href="https://smashingconf.com/amsterdam-2026/convince-your-boss">letter to the boss</a>” template for you as well. Good luck! 🤞🤞🏼🤞🏾</p><div></img>
<span>(il)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>A Designer’s Guide To Eco-Friendly Interfaces</h1>
<p>hello@smashingmagazine.com (Carrie Webster) — Mon, 23 Feb 2026 10:00:00 GMT</p>
<h1>A Designer’s Guide To Eco-Friendly Interfaces — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/user-experience">User Experience</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/optimization">Optimization</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Every high-resolution hero image, autoplay video, and complex JavaScript animation carries a cost. Sustainable UX challenges the era of “unlimited pixels” and reframes performance as responsibility. In 2026, truly sophisticated design is defined not by how much it adds, but by how thoughtfully it reduces its footprint.</section></p><p>I’ve spent over two decades in the trenches of user experience design. I remember the transition from table-based layouts to CSS, the pivot to responsive design when the iPhone launched, and the rise of the “attention economy.” But as we navigate 2026, the industry is facing its most significant shift yet. We are moving past the era of “design at any cost” into the era of <strong>Sustainable UX</strong>.</p><p>It’s not something most designers think about, including myself, until I was prompted by hearing about this as a concept. For years, we have treated the internet as an ethereal, weightless cloud. We have assumed that digital products were “green” simply because they weren’t printed on paper. I used to think that too, and before the concept of climate change emerged, it was more about saving trees.</p><p>We were wrong. The cloud is a physical infrastructure, a sprawling network of data centres, undersea cables, and cooling systems that hum <sup>24</sup>⁄<sub>7</sub>. While AI-focused data centers match the power <a href="https://www.iea.org/reports/energy-and-ai/executive-summary">consumption of massive aluminum smelters</a>, their high geographic density creates an even more intense and localised environmental strain.</p><p>As UX designers, we are the architects of this energy consumption. Every high-resolution hero image, every auto-playing background video, and every complex JavaScript animation we approve is a direct instruction to a processor to consume power. If we want to build a future that lasts, we must stop designing for “wow” and start designing for <strong>efficiency.</strong></p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="http://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/"><div></img></source></picture></div></a></div></aside></div><h2 id="dark-mode">Dark Mode</h2><p>In the early 2000s, white backgrounds were the standard because they mimicked the familiarity of paper. However, the hardware has evolved, and our design philosophy must follow. The shift from LCD to OLED (Organic Light Emitting Diode) technology has fundamentally changed how colour impacts energy.</p><figure><a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/1-dark-mode-light-mode.jpg"></img></a><figcaption>Dark mode vs. Light mode. (Image source: <a href="https://www.purdue.edu/newsroom/archive/releases/2021/Q3/dark-mode-may-not-save-your-phones-battery-life-as-much-as-you-think,-but-there-are-a-few-silver-linings.html">Purdue University</a>) (<a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/1-dark-mode-light-mode.jpg">Large preview</a>)</figcaption></figure><h3 id="the-logic">The Logic</h3><p>Unlike traditional LCD screens, which require a backlight that is always on (even when displaying black), <strong><a href="https://www.digikey.cz/en/maker/blogs/2024/oled-vs-led-screens-unveiling-the-illuminating-differences">OLED screens illuminate each pixel individually</a></strong>. When a pixel is set to true black (<code>#000000</code>), that specific diode is turned completely off. It draws zero power.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aBy%20designing%20interfaces%20that%20favour%20darker%20palettes,%20we%20aren%e2%80%99t%20just%20following%20a%20trend;%20we%20are%20physically%20reducing%20the%20energy%20requirement%20of%20the%20user%e2%80%99s%20device.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fdesigner-guide-eco-friendly-interfaces%2f">By designing interfaces that favour darker palettes, we aren’t just following a trend; we are physically reducing the energy requirement of the user’s device.</a></p></blockquote><h3 id="the-data">The Data</h3><p>The energy savings are far from negligible. A landmark study by <strong><a href="https://www.purdue.edu/newsroom/archive/releases/2021/Q3/dark-mode-may-not-save-your-phones-battery-life-as-much-as-you-think,-but-there-are-a-few-silver-linings.html">Purdue University</a></strong> in 2021, which has become the gold standard for this discussion, revealed that at 100% brightness, switching from light mode to dark mode can save an average of <strong>39% to 47%</strong> of battery power. On a global scale, if every major app defaulted to dark mode, the reduction in grid demand would be astronomical.</p><h3 id="the-design-goal">The Design Goal</h3><p>In 2026, Dark Mode should no longer be a secondary “theme” tucked away in a settings menu. We should be designing with a <strong>“Dark-First”</strong> mentality. This doesn’t mean every site must look like <em>The Matrix</em>, but it does mean prioritising high-contrast dark themes as the default system-preferred state. This extends the hardware lifespan of the device and lowers the carbon footprint of every interaction.</p><p>I personally prefer Light-Mode for reading, so it makes sense to have both light and dark mode options available. There are also <strong><a href="https://www.cueforgood.com/blog/dark-mode-accessibility-sustainable-web-design/">accessibility considerations</a></strong> with providing both options.</p><h2 id="image-and-video-optimisation">Image And Video Optimisation</h2><p>We have become lazy designers. With high-speed 5G and fibre optics, we’ve stopped worrying about file sizes. The <strong><a href="https://almanac.httparchive.org/en/2022/page-weight#:~:text=by%20Barry%20Pollard-,Introduction,often%20expensive%20mobile%20network%20access.">average mobile page weight has increased by over 500%</a></strong> in the last decade, largely due to unoptimized visual assets.</p><h3 id="the-logic-1">The Logic</h3><p>The “Digital Fat” of a website (those 4MB Unsplash photos and 15MB background videos) is the single largest contributor to page-load energy. Every megabyte transferred from a server to a client requires electricity for the transmission, the server’s processing, and the user’s rendering engine. When we use massive files, we are essentially “burning” energy to show a picture that could have been just as effective at a fraction of the size. Not to mention, you are also providing a better user experience with a page that loads much faster.</p><figure><a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/2-median-page-weight.png"></img></a><figcaption>Median page weight by content type. (Image source: <a href="https://almanac.httparchive.org/en/2022/page-weight#content-type-and-file-formats">HTTP Archive</a>) (<a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/2-median-page-weight.png">Large preview</a>)</figcaption></figure><h3 id="the-data-1">The Data</h3><p>According to the <strong><a href="https://almanac.httparchive.org/en/2022/page-weight">HTTP Archive</a></strong>, images and video consistently account for the lion’s share of a page’s total weight. However, the shift to modern formats like <strong>AVIF</strong> and <strong>WebP</strong> can <strong><a href="https://crystallize.com/blog/avif-vs-webp">reduce image weight by up to 50%</a> compared to JPEG,</strong> without any perceptible loss in quality.</p><p>Although these formats are not as familiar to me as JPG and PNG, I am definitely looking forward to using them to reduce page size.</p><h3 id="the-design-goal-1">The Design Goal</h3><p>I recently led a redesign for a cybersecurity platform. By implementing a “Before and After” audit, we discovered that their homepage was loading 5.5MB of data. By replacing high-res photography with <strong>SVG (Scalable Vector Graphics)</strong> art and using clever <strong>CSS gradients</strong> instead of image assets, we dropped the load to 1.2MB. That is a <strong>78% reduction in energy load!</strong> As a designer, your first question should always be:</p><blockquote>“Do I need a photo for this, or can I achieve the same emotional resonance with code?”</blockquote><h2 id="intentional-motion-cutting-loud-animations">Intentional Motion: Cutting “Loud” Animations</h2><p>We live in an era of “<strong><a href="https://www.nngroup.com/articles/scrolljacking-101">scroll-jacking</a></strong>” and complex 3D Parallax effects. While these might win awards on Awwwards.com, they are often ecological disasters.</p><h3 id="the-logic-2">The Logic</h3><p>Animation is not free. To render a complex animation, the device’s GPU (Graphics Processing Unit) must work at high capacity. <strong><a href="https://www.lenovo.com/au/en/knowledgebase/graphics-processing-unit-gpu-a-comprehensive-guide/?org">This increases the CPU temperature</a></strong>, triggers cooling fans (in laptops), and drains battery rapidly. “Loud” animations that run constantly in the background or trigger massive re-paints of the browser are the energy equivalent of leaving your car idling in the driveway.</p><figure><a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/3-size-comparison-uncompressed-images.png"></img></a><figcaption>Size comparison of uncompressed JPEG, PNG, WebP, and AVIF photos and text images. (Image source: <a href="https://photutorial.com/image-format-comparison-statistics/">Photutorial</a>) (<a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/3-size-comparison-uncompressed-images.png">Large preview</a>)</figcaption></figure><h3 id="the-data-2">The Data</h3><p><strong><a href="https://m3.material.io/styles/motion/overview">Google’s Material Design guidelines</a></strong> emphasize “<strong>Meaningful Motion</strong>.” They argue that animation should be used only to orient the user or provide feedback. And using <strong><a href="https://www.tumwebsme.com/en/customer/blog/green-web-design-sustainable-websites-carbon-footprint-guide">WebP instead of JPEG can save 25-50%</a></strong> of data on a page.</p><h3 id="the-design-goal-2">The Design Goal</h3><p>We must adopt <strong>Meaningful Motion.</strong> If an animation doesn’t help a user complete a task or understand a hierarchy, it is a waste. We should favour <strong>CSS transitions</strong> over heavy JavaScript libraries like GSAP or Lottie where possible, as <strong><a href="https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/">CSS is hardware-accelerated</a></strong> and far more efficient for the browser to calculate.</p><p>As a UX designer, I can’t argue this approach. This not only helps reduce data waste but also improves UX for our users.</p><h2 id="setting-a-data-budget-for-every-project">Setting A “Data Budget” For Every Project</h2><p>In my 20+ years of UX, the most successful projects have generally been the ones with the tightest constraints.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aJust%20as%20a%20project%20has%20a%20financial%20budget,%20it%20should%20also%20have%20a%20carbon%20and%20data%20budget.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fdesigner-guide-eco-friendly-interfaces%2f">Just as a project has a financial budget, it should also have a carbon and data budget.</a></p></blockquote><h3 id="the-logic-3">The Logic</h3><p>A Data Budget is a hard cap on the total size of a page (e.g., “This landing page cannot exceed 1MB”). This forces the design team to make difficult, intentional choices. If you want to add a new tracking script or a fancy font weight, you have to “pay” for it by optimising or removing something else. This prevents “feature creep” from turning into “carbon creep.”</p><h3 id="the-data-3">The Data</h3><p>The <strong><a href="https://sustainablewebdesign.org/estimating-digital-emissions/">Sustainable Web Design model</a></strong>, developed by pioneers like <strong><a href="https://www.wholegraindigital.com/blog/updating-website-carbon-to-v4-of-the-sustainable-web-design-model/">Wholegrain Digital</a></strong>, provides a formula to calculate the CO2 per page view. The average website produces about 0.5 grams of CO2 per view. For a site with 1 million monthly views, that’s 6 metric tons of CO2 a year, equivalent to driving a car 15,000 miles.</p><h3 id="the-design-goal-3">The Design Goal</h3><p><strong><a href="https://mangrove-web.com/blog/resources/the-green-ux-checklist/">The Sustainable UX Checklist</a></strong></p><ul><li><strong>Reduce Images</strong><br></br>Question the necessity of every visual and use the smallest resolution and most efficient file formats (like AVIF) to minimize data transfer.</li><li><strong>Optimise Video</strong><br></br>Eliminate auto-playing media and prioritise highly compressed, short loops to ensure energy is only spent on content the user intends to view.</li><li><strong>Limit Fonts</strong><br></br>Use a maximum of two web font weights or stick to classic system fonts to remove unnecessary server requests and rendering bloat.</li><li><strong>Recycle Assets</strong><br></br>Repurpose a single image or video multiple times using CSS filters and overlays to create visual variety without increasing the total page weight.</li><li><strong>Choose Green Hosting</strong><br></br>Host your digital products on servers verified by <strong><a href="https://www.thegreenwebfoundation.org/">The Green Web Foundation</a></strong> to ensure they are powered by renewable energy sources.</li><li><strong>Minimize Data Distance</strong><br></br>Select server locations geographically close to your primary audience to reduce the energy required for data to travel through physical infrastructure.</li></ul><figure><a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/4-green-ux-checklist.png"></img></a><figcaption>Printable Green UX checklist from Mangrove Web. (Image source: <a href="https://mangrove-web.com/blog/resources/the-green-ux-checklist/">Mangrove Web</a>) (<a href="https://files.smashing.media/articles/designer-guide-eco-friendly-interfaces/4-green-ux-checklist.png">Large preview</a>)</figcaption></figure><h2 id="the-business-case-for-eco-friendly-design">The Business Case For Eco-friendly Design</h2><p>Some might argue that “Green UX” sounds like a compromise on quality. On the contrary, it is a competitive advantage. Sustainable design is <strong>performance design.</strong></p><p>When you reduce page weight, your site loads faster. When your site loads faster, your <strong><a href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals</a></strong> improve. When your <strong>Core Web Vitals</strong> improve, your <strong>SEO ranking</strong> goes up. Furthermore, users on older devices or slower data plans (especially in emerging markets) can actually access your product. This is the definition of “Inclusive Design.”</p><p>By cutting the “digital fat,” we create a leaner, faster, and more accessible web. We are moving away from the “disposable design” of the 2010s toward a more permanent, respectful digital architecture.</p><h2 id="conclusion-the-future-of-clean-design">Conclusion: The Future Of “Clean” Design</h2><p>In my two decades of design, I’ve seen many trends come and go. Skeuomorphism, Flat Design, Neumorphism — they were all aesthetic choices. But sustainable UX isn’t a trend; it’s now a necessity. We are the first generation of designers who have to reckon with the physical consequences of our digital work.</p><p>Sustainable UX is a “win-win-win.” It’s better for the planet because it reduces energy consumption. It’s better for the user because it results in faster, more responsive interfaces. And it’s better for the business because it lowers hosting costs AND improves conversion rates.</p><p>The era of “unlimited pixels” is over. In 2026, the most sophisticated design is the one that leaves the smallest footprint. We are no longer just designers; we are the guardians of the user’s battery, their data plan, and ultimately, the environment.</p><h2 id="the-call-to-action">The Call To Action</h2><p>I challenge you to audit just <strong>one page</strong> of your current project today. Use a tool like the <strong><a href="https://www.websitecarbon.com/">Website Carbon Calculator</a></strong> to see its impact. Then, look for the “invisible waste.” Can that image be an SVG? Can that video be a static hero? Can that “loud” animation be silenced?</p><p>Start small. The most elegant solution is often the one with the fewest bytes.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Designing A Streak System: The UX And Psychology Of Streaks</h1>
<p>hello@smashingmagazine.com (Victor Ayomipo) — Wed, 18 Feb 2026 15:00:00 GMT</p>
<h1>The UX And Psychology Of Streaks — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>20 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/psychology">Psychology</a>,
<a href="http://www.smashingmagazine.com/category/storytelling">Storytelling</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>What makes streaks so powerful and addictive? To design them well, you need to understand how they align with human psychology. Victor Ayomipo breaks down the UX and design principles behind effective streak systems.</section></p><p>I’m sure you’ve heard of streaks or used an app with one. But ever wondered why streaks are so popular and powerful? Well, there is the obvious one that apps want as much of your attention as possible, but aside from that, did you know that when the popular learning app Duolingo introduced iOS widgets to display streaks, <a href="https://www.orizon.co/blog/duolingos-gamification-secrets#:~:text=When%20Duolingo%20introduced%20an%20iOS%20widget%20displaying%20streaks%2C%20user%20commitment%20increased%20by%2060%25!">user commitment surged by 60%</a>. Sixty percent is a massive shift in behaviour and demonstrates how “streak” patterns can be used to increase engagement and drive usage.</p><p>At its most basic, <strong>a streak is the number of consecutive days that a user completes a specific activity</strong>. Some people also define it as a “gamified” habit or a metric designed to encourage consistent usage.</p><p>But streaks transcend beyond being a metric or a record in an app; it is more psychological than that. Human instincts are easy to influence with the right factors. Look at these three factors: <strong>progress</strong>, <strong>pride</strong>, and fear of missing out (commonly called <a href="https://www.smashingmagazine.com/2019/11/fomo-increase-conversions/">FOMO</a>). What do all these have in common? <em>Effort</em>. The more effort you put into something, the more it shapes your identity, and that is how streaks crosses into the world of behavioural psychology.</p><p>Now, with great power comes great responsibility, and because of that, there’s a dark side to streaks.</p><p>In this article, we’ll be going into the psychology, UX, and design principles behind building an effective streak system. We’ll look at (1) why our brains almost instinctively respond to streak activity, (2) how to design streaks in ways that genuinely help users, and (3) the technical work involved in building a streak pattern.</p><h2 id="the-psychology-behind-streaks">The Psychology Behind Streaks</h2><p>To design and build an effective streak system, we need to understand how it aligns with how our brains are wired. Like, what makes it so effective to the extent that we feel so much intense dedication to protect our streaks?</p><p>There are three interesting, well-documented psychology principles that support what makes streaks so powerful and addictive.</p><h3 id="loss-aversion">Loss Aversion</h3><p>This is probably the strongest force behind streaks. I say this because most times, you almost can’t avoid this in life.</p><p>Think of it this way: If a friend gives you $100, you’d be happy. But if you lost $100 from your wallet, that would hurt way more. The emotional weight of those situations isn’t equal. Loss hurts way more than gain feels good.</p><p>Let’s take it further and say that I give you $100 and ask you to play a gamble. There’s a 50% chance you win another $100 and a 50% chance you lose the original $100. Would you take it? I wouldn’t. Most people wouldn’t. That’s loss aversion.</p><p>If you think about it, it is logical, it is understandable, it is human.</p><p>The concept behind loss aversion is that we feel the pain of losing something twice as much as the pleasure of gaining something of equal value. In psychological terms, loss lingers more than gains do.</p><p>You probably see how this relates to streaks. To build a noticeable streak, it requires effort; as a streak grows, the motivation behind it begins to fade; or more accurately, it starts to become secondary.</p><p>Here’s an example: Say your friend has a three-day streak closing their <a href="https://www.apple.com/watch/close-your-rings/">“Move Rings” on their Apple Watch</a>. They have almost nothing to lose beyond wanting to achieve their goal and be consistent. At the same time, you have an impressive 219-day streak going. Chances are that you are trapped by the <em>fear of losing it</em>. You most likely aren’t thinking about the achievement at this point; it’s more about protecting your invested effort, and that is loss aversion.</p><p><a href="https://blog.duolingo.com/how-duolingo-streak-builds-habit/#:~:text=This%20is%20when%20we%20tap%20into%20%22loss%20aversion%2C%22%20an%20internal%20bias%20in%20your%20brain%20that%20makes%20you%20particularly%20averse%20to%20losing%20something%2C%20like%20a%20learning%20streak.">Duolingo explains how loss aversion contributes to a user’s reluctance to break a long streak</a>, even on their laziest days. In a way, a streak can turn into a habit when loss aversion settles in.</p><h3 id="the-fogg-behaviour-model-b-map">The Fogg Behaviour Model (B = MAP)</h3><p>Now that we understand the fear of losing the effort invested in longer streaks, another question is: <em>What makes us do the thing in the first place, day after day, even before the streak gets big?</em></p><p>That’s what the <a href="https://www.behaviormodel.org">Fogg Behaviour Model</a> is about. It is relatively simple. A behaviour (B) only occurs when three factors — Motivation (M), Ability (A), and Prompt (P) — align at the same moment. Thus, the equation B=MAP.</p><p>If any of these factors, even one, is missing at that moment, the behaviour won’t happen.</p><p>So, for a streak system to be efficient and recurring, all three factors must be present:</p><p><strong>Motivation</strong><br></br>This is fragile and not something that is consistently present. There are days when you’re pumped to learn Spanish, and days you don’t even feel an iota of willpower to learn the language. <strong>Motivation</strong> by itself to build a habit is unreliable and a losing battle from day one.</p><p><strong>Ability</strong><br></br>To compensate for the limitations of motivation, <strong>ability</strong> is critical. In this context, ability means the ease of action, i.e, the effort is so easy that it’s unrealistic to say it isn’t possible. Most apps intentionally use this. Apple Fitness just needs you to stand for one minute in an hour to earn a tick towards your Stand goal. Duolingo only needs one completed lesson. These tasks do not require all that much effort. The barrier is so low that even on your worst days, you can do it. But the combined effort of an ongoing streak is where the idea of losing that streak kicks in.</p><p><strong>Prompt</strong><br></br>This is what completes the equation. Humans are naturally forgetful, so yes, ability can get us 90% there. But a <strong>prompt</strong> reminds us to act. Streaks are persistent by design, so users need to be constantly reminded to act. To see how powerful a prompt can be, <a href="https://review.firstround.com/the-tenets-of-a-b-testing-from-duolingos-master-growth-hacker/#:~:text=Gina%20Gotthilf%2C%20VP,DAUs%2C%E2%80%9D%20she%20says.">Duolingo did an A/B test</a> to see if a little red badge on the app’s icon increased consistent usage. It produced a 6% increase in daily active users. <em>Just a red badge.</em></p><h4 id="model-limitations">Model Limitations</h4><p>All this being said, there is a limitation to the Fogg model whereby critics and modern research have noticed that a design that relies too heavily on prompts, like aggressive notifications, risks creating mental fatigue. Constant notifications and overtime could cause users to churn. So, watch out for that.</p><h3 id="the-zeigarnik-effect">The Zeigarnik Effect</h3><p>How do you feel when you leave a task of project half-done? That irritates many people because unfinished tasks occupy more mental space than the things we complete. When something is done and gone, we tend to forget it. When something is left undone, it tends to weigh on our minds.</p><p>This is exactly why digital products use artificial progress indicators, like Upwork’s profile completion bar, to let a user know that their profile is only “60% complete”. It nudges the user to finish what they started.</p><figure><a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/1-upwork-profile-completion-progress-bar.png"></img></a><figcaption>Upwork’s profile completion progress bar. (<a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/1-upwork-profile-completion-progress-bar.png">Large preview</a>)</figcaption></figure><p>Let’s look at another example. You have five tasks in a to-do list app, and at the end of the day, you only check four of them as completed. Many of us will feel unaccomplished because of that one unfinished task. That, right there, is the <strong>Zeigarnik effect</strong>.</p><p><a href="https://en.wikipedia.org/wiki/Zeigarnik_effect">The Zeigarnik effect</a><a href="https://en.wikipedia.org/wiki/Zeigarnik_effect">he</a> was demonstrated by psychologist Bluma Zeigarnik, who described that we tend to keep incomplete tasks active in our memory longer than completed tasks.</p><p>A streak pattern naturally taps into this in UX design. Let’s say you are on day 63 of a learning streak. At that point, you’re in an ongoing pattern of unfinished business. Your brain would rarely forget about it as it sits in the back of your mind. At this point, your brain becomes the one sending you notifications.</p><p>When you put these psychological forces together, you begin to truly understand why streaks aren’t just a regular app feature; they are capable of reshaping human behaviour.</p><p>But somewhere along the line — I can’t say exactly when, as it differs for everyone — things reach a point where a streak shifts from “fun” to something you feel you can’t afford to lose. You don’t want 58 days of effort to go to waste, do you? That is what makes a streak system effective. If done right, <strong>streaks help users build astounding habits that accomplish a goal</strong>. It could be reading daily or hitting the gym consistently.</p><p>These repeated actions (sometimes small) compound over time and become evident in our daily lives. But there are two sides to every coin.</p><h2 id="the-thin-line-between-habit-and-compulsion">The Thin Line Between Habit And Compulsion</h2><p>If you have been following along, you can already tell there’s a dark side to streak systems. Habit formation is about consistency with a repeated goal. Compulsion, however, is the consistency of working on a goal that is no longer needed but held onto out of fear or pressure. It is a razor-thin line.</p><p>You brush your teeth every morning without thinking; it is automatic and instinctive, with a clear goal of having good breath. That’s a streak that forms a good habit. An ethical streak system gives users space to breathe. If, for some reason, you don’t brush in the morning, you can brush at noon. Imperfection is allowed without fear of losing a long effort.</p><p>Compulsion takes the opposite route, whereby a streak makes you anxious, you feel guilty or even exhausted, and sometimes, it feels like you haven’t accomplished anything, despite all your work. You act not because you want to, but because you’re subconsciously terrified of seeing your progress reset to zero.</p><p>Someone even described this perfectly, “<a href="https://www.thecut.com/2019/04/why-breaking-a-streak-feels-so-awful.html#:~:text=Callie%20Beusman%2C%20the,day%20151%20now.%E2%80%9D"><em>I felt that I was cheating, but simply did not care. I am nothing without my streak</em></a>”. This shows the extreme hold streaks can have on an individual. To the extent that users begin to tie their self-worth to an arbitrary metric rather than the original goal or reason they started the streak in the first place. The streak becomes who they are, not just what they do.</p><p>A well-designed <strong>ethical</strong> streak system should feel like <strong>encouragement</strong> to the user, not pressure or obligation. This relates to the balance of intrinsic and extrinsic motivation. Extrinsic motivation (external rewards, avoiding punishment) might get users started, but intrinsic motivation (doing the task for a personal goal like learning Spanish because you genuinely want to communicate with a loved one) is stronger for long-term engagement.</p><p>A good system should gravitate towards intrinsic motivation with careful use of extrinsic elements, i.e., remind users of how far they have come, not threaten them with what they might lose. Again, it is a fine line.</p><p>A simple test when designing a streak system is to actually take some time and think whether your products make money by selling solutions to anxiety that your product created. If yes, there’s a high chance you are exploiting users.</p><p>So the next question becomes, <em>If I choose to use streak, how do I design it in a way that genuinely helps users achieve their goals?</em></p><h3 id="the-ux-of-good-streak-system-design">The UX of Good Streak System Design</h3><p>I believe this is where most projects either nail an effective streak system or completely mess it up. Let’s go through some UX principles of a good streak design.</p><h3 id="keep-it-effortless">Keep It Effortless</h3><p>You’ve probably heard this before, maybe from books like <a href="https://jamesclear.com/atomic-habits"><em>Atomic Habits</em></a>, but it’s worth mentioning that one of the easiest ways habits can be formed is by making the action tiny and easy. This is similar to the <em>ability</em> factor we discussed from the Fogg Behaviour Model.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20first%20rule%20of%20any%20streak%20design%20should%20be%20making%20the%20required%20action%20as%20small%20as%20humanly%20possible%20while%20still%20achieving%20progress.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fdesigning-streak-system-ux-psychology%2f">The first rule of any streak design should be making the required action as small as humanly possible while still achieving progress.</a></p></blockquote><p>If a daily action requires willpower to complete, that action won’t make it past five days. Why? You can’t be motivated five days in a row.</p><p>Case in point: If you run a meditation app, you don’t need to make users go through a 20-minute session just to maintain the streak. Try a single minute, maybe even something as small as thirty seconds, instead.</p><p>As the saying goes, <a href="https://en.wikipedia.org/wiki/Little_Things_(poem)"><em>little drops of water make the mighty ocean</em></a>. Small efforts compile into big achievements with time. That should be the goal: remove friction, especially when the moment might be difficult. When users are stressed or overwhelmed, let them know that simply showing up, even for a few seconds, counts as effort.</p><h3 id="provide-clear-visual-feedback">Provide Clear Visual Feedback</h3><p>Humans are visual by nature. Most times, we need to see something to believe; there’s this need to visualize things to understand them better and put things into perspective.</p><p>This is why streak patterns often use visual elements, like graphs, checkmarks, progress rings, and grids, to visualize effort. Look at GitHub’s contribution graph. It is a simple visualization of consistency. Yet developers breathe it in like oxygen.</p><figure><a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/2-contributions-graph.png"></img></a><figcaption>The contributions graph displayed on a GitHub user profile. (<a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/2-contributions-graph.png">Large preview</a>)</figcaption></figure><p><strong>The key is not to make a streak system feel abstract.</strong> It should feel real and earned. For instance, Duolingo and Apple’s Fitness activity rings use clean animation designs on completion of a streak, and GitHub shows historical data of a user’s consistency over time.</p><figure><a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/3-apple-watch-fitness.png"></img></a><figcaption>Apple Watch Fitness shows a limited animated badge on completion of all three Activity rings. (Image source: <a href="https://www.apple.com/">Apple</a>) (<a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/3-apple-watch-fitness.png">Large preview</a>)</figcaption></figure><h3 id="use-good-timing">Use Good Timing</h3><p>I mentioned earlierthat humans are generally forgetful by nature, and that prompts can help maintain forward momentum. Without prompts, most <em>new</em> users forget to keep going. Life can get busy, motivation disappears, and things happen. Even long-time users benefit from prompts, though most times, they are already locked inside the habit loop. Nevertheless, even the most committed person can accidentally miss a day.</p><p>Your streak system most definitely needs reminders. The most-used prompt reminders are <a href="https://www.smashingmagazine.com/2022/04/guide-push-notifications-developers/">push notifications</a>. Timing really matters when working with push notifications. The type of app matters, too. Sending a notification at 9 a.m. saying <em>“You haven’t practiced today”</em> is just weird for a learning app because many have things to do in the day before they even think about completing a lesson. If we’re talking about a fitness app, though, it is reasonable and maybe even expected to be reminded earlier in the day.</p><p><a href="https://clevertap.com/blog/best-time-to-send-push-notifications/#:~:text=Need%20to%20Know!-,Industry%2DSpecific%20Timing%3A%20Tailor%20Your%20Approach,-Different%20industries%20have">Push notifications vary significantly by app category</a>. Fitness apps, for instance, see higher engagement with early morning notifications (7–8 AM), while productivity apps might perform better in early noon. The key is to A/B test your app’s timing based on your users’ behaviours rather than assuming things are one-size-fits-all. What works for a meditation app might not work for a coding tracker.</p><p>Other prompt methods are red dots on the app icon and even app widgets. Studies vary, but <a href="https://www.nber.org/system/files/working_papers/w28936/w28936.pdf?utm_campaign=PAN%5B…%5Dtm_medium=PANTHEON_STRIPPED&%3Butm_source=PANTHEON_STRIPPEDhttps://www.nber.org/system/files/working_papers/w28936/w28936.pdf?utm_campaign=PAN%5B…%5Dtm_medium=PANTHEON_STRIPPED&%3Butm_source=PANTHEON_STRIPPED">the average person unlocks their device between 50-150 times a day</a> (PDF). If a user sees a red dot on an app or a widget that indicates a current streak every time they unlock their phone, it increases commitment.</p><p>Just don’t overdo it; the prompt should serve as a reminder, not a nag.</p><h3 id="celebrate-milestones">Celebrate Milestones</h3><p>A streak system should try to celebrate milestones to reignite emotions, especially for users deep into a streak.</p><p>When a user hits Day 7, Day 30, Day 50, Day 100, Day 365, you should make a big deal out of it. Acknowledge achievements — especially for long-time users.</p><figure><a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/4-apple-animated-badges.jpg"></img></a><figcaption>Image source: <a href="https://www.apple.com/">Apple</a>. (<a href="https://files.smashing.media/articles/designing-streak-system-ux-psychology/4-apple-animated-badges.jpg">Large preview</a>)</figcaption></figure><p>As we saw earlier, Duolingo figured this out and implemented an animated graphic that celebrates milestones with confetti. Some platforms even give substantial bonus rewards that validate users’ efforts. And this can be beneficial to apps, such that users tend to share their milestones publicly on social media.</p><p>Another benefit is the anticipation that comes before reaching milestones. It isn’t just keeping the streak alive endlessly; users have something to look forward to.</p><h3 id="use-grace-mechanisms">Use Grace Mechanisms</h3><p>Life is unpredictable. People get distracted. Any good streak system should expect imperfection. One of the biggest psychological threats to a streak system is the hard reset to zero after just a single missed day.</p><p>An “ethical” streak system should provide the user with some slack. Let’s say you have a 90-day chess learning streak. You have been consistent for three good months, and one day, your phone dies while traveling, and just like that, 90 becomes 0 — everything, all that effort, is erased, and progress vanishes. The user might be completely devastated. The thought of rebuilding it from scratch is so demoralizing that the effort isn’t worth it. At worst, a user might abandon the app after feeling like a failure.</p><p>Consider adding a “grace” mechanism to your streak system:</p><ul><li><strong>Streak Freeze</strong><br></br>Allow users to intentionally miss a day without penalties.</li><li><strong>Extra Time</strong><br></br>Allow a few hours (2–3) past the usual deadline before triggering a reset.</li><li><strong>Decay Models</strong><br></br>Instead of a hard reset, the streak decreases by a small amount, e.g., 10 days is deducted from the streak per missed day.</li></ul><h3 id="use-an-encouraging-tone">Use An Encouraging Tone</h3><p>Let’s compare two messages shown to users when a streak breaks:</p><ol><li>“You lost your 42-day streak. Start over.”</li><li>“You showed up for 42 days straight. That’s incredible progress! Wanna give it another try?”</li></ol><p>Both convey the same information, but the emotional impact is different. The first message would most likely make a user feel demoralized and cause them to quit. The second message celebrates what has already been achieved and gently encourages the user to try again.</p><h2 id="streak-systems-design-challenges">Streak Systems Design Challenges</h2><p>Before we go into the technical specifics of building a streak system, you should be aware of the challenges that you might face. Things can get complicated, as you might expect.</p><h3 id="handling-timezones">Handling Timezones</h3><p>There is a reason why handling time and date is among the most difficult concepts developers deal with. There’s formatting, internationalization, and much more to consider.</p><p>Let me ask you this: <em>What counts as a day?</em></p><p>We know the world runs on different time zones, and as if that is not enough, some regions have Daylight Saving Time (DST) that happens twice a year. Where do you even begin handling these edge cases? What counts as the “start” of tomorrow?</p><p>Some developers try to avoid this by using one central timezone, like UTC. For some users, this would yield correct results, but for some, it could be off by an hour, two hours, or more. This inconsistency ruins the user experience. Users care less how you handle the time behind the scenes; all they expect is that if they perform a streak action at 11:40 p.m., then it should register at that exact time, in their context. You should define “one day” based on the user’s local timezone, not the server time.</p><p>Sure, you can take the easy route and reset streaks globally for all users at midnight UTC, but you are very much creating unfairness. Someone in California always has eight extra hours to complete their task than someone living in London. That’s an unjust design flaw that punishes certain users because of their location. And what if that person in London is only visiting, completes a task, then returns to another timezone?</p><p>One effective solution to all these is to ask users to explicitly set their timezone during onboarding (preferably after first authentication). It’s a good idea to include a subtle note that providing timezone information is only used for the app to accurately track progress, rather than being used as personally identifiable data. And it’s another good idea to make that a changeable setting.</p><p>I suggest that anyone avoid directly handling timezone logic in an app. Use tried-and-true date libraries, like <a href="https://momentjs.com">Moment.js</a> or <a href="https://pypi.org/project/pytz/">pytz</a> (Python), etc. There’s no need to reinvent the wheel for something as complex as this.</p><h3 id="missed-days-and-edge-cases">Missed Days And Edge Cases</h3><p>Another challenge you should worry about is uncontrollable edge cases like users oversleeping, server downtime, lag, network failures, and so on. Using the idea of <strong>grace mechanisms</strong>, like the ones we discussed earlier, can help.</p><p>A grace window of two hours might help both user and developer, in the sense that users are not rigidly punished for uncontrollable life circumstances. For developers, grace windows are helpful in those uncontrollable moments when the server goes down in the middle of the night.</p><p>Above all, never trust the client. Always validate on the server-side. The server should be the single source of truth.</p><h3 id="cheating-prevention">Cheating Prevention</h3><p>Again, I cannot stress this enough: <strong>Make sure to validate everything server-side.</strong> Users are humans, and humans might cheat if given the opportunity. It is unavoidable.</p><p>You might try:</p><ul><li><strong>Storing all actions with UTC timestamps.</strong><br></br>The client can send their local time, but the server can immediately convert that to UTC and validate against the server time. That way, if the client’s timestamp is suspiciously far, the system can reject it as an error, and the UI can respond accordingly.</li><li><strong>Using event-based tracking.</strong><br></br>In other words, store a record of each action with metadata including information like the user’s ID, the type of action performed, and the timestamp and timezone. This helps with validation.</li></ul><h2 id="building-a-streak-system-engine">Building A Streak System Engine</h2><p>This isn’t a code tutorial, so I will avoid dumping a bunch of code on you. I’ll keep this practical and describe how things generally operate a streak system engine as far as architecture, flow, and reliability.</p><h3 id="core-architecture">Core Architecture</h3><p>As I’ve said several times, make the serverthe single source of truth for streak data. The architecture can go something like this on the server:</p><ul><li>Store each user’s data in a database.</li><li>Store the current streak store (default as 0) as an integer.</li><li>Store the timezone preference, i.e., IANA Timezone string (either implicitly from local timestamp or explicitly by asking user to select their timezone). For example, “America/New_York”.</li><li>Handle all logic to determine if the streak continues or breaks, with a timezone check that is relative to the user’s local timezone.</li></ul><p>Meanwhile, on the client-side:</p><ul><li>Display the current streak, normally fetched from the server.</li><li>Send action done in the form of metadata to the server to validate whether the user actually completed a qualifying streak action.</li><li>Provide visual feedback based on the server responses.</li></ul><p>So, in short, the brain is on the server, and the client is for display purposes and submitting events. This saves you a lot of failures and edge cases, plus makes updates and fixes easier.</p><h3 id="the-logical-flow">The Logical Flow</h3><p>Let’s simulate a walkthrough of how a minimal efficient streak system engine would go when a user completes an action:</p><ol><li>The user completes a qualifying streak action.</li><li>The client sends an event to the server as metadata. This could be “User X completed action Y at timestamp Z”.</li><li>The server receives this event and does basic validation. Is this a real user? Are they authenticated? Is the action valid? Is the timezone consistent?</li><li>If this passes, the server retrieves the user’s streak data from the database.</li><li>Then, convert the received action timestamp to the user’s local timezone.</li><li>Let the server compare the calendar dates (not timestamps) in the user’s local timezone:<ul><li>If it is the same day, then the action is redundant and there is no change in the streak.</li><li>If it is the next day, then the streak extends and increments by 1.</li><li>If there is a gap of more than one day, the streak breaks. However, this is where you might apply grace mechanics.</li><li>If the grace mechanism is missed, then reset the streak to 1.</li></ul></li><li>If you choose to save historical data for milestone achievements, then update variables like “longest streak” or “total active days”.</li><li>The server then updates the database and responds to the client. Something like this:</li></ol><pre><code>{
  "current_streak": 48,
  "longest_streak": 50,
  "total_active_days": 120,
  "streak_extended": true,
}
</code></pre><p>As a further measure, the server should either retry or reject and notify the client when anything fails during the process.</p><h3 id="building-for-resilience">Building For Resilience</h3><p>As mentioned before, users losing a streak due to bugs or server downtime is terrible UX, and users don’t expect to take the fall for it. Thus, your streak system should have safeguards for those scenarios.</p><p>If the server is down for maintenance (or whatever reason), consider allowing a temporary window of additional hours to get it fixed so actions can be submitted late and still count. You can also choose to notify users, especially if the situation is capable of affecting an ongoing streak.</p><p><strong>Note</strong>: Establish an admin backdoor where data can be manually restored. Bugs are inevitable, and some users would call your app out or reach out to support that their streak broke for a reason they could not control. You should be able to manually restore the streaks if, after investigation, the user is right.</p><h2 id="conclusion">Conclusion</h2><p>One thing remains clear: Streaks are really powerful because of how human psychology works on a fundamental level.</p><p>The best streak system out there is the one that users don’t think about consciously. It has become a routine of immediate results or visible progress, like brushing teeth, which becomes a regular habit.</p><p>And I’m just gonna say it: Not all products need a streak system. Should you really force consistency just because you want daily active users? The answer may very well be “no”.</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Building Digital Trust: An Empathy-Centred UX Framework For Mental Health Apps</h1>
<p>hello@smashingmagazine.com (Kat Homan) — Fri, 13 Feb 2026 15:00:00 GMT</p>
<h1>An Empathy-Centred UX Framework For Mental Health Apps — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>18 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/frameworks">Frameworks</a>,
<a href="http://www.smashingmagazine.com/category/mental-health">Mental Health</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Designing for mental health means designing for vulnerability. Empathy-Centred UX becomes not a “nice to have” but a fundamental design requirement. Here’s a practical framework for building trust-first mental health products.</section></p><p>Imagine a user opening a mental health app while feeling overwhelmed with anxiety. The very first thing they encounter is a screen with a bright, clashing colour scheme, followed by a notification shaming them for breaking a 5-day “mindfulness streak,” and a paywall blocking the meditation they desperately need at that very moment. This experience isn’t just poor design; it can be actively harmful. It betrays the user’s vulnerability and erodes the very trust the app aims to build.</p><p>When designing for mental health, this becomes both a critical challenge and a valuable opportunity. Unlike a utility or entertainment app, the user’s emotional state cannot be treated as a secondary context. It <em>is</em> the environment your product operates in.</p><p><a href="https://www.who.int/news/item/02-09-2025-over-a-billion-people-living-with-mental-health-conditions-services-require-urgent-scale-up">With over a billion people</a> living with mental health conditions and persistent gaps in access to care, safe and evidence-aligned digital support is increasingly relevant. The margin for error is negligible. <strong>Empathy-Centred UX</strong> becomes not a “nice to have” but a fundamental design requirement. It is an approach that moves beyond mere functionality to deeply understand, respect, and design for the user’s intimate emotional and psychological needs.</p><p>But how do we translate this principle into practice? How do we build digital products that are not just useful, but truly trustworthy?</p><p>Throughout my career as a product designer, I’ve found that trust is built by consistently meeting the user’s emotional needs at every stage of their journey. In this article, I will translate these insights into a <strong>hands-on empathy-centred UX framework</strong>. We will move beyond theory to dive deeper into applicable tools that help create experiences that are both humane and highly effective.</p><p>In this article, I’ll share a practical, repeatable framework built around three pillars:</p><ol><li><strong>Onboarding</strong> as a supportive first conversation.</li><li><strong>Interface design</strong> for a brain in distress.</li><li><strong>Retention patterns</strong> that deepen trust rather than pressure users.</li></ol><p>Together, these pillars offer a grounded way to design mental health experiences that prioritise trust, emotional safety, and real user needs at every step.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="the-onboarding-conversation-from-a-checklist-to-a-trusted-companion">The Onboarding Conversation: From a Checklist to a Trusted Companion</h2><p>Onboarding is “a first date” between a user and the app — and the first impression carries immense stakes, determining whether the user decides to continue engaging with the app. In mental health tech, with up to <a href="https://link.springer.com/article/10.1186/s13690-024-01362-w">20,000 mental-health-related apps</a> on the market, product designers face a dilemma of how to integrate onboarding’s primary goals without making the design feel too clinical or dismissive for a user seeking help.</p><blockquote><strong>The Empathy Tool</strong><p>In my experience, I have found it essential <strong>to design onboarding as the first supportive conversation.</strong> The goal is to help the user feel seen and understood by delivering a small dose of relief quickly, not just overload them with data and the app’s features.</p></blockquote><h3 id="case-study-a-teenager-s-parenting-journey">Case Study: A Teenager’s Parenting Journey</h3><p>At <a href="https://play.google.com/store/apps/details?id=world.dobra.teeni"><em>Teeni</em></a>, an app for parents of teenagers, onboarding requires an approach that solves two problems: (1) acknowledge the emotional load of parenting teens and show how the app can share that load; (2) collect just enough information to make the first feed relevant.</p><h4 id="recognition-and-relief">Recognition And Relief</h4><p>Interviews surfaced a recurring feeling among parents: <em>“I’m a bad parent, I’ve failed at everything.”</em> My design idea was to provide early relief and normalisation through a city-at-night metaphor with lit windows: directly after the welcome page, a user engages with three brief, animated and optional stories based on frequent challenges of teenage parenting, in which they can recognise themselves (e.g., a story of a mother learning to manage her reaction to her teen rolling their eyes). This narrative approach reassures parents that they are not alone in their struggles, normalising and helping them cope with <a href="https://www.npr.org/sections/health-shots/2014/07/16/326953698/want-more-stress-in-your-life-try-parenting-a-teenager#">stress</a> and other <a href="https://www.nhs.uk/mental-health/children-and-young-adults/advice-for-parents/cope-with-your-teenager/">complex emotions</a> from the very beginning.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/1-teeni-onboarding.png"></img></a><figcaption>Teeni onboarding is designed as support first: it acknowledges the emotional load of parenting teens, then uses optional peer stories to help parents feel less alone. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/1-teeni-onboarding.png">Large preview</a>)</figcaption></figure><p><strong>Note:</strong> Early usability sessions indicated strong emotional resonance, but post-launch analytics showed that the optionality of the storytelling must be explicit. The goal is to balance the storytelling to avoid overwhelming the distressed parent, directly acknowledging their reality: <em>“Parenting is tough. You’re not alone.”</em></p><h4 id="progressive-profiling">Progressive Profiling</h4><p>To tailor guidance to each family, we defined the minimal data needed for personalisation. On the first run, we collect only the essentials for a basic setup (e.g., parent role, number of teens, and each teen’s age). Additional, yet still important, details (specific challenges, wishes, requests) are gathered gradually as users progress through the app, avoiding long forms for those who need support immediately.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/2-progressive-profiling-teeni.png"></img></a><figcaption>Progressive profiling in Teeni: Collect minimum data during onboarding and ask for additional details later when needed. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/2-progressive-profiling-teeni.png">Large preview</a>)</figcaption></figure><p>The entire onboarding is centred around a consistently supportive choice of words, turning a typically highly practical, functional process into a way to connect with the vulnerable user on a deeper emotional level, while keeping an explicit fast path.</p><h3 id="your-toolbox">Your Toolbox</h3><ul><li><strong>Use Validating Language</strong><br></br>Start with “It’s okay to feel this way,” not “Allow notifications.”</li><li><strong>Understand “Why”, not just “What”</strong><br></br>Collect only what you’ll use now and defer the rest via progressive profiling. Use simple, goal-focused questions to personalise users’ experience.</li><li><strong>Prioritise Brevity and Respect</strong><br></br>Keep onboarding skimmable, make optionality explicit, and let user testing define the minimum effective length &mdashl the shorter is usually the better.</li><li><strong>Keep an Eye on Feedback and Iterate</strong><br></br>Track time-to-first-value and step drop-offs; pair these with quick usability sessions, then adjust based on what you learn.</li></ul><p>This initial conversation sets the stage for trust. But this trust is fragile. The next step is to ensure the app’s very environment doesn’t break it.</p><h2 id="the-emotional-interface-maintaining-trust-in-a-safe-environment">The Emotional Interface: Maintaining Trust In A Safe Environment</h2><p>A user experiencing anxiety or depression often shows <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC6520478/">reduced cognitive capacity, which affects their attention span and the speed with which they process information</a> and lowers tolerance for dense layouts and fast, highly stimulating visuals. This means that high-saturation palettes, abrupt contrast changes, flashing, and dense text can feel overwhelming for them.</p><blockquote><strong>The Empathy Tool</strong><p>When designing a user flow for a mental health app, I always apply the Web Content Accessibility Guidelines 2.2 as a foundational baseline. On top of that, I choose a <strong>“low-stimulus”</strong>, “familiar and safe” visual language to minimise the user’s cognitive load and create a calm, predictable, and personalised environment. Where appropriate, I add subtle, opt-in haptics and gentle micro-interactions for sensory grounding, and offer voice features as an option in high-stress moments (alongside low-effort tap flows) to enhance accessibility.</p></blockquote><p>Imagine you need to guide your users “by the hand”: we want to make sure their experience is as effortless as possible, and they are quickly guided to the support they need, so we avoid complicated forms and long wordings.</p><h3 id="case-digital-safe-space">Case: Digital Safe Space</h3><p>For the app focused on instant stress relief, <em><a href="https://play.google.com/store/apps/details?id=world.dobra.bearroom">Bear Room</a></em>, I tested a “cosy room” design. My initial hypothesis was validated through a critical series of user interviews: the prevailing design language of many mental health apps appeared misaligned with the needs of our audience. Participants grappling with conditions such as PTSD and depression repeatedly described competing apps as “too bright, too happy, and too overwhelming,” which only intensified their sense of alienation instead of providing solace. This suggested a mismatch for our segment, which instead sought a sense of safety in the digital environment.</p><p>This feedback informed a low-arousal design strategy. Rather than treating “safe space” as a visual theme, we approached it as a <strong>holistic sensory experience</strong>. The resulting interface is a direct antithesis to digital overload; it gently guides the user through the flow, keeping in mind that they are likely in a state where they lack the capacity to concentrate. The text is divided into smaller parts and is easily scannable and quickly defined. The emotional support tools — such as a pillow — are highlighted on purpose for convenience.</p><p>The interface employs a carefully curated, non-neon, earthy palette that feels grounding rather than stimulating, and it rigorously eliminates any sudden animations or jarring bright alerts that could trigger a stress response. This deliberate calmness is not an aesthetic afterthought but the app’s most critical feature, establishing a foundational sense of <strong>digital safety</strong>.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/3-bear-room-interface.png"></img></a><figcaption>Bear Room’s “cosy room” interface uses a low-arousal visual language, validated by user interviews as calming and welcoming. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/3-bear-room-interface.png">Large preview</a>)</figcaption></figure><p>To foster a sense of personal connection and psychological ownership, the room introduces three opt-in “personal objects”: Mirror, Letter, and Frame. Each invites a small, successful act of contribution (e.g., leaving a short message to one’s future self or curating a set of personally meaningful photos), drawing on the <a href="https://www.hbs.edu/ris/Publication%20Files/11-091.pdf">IKEA effect</a> (PDF).</p><p>For instance, Frame functions as a personal archive of comforting photo albums that users can revisit when they need warmth or reassurance. Because Frame is represented in the digital room as a picture frame on the wall, I designed an optional layer of customisation to deepen this connection: users can replace the placeholder with an image from their collection — a loved one, a pet, or a favourite landscape — displayed in the room each time they open the app. This choice is voluntary, lightweight, and reversible, intended to help the space feel more “mine” and deepen attachment without increasing cognitive load.</p><p><strong>Note:</strong> Always adapt to the context. Try to avoid making the colour palette too pastel. It is useful to balance the brightness based on the user research, to protect the right level of the app’s contrast.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/4-teeni-palette-option.png"></img></a><figcaption>Parent preference feedback for Teeni’s palette options: the selected scheme felt “teen-parenting appropriate,” while brighter/pastel options were rejected as “too bright,” “too toddler-ish,” or not matching parenting a teen. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/4-teeni-palette-option.png">Large preview</a>)</figcaption></figure><h3 id="case-emotional-bubbles">Case: Emotional Bubbles</h3><p>In <a href="https://play.google.com/store/apps/details?id=world.dobra.food4mood"><em>Food for Mood</em></a>, I used a visual metaphor: coloured bubbles representing goals and emotional states (e.g., a dense red bubble for “Performance”). This allows users to externalise and visualise complex feelings without the cognitive burden of finding the right words. It’s a UI that speaks the language of emotion directly.</p><p>In an informal field test with young professionals (the target audience) in a co-working space, participants tried three interactive prototypes and rated each on simplicity and enjoyment. The standard card layout scored higher on simplicity, but the bubble carousel scored better on engagement and positive affect — and became the preferred option for the first iteration. Given that the simplicity trade-off was minimal (<sup>4</sup>⁄<sub>5</sub> vs. <sup>5</sup>⁄<sub>5</sub>) and limited to the first few seconds of use, I prioritised the concept that made the experience feel more emotionally rewarding.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/5-concept-stage-field-test-scores.png"></img></a><figcaption>Concept-stage field test scores: the bubble carousel balanced high enjoyment (5/5) with near-top simplicity (4/5). (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/5-concept-stage-field-test-scores.png">Large preview</a>)</figcaption></figure><h3 id="case-micro-interactions-and-sensory-grounding">Case: Micro-interactions And Sensory Grounding</h3><p>Adding a touch of tactile micro-interactions like bubble-wrap popping in <a href="https://play.google.com/store/apps/details?id=world.dobra.bearroom"><em>Bear Room</em></a>, may also offer users moments of kinetic relief. Integrating deliberate, tactile micro-interactions, such as the satisfying bubble-wrap popping mechanic, provides a focused act that can help an overwhelmed user feel more grounded. It offers a moment of pure, sensory distraction for a person stuck in a torrent of stressful thoughts. This isn’t about gamification in the traditional, points-driven sense; it’s about offering a <strong>controlled, sensory interruption to the cycle of anxiety</strong>.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/10-bear-room-bubble-wrap.png"></img></a><figcaption>Bear Room’s “bubble-wrap” grounding micro-interaction, with opt-in vibration and sound. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/10-bear-room-bubble-wrap.png">Large preview</a>)</figcaption></figure><p><strong>Note:</strong> Make tactile effects opt-in and predictable. Unexpected sensory feedback can increase arousal rather than reduce it for some users.</p><h3 id="case-voice-assistants">Case: Voice Assistants</h3><p>When a user is in a state of high anxiety or depression, it can become an extra effort for them to type something in the app or make choices. In moments when attention is impaired, and a simple, low-cognitive choice (e.g., ≤4 clearly labelled options) isn’t enough, voice input can offer a lower-friction way to engage and communicate empathy.</p><p>In both <a href="https://play.google.com/store/apps/details?id=world.dobra.teeni"><em>Teeni</em></a> and <a href="https://play.google.com/store/apps/details?id=world.dobra.bearroom"><em>Bear Room</em></a>, voice was integrated as a primary path for flows related to fatigue, emotional overwhelm, and acute stress — always alongside a text input alternative. Simply <a href="https://journals.sagepub.com/doi/10.1111/j.1467-9280.2007.01916.x?">putting feelings into words</a> (affect labelling) has been shown to reduce emotional intensity for some users, and spoken input also provides a richer context for tailoring support.</p><p>For <em>Bear Room</em>, we give users a choice to share what’s on their mind via a prominent mic button (with text input available below. The app then analyses their response with AI (does not diagnose) and provides a set of tailored practices to help them cope. This approach gives users a space for the raw, unfiltered expression of emotion when texting feels too heavy.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/9-bear-room-voice-first-support-flow.png"></img></a><figcaption>Bear Room’s voice-first support flow lets users talk or type what’s happening, then suggests a tailored set of practices; essential coping tools are never paywalled. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/9-bear-room-voice-first-support-flow.png">Large preview</a>)</figcaption></figure><p>Similarly, <em>Teeni’s</em> “Hot flow” lets parents vent frustration and describe a difficult trigger via voice. Based on the case description, AI gives a one-screen piece of psychoeducational content, and in a few steps, the app suggests an appropriate calming tool, uniting both emotional and relational support.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aBy%20meeting%20the%20user%20at%20their%20level%20of%20low%20cognitive%20capacity%20and%20accepting%20their%20input%20in%20the%20most%20accessible%20form,%20we%20build%20a%20deeper%20trust%20and%20reinforce%20the%20app%20as%20a%20truly%20adaptive,%20reliable,%20and%20non-judgmental%20space.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fbuilding-empathy-centred-ux-framework-mental-health-apps%2f">By meeting the user at their level of low cognitive capacity and accepting their input in the most accessible form, we build a deeper trust and reinforce the app as a truly adaptive, reliable, and non-judgmental space.</a></p></blockquote><p><strong>Note:</strong> Mental-health topics are highly sensitive, and many people feel uncomfortable sharing sensitive data with an app — especially amid frequent news about data breaches and data being sold to third parties. Before recording, show a concise notice that explains how audio is processed, where it’s processed, how long it’s stored, and that it is not sold or shared with third parties. Present this in a clear, consent step (e.g., GDPR-style). For products handling personal data, it’s also best practice to provide an obvious “Delete all data” option.</p><h3 id="your-toolbox-1">Your Toolbox</h3><ul><li><strong>Accessibility-Friendly User Flow</strong><br></br>Aim to become your user’s guide. Only use the text that is important, highlight key actions, and provide simple, step-by-step paths.</li><li><strong>Muted Palettes</strong><br></br>There’s no one-size-fits-all colour rule for mental-health apps. Align palette with purpose and audience; if you use muted palettes, verify WCAG 2.2 contrast thresholds and avoid flashing.</li><li><strong>Tactile Micro-interactions</strong><br></br>Use subtle, predictable, opt-in haptics and gentle micro-interactions for moments of kinetic relief.</li><li><strong>Voice-First Design</strong><br></br>Offer voice input as an alternative to typing or single-tap actions in low-energy/high-pressure states</li><li><strong>Subtle Personalisation</strong><br></br>Integrate small, voluntary customisations (like a personal photo in a digital frame) to foster a stronger emotional bond.</li><li><strong>Privacy by Default</strong><br></br>Ask for explicit consent to process personal data. State clearly how, where, and for how long data is processed, and that it’s not sold or shared — and honour it.</li></ul><p>A safe interface builds trust in the moment. The final pillar is about earning the trust that brings users back, day after day.</p><h2 id="the-retention-engine-deepening-trust-through-genuine-connection">The Retention Engine: Deepening Trust Through Genuine Connection</h2><p>Encouraging consistent use without manipulation often requires innovative solutions in mental health. The app, as a business, faces an ethical dilemma: its mission is to prioritise user wellbeing, which means it cannot indulge users simply to maximise their screen time. Streaks, points, and time limits can also induce anxiety and shame, negatively affecting the user’s mental health. The goal is not to maximise screen time, but to foster a <strong>supportive rhythm of use</strong> that aligns with the non-linear journey of mental health.</p><blockquote><strong>The Empathy Tool</strong><p>I replace anxiety-inducing gamification with retention engines powered by empathy. This involves designing loops that intrinsically motivate users through three core pillars: granting them <strong>agency</strong> with customisable tools, connecting them to a supportive <strong>community</strong>, and ensuring the app itself acts as a consistent source of <strong>support</strong>, making return visits feel like a choice, not a chore or pressure.</p></blockquote><h3 id="case-key-economy">Case: “Key” Economy</h3><p>In search of reimagining retention mechanics away from punitive streaks and towards a model of compassionate encouragement, the <em>Bear Room</em> team came up with the idea of the so-called “Key” economy. Unlike a streak that shames users for missing a day, users are envisioned to earn “keys” for logging in every third day — a rhythm that acknowledges the non-linear nature of healing and reduces the pressure of daily performance. Keys never gate SOS sets or essential coping practices. Keys only unlock more objects and advanced content; the core toolkit is always free. The app should also preserve users’ progress regardless of their level of engagement.</p><p>The system’s most empathetic innovation, however, lies in the ability for users to gift their hard-earned keys to others in the community who may be in greater need (still in the process of making). This intends to transform the act of retention from a self-focused chore into a generous, community-building gesture.</p><p>It aims to foster a <strong>culture of mutual support</strong>, where consistent engagement is not about maintaining a personal score, but about accumulating the capacity to help others.</p><p><strong>Why it Works</strong></p><ul><li><strong>It’s Forgiving.</strong><br></br>Unlike a streak, missing a day doesn’t reset progress; it just delays the next key. This removes shame.</li><li><strong>It’s Community-driven.</strong><br></br>Users can <em>give their keys to others</em>. This transforms retention from a selfish act into a generous one, reinforcing the app’s core value of community support.</li></ul><h3 id="case-the-letter-exchange">Case: The Letter Exchange</h3><p>Within <em>Bear Room</em>, users can write and receive supportive letters anonymously to other users around the world. This tool leverages AI-powered anonymity to create a safe space for radical vulnerability. It provides a real human connection while completely protecting user privacy, directly addressing the trust deficit. It shows users they are not alone in their struggles, a powerful retention driver.</p><figure><a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/11-bear-room-letter-exchange.png"></img></a><figcaption>Bear Room’s Letter Exchange: AI-assisted delivery keeps peer-support letters anonymous and safe. (<a href="https://files.smashing.media/articles/building-empathy-centred-ux-framework-mental-health-apps/11-bear-room-letter-exchange.png">Large preview</a>)</figcaption></figure><p><strong>Note:</strong> Data privacy is always a priority in product design, but (again) it’s crucial to approach it firsthand in mental health. In the case of the letter exchange, robust anonymity isn’t just a setting; it is the foundational element that creates the safety required for users to be vulnerable and supportive with strangers.</p><h3 id="case-teenager-translator">Case: Teenager Translator</h3><p>The “Teenager Translator” in <em>Teeni</em> became a cornerstone of our retention strategy by directly addressing the moment of crisis where parents were most likely to disengage. When a parent inputs their adolescent’s angry words like <em>“What’s wrong with you? It’s my phone, I will watch what I want, just leave me alone!”</em>, the tool instantly provides an empathetic translation of the emotional subtext, a de-escalation guide, and a practical script for how to respond.</p><p>This immediate, actionable support at the peak of frustration transforms the app from a passive resource into an indispensable <strong>crisis-management tool</strong>. By delivering profound value exactly when and where users need it most, it creates powerful positive reinforcement that builds <strong>habit</strong> and <strong>loyalty</strong>, ensuring parents return to the app not just to learn, but to actively navigate their most challenging moments.</p><h3 id="your-toolbox-2">Your Toolbox</h3><ul><li><strong>Reframe Metrics</strong><br></br>Change <em>“You broke your 7-day streak!”</em> to <em>“You’ve practiced 5 of the last 10 days. Every bit helps.”</em></li><li><strong>Compassion Access Policy</strong><br></br>Never gate crisis or core coping tools behind paywalls or keys.</li><li><strong>Build Community Safely</strong><br></br>Facilitate anonymous, moderated peer support.</li><li><strong>Offer Choice</strong><br></br>Let users control the frequency and type of reminders.</li><li><strong>Keep an Eye on Reviews</strong><br></br>Monitor app-store reviews and social mentions regularly; tag themes (bugs, UX friction, feature requests), quantify trends, and close the loop with quick fixes or clarifying updates.</li></ul><h2 id="your-empathy-first-launchpad-three-pillars-to-trust">Your Empathy-First Launchpad: Three Pillars To Trust</h2><p>Let’s return to the overwhelmed user from the introduction. They open an app that greets them with a tested, audience-aligned visual language, a validating first message, and a retention system that supports rather than punishes.</p><p>This is the power of an <strong>Empathy-Centred UX Framework</strong>. It forces us to move beyond pixels and workflows to the heart of the user experience: emotional safety. But to embed this philosophy in design processes, we need a structured, scalable approach. My designer path led me to the following three core pillars:</p><ol><li><strong>The Onboarding Conversation</strong><br></br>Start by transforming the initial setup from a functional checklist into the first supportive, therapy-informed dialogue. This pillar is rooted in using validating language, keeping asking “why” to understand deeper needs, and prioritising brevity and respect to make the user feel seen and understood from their very first interactions.</li><li><strong>The Emotional Interface</strong><br></br>Adjust the design to a low-stimulus digital environment for a brain in distress. This pillar focuses on the visual and interactive tools: muted palettes, calming micro-interactions, voice-first features, and personalisation, to make sure a user enters a calm, predictable, and safe digital environment. Certainly, these tools are not limited to the ones I applied throughout my experience, and there is always room for creativity, keeping in mind users’ preferences and scientific research.<br></br></li><li><strong>The Retention Engine</strong><br></br>Be persistent in upholding genuine connection over manipulative gamification. This pillar focuses on building lasting engagement through forgiving systems (like the “Key” economy), community-driven support (like letter exchanges), and tools that offer profound value in moments of crisis (like the Teenager Translator). When creating such tools, aim for a supportive rhythm of use that aligns with the non-linear journey of mental health.</li></ol><h2 id="trust-is-the-success-balancing-game">Trust Is The Success: Balancing Game</h2><p>While we, as designers, don’t directly define the app’s success metrics, we cannot deny that our work influences the final outcomes. This is where our practical tools in mental health apps may come in partnership with the product owner’s goals. All the tools are designed based on hypotheses, evaluations of whether users need them, further testing, and metric analysis.</p><p>I would argue that one of the most critical success components for a mental health app is <strong>trust</strong>. Although it is not easy to measure, our role as designers lies precisely in creating a UX Framework that respects and listens to its users and makes the app fully <strong>accessible</strong> and <strong>inclusive</strong>.</p><p>The trick is to achieve a <strong>sustainable balance between helping users reach their wellness goals and the gaming effect</strong>, so they also benefit from the process and atmosphere. It is a blend of enjoyment from the process and fulfillment from the health benefits, where we want to make a routine meditation exercise something pleasant. Our role as product designers is to always keep in mind that the end goal for the user is to achieve a positive psychological effect, not to remain in a perpetual gaming loop.</p><p>Of course, we need to keep in mind that the more responsibility the app takes for its users’ health, the more requirements there arise for its design.</p><p>When this balance is struck, the result is more than just better metrics; it’s a profound positive impact on your users’ lives. In the end, empowering a user’s well-being is the highest achievement our craft can aspire to.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Designing For Agentic AI: Practical UX Patterns For Control, Consent, And Accountability</h1>
<p>hello@smashingmagazine.com (Victor Yocco) — Wed, 11 Feb 2026 13:00:00 GMT</p>
<h1>Practical UX Patterns For Control, Consent, And Accountability — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>19 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Autonomy is an output of a technical system. Trustworthiness is an output of a design process. Here are concrete design patterns, operational frameworks, and organizational practices for building agentic systems that are not only powerful but also transparent, controllable, and trustworthy.</section></p><p>In the <a href="https://www.smashingmagazine.com/2026/01/beyond-generative-rise-agentic-ai-user-centric-design/">first part of this series</a>, we established the fundamental shift from generative to agentic artificial intelligence. We explored why this leap from suggesting to acting demands a new psychological and methodological toolkit for UX researchers, product managers, and leaders. We defined a taxonomy of agentic behaviors, from suggesting to acting autonomously, outlined the essential research methods, defined the risks of agentic sludge, and established the accountability metrics required to navigate this new territory. We covered the <em>what</em> and the <em>why</em>.</p><p>Now, we move from the foundational to the functional. This article provides the <em>how</em>: the concrete design patterns, operational frameworks, and organizational practices essential for building agentic systems that are not only powerful but also <strong>transparent</strong>, <strong>controllable</strong>, and <strong>worthy of user trust</strong>. If our research is the diagnostic tool, these patterns are the <strong>treatment plan</strong>. They are the practical mechanisms through which we can give users a palpable sense of control, even as we grant AI unprecedented autonomy. The goal is to create an experience where autonomy feels like a privilege granted by the user, not a right seized by the system.</p><h2 id="core-ux-patterns-for-agentic-systems">Core UX Patterns For Agentic Systems</h2><p>Designing for agentic AI is designing for a <strong>relationship</strong>. This relationship, like any successful partnership, must be built on clear communication, mutual understanding, and established boundaries.</p><p>To manage the shift from suggestion to action, we utilize six patterns that follow the functional lifecycle of an agentic interaction:</p><ul><li><strong>Pre-Action (Establishing Intent)</strong><br></br>The Intent Preview and Autonomy Dial ensure the user defines the plan and the agent’s boundaries before anything happens.</li><li><strong>In-Action (Providing Context)</strong><br></br>The Explainable Rationale and Confidence Signal maintain transparency while the agent works, showing the “why” and “how certain.”</li><li><strong>Post-Action (Safety and Recovery)</strong><br></br>The Action Audit & Undo and Escalation Pathway provide a safety net for errors or high-ambiguity moments.</li></ul><p>Below, we will cover each pattern in detail, including recommendations for metrics for success. These targets are representative benchmarks based on industry standards; adjust them based on your specific domain risk.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h3 id="1-the-intent-preview-clarifying-the-what-and-how">1. The Intent Preview: Clarifying the What and How</h3><p>This pattern is the conversational equivalent of saying, <em>“Here’s what I’m about to do. Are you okay with that?”</em> It’s the foundational moment of seeking consent in the user-agent relationship.</p><p>Before an agent takes any significant action, the user must have a clear, unambiguous understanding of what is about to happen. The Intent Preview, or Plan Summary, establishes informed consent. It is the conversational pause before action, transforming a black box of autonomous processes into a transparent, reviewable plan.</p><p><strong>Psychological Underpinning</strong><br></br>Presenting a plan before action reduces cognitive load and eliminates surprise, giving users a moment to verify the agent truly understands their intent.</p><p><strong>Anatomy of an Effective Intent Preview:</strong></p><ul><li><strong>Clarity and Conciseness</strong><br></br>The preview must be immediately digestible. It should summarize the primary actions and outcomes in plain language, avoiding technical jargon. For instance, instead of <em>“Executing API call to cancel_booking(id: 4A7B),”</em> it should state, <em>“Cancel flight AA123 to San Francisco.”</em></li><li><strong>Sequential Steps</strong><br></br>For multi-step operations, the preview should outline the key phases. This reveals the agent’s logic and allows users to spot potential issues in the proposed sequence.</li><li><strong>Clear User Actions</strong><br></br>The preview is a decision point, not just a notification. It must be accompanied by a clear set of choices. It’s a moment of intentional friction, a ‘speed bump’ in the process designed to ensure the user is making a conscious choice, particularly for irreversible or high-stakes actions.</li></ul><p>Let’s revisit our travel assistant scenario from the <a href="https://www.smashingmagazine.com/2026/01/beyond-generative-rise-agentic-ai-user-centric-design/">first part of this series</a>. We use this proactive assistant to illustrate how an agent handles a flight cancellation. The agent has detected a flight cancellation and has formulated a recovery plan.</p><p>The Intent Preview would look something like this:</p><blockquote><strong>Proposed Plan for Your Trip Disruption</strong><p>I’ve detected that your 10:05 AM flight has been canceled. Here’s what I plan to do:<ol><li><strong>Cancel Flight UA456</strong><br></br>Process refund and confirm cancellation details.</li><li><strong>Rebook on Flight DL789</strong><br></br>Book a confirmed seat on a 2:30 PM non-stop flight, as this is the next available non-stop flight with a confirmed seat.</li><li><strong>Update Hotel Reservation</strong><br></br>Notify the Marriott that you will be arriving late.</li><li><strong>Email Updated Itinerary</strong><br></br>Send the new flight and hotel details to you and your assistant, Jane Doe.</li></ol>[ Proceed with this Plan ] [ Edit Plan ] [ Handle it Myself ]</p></blockquote><p>This preview is effective because it provides a complete picture, from cancellation to communication, and offers three distinct paths forward: full consent (Proceed), a desire for modification (Edit Plan), or a full override (Handle it Myself). This multifaceted control is the bedrock of trust.</p><figure><a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/1-intent-preview.png"></img></a><figcaption>The Intent Preview is the primary pattern for building user trust. By clearly stating what the agent plans to do and offering simple, direct controls like “Proceed,” “Edit,” or “Handle it Myself,” we transform a black box into a transparent and controllable experience. (<a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/1-intent-preview.png">Large preview</a>)</figcaption></figure><p><strong>When to Prioritize This Pattern</strong><br></br>This pattern is non-negotiable for any action that is irreversible (e.g., deleting user data), involves a financial transaction of any amount, shares information with other people or systems, or makes a significant change that a user cannot easily undo.</p><p><strong>Risk of Omission</strong><br></br>Without this, users feel ambushed by the agent’s actions and will disable the feature to regain control.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Acceptance Ratio</strong><br></br>Plans Accepted Without Edit / Total Plans Displayed. Target > 85%.</li><li><strong>Override Frequency</strong><br></br>Total Handle it Myself Clicks / Total Plans Displayed. A rate > 10% triggers a model review.</li><li><strong>Recall Accuracy</strong><br></br>Percentage of test participants who can correctly list the plan’s steps 10 seconds after the preview is hidden.</li></ul><h4 id="applying-this-to-high-stakes-domains">Applying This to High-Stakes Domains</h4><p>While travel plans are a relatable baseline, this pattern becomes indispensable in complex, high-stakes environments where an error results in more than an inconvenience for an individual traveling. Many of us work in settings where wrong decisions may result in a system outage, putting a patient’s safety at risk, or numerous other catastrophic outcomes that unreliable technology would introduce.</p><p>Consider a DevOps Release Agent tasked with managing cloud infrastructure. In this context, the Intent Preview acts as a safety barrier against accidental downtime.</p><figure><a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/2-intent-preview-higher-stakes-setting.png"></img></a><figcaption>The intent preview in a higher-stakes setting, for example, cloud infrastructure. (<a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/2-intent-preview-higher-stakes-setting.png">Large preview</a>)</figcaption></figure><p>In this interface, the specific terminology (Drain Traffic, Rollback) replaces generalities, and the actions are binary and impactful. The user authorizes a major operational shift based on the agent’s logic, rather than approving a suggestion.</p><h3 id="2-the-autonomy-dial-calibrating-trust-with-progressive-authorization">2. The Autonomy Dial: Calibrating Trust With Progressive Authorization</h3><p>Every healthy relationship has boundaries. The Autonomy Dial is how the user establishes it with their agent, defining what they are comfortable with the agent handling on its own.</p><p>Trust is not a binary switch; it’s a spectrum. A user might trust an agent to handle low-stakes tasks autonomously but demand full confirmation for high-stakes decisions. The Autonomy Dial, a form of progressive authorization, allows users to set their preferred level of agent independence, making them active participants in defining the relationship.</p><p><strong>Psychological Underpinning</strong><br></br>Allowing users to tune the agent’s autonomy grants them a locus of control, letting them match the system’s behavior to their personal risk tolerance.</p><p><strong>Implementation</strong><br></br>This can be implemented as a simple, clear setting within the application, ideally on a per-task-type basis. Using the taxonomy from our first article, the settings could be:</p><ul><li><strong>Observe & Suggest</strong><br></br>I want to be notified of opportunities or issues, but the agent will never propose a plan.</li><li><strong>Plan & Propose</strong><br></br>The agent can create plans, but I must review every one before any action is taken.</li><li><strong>Act with Confirmation</strong><br></br>For familiar tasks, the agent can prepare actions, and I will give a final go/no-go confirmation.</li><li><strong>Act Autonomously</strong><br></br>For pre-approved tasks (e.g., disputing charges under $50), the agent can act independently and notify me after the fact.</li></ul><p>An email assistant, for example, could have a separate autonomy dial for scheduling meetings versus sending emails on the user’s behalf. This granularity is key, as it reflects the nuanced reality of a user’s trust.</p><p><strong>When to Prioritize This Pattern</strong><br></br>Prioritize this in systems where tasks vary widely in risk and personal preference (e.g., financial management tools, communication platforms). It is essential for onboarding, allowing users to start with low autonomy and increase it as their confidence grows.</p><p><strong>Risk of Omission</strong><br></br>Without this, users who experience a single failure will abandon the agent completely rather than simply dialing back its permissions.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Trust Density</strong><br></br>Percentage breakdown of users per setting (e.g., 20% Suggest, 50% Confirm, 30% Auto).</li><li><strong>Setting Churn</strong><br></br>Number of Setting Changes / Total Active Users per month. High churn indicates trust volatility.</li></ul><h3 id="3-the-explainable-rationale-answering-why">3. The Explainable Rationale: Answering Why?</h3><p>After taking an action, a good partner explains their reasoning. This pattern is the open communication that follows an action, answering <em>Why?</em> before it’s even asked. <em>“I did that because you’ve told me in the past that you prefer X.”</em></p><p>When an agent acts, especially autonomously, the immediate question in the user’s mind is often, <em>Why did it do that?</em> The Explainable Rationale pattern proactively answers this question, providing a concise justification for the agent’s decisions. This is not a technical log file. In my first article of this series, we discussed translating system primitives into user-facing language to prevent deception. This pattern is the practical application of that principle. It transforms the raw logic into a human-readable explanation grounded in the user’s own stated preferences and prior inputs.</p><p><strong>Psychological Underpinning</strong><br></br>When an agent’s actions are explainable, they feel logical rather than random, helping the user build an accurate mental model of how the agent thinks.</p><p><strong>Effective Rationales:</strong></p><ul><li><strong>Grounded in Precedent</strong><br></br>The best explanations link back to a rule, preference, or prior action.</li><li><strong>Simple and Direct</strong><br></br>Avoid complex conditional logic. Use a simple <em>“Because you said X, I did Y”</em> structure.</li></ul><p>Returning to the travel example, after the flight is rebooked autonomously, the user might see this in their notification feed:</p><blockquote><strong>I’ve rebooked your canceled flight.</strong><br></br><ul><li><strong>New Flight:</strong> Delta 789, departing at 2:30 PM.</li><li><strong>Why I took this action:</strong><ul><li>Your original flight was canceled by the airline.</li><li>You’ve pre-approved autonomous rebooking for same-day, non-stop flights.</li></ul></li></ul>[ View New Itinerary ] [ Undo this Action ]</blockquote><p>The rationale is clear, defensible, and reinforces the idea that the agent is operating within the boundaries the user established.</p><p><strong>When to Prioritize This Pattern</strong><br></br>Prioritize it for any autonomous action where the reasoning isn’t immediately obvious from the context, especially for actions that happen in the background or are triggered by an external event (like the flight cancellation example).</p><p><strong>Risk of Omission</strong><br></br>Without this, users interpret valid autonomous actions as random behavior or ‘bugs,’ preventing them from forming a correct mental model.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Why? Ticket Volume</strong><br></br>Number of support tickets tagged “Agent Behavior — Unclear” per 1,000 active users.</li><li><strong>Rationale Validation</strong><br></br>Percentage of users who rate the explanation as ‘Helpful’ in post-interaction microsurveys.</li></ul><h3 id="4-the-confidence-signal">4. The Confidence Signal</h3><p>This pattern is about the agent being self-aware in the relationship. By communicating its own confidence, it helps the user decide when to trust its judgment and when to apply more scrutiny.</p><p>To help users calibrate their own trust, the agent should surface its own confidence in its plans and actions. This makes the agent’s internal state more legible and helps the user decide when to scrutinize a decision more closely.</p><p><strong>Psychological Underpinning</strong><br></br>Surfacing uncertainty helps prevent automation bias, encouraging users to scrutinize low-confidence plans rather than blindly accepting them.</p><p><strong>Implementation:</strong></p><ul><li><strong>Confidence Score</strong><br></br>A simple percentage (e.g., Confidence: 95%) can be a quick, scannable indicator.</li><li><strong>Scope Declaration</strong><br></br>A clear statement of the agent’s area of expertise (e.g., Scope: Travel bookings only) helps manage user expectations and prevents them from asking the agent to perform tasks it’s not designed for.</li><li><strong>Visual Cues</strong><br></br>A green checkmark can denote high confidence, while a yellow question mark can indicate uncertainty, prompting the user to review more carefully.</li></ul><p><strong>When to Prioritize This Pattern</strong><br></br>Prioritize when the agent’s performance can vary significantly based on the quality of input data or the ambiguity of the task. It is especially valuable in expert systems (e.g., medical aids, code assistants) where a human must critically evaluate the AI’s output.</p><p><strong>Risk of Omission</strong><br></br>Without this, users will fall victim to automation bias, blindly accepting low-confidence hallucinations, or anxiously double-check high-confidence work.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Calibration Score</strong><br></br>Pearson correlation between Model Confidence Score and User Acceptance Rate. Target > 0.8.</li><li><strong>Scrutiny Delta</strong><br></br>Difference between the average review time of low-confidence plans and high-confidence plans. Expected to be positive (e.g., +12 seconds).</li></ul><h3 id="5-the-action-audit-undo-the-ultimate-safety-net">5. The Action Audit & Undo: The Ultimate Safety Net</h3><p>Trust requires knowing you can recover from a mistake. The Undo function is the ultimate relationship safety net, assuring the user that even if the agent misunderstands, the consequences are not catastrophic.</p><p>The single most powerful mechanism for building user confidence is the ability to easily reverse an agent’s action. A persistent, easy-to-read Action Audit log, with a prominent Undo button for every possible action, is the ultimate safety net. It dramatically lowers the perceived risk of granting autonomy.</p><p><strong>Psychological Underpinning</strong><br></br>Knowing that a mistake can be easily undone creates psychological safety, encouraging users to delegate tasks without fear of irreversible consequences.</p><p><strong>Design Best Practices:</strong></p><ul><li><strong>Timeline View</strong><br></br>A chronological log of all agent-initiated actions is the most intuitive format.</li><li><strong>Clear Status Indicators</strong><br></br>Show whether an action was successful, is in progress, or has been undone.</li><li><strong>Time-Limited Undos</strong><br></br>For actions that become irreversible after a certain point (e.g., a non-refundable booking), the UI must clearly communicate this time window (e.g., Undo available for 15 minutes). This transparency about the system’s limitations is just as important as the undo capability itself. Being honest about when an action becomes permanent builds trust.</li></ul><p><strong>When to Prioritize This Pattern</strong><br></br>This is a foundational pattern that should be implemented in nearly all agentic systems. It is absolutely non-negotiable when introducing autonomous features or when the cost of an error (financial, social, or data-related) is high.</p><p><strong>Risk of Omission</strong><br></br>Without this, one error permanently destroys trust, as users realize they have no safety net.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Reversion Rate</strong><br></br>Undone Actions / Total Actions Performed. If the Reversion Rate > 5% for a specific task, disable automation for that task.</li><li><strong>Safety Net Conversion</strong><br></br>Percentage of users who upgrade to Act Autonomously within 7 days of successfully using Undo.</li></ul><h3 id="6-the-escalation-pathway-handling-uncertainty-gracefully">6. The Escalation Pathway: Handling Uncertainty Gracefully</h3><p>A smart partner knows when to ask for help instead of guessing. This pattern allows the agent to handle ambiguity gracefully by escalating to the user, demonstrating a humility that builds, rather than erodes, trust.</p><p>Even the most advanced agent will encounter situations where it is uncertain about the user’s intent or the best course of action. How it handles this uncertainty is a defining moment. A well-designed agent doesn’t guess; it escalates.</p><p><strong>Psychological Underpinning</strong><br></br>When an agent acknowledges its limits rather than guessing, it builds trust by respecting the user’s authority in ambiguous situations.</p><p><strong>Escalation Patterns Include:</strong></p><ul><li><strong>Requesting Clarification</strong><br></br><em>“You mentioned ‘next Tuesday.’ Do you mean September 30th or October 7th?”</em></li><li><strong>Presenting Options</strong><br></br><em>“I found three flights that match your criteria. Which one looks best to you?”</em></li><li><strong>Requesting Human Intervention</strong><br></br>For high-stakes or highly ambiguous tasks, the agent should have a clear pathway to loop in a human expert or support agent. The prompt might be: <em>“This transaction seems unusual, and I’m not confident about how to proceed. Would you like me to flag this for a human agent to review?”</em></li></ul><p><strong>When to Prioritize This Pattern</strong><br></br>Prioritize in domains where user intent can be ambiguous or highly context-dependent (e.g., natural language interactions, complex data queries). Use this whenever the agent operates with incomplete information or when multiple correct paths exist.</p><p><strong>Risk of Omission</strong><br></br>Without this, the agent will eventually make a confident, catastrophic guess that alienates the user.</p><p><strong>Metrics for Success:</strong></p><ul><li><strong>Escalation Frequency</strong><br></br>Agent Requests for Help / Total Tasks. Healthy range: 5-15%.</li><li><strong>Recovery Success Rate</strong><br></br>Tasks Completed Post-Escalation / Total Escalations. Target > 90%.</li></ul><table><thead><tr><th>Pattern</th><th>Best For</th><th>Primary Risk</th><th>Key Metric</th></tr></thead><tbody><tr><td>Intent Preview</td><td>Irreversible or financial actions</td><td>User feels ambushed</td><td>>85% Acceptance Rate</td></tr><tr><td>Autonomy Dial</td><td>Tasks with variable risk levels</td><td>Total feature abandonment</td><td>Setting Churn</td></tr><tr><td>Explainable Rationale</td><td>Background or autonomous tasks</td><td>User perceives bugs</td><td>“Why?” Ticket Volume</td></tr><tr><td>Confidence Signal</td><td>Expert or high-stakes systems</td><td>Automation bias</td><td>Scrutiny Delta</td></tr><tr><td>Action Audit & Undo</td><td>All agentic systems</td><td>Permanent loss of trust</td><td><5% Reversion Rate</td></tr><tr><td>Escalation Pathway</td><td>Ambiguous user intent</td><td>Confident, catastrophic guesses</td><td>>90% Recovery Success</td></tr></tbody></table><p><strong><em>Table 1:</em></strong> <em>Summary of Agentic AI UX patterns. Remember to adjust the metrics based on your specific domain risk and needs.</em></p><h2 id="designing-for-repair-and-redress">Designing for Repair and Redress</h2><p>This is learning how to apologize effectively. A good apology acknowledges the mistake, fixes the damage, and promises to learn from it.</p><p>Errors are not a possibility; they are an inevitability.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20long-term%20success%20of%20an%20agentic%20system%20depends%20less%20on%20its%20ability%20to%20be%20perfect%20and%20more%20on%20its%20ability%20to%20recover%20gracefully%20when%20it%20fails.%20A%20robust%20framework%20for%20repair%20and%20redress%20is%20a%20core%20feature,%20not%20an%20afterthought.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fdesigning-agentic-ai-practical-ux-patterns%2f">The long-term success of an agentic system depends less on its ability to be perfect and more on its ability to recover gracefully when it fails. A robust framework for repair and redress is a core feature, not an afterthought.</a></p></blockquote><h3 id="empathic-apologies-and-clear-remediation">Empathic Apologies and Clear Remediation</h3><p>When an agent makes a mistake, the error message is the apology. It must be designed with psychological precision. This moment is a critical opportunity to demonstrate accountability. From a service design perspective, this is where companies can use the <strong>service recovery paradox</strong>: the phenomenon where a customer who experiences a service failure, followed by a successful and empathetic recovery, can actually become more loyal than a customer who never experienced a failure at all. A well-handled mistake can be a more powerful trust-building event than a long history of flawless execution.</p><p>The key is treating the error as a relationship rupture that needs to be mended. This involves:</p><ul><li><strong>Acknowledge the Error</strong><br></br>The message should state clearly and simply that a mistake was made.<br></br><em>Example: I incorrectly transferred funds.</em></li><li><strong>State the Immediate Correction</strong><br></br>Immediately follow up with the remedial action.<br></br><em>Example: I have reversed the action, and the funds have been returned to your account.</em></li><li><strong>Provide a Path for Further Help</strong><br></br>Always offer a clear link to human support. This de-escalates frustration and shows that there is a system of accountability beyond the agent itself.</li></ul><p>A well-designed repair UI might look like this:</p><blockquote><strong>We made a mistake on your recent transfer.</strong><br></br>I apologize. I transferred $250 to the wrong account.<p>✔ Corrective Action: The transfer has been reversed, and your $250 has been refunded.</p><br></br>✔ Next Steps: The incident has been flagged for internal review to prevent it from happening again.<p>Need further help? [ Contact Support ]</p></blockquote><h2 id="building-the-governance-engine-for-safe-innovation">Building the Governance Engine for Safe Innovation</h2><p>The design patterns described above are the user-facing controls, but they cannot function effectively without a robust internal support structure. This is not about creating bureaucratic hurdles; it is about building a strategic advantage. An organization with a mature governance framework can ship more ambitious agentic features with greater speed and confidence, knowing that the necessary guardrails are in place to mitigate brand risk. This governance engine turns safety from a checklist into a competitive asset.</p><p>This engine should function as a formal governance body, an <strong>Agentic AI Ethics Council</strong>, comprising a cross-functional alliance of UX, Product, and Engineering, with vital support from Legal, Compliance, and Support. In smaller organizations, these ‘Council’ roles often collapse into a single triad of Product, Engineering, and Design leads.</p><h3 id="a-checklist-for-governance">A Checklist for Governance</h3><ul><li><strong>Legal/Compliance</strong><br></br>This team is the first line of defense, ensuring the agent’s potential actions stay within regulatory and legal boundaries. They help define the hard no-go zones for autonomous action.</li><li><strong>Product</strong><br></br>The product manager is the steward of the agent’s purpose. They define and monitor its operational boundaries through a formal autonomy policy that documents what the agent is and is not allowed to do. They own the Agent Risk Register.</li><li><strong>UX Research</strong><br></br>This team is the voice of the user’s trust and anxiety. They are responsible for a recurring process for running trust calibration studies, simulated misbehavior tests, and qualitative interviews to understand the user’s evolving mental model of the agent.</li><li><strong>Engineering</strong><br></br>This team builds the technical underpinnings of trust. They must architect the system for robust logging, one-click undo functionality, and the hooks needed to generate clear, explainable rationales.</li><li><strong>Support</strong><br></br>These teams are on the front lines of failure. They must be trained and equipped to handle incidents caused by agent errors, and they must have a direct feedback loop to the Ethics Council to report on real-world failure patterns.</li></ul><figure><a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/3-agentic-ai-ethics-council.png"></img></a><figcaption>Effective agentic AI is a team sport. A successful governance model, or Agentic AI Ethics Council, creates a continuous feedback loop between UX, Product, Engineering, Legal, and Support, turning risk management into a strategic asset for safe and rapid innovation. (<a href="https://files.smashing.media/articles/designing-agentic-ai-practical-ux-patterns/3-agentic-ai-ethics-council.png">Large preview</a>)</figcaption></figure><p>This governance structure should maintain a set of living documents, including an Agent Risk Register that proactively identifies potential failure modes, Action Audit Logs that are regularly reviewed, and the formal Autonomy Policy Documentation.</p><h3 id="where-to-start-a-phased-approach-for-product-leaders">Where to Start: A Phased Approach for Product Leaders</h3><p>For product managers and executives, integrating agentic AI can feel like a monumental task. The key is to approach it not as a single launch, but as a phased journey of building both technical capability and user trust in parallel. This roadmap allows your organization to learn and adapt, ensuring each step is built on a solid foundation.</p><h4 id="phase-1-foundational-safety-suggest-propose">Phase 1: Foundational Safety (Suggest & Propose)</h4><p>The initial goal is to build the bedrock of trust without taking significant autonomous risks. In this phase, the agent’s power is limited to analysis and suggestion.</p><ul><li>Implement a rock-solid <strong>Intent Preview</strong>: This is your core interaction model. Get users comfortable with the idea of the agent formulating plans, while keeping the user in full control of execution.</li><li>Build the <strong>Action Audit & Undo</strong> infrastructure: Even if the agent isn’t acting autonomously yet, build the technical scaffolding for logging and reversal. This prepares your system for the future and builds user confidence that a safety net exists.</li></ul><h4 id="phase-2-calibrated-autonomy-act-with-confirmation">Phase 2: Calibrated Autonomy (Act with Confirmation)</h4><p>Once users are comfortable with the agent’s proposals, you can begin to introduce low-risk autonomy. This phase is about teaching users how the agent thinks and letting them set their own pace.</p><ul><li>Introduce the <strong>Autonomy Dial</strong> with limited settings: Start by allowing users to grant the agent the power to Act with Confirmation.</li><li>Deploy the <strong>Explainable Rationale</strong>: For every action the agent prepares, provide a clear explanation. This demystifies the agent’s logic and reinforces that it is operating based on the user’s own preferences.</li></ul><h4 id="phase-3-proactive-delegation-act-autonomously">Phase 3: Proactive Delegation (Act Autonomously)</h4><p>This is the final step, taken only after you have clear data from the previous phases demonstrating that users trust the system.</p><ul><li>Enable <strong>Act Autonomously</strong> for specific, pre-approved tasks: Use the data from Phase 2 (e.g., high Proceed rates, low Undo rates) to identify the first set of low-risk tasks that can be fully automated.</li><li><strong>Monitor and Iterate</strong>: The launch of autonomous features is not the end, but the beginning of a continuous cycle of monitoring performance, gathering user feedback, and refining the agent’s scope and behavior based on real-world data.</li></ul><h2 id="design-as-the-ultimate-safety-lever">Design As The Ultimate Safety Lever</h2><p>The emergence of agentic AI represents a new frontier in human-computer interaction. It promises a future where technology can proactively reduce our burdens and streamline our lives. But this power comes with profound <strong>responsibility</strong>.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAutonomy%20is%20an%20output%20of%20a%20technical%20system,%20but%20trustworthiness%20is%20an%20output%20of%20a%20design%20process.%20Our%20challenge%20is%20to%20ensure%20that%20the%20user%20experience%20is%20not%20a%20casualty%20of%20technical%20capability%20but%20its%20primary%20beneficiary.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fdesigning-agentic-ai-practical-ux-patterns%2f">Autonomy is an output of a technical system, but trustworthiness is an output of a design process. Our challenge is to ensure that the user experience is not a casualty of technical capability but its primary beneficiary.</a></p></blockquote><p>As UX professionals, product managers, and leaders, our role is to act as the stewards of that trust. By implementing clear design patterns for control and consent, designing thoughtful pathways for repair, and building robust governance frameworks, we create the essential safety levers that make agentic AI viable. We are not just designing interfaces; we are <strong>architecting relationships</strong>. The future of AI’s utility and acceptance rests on our ability to design these complex systems with wisdom, foresight, and a deep-seated respect for the user’s ultimate authority.</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>CSS <code>@scope</code>: An Alternative To Naming Conventions And Heavy Abstractions</h1>
<p>hello@smashingmagazine.com (Blake Lundquist) — Thu, 05 Feb 2026 08:00:00 GMT</p>
<h1>An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a>,
<a href="http://www.smashingmagazine.com/category/coding">Coding</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new <code>@scope</code> rule finally give developers the confidence to write CSS that can keep up with modern front ends?</section></p><p>When learning the principles of basic CSS, one is taught to write modular, reusable, and descriptive styles to ensure maintainability. But when developers become involved with real-world applications, it often feels impossible to add UI features without styles leaking into unintended areas.</p><p>This issue often snowballs into a self-fulfilling loop; styles that are theoretically scoped to one element or class start showing up where they don’t belong. This forces the developer to create even more specific selectors to override the leaked styles, which then accidentally override global styles, and so on.</p><p>Rigid class name conventions, such as <a href="https://getbem.com/introduction/">BEM</a>, are one theoretical solution to this issue. The <strong>BEM (Block, Element, Modifier) methodology</strong> is a <a href="https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/">systematic way of naming CSS classes</a> to ensure reusability and structure within CSS files. Naming conventions like this can <a href="https://www.smashingmagazine.com/2018/06/bem-for-beginners/">reduce cognitive load by leveraging domain language to describe elements and their state</a>, and if implemented correctly, <a href="https://www.smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/">can make styles for large applications easier to maintain</a>.</p><p>In the real world, however, it doesn’t always work out like that. Priorities can change, and with change, implementation becomes inconsistent. Small changes to the HTML structure can require many CSS class name revisions. With highly interactive front-end applications, class names following the BEM pattern can become long and unwieldy (e.g., <code>app-user-overview__status--is-authenticating</code>), and not fully adhering to the naming rules breaks the system’s structure, thereby negating its benefits.</p><p>Given these challenges, it’s no wonder that developers have turned to frameworks, Tailwind being <a href="https://2024.stateofcss.com/en-US/tools/">the most popular CSS framework</a>. Rather than trying to fight what seems like an unwinnable specificity war between styles, it is easier to give up on the <a href="https://css-tricks.com/the-c-in-css-the-cascade/">CSS Cascade</a> and use tools that guarantee complete isolation.</p><h2 id="developers-lean-more-on-utilities">Developers Lean More On Utilities</h2><p>How do we know that some developers are keen on avoiding cascaded styles? It’s the rise of “modern” front-end tooling — like <a href="https://www.smashingmagazine.com/2016/04/finally-css-javascript-meet-cssx/">CSS-in-JS frameworks</a> — designed specifically for that purpose. Working with isolated styles that are tightly scoped to specific components can seem like a breath of fresh air. It removes the need to name things — <a href="https://24ways.org/2014/naming-things/">still one of the most hated and time-consuming front-end tasks</a> — and allows developers to be productive without fully understanding or leveraging the benefits of CSS inheritance.</p><p>But ditching the CSS Cascade comes with its own problems. For instance, composing styles in JavaScript requires heavy build configurations and often leads to styles awkwardly intermingling with component markup or HTML. Instead of carefully considered naming conventions, we allow build tools to autogenerate selectors and identifiers for us (e.g., <code>.jsx-3130221066</code>), requiring developers to keep up with yet another pseudo-language in and of itself. (As if the cognitive load of understanding what all your component’s <code>useEffect</code>s do weren’t already enough!)</p><p>Further abstracting the job of naming classes to tooling means that basic debugging is often constrained to specific application versions compiled for development, rather than leveraging native browser features that support live debugging, such as Developer Tools.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIt%e2%80%99s%20almost%20like%20we%20need%20to%20develop%20tools%20to%20debug%20the%20tools%20we%e2%80%99re%20using%20to%20abstract%20what%20the%20web%20already%20provides%20%e2%80%94%20all%20for%20the%20sake%20of%20running%20away%20from%20the%20%e2%80%9cpain%e2%80%9d%20of%20writing%20standard%20CSS.%0a&url=https://smashingmagazine.com%2f2026%2f02%2fcss-scope-alternative-naming-conventions%2f">It’s almost like we need to develop tools to debug the tools we’re using to abstract what the web already provides — all for the sake of running away from the “pain” of writing standard CSS.</a></p></blockquote><p>Luckily, modern CSS features not only make writing standard CSS more flexible but also give developers like us a great deal more power to manage the cascade and make it work for us. <a href="https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/">CSS Cascade Layers</a> are a great example, but there’s another feature that gets a surprising lack of attention — although that is changing now that it has recently become <strong>Baseline compatible</strong>.</p><h2 id="the-css-scope-at-rule">The CSS <code>@scope</code> At-Rule</h2><p>I consider the <strong>CSS <code>@scope</code> at-rule</strong> to be a potential cure for the sort of style-leak-induced anxiety we’ve covered, one that does not force us to compromise native web advantages for abstractions and extra build tooling.</p><blockquote>“The <code>@scope</code> CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.”<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@scope">MDN</a></p></blockquote><p>In other words, we can work with isolated styles in specific instances <strong>without sacrificing inheritance, cascading, or even the basic separation of concerns</strong> that has been a long-running guiding principle of front-end development.</p><p>Plus, it has <a href="https://caniuse.com/css-cascade-scope">excellent browser coverage</a>. In fact, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146">Firefox 146</a> added support for <code>@scope</code> in December, making it <a href="https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility">Baseline compatible</a> for the first time. Here is a simple comparison between a button using the BEM pattern versus the <code>@scope</code> rule:</p><pre><code><!-- BEM --> 
<button class="button button--primary">
  <span class="button__text">Click me</span>
  <span class="button__icon">→</span>
</button>

<style>
  .button .button__text { /* button text styles */ }
  .button .button__icon { /* button icon styles */ }
  .button--primary { primary button styles */ }
</style>
</code></pre><pre><code><!-- @scope --> 
<button class="primary-button">
  <span>Click me</span>
  <span>→</span>
</button>

<style>
  @scope (.primary-button) {
    span:first-child { /* button text styles */ }
    span:last-child { /* button icon styles */ }
  }
</style>
</code></pre><p>The <code>@scope</code> rule allows for <strong>precision with less complexity</strong>. The developer no longer needs to create boundaries using class names, which, in turn, allows them to write selectors based on native HTML elements, thereby eliminating the need for prescriptive CSS class name patterns. By simply removing the need for class name management, <code>@scope</code> can alleviate the fear associated with CSS in large projects.</p><h2 id="basic-usage">Basic Usage</h2><p>To get started, add the <code>@scope</code> rule to your CSS and insert a root selector to which styles will be scoped:</p><pre><code>@scope (<selector>) {
  /* Styles scoped to the <selector> */
}
</code></pre><p>So, for example, if we were to scope styles to a <code><nav></code> element, it may look something like this:</p><div><pre><code>@scope (nav) {
  a { /* Link styles within nav scope */ }

  a:active { /* Active link styles */ }

  a:active::before { /* Active link with pseudo-element for extra styling */ }

  @media (max-width: 768px) {
    a { /* Responsive adjustments */ }
  }
}
</code></pre></div><p>This, on its own, is not a groundbreaking feature. However, a second argument can be added to the scope to create a <strong>lower boundary</strong>, effectively defining the scope’s start and end points.</p><div><pre><code>/* Any `a` element inside `ul` will not have the styles applied */
@scope (nav) to (ul) {
  a {
    font-size: 14px;
  }
}
</code></pre></div><p>This practice is called <strong>donut scoping</strong>, and <a href="https://css-tricks.com/solved-by-css-donuts-scopes/">there are several approaches</a> one could use, including a series of similar, highly specific selectors coupled tightly to the DOM structure, a <code>:not</code> pseudo-selector, or assigning specific class names to <code><a></code> elements within the <code><nav></code> to handle the differing CSS.</p><p>Regardless of those other approaches, the <code>@scope</code> method is much more concise. More importantly, it prevents the risk of broken styles if classnames change or are misused or if the HTML structure were to be modified. Now that <code>@scope</code> is Baseline compatible, we no longer need workarounds!</p><p>We can take this idea further with multiple end boundaries to create a “style figure eight”:</p><div><pre><code>/* Any <a> or <p> element inside <aside> or <nav> will not have the styles applied */
@scope (main) to (aside, nav) {
  a {
    font-size: 14px;
  }
  p {
    line-height: 16px;
    color: darkgrey;
  }
}
</code></pre></div><p>Compare that to a version handled without the <code>@scope</code> rule, where the developer has to “reset” styles to their defaults:</p><div><pre><code>main a {
  font-size: 14px;
}

main p {
  line-height: 16px;
  color: darkgrey;
}

main aside a,
main nav a {
  font-size: inherit; /* or whatever the default should be */
}

main aside p,
main nav p {
  line-height: inherit; /* or whatever the default should be */
  color: inherit; /* or a specific color */
}
</code></pre></div><p>Check out the following example. Do you notice how simple it is to target some nested selectors while exempting others?</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="wBWXggN" data-theme-id="light" data-user="smashingmag">See the Pen [@scope example [forked]](https://codepen.io/smashingmag/pen/wBWXggN) by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/wBWXggN">@scope example [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</figcaption></figure><p>Consider a scenario where unique styles need to be applied to slotted content within <a href="https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/">web components</a>. When slotting content into a web component, that content becomes part of the Shadow DOM, but still inherits styles from the parent document. The developer might want to implement different styles depending on which web component the content is slotted into:</p><pre><code><!-- Same <user-card> content, different contexts -->
<product-showcase>
  <user-card slot="reviewer">
    
    <span slot="name">Jane Doe</span>
  </user-card>
</product-showcase>

<team-roster>
  <user-card slot="member">
    
    <span slot="name">Jane Doe</span>
  </user-card>
</team-roster>
</code></pre><p>In this example, the developer might want the <code><user-card></code> to have distinct styles only if it is rendered inside <code><team-roster></code>:</p><pre><code>@scope (team-roster) {
  user-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  user-card img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
}
</code></pre><h2 id="more-benefits">More Benefits</h2><p>There are additional ways that <code>@scope</code> can remove the need for class management without resorting to utilities or JavaScript-generated class names. For example, <code>@scope</code> opens up the possibility to easily <strong>target descendants of any selector</strong>, not just class names:</p><div><pre><code>/* Only div elements with a direct child button are included in the root scope */
@scope (div:has(> button)) {
  p {
    font-size: 14px;
  }
}
</code></pre></div><p>And they <strong>can be nested</strong>, creating scopes within scopes:</p><pre><code>@scope (main) {
  p {
    font-size: 16px;
    color: black;
  }
  @scope (section) {
    p {
      font-size: 14px;
      color: blue;
    }
    @scope (.highlight) {
      p {
        background-color: yellow;
        font-weight: bold;
      }
    }
  }
}
</code></pre><p>Plus, the root scope can be easily referenced within the <code>@scope</code> rule:</p><div><pre><code>/* Applies to elements inside direct child `section` elements of `main`, but stops at any direct `aside` that is a direct chiled of those sections */
@scope (main > section) to (:scope > aside) {
  p {
    background-color: lightblue;
    color: blue;
  }
  /* Applies to ul elements that are immediate siblings of root scope  */
  :scope + ul {
    list-style: none;
  }
}
</code></pre></div><p>The <code>@scope</code> at-rule also introduces a new <strong>proximity</strong> dimension to CSS specificity resolution. In traditional CSS, when two selectors match the same element, the selector with the higher specificity wins. With <code>@scope</code>, when two elements have equal specificity, the one whose scope root is closer to the matched element wins. This eliminates the need to override parent styles by manually increasing an element’s specificity, since inner components naturally supersede outer element styles.</p><div><pre><code><style>
  @scope (.container) {
    .title { color: green; } 
  }
  <!-- The <h2> is closer to .container than to .sidebar so "color: green" wins. -->
  @scope (.sidebar) {
    .title { color: red; }
  }
</style>

<div class="sidebar">
  <div class="container">
    <h2 class="title">Hello</h2>
  </div>
</div>
</code></pre></div><h2 id="conclusion">Conclusion</h2><p>Utility-first CSS frameworks, such as Tailwind, work well for prototyping and smaller projects. Their benefits quickly diminish, however, when used in larger projects involving more than a couple of developers.</p><p>Front-end development has become increasingly overcomplicated in the last few years, and CSS is no exception. While the <code>@scope</code> rule isn’t a cure-all, it can reduce the need for complex tooling. When used in place of, or alongside strategic class naming, <code>@scope</code> can make it easier and more fun to write maintainable CSS.</p><h3 id="further-reading">Further Reading</h3><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@scope">CSS <code>@scope</code></a> (MDN)</li><li>“<a href="https://css-tricks.com/almanac/rules/s/scope/">CSS <code>@scope</code></a>”, Juan Diego Rodríguez (CSS-Tricks)</li><li><a href="https://www.firefox.com/en-US/firefox/146.0/releasenotes/">Firefox 146 Release Notes</a> (Firefox)</li><li><a href="https://caniuse.com/css-cascade-scope">Browser Support</a> (CanIUse)</li><li><a href="https://2024.stateofcss.com/en-US/tools/">Popular CSS Frameworks</a> (State of CSS 2024)</li><li>“<a href="https://css-tricks.com/the-c-in-css-the-cascade/">The “C” in CSS: Cascade</a>”, Thomas Yip (CSS-Tricks)</li><li><a href="https://getbem.com/introduction/">BEM Introduction</a> (Get BEM)</li></ul><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Combobox vs. Multiselect vs. Listbox: How To Choose The Right One</h1>
<p>hello@smashingmagazine.com (Vitaly Friedman) — Tue, 03 Feb 2026 10:00:00 GMT</p>
<h1>How To Choose The Right One — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>5 min read</li><li><a href="http://www.smashingmagazine.com/category/ui">UI</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/user-experience">User Experience</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Combobox vs. Multi-Select vs. Listbox vs. Dual Listbox? How they are different, what purpose they serve, and how to choose the right one. Brought to you by <a href="https://ai-design-patterns.com">Design Patterns For AI Interfaces</a>, <strong>friendly video courses on UX</strong> and design patterns by Vitaly.</section></div><p>So what’s the difference between combobox, multiselect, listbox, and dropdown? While all these UI components might appear similar, they serve different purposes. The choice often comes down to the <strong>number of available options</strong> and their visibility.</p><p>Let’s see how they differ, <strong>what purpose they serve</strong>, and how to choose the right one — avoiding misunderstandings and wrong expectations along the way.</p><figure><a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/1-combobox-vs-multiselect-vs-listbox.jpg"></img></a><figcaption>And the confusion begins: Listbox, Combobox, Multiselect, Dual Listbox. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/1-combobox-vs-multiselect-vs-listbox.jpg">Large preview</a>)</figcaption></figure><h2 id="not-all-list-patterns-are-the-same">Not All List Patterns Are The Same</h2><p>All the UI components highlighted above have exactly one thing in common: they support users’ interactions with lists. However, they do so slightly differently.</p><p>Let’s take a look at each, one by one:</p><ul><li><strong>Dropdown</strong> → list is hidden until it’s triggered.</li><li><strong>Combobox</strong> → type to filter + select 1 option.</li><li><strong>Multiselect</strong> → type to filter + select many options.</li><li><strong>Listbox</strong> → all list options visible by default (+ scroll).</li><li><strong>Dual listbox</strong> → move items between 2 listboxes.</li></ul><figure><a href="https://watson.docplanner.design/latest/watson-web/components/combobox/usage-guidelines-L68K6G51"></img></a><figcaption>Watson design system with grouping inside of its <a href="https://watson.docplanner.design/latest/watson-web/components/combobox/usage-guidelines-L68K6G51">combobox pattern</a>. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/2-watson-design-system.jpg">Large preview</a>)</figcaption></figure><p>In other words, <em>Combobox</em> combines a text input field with a dropdown list, so users can <strong>type to filter</strong> and select a single option. With <em>Multiselect</em>, users can select many options (often displayed as pills or chips).</p><p><em>Listboxes</em> display <strong>all list options visible</strong> by default, often with scrolling. It’s helpful when users need to see all available choices immediately. <em>Dual listbox</em> (also called <em>transfer list</em>) is a variation of a listbox that allows users to <strong>move items between two listboxes</strong> (left ↔ right), typically for bulk selection.</p><h2 id="never-hide-frequently-used-options">Never Hide Frequently Used Options</h2><p>As mentioned above, the choice of the right UI component depends on <strong>2 factors</strong>: how many list options are available, and if all these options need to be visible by default. All lists could have tree structures, nesting, and group selection, too.</p><figure><a href="https://www.mongodb.design/component/combobox/design-docs"></img></a><figcaption><a href="https://www.mongodb.design/component/combobox/live-example">MongoDB design system</a> with nested filters and chips. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/3-nongodb-design-system.jpg">Large preview</a>)</figcaption></figure><p>There is one principle that I’ve been following for years for any UI component: <strong>never hide frequently used options</strong>. If users rely on a particular selection frequently, there is very little value in hiding it from them.</p><p>We could either make it <strong>pre-selected</strong>, or (if there are only 2–3 frequently used options) show them as <a href="https://smart-interface-design-patterns.com/articles/badges-chips-tags-pills/"><strong>chips or buttons</strong></a>, and then show the rest of the list on interaction. In general, it’s a good idea to always display popular options — even if it might clutter the UI.</p><h2 id="how-to-choose-which">How To Choose Which?</h2><p>Not every list needs a complex selection method. For lists with <strong>fewer than 5 items</strong>, simple radio buttons or checkboxes usually work best. But if users need to select from a <strong>large list</strong> of options (e.g., 200+ items), combobox + multiselect are helpful because of the faster filtering (e.g., country selection).</p><figure><a href="https://www.nngroup.com/articles/listbox-dropdown/"></img></a><figcaption>A <a href="https://www.nngroup.com/articles/listbox-dropdown/">matrix of options</a>, broken down by single- or multi-selection and static or scrollable view. By Anna Kaley, from NN/g. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/4-matrix-options-multiselect-listboxes.jpg">Large preview</a>)</figcaption></figure><p><strong>Listboxes</strong> are helpful when people need to access <strong>many options at once</strong>, especially if they need to choose many options from that list as well. They could be helpful for frequently used filters.</p><figure><a href="https://v5.mantine.dev/core/transfer-list/"></img></a><figcaption>Dual listbox in action: it can be very helpful when assigning tasks or permissions. That’s why it’s “Transfer List”. Example from <a href="https://v5.mantine.dev/core/transfer-list/">Mantine</a>. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/5-dual-list-box.png">Large preview</a>)</figcaption></figure><p><strong>Dual listbox</strong> is often overlooked and ignored. But it can be very helpful for complex tasks, e..g bulk selection, or assigning roles, tasks, responsibilities. It’s the only UI component that allows users to review their full selection list side-by-side with the source list before committing (also called <em>“Transfer list”</em>).</p><p>In fact, dual listbox is often faster, more accurate, and more accessible than <a href="https://smart-interface-design-patterns.com/articles/drag-and-drop-ux/">drag-and-drop</a>.</p><h2 id="usability-considerations">Usability Considerations</h2><p>One important note to keep in mind is that all list types need to support <strong>keyboard navigation</strong> (e.g., ↑/↓ arrow keys) for accessibility. Some people will almost always rely uponthe keyboard to select options once they start typing.</p><figure><a href="https://watson.docplanner.design/latest/watson-web/components/combobox/usage-guidelines-L68K6G51"></img></a><figcaption>Keyboard navigation is often in use with any kind of lists. Example: <a href="https://watson.docplanner.design/latest/watson-web/components/combobox/usage-guidelines-L68K6G51">Watson</a>. (<a href="https://files.smashing.media/articles/combobox-vs-multiselect-vs-listbox/7-keyboard-navigation.png">Large preview</a>)</figcaption></figure><p>Beyond that:</p><ul><li>For lists with <strong>7+ options</strong>, consider adding “Select All” and “Clear All” functionalities to streamline user interaction.</li><li>For lengthy lists with a combobox, <strong>expose all options</strong> to users on click/tap, as otherwise they might never be seen,</li><li>Most important, <strong>don’t display non-interactive elements as buttons</strong> to avoid confusion — and don’t display interactive elements as static labels.</li></ul><h2 id="wrapping-up-not-everything-is-a-dropdown">Wrapping Up: Not Everything Is A Dropdown</h2><p>Names matter. A <strong>vertical list of options</strong> is typically described as a “dropdown” — but often it’s a bit too generic to be meaningful. <em>“Dropdown”</em> hints that the list is hidden by default. <em>“Multiselect”</em> implies multi-selection (checkbox) within a list. <em>“Combobox”</em> implies text input. And “Listbox” is simply a list of selectable items, visible at all times.</p><p>The goal isn’t to be consistent with the definitions above for the sake of it. But rather to <strong>align intentions</strong> — speak the same language when deciding on, designing, building, and then using these UI components.</p><p>It <strong>should work for everyone</strong> — designers, engineers, and end users — as long as static labels don’t look like interactive buttons, and radio buttons don’t act like checkboxes.</p><h2 id="meet-design-patterns-for-ai-interfaces">Meet “Design Patterns For AI Interfaces”</h2><p>Meet <a href="https://ai-design-patterns.com/"><strong>Design Patterns For AI Interfaces</strong></a>, Vitaly’s new <strong>video course</strong> with practical examples from real-life products — with a <a href="https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/">live UX training</a> happening soon. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>.</p><p><figure><a href="https://ai-design-patterns.com/"></img></a><figcaption>Meet <a href="https://ai-design-patterns.com/">Design Patterns For AI Interfaces</a>, Vitaly’s video course on interface design & UX.</figcaption></figure></p><h2 id="useful-resources">Useful Resources</h2><ul><li><a href="https://smart-interface-design-patterns.com/articles/autocomplete-ux/">Autocomplete: UX Guidelines</a>, by Vitaly Friedman</li><li><a href="https://playbook.ebay.com/design-system/components/combobox">Combobox</a>, by eBay 👍</li><li><a href="https://eui.elastic.co/docs/components/forms/selection/combo-box/">Combobox</a>, by Elastic</li><li><a href="https://designsystem.elisa.fi/9b207b2c3/p/082dd3-combobox">Combobox</a>, by Elisa</li><li><a href="https://www.mongodb.design/component/combobox/live-example">Combobox</a>, by MongoDB 👍</li><li><a href="https://design.visa.com/components/combobox/">Combobox</a>, by Visa 👍</li><li><a href="https://watson.docplanner.design/latest/watson-web/components/combobox/usage-guidelines-L68K6G51">Combobox</a>, by Watson (Docplanner)</li><li><a href="https://doc.wikimedia.org/codex/latest/components/demos/combobox.html">Combobox</a>, by Wikimedia</li><li><a href="https://garden.zendesk.com/components/combobox">Combobox</a>, by Zendesk</li><li><a href="https://www.mongodb.design/component/combobox/design-docs">Multiselect (MongoDB Combobox Design Docs)</a>, by MongoDB 👍</li><li><a href="https://doc.wikimedia.org/codex/latest/components/demos/multiselect-lookup.html">Multiselect Lookup</a>, by Wikimedia</li><li><a href="https://vaadin.com/docs/latest/components/multi-select-combo-box">Multi-select Combo Box</a>, by Vaadin</li><li><a href="https://design.visa.com/components/multiselect/">Multiselect</a>, by Visa</li><li><a href="https://ant.design/components/transfer">Transfer (Listbox example)</a>, by Ant Design</li><li><a href="https://hopper.workleap.design/components/Listbox">Listbox</a>, by Hopper</li><li><a href="https://vaadin.com/docs/latest/components/list-box">List Box</a>, by Vaadin</li><li><a href="https://design.visa.com/components/listbox/">Listbox</a>, by Visa</li><li><a href="https://www.patternfly.org/components/dual-list-selector">Dual List Selector</a>, by Red Hat (PatternFly)</li><li><a href="https://www.lightningdesignsystem.com/2e1ef8501/p/763763-dual-listbox">Dual Listbox</a>, by Salesforce (Lightning Design System)</li><li><a href="https://v5.mantine.dev/core/transfer-list/">Transfer List</a>, by Mantine</li><li><a href="https://dashlite.net/demo1/components/misc/dual-listbox.html">Dual Listbox</a>, by Dashlite</li><li><a href="https://smart-interface-design-patterns.com/articles/badges-chips-tags-pills/">Badges vs. Pills vs. Chips vs. Tags</a>, by Vitaly Friedman</li><li><a href="https://www.nngroup.com/articles/listbox-dropdown/">Listboxes vs. Dropdown Lists</a>, by Anna Kaley (NN/g)</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Short Month, Big Ideas (February 2026 Wallpapers Edition)</h1>
<p>hello@smashingmagazine.com (Cosima Mielke) — Sat, 31 Jan 2026 09:00:00 GMT</p>
<h1>Short Month, Big Ideas (February 2026 Wallpapers Edition) — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>10 min read</li><li><a href="http://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Let’s make the most of the shortest month of the year with a new collection of desktop wallpapers that are sure to bring a smile to your face — and maybe spark your creativity, too. All of them were designed with love by the community for the community and can be downloaded for free. Happy February!</section></p><p>Sometimes, the best inspiration lies right in front of us. With that in mind, we embarked on our <a href="https://www.smashingmagazine.com/category/wallpapers">wallpapers adventure</a> more than 14 years ago. The idea: to provide you with a new collection of <strong>unique and inspiring desktop wallpapers</strong> every month. This February is no exception, of course.</p><p>For this post, artists and designers from across the globe once again got their ideas flowing and designed wallpapers to bring some good vibes to your desktops and home screens. All of them come in a <strong>variety of screen resolutions</strong> and can be downloaded for free. A huge thank-you to everyone who shared their design with us this month — this post wouldn’t exist without your kind support!</p><p>If you too would like to get featured in one of our next wallpapers posts, please don’t hesitate to <strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a></strong>. We are always looking for creative talent and can’t wait to see <em>your</em> story come to life!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li></ul><h2 id="eternal-tech-02-2026">Eternal Tech</h2><p>The first one being older than 100 years, radio is still connecting people, places, and events. — Designed by <a href="https://www.gingeritsolutions.com/">Ginger It Solutions</a> from Serbia.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/feb-26-eternal-tech-full.png" title="Eternal Tech"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/feb-26-eternal-tech-preview.png" title="Eternal Tech - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-320x480.png" title="Eternal Tech - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-640x480.png" title="Eternal Tech - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-800x480.png" title="Eternal Tech - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-800x600.png" title="Eternal Tech - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1024x768.png" title="Eternal Tech - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1024x1024.png" title="Eternal Tech - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1152x864.png" title="Eternal Tech - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1280x720.png" title="Eternal Tech - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1280x800.png" title="Eternal Tech - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1280x960.png" title="Eternal Tech - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1280x1020.png" title="Eternal Tech - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1400x1050.png" title="Eternal Tech - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1440x900.png" title="Eternal Tech - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1600x1200.png" title="Eternal Tech - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1680x1050.png" title="Eternal Tech - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1680x1200.png" title="Eternal Tech - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1920x1080.png" title="Eternal Tech - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1920x1200.png" title="Eternal Tech - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-1920x1440.png" title="Eternal Tech - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/cal/feb-26-eternal-tech-cal-2560x1440.png" title="Eternal Tech - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-320x480.png" title="Eternal Tech - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-640x480.png" title="Eternal Tech - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-800x480.png" title="Eternal Tech - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-800x600.png" title="Eternal Tech - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1024x768.png" title="Eternal Tech - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1024x1024.png" title="Eternal Tech - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1152x864.png" title="Eternal Tech - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1280x720.png" title="Eternal Tech - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1280x800.png" title="Eternal Tech - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1280x960.png" title="Eternal Tech - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1280x1020.png" title="Eternal Tech - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1400x1050.png" title="Eternal Tech - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1440x900.png" title="Eternal Tech - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1600x1200.png" title="Eternal Tech - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1680x1050.png" title="Eternal Tech - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1680x1200.png" title="Eternal Tech - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1920x1080.png" title="Eternal Tech - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1920x1200.png" title="Eternal Tech - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-1920x1440.png" title="Eternal Tech - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/eternal-tech/nocal/feb-26-eternal-tech-nocal-2560x1440.png" title="Eternal Tech - 2560x1440">2560x1440</a></li></ul><h2 id="coffee-break-02-2026">Coffee Break</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/feb-26-coffee-break-full.png" title="Coffee Break"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/feb-26-coffee-break-preview.png" title="Coffee Break - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-640x480.png" title="Coffee Break - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-800x480.png" title="Coffee Break - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-800x600.png" title="Coffee Break - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1024x768.png" title="Coffee Break - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1024x1024.png" title="Coffee Break - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1152x864.png" title="Coffee Break - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1280x720.png" title="Coffee Break - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1280x800.png" title="Coffee Break - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1280x960.png" title="Coffee Break - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1280x1024.png" title="Coffee Break - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1366x768.png" title="Coffee Break - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1400x1050.png" title="Coffee Break - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1440x900.png" title="Coffee Break - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1600x1200.png" title="Coffee Break - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1680x1050.png" title="Coffee Break - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1680x1200.png" title="Coffee Break - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1920x1080.png" title="Coffee Break - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1920x1200.png" title="Coffee Break - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-1920x1440.png" title="Coffee Break - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-2560x1440.png" title="Coffee Break - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/cal/feb-26-coffee-break-cal-3840x2160.png" title="Coffee Break - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-640x480.png" title="Coffee Break - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-800x480.png" title="Coffee Break - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-800x600.png" title="Coffee Break - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1024x768.png" title="Coffee Break - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1024x1024.png" title="Coffee Break - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1152x864.png" title="Coffee Break - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1280x720.png" title="Coffee Break - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1280x800.png" title="Coffee Break - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1280x960.png" title="Coffee Break - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1280x1024.png" title="Coffee Break - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1366x768.png" title="Coffee Break - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1400x1050.png" title="Coffee Break - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1440x900.png" title="Coffee Break - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1600x1200.png" title="Coffee Break - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1680x1050.png" title="Coffee Break - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1680x1200.png" title="Coffee Break - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1920x1080.png" title="Coffee Break - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1920x1200.png" title="Coffee Break - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-1920x1440.png" title="Coffee Break - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-2560x1440.png" title="Coffee Break - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/coffee-break/nocal/feb-26-coffee-break-nocal-3840x2160.png" title="Coffee Break - 3840x2160">3840x2160</a></li></ul><h2 id="mosa-hic-02-2026">Mosa-hic</h2><p>Small colored squares make me think of a mosaic, but the squares are not precisely tiled, so I call it a ‘mosa-hic,’ like the ‘hic hic’ sound someone makes when they’ve had a bit too much to drink. — Designed by <a href="https://www.philippebrouard.fr/">Philippe Brouard</a> from France.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/feb-26-mosa-hic-full.png" title="Mosa-hic"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/feb-26-mosa-hic-preview.png" title="Mosa-hic - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-1024x768.jpg" title="Mosa-hic - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-1366x768.jpg" title="Mosa-hic - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-1600x1200.jpg" title="Mosa-hic - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-1920x1080.jpg" title="Mosa-hic - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-1920x1200.jpg" title="Mosa-hic - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-2560x1440.jpg" title="Mosa-hic - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-2560x1600.jpg" title="Mosa-hic - 2560x1600">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-2880x1800.jpg" title="Mosa-hic - 2880x1800">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/cal/feb-26-mosa-hic-cal-3840x2160.jpg" title="Mosa-hic - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-1024x768.jpg" title="Mosa-hic - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-1366x768.jpg" title="Mosa-hic - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-1600x1200.jpg" title="Mosa-hic - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-1920x1080.jpg" title="Mosa-hic - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-1920x1200.jpg" title="Mosa-hic - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-2560x1440.jpg" title="Mosa-hic - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-2560x1600.jpg" title="Mosa-hic - 2560x1600">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-2880x1800.jpg" title="Mosa-hic - 2880x1800">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/mosa-hic/nocal/feb-26-mosa-hic-nocal-3840x2160.jpg" title="Mosa-hic - 3840x2160">3840x2160</a></li></ul><h2 id="search-within-02-2026">Search Within</h2><p>I used the search-bar metaphor to reflect a daily habit and transform it into a moment of introspection, reminding myself to pause and look inward. — Designed by <a href="https://linkedin.com/in/hiteshpuri">Hitesh Puri</a> from India, Delhi.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/feb-26-search-within-full.png" title="Search Within"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/feb-26-search-within-preview.png" title="Search Within - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-430x932.png" title="Search Within - 430x932">430x932</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1024x1024.png" title="Search Within - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1280x800.png" title="Search Within - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1280x960.png" title="Search Within - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1280x1024.png" title="Search Within - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1400x1050.png" title="Search Within - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1440x900.png" title="Search Within - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1600x1200.png" title="Search Within - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1680x1050.png" title="Search Within - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1680x1200.png" title="Search Within - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1920x1080.png" title="Search Within - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1920x1200.png" title="Search Within - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-1920x1440.png" title="Search Within - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/cal/feb-26-search-within-cal-2560x1440.png" title="Search Within - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-430x932.png" title="Search Within - 430x932">430x932</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1024x1024.png" title="Search Within - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1280x800.png" title="Search Within - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1280x960.png" title="Search Within - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1280x1024.png" title="Search Within - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1400x1050.png" title="Search Within - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1440x900.png" title="Search Within - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1600x1200.png" title="Search Within - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1680x1050.png" title="Search Within - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1680x1200.png" title="Search Within - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1920x1080.png" title="Search Within - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1920x1200.png" title="Search Within - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-1920x1440.png" title="Search Within - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/search-within/nocal/feb-26-search-within-nocal-2560x1440.png" title="Search Within - 2560x1440">2560x1440</a></li></ul><h2 id="the-lighthouse-of-mystery-02-2026">The Lighthouse Of Mystery</h2><p>We continue the film saga. This time, we go to the mysterious Shutter Island, a lighthouse with many mysteries that will absorb you. — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/feb-26-the-lighthouse-of-mystery-full.png" title="The Lighthouse Of Mystery"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/feb-26-the-lighthouse-of-mystery-preview.png" title="The Lighthouse Of Mystery - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-640x480.png" title="The Lighthouse Of Mystery - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-800x480.png" title="The Lighthouse Of Mystery - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1024x768.png" title="The Lighthouse Of Mystery - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1280x720.png" title="The Lighthouse Of Mystery - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1280x800.png" title="The Lighthouse Of Mystery - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1440x900.png" title="The Lighthouse Of Mystery - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1600x1200.png" title="The Lighthouse Of Mystery - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1920x1080.png" title="The Lighthouse Of Mystery - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-1920x1440.png" title="The Lighthouse Of Mystery - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/cal/feb-26-the-lighthouse-of-mystery-cal-2560x1440.png" title="The Lighthouse Of Mystery - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-640x480.png" title="The Lighthouse Of Mystery - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-800x480.png" title="The Lighthouse Of Mystery - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1024x768.png" title="The Lighthouse Of Mystery - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1280x720.png" title="The Lighthouse Of Mystery - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1280x800.png" title="The Lighthouse Of Mystery - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1440x900.png" title="The Lighthouse Of Mystery - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1600x1200.png" title="The Lighthouse Of Mystery - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1920x1080.png" title="The Lighthouse Of Mystery - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-1920x1440.png" title="The Lighthouse Of Mystery - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/the-lighthouse-of-mystery/nocal/feb-26-the-lighthouse-of-mystery-nocal-2560x1440.png" title="The Lighthouse Of Mystery - 2560x1440">2560x1440</a></li></ul><h2 id="thats-all-folks-02-2026">That’s All Folks</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/feb-26-thats-all-folks-full.png" title="That’s All Folks"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/feb-26-thats-all-folks-preview.png" title="That’s All Folks - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-640x480.png" title="That’s All Folks - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-800x480.png" title="That’s All Folks - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-800x600.png" title="That’s All Folks - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1024x768.png" title="That’s All Folks - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1024x1024.png" title="That’s All Folks - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1152x864.png" title="That’s All Folks - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1280x720.png" title="That’s All Folks - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1280x800.png" title="That’s All Folks - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1280x960.png" title="That’s All Folks - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1280x1024.png" title="That’s All Folks - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1366x768.png" title="That’s All Folks - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1400x1050.png" title="That’s All Folks - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1440x900.png" title="That’s All Folks - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1600x1200.png" title="That’s All Folks - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1680x1050.png" title="That’s All Folks - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1680x1200.png" title="That’s All Folks - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1920x1080.png" title="That’s All Folks - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1920x1200.png" title="That’s All Folks - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-1920x1440.png" title="That’s All Folks - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-2560x1440.png" title="That’s All Folks - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/cal/feb-26-thats-all-folks-cal-3840x2160.png" title="That’s All Folks - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-640x480.png" title="That’s All Folks - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-800x480.png" title="That’s All Folks - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-800x600.png" title="That’s All Folks - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1024x768.png" title="That’s All Folks - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1024x1024.png" title="That’s All Folks - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1152x864.png" title="That’s All Folks - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1280x720.png" title="That’s All Folks - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1280x800.png" title="That’s All Folks - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1280x960.png" title="That’s All Folks - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1280x1024.png" title="That’s All Folks - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1366x768.png" title="That’s All Folks - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1400x1050.png" title="That’s All Folks - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1440x900.png" title="That’s All Folks - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1600x1200.png" title="That’s All Folks - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1680x1050.png" title="That’s All Folks - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1680x1200.png" title="That’s All Folks - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1920x1080.png" title="That’s All Folks - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1920x1200.png" title="That’s All Folks - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-1920x1440.png" title="That’s All Folks - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-2560x1440.png" title="That’s All Folks - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-26/thats-all-folks/nocal/feb-26-thats-all-folks-nocal-3840x2160.png" title="That’s All Folks - 3840x2160">3840x2160</a></li></ul><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="fall-in-love-with-yourself">Fall In Love With Yourself</h2><p>We dedicate February to Frida Kahlo to illuminate the world with color. Fall in love with yourself, with life, and then with whoever you want. — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-25-fall-in-love-with-yourself-full-opt.png" title="Fall In Love With Yourself"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-25-fall-in-love-with-yourself-preview-opt.png" title="Fall In Love With Yourself - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-640x480.png" title="Fall In Love With Yourself - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-800x480.png" title="Fall In Love With Yourself - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1024x768.png" title="Fall In Love With Yourself - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1280x720.png" title="Fall In Love With Yourself - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1280x800.png" title="Fall In Love With Yourself - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1440x900.png" title="Fall In Love With Yourself - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1600x1200.png" title="Fall In Love With Yourself - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1920x1080.png" title="Fall In Love With Yourself - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-1920x1440.png" title="Fall In Love With Yourself - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/fall-in-love-with-yourself/nocal/feb-25-fall-in-love-with-yourself-nocal-2560x1440.png" title="Fall In Love With Yourself - 2560x1440">2560x1440</a></li></ul><h2 id="plants">Plants</h2><p>I wanted to draw some very cozy place, both realistic and cartoonish, filled with little details. A space with a slightly unreal atmosphere that some great shops or cafes have. A mix of plants, books, bottles, and shelves seemed like a perfect fit. I must admit, it took longer to draw than most of my other pictures! But it was totally worth it. <a href="https://vlad.studio/wallpaper/plants">Watch the making-of</a>. — Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2024/feb-23-plants-full-opt.png" title="Plants"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2024/feb-23-plants-preview-opt.png" title="Plants - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-800x480.jpg" title="Plants - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-800x600.jpg" title="Plants - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1024x600.jpg" title="Plants - 1024x600">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1024x768.jpg" title="Plants - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1152x864.jpg" title="Plants - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1280x720.jpg" title="Plants - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1280x800.jpg" title="Plants - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1280x960.jpg" title="Plants - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1280x1024.jpg" title="Plants - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1366x768.jpg" title="Plants - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1400x1050.jpg" title="Plants - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1440x900.jpg" title="Plants - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1440x960.jpg" title="Plants - 1440x960">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1600x900.jpg" title="Plants - 1600x900">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1600x1200.jpg" title="Plants - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1680x1050.jpg" title="Plants - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1680x1200.jpg" title="Plants - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1920x1080.jpg" title="Plants - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1920x1200.jpg" title="Plants - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-1920x1440.jpg" title="Plants - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-2560x1440.jpg" title="Plants - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-2560x1600.jpg" title="Plants - 2560x1600">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-2880x1800.jpg" title="Plants - 2880x1800">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-3072x1920.jpg" title="Plants - 3072x1920">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-3840x2160.jpg" title="Plants - 3840x2160">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-23/plants/nocal/feb-23-plants-nocal-5120x2880.jpg" title="Plants - 5120x2880">5120x2880</a></li></ul><h2 id="farewell-winter">Farewell, Winter</h2><p>“Although I love winter (mostly because of the fun winter sports), there are other great activities ahead. Thanks, winter, and see you next year!” — Designed by <a href="https://dribbble.com/izhik">Igor Izhik</a> from Canada.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a25494a0-31b0-45aa-8831-8548dbb08729/feb-16-farewell-winter-full.png" title="Farewell, Winter"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/673630eb-6299-4aa4-bfca-05c8f78db651/feb-16-farewell-winter-preview-opt.png" title="Farewell, Winter - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1024x768.jpg" title="Farewell, Winter - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1024x1024.jpg" title="Farewell, Winter - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1152x864.jpg" title="Farewell, Winter - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1280x720.jpg" title="Farewell, Winter - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1280x800.jpg" title="Farewell, Winter - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1280x960.jpg" title="Farewell, Winter - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1280x1024.jpg" title="Farewell, Winter - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1400x1050.jpg" title="Farewell, Winter - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1440x900.jpg" title="Farewell, Winter - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1600x1200.jpg" title="Farewell, Winter - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1680x1050.jpg" title="Farewell, Winter - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1680x1200.jpg" title="Farewell, Winter - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1920x1080.jpg" title="Farewell, Winter - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1920x1200.jpg" title="Farewell, Winter - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-1920x1440.jpg" title="Farewell, Winter - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-2560x1440.jpg" title="Farewell, Winter - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/farewell-winter/nocal/feb-16-farewell-winter-nocal-2560x1600.jpg" title="Farewell, Winter - 2560x1600">2560x1600</a></li></ul><h2 id="love-is-in-the-play">Love Is In The Play</h2><p>Forget Lady and the Tramp and their spaghetti kiss, ’cause Snowflake and Cloudy are enjoying their bliss. The cold and chilly February weather made our kitties knit themselves a sweater. Knitting and playing, the kitties tangled in the yarn and fell in love in your neighbor’s barn. — Designed by <a href="https://www.popwebdesign.net/corporate_identity.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1cecbbf7-4e98-4b29-a9c7-2117d078c000/feb-22-love-is-in-the-play-full-opt.png" title="Love Is In The Play!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1bcf2b3-4ed1-4038-a774-54998c203467/feb-22-love-is-in-the-play-preview-opt.png" title="Love Is In The Play! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-320x480.png" title="Love Is In The Play! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-640x480.png" title="Love Is In The Play! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-800x480.png" title="Love Is In The Play! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-800x600.png" title="Love Is In The Play! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1024x768.png" title="Love Is In The Play! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1024x1024.png" title="Love Is In The Play! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1152x864.png" title="Love Is In The Play! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1280x720.png" title="Love Is In The Play! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1280x800.png" title="Love Is In The Play! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1280x960.png" title="Love Is In The Play! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1280x1024.png" title="Love Is In The Play! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1366x768.png" title="Love Is In The Play! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1400x1050.png" title="Love Is In The Play! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1440x900.png" title="Love Is In The Play! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1600x1200.png" title="Love Is In The Play! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1680x1050.png" title="Love Is In The Play! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1680x1200.png" title="Love Is In The Play! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1920x1080.png" title="Love Is In The Play! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1920x1200.png" title="Love Is In The Play! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-1920x1440.png" title="Love Is In The Play! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/love-is-in-the-play/nocal/feb-22-love-is-in-the-play-nocal-2560x1440.png" title="Love Is In The Play! - 2560x1440">2560x1440</a></li></ul><h2 id="true-love">True Love</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00688e2b-8b60-4752-b851-1c3af5c09f31/feb-21-true-love-full-opt.png" title="True Love"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ffe38772-cdb2-43d6-b334-76d1f46a97f7/feb-21-true-love-preview-opt.png" title="True Love - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-640x480.png" title="True Love - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-800x480.png" title="True Love - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-800x600.png" title="True Love - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1024x768.png" title="True Love - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1024x1024.png" title="True Love - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1152x864.png" title="True Love - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1280x720.png" title="True Love - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1280x800.png" title="True Love - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1280x960.png" title="True Love - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1280x1024.png" title="True Love - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1366x768.png" title="True Love - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1400x1050.png" title="True Love - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1440x900.png" title="True Love - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1600x1200.png" title="True Love - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1680x1050.png" title="True Love - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1680x1200.png" title="True Love - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1920x1080.png" title="True Love - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1920x1200.png" title="True Love - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-1920x1440.png" title="True Love - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-2560x1440.png" title="True Love - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/true-love/nocal/feb-21-true-love-nocal-3840x2160.png" title="True Love - 3840x2160">3840x2160</a></li></ul><h2 id="february-ferns">February Ferns</h2><p>Designed by Nathalie Ouederni from France.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4ef7f934-807e-44ae-af7e-f7e19cc24d19/feb-17-february-ferns-full-opt.png" title="February Ferns"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45a8625f-8583-49fa-8b06-0caee27e883a/feb-17-february-ferns-preview-opt.png" title="February Ferns - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-320x480.jpg" title="February Ferns - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1024x768.jpg" title="February Ferns - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1280x1024.jpg" title="February Ferns - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1440x900.jpg" title="February Ferns - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1680x1200.jpg" title="February Ferns - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1920x1200.jpg" title="February Ferns - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-2560x1440.jpg" title="February Ferns - 2560x1440">2560x1440</a></li></ul><h2 id="the-great-beyond">The Great Beyond</h2><p>Designed by Lars Pauwels from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a231e39d-c928-496f-9421-fd054849511a/mar-18-the-great-beyond-full-opt.png" title="The Great Beyond"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4f47db11-566a-41b6-abbb-22bdca722545/mar-18-the-great-beyond-preview-opt.png" title="The Great Beyond - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-800x600.png" title="The Great Beyond - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1024x768.png" title="The Great Beyond - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1024x1024.png" title="The Great Beyond - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1152x864.png" title="The Great Beyond - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x720.png" title="The Great Beyond - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x800.png" title="The Great Beyond - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x960.png" title="The Great Beyond - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1280x1024.png" title="The Great Beyond - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1366x768.png" title="The Great Beyond - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1400x1050.png" title="The Great Beyond - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1440x900.png" title="The Great Beyond - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1600x1200.png" title="The Great Beyond - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1680x1050.png" title="The Great Beyond - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1680x1200.png" title="The Great Beyond - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1080.png" title="The Great Beyond - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1200.png" title="The Great Beyond - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-1920x1440.png" title="The Great Beyond - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/mar-18/the-great-beyond/nocal/mar-18-the-great-beyond-nocal-2560x1440.png" title="The Great Beyond - 2560x1440">2560x1440</a></li></ul><h2 id="cupcake-kind-of-day">It’s A Cupcake Kind Of Day</h2><p>Sprinkles are fun, festive, and filled with love&mldr; especially when topped on a cupcake! Everyone is creative in their own unique way, so why not try baking some cupcakes and decorating them for your sweetie this month? Something homemade, like a cupcake or DIY craft, is always a sweet gesture. — Designed by Artsy Cupcake from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/42e901ee-8f81-4524-b9c9-ee514db8ced4/feb-20-cupcake-kind-of-day-full-opt.png" title="It’s A Cupcake Kind Of Day!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/860f193e-fc82-4912-a8c0-24d3404bf14b/feb-20-cupcake-kind-of-day-preview-opt.png" title="It’s A Cupcake Kind Of Day! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-320x480.png" title="It’s A Cupcake Kind Of Day! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-640x480.png" title="It’s A Cupcake Kind Of Day! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-800x600.png" title="It’s A Cupcake Kind Of Day! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1024x768.png" title="It’s A Cupcake Kind Of Day! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1152x864.png" title="It’s A Cupcake Kind Of Day! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1280x800.png" title="It’s A Cupcake Kind Of Day! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1280x1024.png" title="It’s A Cupcake Kind Of Day! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1366x768.png" title="It’s A Cupcake Kind Of Day! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1440x900.png" title="It’s A Cupcake Kind Of Day! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1600x1200.png" title="It’s A Cupcake Kind Of Day! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1680x1200.png" title="It’s A Cupcake Kind Of Day! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1920x1200.png" title="It’s A Cupcake Kind Of Day! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-1920x1440.png" title="It’s A Cupcake Kind Of Day! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-20/cupcake-kind-of-day/nocal/feb-20-cupcake-kind-of-day-nocal-2560x1440.png" title="It’s A Cupcake Kind Of Day! - 2560x1440">2560x1440</a></li></ul><h2 id="mochi">Mochi</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-25-mochi-full-opt.png" title="Mochi"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-25-mochi-preview-opt.png" title="Mochi - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-640x480.png" title="Mochi - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-800x480.png" title="Mochi - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-800x600.png" title="Mochi - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1024x768.png" title="Mochi - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1024x1024.png" title="Mochi - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1152x864.png" title="Mochi - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1280x720.png" title="Mochi - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1280x800.png" title="Mochi - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1280x960.png" title="Mochi - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1280x1024.png" title="Mochi - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1366x768.png" title="Mochi - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1400x1050.png" title="Mochi - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1440x900.png" title="Mochi - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1600x1200.png" title="Mochi - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1680x1050.png" title="Mochi - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1680x1200.png" title="Mochi - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1920x1080.png" title="Mochi - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1920x1200.png" title="Mochi - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-1920x1440.png" title="Mochi - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-2560x1440.png" title="Mochi - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-25/mochi/nocal/feb-25-mochi-nocal-3840x2160.png" title="Mochi - 3840x2160">3840x2160</a></li></ul><h2 id="balloons">Balloons</h2><p>Designed by <a href="https://www.behance.net/xenialatii">Xenia Latii</a> from Germany.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29f2fe4b-b188-4651-b9b2-6d4da1640418/feb-17-balloons-large-opt.png" title="Balloons"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e0b07f1-eeda-490e-8f47-2a065ff33626/feb-17-balloons-preview-opt.png" title="Balloons - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-320x480.jpg" title="Balloons - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-640x480.jpg" title="Balloons - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-800x480.jpg" title="Balloons - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-800x600.jpg" title="Balloons - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1024x768.jpg" title="Balloons - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1152x864.jpg" title="Balloons - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280x720.jpg" title="Balloons - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280x800.jpg" title="Balloons - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280x960.jpg" title="Balloons - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280x1024.jpg" title="Balloons - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1366x768.jpg" title="Balloons - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1400x1050.jpg" title="Balloons - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1440x900.jpg" title="Balloons - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1600x1200.jpg" title="Balloons - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1680x1050.jpg" title="Balloons - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1680x1200.jpg" title="Balloons - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920x1080.jpg" title="Balloons - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920x1200.jpg" title="Balloons - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920x1440.jpg" title="Balloons - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-2560x1440.jpg" title="Balloons - 2560x1440">2560x1440</a></li></ul><h2 id="magic-of-music">Magic Of Music</h2><p>Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7e0cc9a-3fe6-4e17-b01f-288c66fedd19/feb-22-magic-of-music-full-opt.png" title="Magic Of Music"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cfc93ecc-124f-45e3-a58b-0037b2d0b57d/feb-22-magic-of-music-preview-opt.png" title="Magic Of Music - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-800x480.jpg" title="Magic Of Music - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-800x600.jpg" title="Magic Of Music - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1024x600.jpg" title="Magic Of Music - 1024x600">1024x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1024x768.jpg" title="Magic Of Music - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1152x864.jpg" title="Magic Of Music - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1280x720.jpg" title="Magic Of Music - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1280x800.jpg" title="Magic Of Music - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1280x960.jpg" title="Magic Of Music - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1280x1024.jpg" title="Magic Of Music - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1366x768.jpg" title="Magic Of Music - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1400x1050.jpg" title="Magic Of Music - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1440x900.jpg" title="Magic Of Music - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1440x960.jpg" title="Magic Of Music - 1440x960">1440x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1600x900.jpg" title="Magic Of Music - 1600x900">1600x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1600x1200.jpg" title="Magic Of Music - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1680x1050.jpg" title="Magic Of Music - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1680x1200.jpg" title="Magic Of Music - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1920x1080.jpg" title="Magic Of Music - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1920x1200.jpg" title="Magic Of Music - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-1920x1440.jpg" title="Magic Of Music - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-2560x1440.jpg" title="Magic Of Music - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-2560x1600.jpg" title="Magic Of Music - 2560x1600">2560x1600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-2880x1800.jpg" title="Magic Of Music - 2880x1800">2880x1800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-3072x1920.jpg" title="Magic Of Music - 3072x1920">3072x1920</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-3840x2160.jpg" title="Magic Of Music - 3840x2160">3840x2160</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-22/magic-of-music/nocal/feb-22-magic-of-music-nocal-5120x2880.jpg" title="Magic Of Music - 5120x2880">5120x2880</a></li></ul><h2 id="love-angel-vader">Love Angel Vader</h2><p>“Valentine’s Day is coming? Noooooooooooo!” — Designed by <a href="https://ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9c509bc1-3632-404b-a51b-bf3a3f5f59ad/feb-15-love-angel-vader-full-opt.png" title="Love Angel Vader"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/601d583f-b013-4157-a116-dfb215326aac/feb-15-love-angel-vader-preview-opt.png" title="Love Angel Vader - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-320x480.png" title="Love Angel Vader - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-640x960.png" title="Love Angel Vader - 640x960">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1024x768.png" title="Love Angel Vader - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1024x1024.png" title="Love Angel Vader - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1280x800.png" title="Love Angel Vader - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1280x960.png" title="Love Angel Vader - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1280x1024.png" title="Love Angel Vader - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1366x768.png" title="Love Angel Vader - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1400x1050.png" title="Love Angel Vader - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1440x900.png" title="Love Angel Vader - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1600x1050.png" title="Love Angel Vader - 1600x1050">1600x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1600x1200.png" title="Love Angel Vader - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1680x1050.png" title="Love Angel Vader - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1680x1200.png" title="Love Angel Vader - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1920x1080.png" title="Love Angel Vader - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1920x1200.png" title="Love Angel Vader - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-1920x1440.png" title="Love Angel Vader - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-2560x1440.png" title="Love Angel Vader - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/love-angel-vader/nocal/feb-15-love-angel-vader-nocal-2880x1800.png" title="Love Angel Vader - 2880x1800">2880x1800</a></li></ul><h2 id="principles-of-good-design">Principles Of Good Design</h2><p>“The simplicity seen in the work of Dieter Rams which has ensured his designs from the 50s and 60s still hold a strong appeal.” — Designed by Vinu Chaitanya from India.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c30b1e6b-8a48-4e4f-8d26-5147c7868549/feb-14-principles-of-good-design-dieter-rams-full-opt.png" title="Principles of Good Design - Dieter Rams"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/55db647c-7c44-4016-a0e0-e122c10ad712/feb-14-principles-of-good-design-dieter-rams-preview-opt.png" title="Principles of Good Design- Dieter Rams - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-320x480.png" title="Principles of Good Design- Dieter Rams - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-640x480.png" title="Principles of Good Design- Dieter Rams - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-800x480.png" title="Principles of Good Design- Dieter Rams - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-800x600.png" title="Principles of Good Design- Dieter Rams - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1024x1024.png" title="Principles of Good Design- Dieter Rams - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1152x864.png" title="Principles of Good Design- Dieter Rams - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1280x720.png" title="Principles of Good Design- Dieter Rams - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1280x800.png" title="Principles of Good Design- Dieter Rams - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1280x960.png" title="Principles of Good Design- Dieter Rams - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1280x1024.png" title="Principles of Good Design- Dieter Rams - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1400x1050.png" title="Principles of Good Design- Dieter Rams - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1440x900.png" title="Principles of Good Design- Dieter Rams - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1600x1200.png" title="Principles of Good Design- Dieter Rams - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1680x1050.png" title="Principles of Good Design- Dieter Rams - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1680x1200.png" title="Principles of Good Design- Dieter Rams - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1920x1080.png" title="Principles of Good Design- Dieter Rams - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1920x1200.png" title="Principles of Good Design- Dieter Rams - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-1920x1440.png" title="Principles of Good Design- Dieter Rams - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/principles-of-good-design--dieter-rams/nocal/feb-14-principles-of-good-design--dieter-rams-nocal-2560x1440.png" title="Principles of Good Design- Dieter Rams - 2560x1440">2560x1440</a></li></ul><h2 id="time-thief">Time Thief</h2><p>“Who has stolen our time? Maybe the time thief, so be sure to enjoy the other 28 days of February.” — Designed by <a href="https://www.colorsfera.com">Colorsfera</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0bf601e5-1d63-4c54-9c91-4ba017e6e555/feb-15-time-thief-full-opt.png" title="Time Thief"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44a5513e-c012-49f7-ba56-b8f8993a85eb/feb-15-time-thief-preview-opt.png" title="Time Thief - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-320x480.png" title="Time Thief - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-640x480.png" title="Time Thief - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-800x480.png" title="Time Thief - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-800x600.png" title="Time Thief - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1024x768.png" title="Time Thief - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1024x1024.png" title="Time Thief - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1152x864.png" title="Time Thief - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1260x1440.png" title="Time Thief - 1260x1440">1260x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1280x720.png" title="Time Thief - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1280x800.png" title="Time Thief - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1280x960.png" title="Time Thief - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1280x1024.png" title="Time Thief - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1400x1050.png" title="Time Thief - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1440x900.png" title="Time Thief - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1600x1200.png" title="Time Thief - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1680x1050.png" title="Time Thief - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1680x1200.png" title="Time Thief - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1920x1080.png" title="Time Thief - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1920x1200.png" title="Time Thief - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-1920x1440.png" title="Time Thief - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/time-thief/nocal/feb-15-time-thief-nocal-2560x1440.png" title="Time Thief - 2560x1440">2560x1440</a></li></ul><h2 id="dark-temptation">Dark Temptation</h2><p>A dark romantic feel, walking through the city on a dark and rainy night. — Designed by Matthew Talebi from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/12fcba42-e892-42b9-a49c-d0c711e74f57/feb-19-dark-temptation-large-opt.png" title="Dark Temptation"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b581622-d662-4bae-9e75-918edcbb2f47/feb-19-dark-temptation-preview-opt.png" title="Dark Temptation - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1400x1050.png" title="Dark Temptation - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1440x900.png" title="Dark Temptation - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1600x1200.png" title="Dark Temptation - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1680x1050.png" title="Dark Temptation - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1680x1200.png" title="Dark Temptation - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1920x1080.png" title="Dark Temptation - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1920x1200.png" title="Dark Temptation - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-1920x1440.png" title="Dark Temptation - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-19/dark-temptation/nocal/feb-19-dark-temptation-nocal-2560x1440.png" title="Dark Temptation - 2560x1440">2560x1440</a></li></ul><h2 id="the-bathman">The Bathman</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-24-the-bathman-full-opt.png" title="The Bathman"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2026/feb-24-the-bathman-preview-opt.png" title="The Bathman - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-640x480.png" title="The Bathman - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-800x480.png" title="The Bathman - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-800x600.png" title="The Bathman - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1024x768.png" title="The Bathman - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1024x1024.png" title="The Bathman - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1152x864.png" title="The Bathman - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1280x720.png" title="The Bathman - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1280x800.png" title="The Bathman - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1280x960.png" title="The Bathman - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1280x1024.png" title="The Bathman - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1366x768.png" title="The Bathman - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1400x1050.png" title="The Bathman - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1440x900.png" title="The Bathman - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1600x1200.png" title="The Bathman - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1680x1050.png" title="The Bathman - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1680x1200.png" title="The Bathman - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1920x1080.png" title="The Bathman - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1920x1200.png" title="The Bathman - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-1920x1440.png" title="The Bathman - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-2560x1440.png" title="The Bathman - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/feb-24/the-bathman/nocal/feb-24-the-bathman-nocal-3840x2160.png" title="The Bathman - 3840x2160">3840x2160</a></li></ul><h2 id="snowy-sunset">Snowy Sunset</h2><p>Designed by <a href="https://www.nathalie-croze.com">Nathalie Croze</a> from France.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d215db67-a1d0-45c4-adde-1b1fb45226d8/feb-17-snowy-sunset-full-opt.png" title="Snowy Sunset"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d319e185-4cd3-4097-a0c2-0f8d685b6ba7/feb-17-snowy-sunset-preview-opt.png" title="Snowy Sunset - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-320x480.jpg" title="Snowy Sunset - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-1680x1050.jpg" title="Snowy Sunset - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-1920x1080.jpg" title="Snowy Sunset - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-2560x1440.jpg" title="Snowy Sunset - 2560x1440">2560x1440</a></li></ul><h2 id="like-the-cold-side-of-a-pillow">Like The Cold Side Of A Pillow</h2><p>Designed by Sarah Tanner from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb089340-ac18-4696-bb77-37feb410fff5/february-13-like-the-cold-side-of-a-pillow-56-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bbd21d5c-996e-479e-a6e1-2b50f84266df/february-13-like-the-cold-side-of-a-pillow-56-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-13/february-13-like_the_cold_side_of_a_pillow__56-nocal-2560x1440.jpg">2560x1440</a></li></ul><h2 id="ice-cream-love">Ice Cream Love</h2><p>“My inspiration for this wallpaper is the biggest love someone can have in life: the love for ice cream!” — Designed by Zlatina Petrova from Bulgaria.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9f3fca30-4243-4258-8b04-5ced15ddd1f3/feb-15-ice-cream-love-full-opt.png" title="Ice Cream Love"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cc9accac-73e6-4539-ae40-7f21d17fbb91/feb-15-ice-cream-love-preview-opt.png" title="Ice Cream Love - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-320x480.jpg" title="Ice Cream Love - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-640x480.jpg" title="Ice Cream Love - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-800x480.jpg" title="Ice Cream Love - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-800x600.jpg" title="Ice Cream Love - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1024x768.jpg" title="Ice Cream Love - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1024x1024.jpg" title="Ice Cream Love - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1152x864.jpg" title="Ice Cream Love - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1280x720.jpg" title="Ice Cream Love - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1280x800.jpg" title="Ice Cream Love - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1280x960.jpg" title="Ice Cream Love - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1280x1024.jpg" title="Ice Cream Love - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1400x1050.jpg" title="Ice Cream Love - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1440x900.jpg" title="Ice Cream Love - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1600x1200.jpg" title="Ice Cream Love - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1680x1050.jpg" title="Ice Cream Love - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1680x1200.jpg" title="Ice Cream Love - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1920x1080.jpg" title="Ice Cream Love - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1920x1200.jpg" title="Ice Cream Love - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-1920x1440.jpg" title="Ice Cream Love - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/ice-cream-love/nocal/feb-15-ice-cream-love-nocal-2560x1440.jpg" title="Ice Cream Love - 2560x1440">2560x1440</a></li></ul><h2 id="febrewery">Febrewery</h2><p>“I live in Madison, WI, which is famous for its breweries. Wisconsin even named their baseball team “The Brewers.” If you like beer, brats, and lots of cheese, it’s the place for you!” — Designed by Danny Gugger from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9e36114-f8e1-4a28-aca4-898941170d52/feb-14-febrewery-full.png" title="Febrewery"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed63511c-5466-4882-afc2-924670127811/feb-14-febrewery-preview-opt.png" title="Febrewery - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-320x480.png" title="Febrewery - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-1020x768.png" title="Febrewery - 1020x768">1020x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-1280x800.png" title="Febrewery - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-1280x1024.png" title="Febrewery - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-1136x640.png" title="Febrewery - 1136x640">1136x640</a>, <a href="https://smashingmagazine.com/files/wallpapers/february-14/febrewery/nocal/feb-14-febrewery-nocal-2560x1440.png" title="Febrewery - 2560x1440">2560x1440</a></li></ul><p>I prepared a simple and chill layout design for February called ‘Share The Same Orbit!’ which suggests to share the love orbit. — Designed by <a href="https://www.behance.net/valentinkeleti">Valentin Keleti</a> from Romania.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c2bff2b8-9a09-4cb8-93d5-a4c7133b9705/feb-18-share-the-same-orbit-large-opt.png" title="Share The Same Orbit!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b767b438-6982-4932-bf6f-ed3c9ba8ac40/feb-18-share-the-same-orbit-preview-opt.png" title="Share The Same Orbit! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-320x480.jpg" title="Share The Same Orbit! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-640x480.jpg" title="Share The Same Orbit! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-800x480.jpg" title="Share The Same Orbit! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-800x600.jpg" title="Share The Same Orbit! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1024x768.jpg" title="Share The Same Orbit! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1024x1024.jpg" title="Share The Same Orbit! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1152x864.jpg" title="Share The Same Orbit! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1280x720.jpg" title="Share The Same Orbit! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1280x800.jpg" title="Share The Same Orbit! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1280x960.jpg" title="Share The Same Orbit! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1280x1024.jpg" title="Share The Same Orbit! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1366x768.jpg" title="Share The Same Orbit! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1400x1050.jpg" title="Share The Same Orbit! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1440x900.jpg" title="Share The Same Orbit! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1600x1200.jpg" title="Share The Same Orbit! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1680x1050.jpg" title="Share The Same Orbit! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1680x1200.jpg" title="Share The Same Orbit! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1920x1080.jpg" title="Share The Same Orbit! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1920x1200.jpg" title="Share The Same Orbit! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-1920x1440.jpg" title="Share The Same Orbit! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/share-the-same-orbit/nocal/feb-18-share-the-same-orbit-nocal-2560x1440.jpg" title="Share The Same Orbit! - 2560x1440">2560x1440</a></li></ul><h2 id="febpurrary">Febpurrary</h2><p>“I was doodling pictures of my cat one day and decided I could turn it into a fun wallpaper — because a cold, winter night in February is the perfect time for staying in and cuddling with your cat, your significant other, or both!” — Designed by <a href="https://angeliadesign.com/">Angelia DiAntonio</a> from Ohio, USA.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/389e73f4-33e0-4937-a776-f94007f97296/feb-17-febpurrary-full.png" title="Febpurrary"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07785d5f-70da-47db-b48e-e05e7fd48d04/feb-17-febpurrary-preview-opt.png" title="Febpurrary - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-320x480.jpg" title="Febpurrary - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-800x480.jpg" title="Febpurrary - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1024x768.jpg" title="Febpurrary - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1024x1024.jpg" title="Febpurrary - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1152x864.jpg" title="Febpurrary - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1280x720.jpg" title="Febpurrary - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1280x1024.jpg" title="Febpurrary - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1366x768.jpg" title="Febpurrary - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1400x1050.jpg" title="Febpurrary - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1440x900.jpg" title="Febpurrary - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1600x1200.jpg" title="Febpurrary - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1680x1200.jpg" title="Febpurrary - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920x1080.jpg" title="Febpurrary - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920x1200.jpg" title="Febpurrary - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920x1440.jpg" title="Febpurrary - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-2560x1440.jpg" title="Febpurrary - 2560x1440">2560x1440</a></li></ul><h2 id="snow">Snow</h2><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/973b3d07-a36b-4d28-a902-87168f409ad5/feb-15-snow-full-opt.png" title="Snow"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3afa06bc-dc11-40dc-9b47-d4273a39c2da/feb-15-snow-preview-opt.png" title="Snow - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1024x768.jpg" title="Snow - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1152x864.jpg" title="Snow - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x720.jpg" title="Snow - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x800.jpg" title="Snow - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1280x960.jpg" title="Snow - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1440x900.jpg" title="Snow - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1600x1200.jpg" title="Snow - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1680x1050.jpg" title="Snow - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1080.jpg" title="Snow - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1200.jpg" title="Snow - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1920x1440.jpg" title="Snow - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-2560x1440.jpg" title="Snow - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-1366x768.jpg" title="Snow - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-15/snow/nocal/feb-15-snow-nocal-2880x1800.jpg" title="Snow - 2880x1800">2880x1800</a></li></ul><h2 id="dog-year-ahead">Dog Year Ahead</h2><p>Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4519a4e6-3d2b-49f7-97da-f312d416acfc/feb-18-dog-year-ahead-full-opt.png" title="Dog Year Ahead"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b6e75626-1f6d-4fc8-b3c9-fcf098c2c057/feb-18-dog-year-ahead-preview-opt.png" title="Dog Year Ahead - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-320x480.jpg" title="Dog Year Ahead - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-640x480.jpg" title="Dog Year Ahead - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-800x480.jpg" title="Dog Year Ahead - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-800x600.jpg" title="Dog Year Ahead - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1024x768.jpg" title="Dog Year Ahead - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1024x1024.jpg" title="Dog Year Ahead - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1152x864.jpg" title="Dog Year Ahead - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1280x720.jpg" title="Dog Year Ahead - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1280x800.jpg" title="Dog Year Ahead - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1280x960.jpg" title="Dog Year Ahead - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1280x1024.jpg" title="Dog Year Ahead - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1366x768.jpg" title="Dog Year Ahead - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1400x1050.jpg" title="Dog Year Ahead - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1440x900.jpg" title="Dog Year Ahead - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1600x1200.jpg" title="Dog Year Ahead - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1680x1050.jpg" title="Dog Year Ahead - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1680x1200.jpg" title="Dog Year Ahead - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1920x1080.jpg" title="Dog Year Ahead - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1920x1200.jpg" title="Dog Year Ahead - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-1920x1440.jpg" title="Dog Year Ahead - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/dog-year-ahead/nocal/feb-18-dog-year-ahead-nocal-2560x1440.jpg" title="Dog Year Ahead - 2560x1440">2560x1440</a></li></ul><h2 id="french-fries">French Fries</h2><p>Designed by <a href="https://www.doreenbethge.de">Doreen Bethge</a> from Germany.</p><figure><a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/feb-18-french-fries-full.png" title="French Fries"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21035651-73be-4944-a3e5-5618bc39533a/feb-18-french-fries-preview-opt.png" title="French Fries - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-320x480.png" title="French Fries - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-640x480.png" title="French Fries - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-800x480.png" title="French Fries - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-800x600.png" title="French Fries - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1024x768.png" title="French Fries - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1024x1024.png" title="French Fries - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1152x864.png" title="French Fries - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1280x720.png" title="French Fries - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1280x800.png" title="French Fries - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1280x960.png" title="French Fries - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1280x1024.png" title="French Fries - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1366x768.png" title="French Fries - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1400x1050.png" title="French Fries - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1440x900.png" title="French Fries - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1600x1200.png" title="French Fries - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1680x1050.png" title="French Fries - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1680x1200.png" title="French Fries - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1920x1080.png" title="French Fries - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1920x1200.png" title="French Fries - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-1920x1440.png" title="French Fries - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-18/french-fries/nocal/feb-18-french-fries-nocal-2560x1440.png" title="French Fries - 2560x1440">2560x1440</a></li></ul><h2 id="greben-icebreaker">“Greben” Icebreaker</h2><p>“Danube is Europe’s second largest river, connecting ten different countries. In these cold days, when ice paralyzes rivers and closes waterways, a small but brave icebreaker called Greben (Serbian word for ‘reef’) seems stronger than winter. It cuts through the ice on Đerdap gorge (Iron Gate) — the longest and biggest gorge in Europe — thus helping the production of electricity in the power plant. This is our way to give thanks to Greben!” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/66dabe40-37b6-4339-a746-be25a6d2ae1a/feb-17-greben-icebreaker-full.png" title="“Greben” Icebreaker"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2d4ce90-9d66-4359-b6d1-f8a84f2cb0e9/feb-17-greben-icebreaker-preview-opt.png" title="“Greben” Icebreaker - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-320x480.jpg" title="“Greben” Icebreaker - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-640x480.jpg" title="“Greben” Icebreaker - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-800x480.jpg" title="“Greben” Icebreaker - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-800x600.jpg" title="“Greben” Icebreaker - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1024x768.jpg" title="“Greben” Icebreaker - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1024x1024.jpg" title="“Greben” Icebreaker - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1152x864.jpg" title="“Greben” Icebreaker - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280x720.jpg" title="“Greben” Icebreaker - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280x800.jpg" title="“Greben” Icebreaker - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280x960.jpg" title="“Greben” Icebreaker - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280x1024.jpg" title="“Greben” Icebreaker - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1366x768.jpg" title="“Greben” Icebreaker - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1400x1050.jpg" title="“Greben” Icebreaker - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1440x900.jpg" title="“Greben” Icebreaker - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1600x1200.jpg" title="“Greben” Icebreaker - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1680x1050.jpg" title="“Greben” Icebreaker - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1680x1200.jpg" title="“Greben” Icebreaker - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920x1080.jpg" title="“Greben” Icebreaker - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920x1200.jpg" title="“Greben” Icebreaker - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920x1440.jpg" title="“Greben” Icebreaker - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-2560x1440.jpg" title="“Greben” Icebreaker - 2560x1440">2560x1440</a></li></ul><h2 id="out-there-theres-someone-like-you">Out There, There’s Someone Like You</h2><p>“I am a true believer that out there in this world there is another person who is just like us, the problem is to find her/him.” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e73961a-fd20-40d4-af18-e5c6aa0c9966/feb-16-out-there-theres-someone-like-you-full.png" title="Out There, There’s Someone Like You"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c58dc2c5-de15-461f-876c-e5b4f3e6ca9f/feb-16-out-there-theres-someone-like-you-preview-opt.png" title="Out There, There’s Someone Like You - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-320x480.png" title="Out There, There’s Someone Like You - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-640x480.png" title="Out There, There’s Someone Like You - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-640x1136.png" title="Out There, There’s Someone Like You - 640x1136">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-750x1334.png" title="Out There, There’s Someone Like You - 750x1334">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-800x480.png" title="Out There, There’s Someone Like You - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-800x600.png" title="Out There, There’s Someone Like You - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1024x768.png" title="Out There, There’s Someone Like You - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1024x1024.png" title="Out There, There’s Someone Like You - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1152x864.png" title="Out There, There’s Someone Like You - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1242x2208.png" title="Out There, There’s Someone Like You - 1242x2208">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1280x720.png" title="Out There, There’s Someone Like You - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1280x800.png" title="Out There, There’s Someone Like You - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1280x960.png" title="Out There, There’s Someone Like You - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1280x1024.png" title="Out There, There’s Someone Like You - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1366x768.png" title="Out There, There’s Someone Like You - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1400x1050.png" title="Out There, There’s Someone Like You - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1440x900.png" title="Out There, There’s Someone Like You - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1600x1200.png" title="Out There, There’s Someone Like You - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1680x1050.png" title="Out There, There’s Someone Like You - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1680x1200.png" title="Out There, There’s Someone Like You - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1920x1080.png" title="Out There, There’s Someone Like You - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1920x1200.png" title="Out There, There’s Someone Like You - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-1920x1440.png" title="Out There, There’s Someone Like You - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-2560x1440.png" title="Out There, There’s Someone Like You - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-16/out-there-theres-someone-like-you/nocal/feb-16-out-there-theres-someone-like-you-nocal-2880x1800.png" title="Out There, There’s Someone Like You - 2880x1800">2880x1800</a></li></ul><h2 id="on-the-light-side">On The Light Side</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2024/feb-21-on-the-light-side-full-opt.png" title="On The Light Side"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-february-2024/feb-21-on-the-light-side-preview-opt.png" title="On The Light Side - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-640x480.png" title="On The Light Side - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-800x480.png" title="On The Light Side - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-800x600.png" title="On The Light Side - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1024x768.png" title="On The Light Side - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1024x1024.png" title="On The Light Side - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1152x864.png" title="On The Light Side - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1280x720.png" title="On The Light Side - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1280x800.png" title="On The Light Side - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1280x960.png" title="On The Light Side - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1280x1024.png" title="On The Light Side - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1366x768.png" title="On The Light Side - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1400x1050.png" title="On The Light Side - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1440x900.png" title="On The Light Side - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1600x1200.png" title="On The Light Side - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1680x1050.png" title="On The Light Side - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1680x1200.png" title="On The Light Side - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1920x1080.png" title="On The Light Side - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1920x1200.png" title="On The Light Side - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-1920x1440.png" title="On The Light Side - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-2560x1440.png" title="On The Light Side - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/feb-21/on-the-light-side/nocal/feb-21-on-the-light-side-nocal-3840x2160.png" title="On The Light Side - 3840x2160">3840x2160</a></li></ul><h2 id="get-featured-next-month">Get Featured Next Month</h2><p>Feeling inspired? We’ll publish the <strong>March wallpapers</strong> on February 28, so if you’d like to be a part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We are already looking forward to it!</p></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Practical Use Of AI Coding Tools For The Responsible Developer</h1>
<p>hello@smashingmagazine.com (Stefan Kaltenegger) — Fri, 30 Jan 2026 13:00:00 GMT</p>
<h1>Practical Use Of AI Coding Tools For The Responsible Developer — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>10 min read</li><li><a href="http://www.smashingmagazine.com/category/ai">AI</a>,
<a href="http://www.smashingmagazine.com/category/coding">Coding</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>AI coding tools like agents can be valuable allies in everyday development work. They help handle time-consuming grunt work, guide you through large legacy codebases, and offer low-risk ways to implement features in previously unfamiliar programming languages. Here are practical, easy-to-apply techniques to help you use these tools to improve your workflow.</section></p><p>Over the last two years, my team at <a href="https://work.co/">Work & Co</a> and I have been testing out and gradually integrating AI coding tools like Copilot, Cursor, Claude, and ChatGPT to help us ship web experiences that are used by the masses. Admittedly, after some initial skepticism and a few aha moments, various AI tools have found their way into my daily use. Over time, the list of applications where we found it made sense to let AI take over started to grow, so I decided to share some <strong>practical use cases</strong> for AI tools for what I call the “responsible developer”.</p><p>What do I mean by a <strong>responsible developer</strong>?</p><p>We have to make sure that we deliver quality code as expected by our stakeholders and clients. Our contributions (i.e., pull requests) should not become a burden on our colleagues who will have to review and test our work. Also, in case you work for a company: The tools we use need to be approved by our employer. Sensitive aspects like security and privacy need to be handled properly: Don’t paste secrets, customer data (PII), or proprietary code into tools without policy approval. Treat it like code from a stranger on the internet. Always test and verify.</p><p><strong>Note</strong>: <em>This article assumes some very basic familiarity with AI coding tools like Copilot inside VSCode or Cursor. If all of this sounds totally new and unfamiliar to you, the <a href="https://github.com/features/copilot/tutorials">Github Copilot video tutorials</a> can be a fantastic starting point for you.</em></p><figure><a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/01-vscode-copilot.png"></img></a><figcaption>View of VSCode with Copilot Chat open in the right panel. (<a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/01-vscode-copilot.png">Large preview</a>)</figcaption></figure><p><strong>Note</strong>: The following examples will mainly focus on working in JavaScript-based web applications like React, Vue, Svelte, or Angular.</p><h3 id="getting-an-understanding-of-an-unfamiliar-codebase">Getting An Understanding Of An Unfamiliar Codebase</h3><p>It’s not uncommon to work on established codebases, and joining a large legacy codebase can be intimidating. Simply open your project and your AI agent (in my case, Copilot Chat in VSCode) and start asking questions just like you would ask a colleague. In general, I like to talk to any AI agent just as I would to a fellow human.</p><p>Here is a more refined example prompt:</p><blockquote>“Give me a high-level architecture overview: entrypoints, routing, auth, data layer, build tooling. Then list 5 files to read in order. Treat explanations as hypotheses and confirm by jumping to referenced files.”</blockquote><p>You can keep asking follow-up questions like <em>“How does the routing work in detail?”</em> or <em>“Talk me through the authentication process and methods”</em> and it will lead you to helpful directions to shine some light into the dark of an unfamiliar codebase.</p><h3 id="triaging-breaking-changes-when-upgrading-dependencies">Triaging Breaking Changes When Upgrading Dependencies</h3><p>Updating npm packages, especially when they come with breaking changes, can be tedious and time-consuming work, and make you debug a fair amount of regressions. I recently had to upgrade the data visualization library <a href="plotly.js">plotly.js</a> up one major release version from version 2 to 3, and as a result of that, the axis labeling in some of the graphs stopped working.</p><p>I went on to ask ChatGPT:</p><blockquote>“I updated my Angular project that uses Plotly. I updated the plotly.js — dist package from version 2.35.2 to 3.1.0 — and now the labels on the x and y axis are gone. What happened?”</blockquote><p>The agent came back with a solution promptly (see for yourself below).</p><p><strong>Note</strong>: <em>I still verified the explanation against the official migration guide before shipping the fix.</em></p><figure><a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/02-chatgpt-plotly.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/02-chatgpt-plotly.png">Large preview</a>)</figcaption></figure><h3 id="replicating-refactors-safely-across-files">Replicating Refactors Safely Across Files</h3><p>Growing codebases most certainly unveil opportunities for code consolidation. For example, you notice code duplication across files that can be extracted into a single function or component. As a result, you decide to create a shared component that can be included instead and perform that refactor in one file. Now, instead of manually carrying out those changes to your remaining files, you ask your agent to roll out the refactor for you.</p><p>Agents let you select multiple files as context. Once the refactor for one file is done, I can add both the refactored and untouched files into context and prompt the agent to roll out the changes to other files like this: <em>“Replicate the changes I made in file A to file B as well”</em>.</p><h3 id="implementing-features-in-unfamiliar-technologies">Implementing Features In Unfamiliar Technologies</h3><p>One of my favorite aha-moments using AI coding tools was when it helped me create a quite complex animated gradient animation in GLSL, a language I have been fairly unfamiliar with. On a recent project, our designers came up with an animated gradient as a loading state on a 3D object. I really liked the concept and wanted to deliver something unique and exciting to our clients. The problem: I only had two days to implement it, and GLSL has quite the steep learning curve.</p><p>Again, an AI tool (in this case, ChatGPT) came in handy, and I started quite simply prompting it to create a standalone HTML file for me that renders a canvas and a very simple animated color gradient. Step after step, I prompted the AI to add more finesse to it until I arrived at a decent result so I could start integrating the shader into my actual codebase.</p><p>The end result: Our clients were super happy, and we delivered a complex feature in a small amount of time thanks to AI.</p><h3 id="writing-tests">Writing Tests</h3><p>In my experience, there’s rarely enough time on projects to continuously write and maintain a proper suite of unit and integration tests, and on top of that, many developers don’t really enjoy the task of writing tests. Prompting your AI helper to set up and write tests for you is entirely possible and can be done in a small amount of time. Of course, you, as a developer, should still make sure that your tests actually take a look at the critical parts of your application and follow sensible testing principles, but you can “outsource” the writing of the tests to our AI helper.</p><p>Example prompt:</p><blockquote>“Write unit tests for this function using Jest. Cover happy path, edge cases, and failure modes. Explain why each test exists.”</blockquote><p>You can even pass along testing guru Kent C. Dodds’ testing best practices as guidelines to your agent, like below:</p><figure><a href="https://x.com/kentcdodds/status/2008940437747409406"></img></a><figcaption>Image source: <a href="https://x.com/kentcdodds/status/2008940437747409406">x.com/kentcdodds</a>. (<a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/03-post-testing.png">Large preview</a>)</figcaption></figure><h3 id="internal-tooling">Internal Tooling</h3><p>Somewhat similar to the shader example mentioned earlier, I was recently tasked to analyze code duplication in a codebase and compare before and after a refactor. Certainly not a trivial task if you don’t want to go the time-consuming route of comparing files manually. With the help of Copilot, I created a script that analyzed code duplication for me, arranged and ordered the output in a table, and exported it to Excel. Then I took it a step further. When our code refactor was done, I prompted the agent to take my existing Excel sheet as the baseline, add in the current state of duplication in separate columns, and calculate the delta.</p><h3 id="updating-code-written-a-long-time-ago">Updating Code Written A Long Time Ago</h3><p>Recently, an old client of mine hit me up, as over time, a few features weren’t working properly on his website anymore.</p><p>The catch: The website was built almost ten years ago, and the JavaScript and SCSS were using rather old compile tools like requireJS, and the setup required an older version of Node.js that wouldn’t even run on my 2025 MacBook.</p><p>Updating the whole build process by hand would have taken me days, so I decided to prompt the AI agent, <em>“Can you update the JS and SCSS build process to a lean 2025 stack like Vite?”</em> It sure did, and after around an hour of refining with the agent, I had my SCSS and JS build switched to Vite, and I was able to focus on actual bugfixing. Just make sure to properly validate the output and compiled files when doing such integral changes to your build process.</p><h3 id="summarizing-and-drafting">Summarizing And Drafting</h3><p>Would you like to summarize all your recent code changes in one sentence for a commit message, or have a long list of commits and would like to sum them up in three bullet points? No problem, let the AI take care of it, but please make sure to proofread it.</p><p>An example prompt is as simple as messaging a fellow human: <em>“Please sum up my recent changes in concise bullet points”</em>.</p><p>My advice here would be to use GPT for writing with caution, and as with code, please check the output before sending or submitting.</p><h2 id="recommendations-and-best-practices">Recommendations And Best Practices</h2><h3 id="prompting">Prompting</h3><p>One of the not-so-obvious benefits of using AI is that the more specific and tailored your prompts are, the better the output. The process of prompting an AI agent forces us to <strong>formulate our requirements as specifically as possible</strong> before we write and code. This is why, as a general rule, I highly recommend being as specific as possible with your prompting.</p><p>Ryan Florence, co-author of Remix, suggests a simple yet powerful way to improve this process by finishing your initial prompt with the sentence:</p><blockquote>“Before we start, do you have any questions for me?”</blockquote><p>At this point, the AI usually comes back with helpful questions where you can clarify your specific intent, guiding the agent to provide you with a <strong>more tailored approach</strong> for your task.</p><figure><a href="https://x.com/ryanflorence/status/1959407056286568828"></img></a><figcaption>Image source: <a href="https://x.com/ryanflorence/status/1959407056286568828">x.com/ryanflorence</a>. (<a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/04-post-cursor.png">Large preview</a>)</figcaption></figure><h3 id="use-version-control-and-work-in-digestible-chunks">Use Version Control And Work In Digestible Chunks</h3><p>Using version control like git not only comes in handy when collaborating as a team on a single codebase but also to provide you as an individual contributor with stable points to roll back to in case of an emergency. Due to its non-deterministic nature, AI can sometimes go rogue and make changes that are simply not helpful for what you are trying to achieve and eventually break things irreparably.</p><p>Splitting up your work into <strong>multiple commits</strong> will help you create stable points that you can revert to in case things go sideways. And your teammates will thank you as well, as they will have an easier time reviewing your code when it is split up into semantically well-structured chunks.</p><h3 id="review-thoroughly">Review Thoroughly</h3><p>This is more of a general best practice, but in my opinion, it becomes even more important when using AI tools for development work: <strong>Be the first critical reviewer of your code</strong>. Make sure to take some time to go over your changes line by line, just like you would review someone else’s code, and only submit your work once it passes your own self-review.</p><blockquote>“Two things are both true to me right now: AI agents are amazing and a huge productivity boost. They are also massive slop machines if you turn off your brain and let go completely.”<p>— Armin Ronacher in his blog post <a href="https://lucumr.pocoo.org/2026/1/18/agent-psychosis/">Agent Psychosis: Are We Going Insane?</a></p></blockquote><h2 id="conclusion-and-critical-thoughts">Conclusion And Critical Thoughts</h2><p>In my opinion, AI coding tools can improve our productivity as developers on a daily basis and free up mental capacity for more planning and high-level thinking. They force us to articulate our desired outcome with meticulous detail.</p><p>Any AI can, at times, hallucinate, which basically means it lies in a confident tone. So please make sure to check and test, especially when you are in doubt. AI is not a silver bullet, and I believe, excellence and the ability to solve problems as a developer will never go out of fashion.</p><p>For developers who are just starting out in their career these tools can be highly tempting to do the majority of the work for them. What may get lost here is the often draining and painful work through bugs and issues that are tricky to debug and solve, aka “the grind”. Even Cursor AI’s very own Lee Robinson questions this in one of his posts:</p><figure><a href="https://x.com/leerob/status/1996281383535382909"></img></a><figcaption>Image source: <a href="https://x.com/leerob/status/1996281383535382909">x.com/leerob</a>. (<a href="https://files.smashing.media/articles/practical-use-ai-coding-tools-responsible-developer/05-post-leerob.png">Large preview</a>)</figcaption></figure><p>AI coding tools are evolving at a fast pace, and I am excited for what will come next. I hope you found this article and its tips helpful and are excited to try out some of these for yourself.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Unstacking CSS Stacking Contexts</h1>
<p>hello@smashingmagazine.com (Gabriel Shoyombo) — Tue, 27 Jan 2026 10:00:00 GMT</p>
<h1>Unstacking CSS Stacking Contexts — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>16 min read</li><li><a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/coding">Coding</a>,
<a href="http://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly useful, but they’re also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve.</section></p><p>Have you ever set <code>z-index: 99999</code> on an element in your CSS, and it doesn’t come out on top of other elements? A value that large should easily place that element visually on top of anything else, assuming all the different elements are set at either a lower value or not set at all.</p><p>A webpage is usually represented in a two-dimensional space; however, by applying specific CSS properties, an imaginary z-axis plane is introduced to convey depth. This plane is perpendicular to the screen, and from it, the user perceives the order of elements, one on top of the other. The idea behind the imaginary z-axis, the user’s perception of stacked elements, is that the CSS properties that create it combine to form what we call a <strong>stacking context</strong>.</p><p>We’re going to talk about how elements are “stacked” on a webpage, what controls the stacking order, and practical approaches to “unstack” elements when needed.</p><h2 id="about-stacking-contexts">About Stacking Contexts</h2><p>Imagine your webpage as a desk. As you add HTML elements, you’re laying pieces of paper, one after the other, on the desk. The last piece of paper placed is equivalent to the most recently added HTML element, and it sits on top of all the other papers placed before it. This is the normal document flow, even for nested elements. The desk itself represents the root stacking context, formed by the <code><html></code> element, which contains all other folders.</p><p>Now, specific CSS properties come into play.</p><p>Properties like <code>position</code> (with <code>z-index</code>), <code>opacity</code>, <code>transform</code>, and <code>contain</code>) act like a folder. This folder takes an element and all of its children, extracts them from the main stack, and groups them into a separate sub-stack, creating what we call a <strong>stacking context</strong>. For positioned elements, this happens when we declare a <code>z-index</code> value other than <code>auto</code>. For properties like <code>opacity</code>, <code>transform</code>, and <code>filter</code>, the stacking context is created automatically when specific values are applied.</p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/1-stacking-context-order.png"></img></a><figcaption>When the browser decides what goes on top, it stacks the folders first, not the individual papers inside them. This is “The Golden Rule” of stacking contexts that many developers miss. (<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/1-stacking-context-order.png">Large preview</a>)</figcaption></figure><blockquote>Try to understand this: Once a piece of paper (i.e., a child element) is inside a folder (i.e., the parent’s stacking context), it can never exit that folder or be placed between papers in a different folder. Its <code>z-index</code> is now only relevant inside its own folder.</blockquote><p>In the illustration below, Paper B is now within the stacking context of Folder B, and can only be ordered with other papers in the folder.</p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/2-stacking-contexts.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/2-stacking-contexts.png">Large preview</a>)</figcaption></figure><p>Imagine, if you will, that you have two folders on your desk:</p><pre><code><div class="folder-a">Folder A</div>
<div class="folder-b">Folder B</div>
</code></pre><pre><code>.folder-a { z-index: 1; }
.folder-b { z-index: 2; }
</code></pre><p>Let’s update the markup a bit. Inside Folder A is a special page, <code>z-index: 9999</code>. Inside Folder B is a plain page, <code>z-index: 5</code>.</p><pre><code><div class="folder-a">
   <div class="special-page">Special Page</div>
</div>

<div class="folder-b">
  <div class="plain-page">Plain Page</div>
</div>
</code></pre><pre><code>.special-page { z-index: 9999; }
.plain-page { z-index: 5; }
</code></pre><p>Which page is on top?</p><p>It’s the <code>.plain-page</code> in Folder B. The browser ignores the child papers and stacks the two folders first. It sees Folder B (<code>z-index: 2</code>) and places it on top of Folder A (<code>z-index: 1</code>) because we know that two is greater than one. Meanwhile, the <code>.special-page</code> set to <code>z-index: 9999</code> page is at the bottom of the stack even though its <code>z-index</code> is set to the highest possible value.</p><p>Stacking contexts can also be nested (folders inside folders), creating a “family tree.” The same principle applies: a child can never escape its parents’ folder.</p><p>Now that you get how stacking contexts behave like folders that group and reorder layers, it’s worth asking: why do certain properties — like <code>transform</code> and <code>opacity</code> — create new stacking contexts?</p><p>Here’s the thing: these properties don’t create stacking contexts because of how they look; they do it because of how the browser works under the hood. When you apply <code>transform</code>, <code>opacity</code>, <code>filter</code>, or <code>perspective</code>, you’re telling the browser, <em>“Hey, this element might move, rotate, or fade, so be ready!”</em></p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/3-diagram-stacking-context.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/3-diagram-stacking-context.png">Large preview</a>)</figcaption></figure><p>When you use these properties, the browser creates a new stacking context to manage rendering more efficiently. This allows the browser to handle animations, transforms, and visual effects independently, reducing the need to recalculate how these elements interact with the rest of the page. Think of it as the browser saying, <em>“I’ll handle this folder separately so I don’t have to reshuffle the entire desk every time something inside it changes.”</em></p><p>But there’s a side effect. Once the browser lifts an element into its own layer, it must “flatten” everything within it, creating a new stacking context. It’s like taking a folder off the desk to handle it separately; everything inside that folder gets grouped, and the browser now treats it as a single unit when deciding what sits on top of what.</p><p>So even though the <code>transform</code> and <code>opacity</code> properties might not appear to affect the way that elements stack visually, they do, and it’s for performance optimisation. Several other CSS properties can also create stacking contexts for similar reasons. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#features_creating_stacking_contexts">MDN provides a complete list</a> if you want to dig deeper. There are quite a few, which only illustrates how easy it is to inadvertently create a stacking context without knowing it.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="the-unstacking-problem">The “Unstacking” Problem</h2><p>Stacking issues can arise for many reasons, but some are more common than others. Modal components are a classic pattern because they require toggling the component to “open” on a top layer above all other elements, then removing it from the top layer when it is “closed.”</p><p>I’m pretty confident that all of us have run into a situation where we open a modal and, for whatever reason, it doesn’t appear. It’s not that it didn’t open properly, but that it is out of view in a lower layer of the stacking context.</p><p>This leaves you to wonder “how come?” since you set:</p><div><pre><code>.overlay {
  position: fixed; /* creates the stacking context */
  z-index: 1; /* puts the element on a layer above everything else */
  inset: 0; 
  width: 100%; 
  height: 100vh; 
  overflow: hidden;
  background-color: #00000080;
}
</code></pre></div><p>This looks correct, but if the parent element containing the modal trigger is a child element within another parent element that’s also set to <code>z-index: 1</code>, that technically places the modal in a sublayer obscured by the main folder. Let’s look at that specific scenario and a couple of other common stacking-context pitfalls. I think you’ll see not only how easy it is to inadvertently create stacking contexts, but also how to mismanage them. Also, how you return to a managed state depends on the situation.</p><h3 id="scenario-1-the-trapped-modal">Scenario 1: The Trapped Modal</h3><figure><p data-default-tab="result" data-height="480" data-slug-hash="pvbddjd" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 1: The Trapped Modal (Problem) [forked]](https://codepen.io/smashingmag/pen/pvbddjd) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/pvbddjd">Scenario 1: The Trapped Modal (Problem) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><p>If you click the “Open Modal” button in the header, you’ll notice that the overlay and modal appear behind the main content. This is because the modal is a child of the header container, which has a lower stacking context order (<code>z-index: 1</code>) than the main container (<code>z-index</code> of <code>2</code>). Despite the modal overlay and the modal having <code>z-index</code> values of <code>9998</code> and <code>9999</code>, respectively, the main container with a <code>z-index: 2</code> still sits right above them.</p><h3 id="scenario-2-the-submerged-dropdown">Scenario 2: The Submerged Dropdown</h3><figure><p data-default-tab="result" data-height="480" data-slug-hash="zxBPPvm" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 2: The Submerged Dropdown (Problem) [forked]](https://codepen.io/smashingmag/pen/zxBPPvm) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/zxBPPvm">Scenario 2: The Submerged Dropdown (Problem) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><p>Here, we have a similar issue with the first scenario. When you hover over the “services” link, the dropdown shows, but behind the main container. I intentionally set the main container’s <code>margin-top</code> to <code>20px</code> to make the dropdown visible enough for you to see it appear, but keep it just behind the main container. This is another popular issue front-end developers encounter, stemming from context stacking. While it is similar to the first scenario, there’s another approach to resolving it, which will be explored soon.</p><h3 id="scenario-3-the-clipped-tooltip">Scenario 3: The Clipped Tooltip</h3><p>Now, this is an interesting one. It’s not about which element has the higher <code>z-index</code>. It’s about <code>overflow: hidden</code> doing <a href="https://www.smashingmagazine.com/2021/04/css-overflow-issues/">what it’s designed to do</a>: preventing content from visually escaping its container, even when that content has <code>z-index: 1000</code>.</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="GgqOOoo" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 3: The Clipped Tooltip (Problem) [forked]](https://codepen.io/smashingmag/pen/GgqOOoo) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/GgqOOoo">Scenario 3: The Clipped Tooltip (Problem) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><p>Who would have thought <code>overflow: hidden</code> could stop a <code>z-index: 1000</code>? Well, it did stop it, as you can see in the Codepen above.</p><p>I think developers trust <code>z-index</code> so much that they expect it to pull them out of any obscurity issue, but in reality, it doesn’t work that way. Not that it isn’t powerful, it’s just that other factors determine its ability to push your element to the top.</p><p>Before you slap <code>z-index</code> on that element, remember that while this might get you out of the current jam, it might also throw you into a greater one <a href="https://www.matuzo.at/blog/2025/never-lose-a-z-index-battle-again">that even <code>z-index: infinity</code> won’t get you out of</a>.</p><p>Let’s try to understand the problem before attempting to fix it.</p><h2 id="identifying-the-trapped-layer">Identifying The Trapped Layer</h2><p>When you encounter an issue such as those listed above, it is helpful to know that the element isn’t possessed; instead, an ancestor has sinned, and the child is paying the debt. In non-spiritual English terms, the obscured element isn’t the problem; an ancestor element has created a lower-level stacking context that has led the children to be below the children of a parent with a higher-level stacking context.</p><p>A good way to track and find that parent is to descend into the browser’s devtools to inspect the element and make your way up, checking each parent level to see which has a property or properties that trigger a stacking context, and find out its position in the order compared to sibling elements. Let’s create a checklist to order our steps.</p><h3 id="your-debugging-checklist">Your Debugging Checklist</h3><ol><li><strong>Inspect the Problem Element.</strong><br></br>Right-click your hidden element (the modal, the dropdown menu, the tooltip) and click “Inspect.”</li><li><strong>Check its Styles.</strong><br></br>In the “Styles” or “Computed” pane, verify that it has the expected high <code>z-index</code> (e.g., <code>z-index: 9999;</code>).</li><li><strong>Climb the DOM Tree.</strong><br></br>In the “Elements” panel, look at the element’s immediate parent. Click on it.</li><li><strong>Investigate the Parent’s Styles.</strong><br></br>Look at the parent’s CSS in the “Styles” pane. You are now hunting for any property that creates a new stacking context. Look for any properties related to positioning, visual effects, and containment.</li><li><strong>Repeat.</strong><br></br>If the immediate parent is clean, click on its parent (the grandparent of your element). Repeat Step 4. Keep climbing the DOM tree, one parent at a time, until you find the culprit.</li></ol><p>Now, let’s apply this checklist to our three scenarios.</p><h3 id="problem-1-the-trapped-modal">Problem 1: The Trapped Modal</h3><ol><li><strong>Inspect:</strong> We inspect the <code>.modal-content</code>.</li><li><strong>Check Styles:</strong> We see <code>z-index: 9999</code>. That’s not the problem.</li><li><strong>Climb:</strong> We look at its parent, <code>.modal-container</code>. It has no trapping properties.</li><li><strong>Climb Again:</strong> We look at its parent, the <strong><code>.header</code></strong>.</li><li><strong>Investigate:</strong> We check the styles for <code>.header</code> and find the culprit: <code>position: absolute</code> and <code>z-index: 1</code>. This element is creating a stacking context. We’ve seen our trap! The modal’s <code>z-index: 9999</code> is “trapped” inside a <code>z-index: 1</code> folder.</li></ol><h3 id="problem-2-the-submerged-dropdown">Problem 2: The Submerged Dropdown</h3><ol><li><strong>Inspect:</strong> We inspect the <code>.dropdown-menu</code>.</li><li><strong>Check Styles:</strong> We see <code>z-index: 100</code>.</li><li><strong>Climb:</strong> We check its parent <code>li</code>, then its parent <code>ul</code>, then its parent <strong><code>.navbar</code></strong>.</li><li>Investigate: We find <code>.navbar</code> has <code>position: relative</code> and <code>z-index: 1</code>. This creates Stacking Context A.</li><li><strong>Analyse Siblings:</strong> This isn’t the whole story. Why is it under the content? We now inspect the sibling of <code>.navbar</code>, which is <code>.content</code>. We find it has <code>position: relative</code> and <code>z-index: 2</code> (Stacking Context B). The browser is stacking the “folders”: <code>.content</code> (2) on top of <code>.navbar</code> (1). We’ve found the root cause.</li></ol><h3 id="problem-3-the-clipped-tooltip">Problem 3: The Clipped Tooltip</h3><ol><li><strong>Inspect:</strong> We inspect the <code>.tooltip</code>.</li><li><strong>Check Styles:</strong> We see <code>z-index: 1000</code>.</li><li><strong>Climb:</strong> We check its parent, <code>.tooltip-trigger</code>. It’s fine.</li><li><strong>Climb Again:</strong> We check its parent, the <strong><code>.card-container</code></strong>.</li><li><strong>Investigate:</strong> We scan its styles and find the culprit: <code>overflow: hidden</code>. This is a special type of trap. It clips any child that tries to render outside its boundaries, regardless of <code>z-index</code> values.</li></ol><h3 id="advanced-tooling">Advanced Tooling</h3><p>While climbing the DOM tree works, it can be slow. Here are tools that speed things up.</p><h4 id="devtools-3d-view">DevTools 3D View</h4><p>Some browsers, such as Microsoft Edge (in the “More Tools” menu) and Firefox (in the “Inspector” tab), include a “3D View” or “Layers” panel. This tool is a lifesaver. It visually explodes the webpage into its different layers, showing you exactly how the stacking contexts are grouped.</p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/4-microsoft-edge-stacking-context.png"></img></a><figcaption>Microsoft Edge 3D Stacking Context View. (<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/4-microsoft-edge-stacking-context.png">Large preview</a>)</figcaption></figure><p>You can immediately see your modal trapped in a low-level layer and identify the parent.</p><h4 id="browser-extensions">Browser Extensions</h4><p>Smart developers have built extensions to help. Tools like this <a href="https://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbhhttps://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbh">“CSS Stacking Context Inspector” Chrome extension</a> add an extra <code>z-index</code> tab to your DevTools to show you information about elements that create a stacking context.</p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/5-browser-extensions.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/5-browser-extensions.png">Large preview</a>)</figcaption></figure><h4 id="ide-extensions">IDE Extensions</h4><p>You can even spot issues during development with an extension <a href="https://marketplace.visualstudio.com/items?itemName=mikerheault.vscode-better-css-stacking-contexts">like this one for VS Code</a>, which highlights potential stacking context issues directly in your editor.</p><figure><a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/6-ide-extensions.png"></img></a><figcaption>Better CSS Stacking Contexts Extension. (<a href="https://files.smashing.media/articles/unstacking-css-stacking-contexts/6-ide-extensions.png">Large preview</a>)</figcaption></figure><h2 id="unstacking-and-regaining-control">Unstacking And Regaining Control</h2><p>After we’ve identified the root cause, the next step is to deal with it. There are several approaches you can take to tackle this problem, and I’ll list them in order. You can choose anyone at any level, though; no one can complain or obstruct another.</p><h3 id="change-the-html-structure">Change The HTML Structure</h3><p>This is considered the optimal fix. For you to run into a stacking context issue, you must have placed some elements in funny positions within your HTML. Restructuring the page will help you reshape the DOM and eliminate the stacking context problem. Find the problematic element and remove it from the trapping element in the HTML markup. For instance, we can solve the first scenario, “The Trapped Modal,” by moving the <code>.modal-container</code> out of the header and placing it in the <code><body></code> element by itself.</p><div><pre><code><header class="header">
  <h2>Header</h2>
  <button id="open-modal">Open Modal</button>
  <!-- Former position -->
</header>
<main class="content">
  <h1>Main Content</h1>
  <p>This content has a z-index of 2 and will still not cover the modal.</p>
</main>

<!-- New position  -->
<div id="modal-container" class="modal-container">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <h3>Modal Title</h3>
    <p>Now, I'm not behind anything. I've gotten a better position as a result of DOM restructuring.</p>
    <button id="close-modal">Close</button>
  </div>
</div>
</code></pre></div><p>When you click the “Open Modal” button, the modal is positioned in front of everything else as it’s supposed to be.</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="azZVVNP" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 1: The Trapped Modal (Solution) [forked]](https://codepen.io/smashingmag/pen/azZVVNP) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/azZVVNP">Scenario 1: The Trapped Modal (Solution) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><h3 id="adjust-the-parent-stacking-context-in-css">Adjust The Parent Stacking Context In CSS</h3><p>What if the element is one you can’t move without breaking the layout? It’s better to address the issue: <strong>the parent establishes the context.</strong> Find the CSS property (or properties) responsible for triggering the context and remove it. If it has a purpose and cannot be removed, give the parent a higher <code>z-index</code> value than its sibling elements to lift the entire container. With a higher <code>z-index</code> value, the parent container moves to the top, and its children appear closer to the user.</p><p>Based on what we learned in “<a href="http://www.smashingmagazine.com/scl/fi/ue0rufxffviprc9858j25/Debugging-CSS-Stacking-Contexts.paper?rlkey=ezbdaiq6mojvb7xzezxlds29b&dl=0#:uid=376729122027939635792428&h2=Problem-2:-The-Submerged-Dropd">The Submerged Dropdown</a>” scenario, we can’t move the dropdown out of the navbar; it wouldn’t make sense. However, we can increase the <code>z-index</code> value of the <code>.navbar</code> container to be greater than the <code>.content</code> element’s <code>z-index</code> value.</p><pre><code>.navbar {
  background: #333;
  /* z-index: 1; */
  z-index: 3;
  position: relative;
}
</code></pre><p>With this change, the <code>.dropdown-menu</code> now appears in front of the content without any issue.</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="YPWEEWz" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 2: The Submerged Dropdown (Solution) [forked]](https://codepen.io/smashingmag/pen/YPWEEWz) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/YPWEEWz">Scenario 2: The Submerged Dropdown (Solution) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><h3 id="try-portals-if-using-a-framework">Try Portals, If Using A Framework</h3><p>In frameworks like <a href="https://react.dev/reference/react-dom/createPortal">React</a> or <a href="https://www.digitalocean.com/community/tutorials/vuejs-portal-vue">Vue</a>, a Portal is a feature that lets you render a component outside its normal parent hierarchy in the DOM. Portals are like a teleportation device for your components. They let you render a component’s HTML anywhere in the document (typically right into <code>document.body</code>) while keeping it logically connected to its original parent for props, state, and events. This is perfect for escaping stacking context traps since the rendered output literally appears outside the problematic parent container.</p><pre><code>ReactDOM.createPortal(
  <ToolTip />,
  document.body
);
</code></pre><p>This ensures your dropdown content isn’t hidden behind its parent, even if the parent has <code>overflow: hidden</code> or a lower <code>z-index</code>.</p><p>In the “The Clipped Tooltip” scenario we looked at earlier, I used a Portal to rescue the tooltip from the <code>overflow: hidden</code> clip by placing it in the document body and positioning it above the trigger within the container.</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="myEqqEe" data-theme-id="light" data-user="smashingmag">See the Pen [Scenario 3: The Clipped Tooltip (Solution) [forked]](https://codepen.io/smashingmag/pen/myEqqEe) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/myEqqEe">Scenario 3: The Clipped Tooltip (Solution) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><h2 id="introducing-stacking-context-without-side-effects">Introducing Stacking Context Without Side Effects</h2><p>All the approaches explained in the previous section are aimed at “unstacking” elements from problematic stacking contexts, but there are some situations where you’ll actually need or want to create a stacking context.</p><p>Creating a new stacking context is easy, but all approaches come with a side effect. That is, except for using <a href="https://css-tricks.com/almanac/properties/i/isolation/"><code>isolation: isolate</code></a>. When applied to an element, the stacking context of that element’s children is determined relative to each child and within that context, rather than being influenced by elements outside of it. A classic example is assigning that element a negative value, such as <code>z-index: -1</code>.</p><p>Imagine you have a <code>.card</code> component. You want to add a decorative shape that sits behind the <code>.card</code>’s text, but on top of the card’s background. Without a stacking context on the card, <code>z-index: -1</code> sends the shape to the bottom of the root stacking context (the whole page). This makes it disappear behind the <code>.card</code>’s white background:</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="QwEOOEM" data-theme-id="light" data-user="smashingmag">See the Pen [Negative z-index (problem) [forked]](https://codepen.io/smashingmag/pen/QwEOOEM) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/QwEOOEM">Negative z-index (problem) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><p>To solve this, we declare <code>isolation: isolate</code> on the parent <code>.card</code>:</p><figure><p data-default-tab="result" data-height="480" data-slug-hash="MYeOOeG" data-theme-id="light" data-user="smashingmag">See the Pen [Negative z-index (solution) [forked]](https://codepen.io/smashingmag/pen/MYeOOeG) by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/MYeOOeG">Negative z-index (solution) [forked]</a> by <a href="https://codepen.io/drprime01">Shoyombo Gabriel Ayomide</a>.</figcaption></figure><p>Now, the <code>.card</code> element itself becomes a stacking context. When its child element — the decorative shape created on the <code>:before</code> pseudo-element — has <code>z-index: -1</code>, it goes to the very bottom of the parent’s stacking context. It sits perfectly behind the text and on top of the card’s background, as intended.</p><h2 id="conclusion">Conclusion</h2><p>Remember: the next time your <code>z-index</code> seems out of control, it’s a trapped stacking context.</p><h3 id="references">References</h3><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context">Stacking context</a> (MDN)</li><li><a href="https://web.dev/learn/css/z-index">Z-index and stacking contexts</a> (web.dev)</li><li>“<a href="https://www.freecodecamp.org/news/the-css-isolation-property/">How to Create a New Stacking Context with the Isolation Property in CSS</a>”, Natalie Pina</li><li>“<a href="https://www.joshwcomeau.com/css/stacking-contexts/">What The Heck, z-index??</a>”, Josh Comeau</li></ul><h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/">Managing CSS Z-Index In Large Projects</a>”, Steven Frieson</li><li>“<a href="https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/">Sticky Headers And Full-Height Elements: A Tricky Combination</a>”, Philip Braunen</li><li>“<a href="https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/">Managing Z-Index In A Component-Based Web Application</a>”, Pavel Pomerantsev</li><li>“<a href="https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/">The Z-Index CSS Property: A Comprehensive Look</a>”, Louis Lazaris</li></ul><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Beyond Generative: The Rise Of Agentic AI And User-Centric Design</h1>
<p>hello@smashingmagazine.com (Victor Yocco) — Thu, 22 Jan 2026 13:00:00 GMT</p>
<h1>The Rise Of Agentic AI And User-Centric Design — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>19 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Developing effective agentic AI requires a new research playbook. When systems plan, decide, and act on our behalf, UX moves beyond usability testing into the realm of trust, consent, and accountability. Victor Yocco outlines the research methods needed to design agentic AI systems responsibly.</section></p><p>Agentic AI stands ready to transform customer experience and operational efficiency, necessitating a new strategic approach from leadership. This evolution in artificial intelligence empowers systems to <strong>plan</strong>, <strong>execute</strong>, and <strong>persist</strong> in tasks, moving beyond simple recommendations to proactive action. For UX teams, product managers, and executives, understanding this shift is crucial for unlocking opportunities in innovation, streamlining workflows, and redefining how technology serves people.</p><p>It’s easy to confuse <strong>Agentic AI</strong> with Robotic Process Automation (RPA), which is technology that focuses on rules-based tasks performed on computers. The distinction lies in rigidity versus reasoning. RPA is excellent at following a strict script: if X happens, do Y. It mimics human hands. Agentic AI mimics human reasoning. It does not follow a linear script; it <strong>creates</strong> one.</p><p>Consider a recruiting workflow. An RPA bot can scan a resume and upload it to a database. It performs a repetitive task perfectly. An Agentic system looks at the resume, notices the candidate lists a specific certification, cross-references that with a new client requirement, and decides to draft a personalized outreach email highlighting that match. RPA executes a predefined plan; Agentic AI formulates the plan based on a goal. This autonomy separates agents from the predictive tools we have used for the last decade.</p><p>Another example is managing meeting conflicts. A predictive model integrated into your calendar might analyze your meeting schedule and the schedules of your colleagues. It could then suggest potential conflicts, such as two important meetings scheduled at the same time, or a meeting scheduled when a key participant is on vacation. It provides you with information and flags potential issues, but you are responsible for taking action.</p><p>An agentic AI, in the same scenario, would go beyond just suggesting conflicts to avoid. Upon identifying a conflict with a key participant, the agent could act by:</p><ul><li>Checking the availability of all necessary participants.</li><li>Identifying alternative time slots that work for everyone.</li><li>Sending out proposed new meeting invitations to all attendees.</li><li>If the conflict is with an external participant, the agent could draft and send an email explaining the need to reschedule and offering alternative times.</li><li>Updating your calendar and the calendars of your colleagues with the new meeting details once confirmed.</li></ul><p>This agentic AI understands the goal (resolving the meeting conflict), plans the steps (checking availability, finding alternatives, sending invites), executes those steps, and persists until the conflict is resolved, all with minimal direct user intervention. This demonstrates the “agentic” difference: the system takes <strong>proactive steps</strong> for the user, rather than just providing information to the user.</p><p>Agentic AI systems understand a goal, plan a series of steps to achieve it, execute those steps, and even adapt if things go wrong. Think of it like a <strong>proactive digital assistant</strong>. The underlying technology often combines large language models (LLMs) for understanding and reasoning, with planning algorithms that break down complex tasks into manageable actions. These agents can interact with various tools, APIs, and even other AI models to accomplish their objectives, and critically, they can maintain a persistent state, meaning they remember previous actions and continue working towards a goal over time. This makes them fundamentally different from typical generative AI, which usually completes a single request and then resets.</p><h2 id="a-simple-taxonomy-of-agentic-behaviors">A Simple Taxonomy of Agentic Behaviors</h2><p>We can categorize agent behavior into four distinct modes of autonomy. While these often look like a progression, they function as independent operating modes. A user might trust an agent to act autonomously for scheduling, but keep it in “suggestion mode” for financial transactions.</p><p>We derived these levels by adapting industry standards for autonomous vehicles (<a href="https://www.sae.org/news/blog/sae-levels-driving-automation-clarity-refinements">SAE levels</a>) to digital user experience contexts.</p><h3 id="observe-and-suggest">Observe-and-Suggest</h3><p>The agent functions as a monitor. It analyzes data streams and flags anomalies or opportunities, but takes zero action.</p><p><strong>Differentiation</strong><br></br>Unlike the next level, the agent generates no complex plan. It points to a problem.</p><p><strong>Example</strong><br></br>A DevOps agent notices a server CPU spike and alerts the on-call engineer. It does not know how or attempt to fix it, but it knows something is wrong.</p><p><strong>Implications for design and oversight</strong><br></br>At this level, design and oversight should prioritize clear, non-intrusive notifications and a well-defined process for users to act on suggestions. The focus is on empowering the user with timely and relevant information without taking control. UX practitioners should focus on making suggestions clear and easy to understand, while product managers need to ensure the system provides value without overwhelming the user.</p><h3 id="plan-and-propose">Plan-and-Propose</h3><p>The agent identifies a goal and generates a multi-step strategy to achieve it. It presents the full plan for human review.</p><p><strong>Differentiation</strong><br></br>The agent acts as a strategist. It does not execute; it waits for approval on the entire approach.</p><p><strong>Example</strong><br></br>The same DevOps agent notices the CPU spike, analyzes the logs, and proposes a remediation plan:</p><ol><li>Spin up two extra instances.</li><li>Restart the load balancer.</li><li>Archive old logs.</li></ol><p>The human reviews the logic and clicks “Approve Plan”.</p><p><strong>Implications for design and oversight</strong><br></br>For agents that plan and propose, design must ensure the proposed plans are easily understandable and that users have intuitive ways to modify or reject them. Oversight is crucial in monitoring the quality of proposals and the agent’s planning logic. UX practitioners should design clear visualizations of the proposed plans, and product managers must establish clear review and approval workflows.</p><h3 id="act-with-confirmation">Act-with-Confirmation</h3><p>The agent completes all preparation work and places the final action in a staged state. It effectively holds the door open, waiting for a nod.</p><p><strong>Differentiation</strong><br></br>This differs from “Plan-and-Propose” because the work is already done and staged. It reduces friction. The user confirms the outcome, not the strategy.</p><p><strong>Example</strong><br></br>A recruiting agent drafts five interview invitations, finds open times on calendars, and creates the calendar events. It presents a “Send All” button. The user provides the final authorization to trigger the external action.</p><p><strong>Implications for design and oversight</strong><br></br>When agents act with confirmation, the design should provide transparent and concise summaries of the intended action, clearly outlining potential consequences. Oversight needs to verify that the confirmation process is robust and that users are not being asked to blindly approve actions. UX practitioners should design confirmation prompts that are clear and provide all necessary information, and product managers should prioritize a robust audit trail for all confirmed actions.</p><h3 id="act-autonomously">Act-Autonomously</h3><p>The agent executes tasks independently within defined boundaries.</p><p><strong>Differentiation</strong><br></br>The user reviews the history of actions, not the actions themselves.</p><p><strong>Example</strong><br></br>The recruiting agent sees a conflict, moves the interview to a backup slot, updates the candidate, and notifies the hiring manager. The human only sees a notification: Interview rescheduled to Tuesday.</p><p><strong>Implications for design and oversight</strong><br></br>For autonomous agents, the design needs to establish clear pre-approved boundaries and provide robust monitoring tools. Oversight requires continuous evaluation of the agent’s performance within these boundaries, a critical need for robust logging, clear override mechanisms, and user-defined kill switches to maintain user control and trust. UX practitioners should focus on designing effective dashboards for monitoring autonomous agent behavior, and product managers must ensure clear governance and ethical guidelines are in place.</p><figure><a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/1-agentic-autonomy-matrix.png"></img></a><figcaption><strong>Figure 1</strong>: The Agentic Autonomy Matrix. This framework maps four distinct operating modes by correlating the level of agent initiative against the required amount of human intervention. (<a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/1-agentic-autonomy-matrix.png">Large preview</a>)</figcaption></figure><p>Let’s look at a real-world application in HR technology to see these modes in action. Consider an “Interview Coordination Agent” designed to handle the logistics of hiring.</p><ul><li><strong>In Suggest Mode</strong><br></br>The agent notices an interviewer is double-booked. It highlights the conflict on the recruiter’s dashboard: <em>“Warning: Sarah is double-booked for the 2 PM interview.”</em></li><li><strong>In Plan Mode</strong><br></br>The agent analyzes Sarah’s calendar and the candidate’s availability. It presents a solution: <em>“I recommend moving the interview to Thursday at 10 AM. This requires moving Sarah’s 1:1 with her manager.”</em> The recruiter reviews this logic.</li><li><strong>In Confirmation Mode</strong><br></br>The agent drafts the emails to the candidate and the manager. It populates the calendar invites. The recruiter sees a summary: <em>“Ready to reschedule to Thursday. Send updates?”</em> The recruiter clicks <em>“Confirm.”</em></li><li><strong>In Autonomous Mode</strong><br></br>The agent handles the conflict instantly. It respects a pre-set rule: <em>“Always prioritize candidate interviews over internal 1:1s.”</em> It moves the meeting and sends the notifications. The recruiter sees a log entry: <em>“Resolved schedule conflict for Candidate B.”</em></li></ul><h2 id="research-primer-what-to-research-and-how">Research Primer: What To Research And How</h2><p>Developing effective agentic AI demands a distinct research approach compared to traditional software or even generative AI. The autonomous nature of AI agents, their ability to make decisions, and their potential for proactive action necessitate specialized methodologies for understanding user expectations, mapping complex agent behaviors, and anticipating potential failures. The following research primer outlines key methods to measure and evaluate these unique aspects of agentic AI.</p><h3 id="mental-model-interviews">Mental-Model Interviews</h3><p>These interviews uncover users’ preconceived notions about how an AI agent should behave. Instead of simply asking what users <em>want</em>, the focus is on understanding their internal models of the agent’s capabilities and limitations. We should avoid using the word “agent” with participants. It carries sci-fi baggage or is a term too easily confused with a human agent offering support or services. Instead, frame the discussion around “assistants” or “the system.”</p><p>We need to uncover where users draw the line between helpful automation and intrusive control.</p><ul><li><strong>Method:</strong> Ask users to describe, draw, or narrate their expected interactions with the agent in various hypothetical scenarios.</li><li><strong>Key Probes (reflecting a variety of industries):</strong><ul><li>To understand the boundaries of desired automation and potential anxieties around over-automation, ask:<ul><li>If your flight is canceled, what would you want the system to do automatically? What would worry you if it did that without your explicit instruction?</li></ul></li><li>To explore the user’s understanding of the agent’s internal processes and necessary communication, ask:<ul><li>Imagine a digital assistant is managing your smart home. If a package is delivered, what steps do you imagine it takes, and what information would you expect to receive?</li></ul></li><li>To uncover expectations around control and consent within a multi-step process, ask:<ul><li>If you ask your digital assistant to schedule a meeting, what steps do you envision it taking? At what points would you want to be consulted or given choices?</li></ul></li></ul></li><li><strong>Benefits of the method:</strong> Reveals implicit assumptions, highlights areas where the agent’s planned behavior might diverge from user expectations, and informs the design of appropriate controls and feedback mechanisms.</li></ul><h3 id="agent-journey-mapping">Agent Journey Mapping:</h3><p>Similar to traditional user journey mapping, agent journey mapping specifically focuses on the anticipated actions and decision points of the AI agent itself, alongside the user’s interaction. This helps to proactively identify potential pitfalls.</p><ul><li><strong>Method:</strong> Create a visual map that outlines the various stages of an agent’s operation, from initiation to completion, including all potential actions, decisions, and interactions with external systems or users.</li><li><strong>Key Elements to Map:</strong><ul><li><strong>Agent Actions:</strong> What specific tasks or decisions does the agent perform?</li><li><strong>Information Inputs/Outputs:</strong> What data does the agent need, and what information does it generate or communicate?</li><li><strong>Decision Points:</strong> Where does the agent make choices, and what are the criteria for those choices?</li><li><strong>User Interaction Points:</strong> Where does the user provide input, review, or approve actions?</li><li><strong>Points of Failure:</strong> Crucially, identify specific instances where the agent could misinterpret instructions, make an incorrect decision, or interact with the wrong entity.<ul><li><strong>Examples:</strong> Incorrect recipient (e.g., sending sensitive information to the wrong person), overdraft (e.g., an automated payment exceeding available funds), misinterpretation of intent (e.g., booking a flight for the wrong date due to ambiguous language).</li></ul></li><li><strong>Recovery Paths:</strong> How can the agent or user recover from these failures? What mechanisms are in place for correction or intervention?</li></ul></li><li><strong>Benefits of the method:</strong> Provides a holistic view of the agent’s operational flow, uncovers hidden dependencies, and allows for the proactive design of safeguards, error handling, and user intervention points to prevent or mitigate negative outcomes.</li></ul><figure><a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/2-agent-journey-map.jpg"></img></a><figcaption><strong>Figure 2</strong>: Agent Journey Map. Mapping the Agent Logic distinct from the System helps identify where the reasoning, not just the code, might fail. (<a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/2-agent-journey-map.jpg">Large preview</a>)</figcaption></figure><h3 id="simulated-misbehavior-testing">Simulated Misbehavior Testing:</h3><p>This approach is designed to stress-test the system and observe user reactions when the AI agent <em>fails</em> or deviates from expectations. It’s about understanding trust repair and emotional responses in adverse situations.</p><ul><li><strong>Method:</strong> In controlled lab studies, deliberately introduce scenarios where the agent makes a mistake, misinterprets a command, or behaves unexpectedly.</li><li><strong>Types of “Misbehavior” to Simulate:</strong><ul><li><strong>Command Misinterpretation:</strong> The agent performs an action slightly different from what the user intended (e.g., ordering two items instead of one).</li><li><strong>Information Overload/Underload:</strong> The agent provides too much irrelevant information or not enough critical details.</li><li><strong>Unsolicited Action:</strong> The agent takes an action the user explicitly did not want or expect (e.g., buying stock without approval).</li><li><strong>System Failure:</strong> The agent crashes, becomes unresponsive, or provides an error message.</li><li><strong>Ethical Dilemmas:</strong> The agent makes a decision with ethical implications (e.g., prioritizing one task over another based on an unforeseen metric).</li></ul></li><li><strong>Observation Focus:</strong><ul><li><strong>User Reactions:</strong> How do users react emotionally (frustration, anger, confusion, loss of trust)?</li><li><strong>Recovery Attempts:</strong> What steps do users take to correct the agent’s behavior or undo its actions?</li><li><strong>Trust Repair Mechanisms:</strong> Do the system’s built-in recovery or feedback mechanisms help restore trust? How do users want to be informed about errors?</li><li><strong>Mental Model Shift:</strong> Does the misbehavior alter the user’s understanding of the agent’s capabilities or limitations?</li></ul></li><li><strong>Benefits of the method:</strong> Crucial for identifying design gaps related to error recovery, feedback, and user control. It provides insights into how resilient users are to agent failures and what is needed to maintain or rebuild trust, leading to more robust and forgiving agentic systems.</li></ul><p>By integrating these research methodologies, UX practitioners can move beyond simply making agentic systems <em>usable</em> to making them <em>trusted</em>, <em>controllable</em>, and <em>accountable</em>, fostering a positive and productive relationship between users and their AI agents. Note that these aren’t the only methods relevant to exploring agentic AI effectively. Many other methods exist, but these are most accessible to practitioners in the near term. I’ve previously covered the Wizard of Oz method, a slightly more advanced method of concept testing, which is also a valuable tool for exploring agentic AI concepts.</p><h2 id="ethical-considerations-in-research-methodology">Ethical Considerations In Research Methodology</h2><p>When researching agentic AI, particularly when simulating misbehavior or errors, ethical considerations are key to take into account. There are many publications focusing on ethical UX research, including an <a href="https://www.smashingmagazine.com/2020/12/ethical-considerations-ux-research/">article I wrote for Smashing Magazine</a>, <a href="https://www.uxdesigninstitute.com/blog/what-are-user-research-ethics/">these guidelines</a> from the UX Design Institute, and this page from the <a href="https://www.inclusivedesigntoolkit.com/ethics/">Inclusive Design Toolkit</a>.</p><h2 id="key-metrics-for-agentic-ai">Key Metrics For Agentic AI</h2><p>You’ll need a comprehensive set of key metrics to effectively assess the performance and reliability of agentic AI systems. These metrics provide insights into user trust, system accuracy, and the overall user experience. By tracking these indicators, developers and designers can identify areas for improvement and ensure that AI agents operate safely and efficiently.</p><p><strong>1. Intervention Rate</strong><br></br>For autonomous agents, we measure success by silence. If an agent executes a task and the user does not intervene or reverse the action within a set window (e.g., 24 hours), we count that as acceptance. We track the Intervention Rate: how often does a human jump in to stop or correct the agent? A high intervention rate signals a misalignment in trust or logic.</p><p><strong>2. Frequency of Unintended Actions per 1,000 Tasks</strong><br></br>This critical metric quantifies the number of actions performed by the AI agent that were not desired or expected by the user, normalized per 1,000 completed tasks. A low frequency of unintended actions signifies a well-aligned AI that accurately interprets user intent and operates within defined boundaries. This metric is closely tied to the AI’s understanding of context, its ability to disambiguate commands, and the robustness of its safety protocols.</p><p><strong>3. Rollback or Undo Rates</strong><br></br>This metric tracks how often users need to reverse or undo an action performed by the AI. High rollback rates suggest that the AI is making frequent errors, misinterpreting instructions, or acting in ways that are not aligned with user expectations. Analyzing the reasons behind these rollbacks can provide valuable feedback for improving the AI’s algorithms, understanding of user preferences, and its ability to predict desirable outcomes.</p><p>To understand why, you must implement a microsurvey on the undo action. For example, when a user reverses a scheduling change, a simple prompt can ask: <em>“Wrong time? Wrong person? Or did you just want to do it yourself?”</em> Allowing the user to click on the option that best corresponds to their reasoning.</p><p><strong>4. Time to Resolution After an Error</strong><br></br>This metric measures the duration it takes for a user to correct an error made by the AI or for the AI system itself to recover from an erroneous state. A short time to resolution indicates an efficient and user-friendly error recovery process, which can mitigate user frustration and maintain productivity. This includes the ease of identifying the error, the accessibility of undo or correction mechanisms, and the clarity of error messages provided by the AI.</p><figure><a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/3-trust-accountability-dashboard.jpg"></img></a><figcaption><strong>Figure 3</strong>: A Trust & Accountability Dashboard. Note the focus on “Rollback Reasons”. This qualitative data is vital for tuning the agent’s logic. (<a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/3-trust-accountability-dashboard.jpg">Large preview</a>)</figcaption></figure><p>Collecting these metrics requires instrumenting your system to track Agent Action IDs. Every distinct action the agent takes, such as proposing a schedule or booking a flight, must generate a unique ID that persists in the logs. To measure the Intervention Rate, we do not look for an immediate user reaction. We look for the absence of a counter-action within a defined window. If an Action ID is generated at 9:00 AM and no human user modifies or reverts that specific ID by 9:00 AM the next day, the system logically tags it as Accepted. This allows us to quantify success based on user silence rather than active confirmation.</p><p>For Rollback Rates, raw counts are insufficient because they lack context. To capture the underlying reason, you must implement intercept logic on your application’s Undo or Revert functions. When a user reverses an agent-initiated action, trigger a lightweight microsurvey. This can be a simple three-option modal asking the user to categorize the error as factually incorrect, lacking context, or a simple preference to handle the task manually. This combines quantitative telemetry with qualitative insight. It enables engineering teams to distinguish between a broken algorithm and a user preference mismatch.</p><p>These metrics, when tracked consistently and analyzed holistically, provide a robust framework for evaluating the performance of agentic AI systems, allowing for continuous improvement in control, consent, and accountability.</p><h2 id="designing-against-deception">Designing Against Deception</h2><p>As agents become increasingly capable, we face a new risk: <strong>Agentic Sludge</strong>. Traditional sludge creates friction that makes it hard to cancel a subscription or delete an account. Agentic sludge acts in reverse. It removes friction to a fault, making it too easy for a user to agree to an action that benefits the business rather than their own interests.</p><p>Consider an agent assisting with travel booking. Without clear guardrails, the system might prioritize a partner airline or a higher-margin hotel. It presents this choice as the optimal path. The user, trusting the system’s authority, accepts the recommendation without scrutiny. This creates a deceptive pattern where the system optimizes for revenue under the guise of convenience.</p><h3 id="the-risk-of-falsely-imagined-competence">The Risk Of Falsely Imagined Competence</h3><p>Deception may not stem from malicious intent. It often manifests in AI as <strong>Imagined Competence</strong>. Large Language Models frequently sound authoritative even when incorrect. They present a false booking confirmation or an inaccurate summary with the same confidence as a verified fact. Users may naturally trust this confident tone. This mismatch creates a dangerous gap between system capability and user expectations.</p><p>We must design specifically to bridge this gap. If an agent fails to complete a task, the interface must signal that failure clearly. If the system is unsure, it must express uncertainty rather than masking it with polished prose.</p><h3 id="transparency-via-primitives">Transparency via Primitives</h3><p>The antidote to both sludge and hallucination is <strong>provenance</strong>. Every autonomous action requires a specific metadata tag explaining the origin of the decision. Users need the ability to inspect the logic chain behind the result.</p><p>To achieve this, we must <strong>translate primitives into practical answers</strong>. In software engineering, primitives refer to the core units of information or actions an agent performs. To the engineer, this looks like an API call or a logic gate. To the user, it must appear as a <strong>clear explanation</strong>.</p><p>The design challenge lies in mapping these technical steps to human-readable rationales. If an agent recommends a specific flight, the user needs to know why. The interface cannot hide behind a generic suggestion. It must expose the underlying primitive: <em>Logic: Cheapest_Direct_Flight</em> or <em>Logic: Partner_Airline_Priority</em>.</p><p>Figure 4 illustrates this translation flow. We take the raw system primitive — the actual code logic — and map it to a user-facing string. For instance, a primitive checking a calendar schedule a meeting becomes a clear statement: I’ve proposed a 4 PM meeting.</p><p>This level of transparency ensures the agent’s actions appear logical and beneficial. It allows the user to verify that the agent acted in their best interest. By exposing the primitives, we transform a black box into a glass box, ensuring users remain the final authority on their own digital lives.</p><figure><a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/4-translation-flow.jpg"></img></a><figcaption><strong>Figure 4</strong>: Translating a primitive to an end explanation is key to explaining the behavior of Agentic AI. (<a href="https://files.smashing.media/articles/beyond-generative-rise-agentic-ai-user-centric-design/4-translation-flow.jpg">Large preview</a>)</figcaption></figure><h2 id="setting-the-stage-for-design">Setting The Stage For Design</h2><p>Building an agentic system requires a new level of psychological and behavioral understanding. It forces us to move beyond conventional usability testing and into the realm of <strong>trust</strong>, <strong>consent</strong>, and <strong>accountability</strong>. The research methods we’ve discussed, from probing mental models to simulating misbehavior and establishing new metrics, provide a necessary foundation. These practices are the essential tools for proactively identifying where an autonomous system might fail and, more importantly, how to repair the user-agent relationship when it does.</p><p>The shift to agentic AI is a <strong>redefinition of the user-system relationship</strong>. We are no longer designing for tools that simply respond to commands; we are designing for partners that act on our behalf. This changes the design imperative from efficiency and ease of use to <strong>transparency</strong>, <strong>predictability</strong>, and <strong>control</strong>.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aWhen%20an%20AI%20can%20book%20a%20flight%20or%20trade%20a%20stock%20without%20a%20final%20click,%20the%20design%20of%20its%20%e2%80%9con-ramps%e2%80%9d%20and%20%e2%80%9coff-ramps%e2%80%9d%20becomes%20paramount.%20It%20is%20our%20responsibility%20to%20ensure%20that%20users%20feel%20they%20are%20in%20the%20driver%e2%80%99s%20seat,%20even%20when%20they%e2%80%99ve%20handed%20over%20the%20wheel.%0a&url=https://smashingmagazine.com%2f2026%2f01%2fbeyond-generative-rise-agentic-ai-user-centric-design%2f">When an AI can book a flight or trade a stock without a final click, the design of its “on-ramps” and “off-ramps” becomes paramount. It is our responsibility to ensure that users feel they are in the driver’s seat, even when they’ve handed over the wheel.</a></p></blockquote><p>This new reality also elevates the role of the UX researcher. We become the custodians of user trust, working collaboratively with engineers and product managers to define and test the guardrails of an agent’s autonomy. Beyond being researchers, we become advocates for user control, transparency, and the ethical safeguards within the development process. By translating primitives into practical questions and simulating worst-case scenarios, we can build robust systems that are both powerful and safe.</p><p>This article has outlined the “what” and “why” of researching agentic AI. It has shown that our traditional toolkits are insufficient and that we must adopt new, forward-looking methodologies. The next article will build upon this foundation, providing the specific design patterns and organizational practices that make an agent’s utility transparent to users, ensuring they can harness the power of agentic AI with confidence and control. The future of UX is about making systems trustworthy.</p><p>For additional understanding of agentic AI, you can explore the following resources:</p><ul><li><a href="https://www.google.com/search?q=https://ai.googleblog.com/blog/topic/agentic-ai/">Google AI Blog on Agentic AI</a></li><li><a href="https://www.microsoft.com/en-us/research/project/agent-ai/">Microsoft’s research on AI Agents</a></li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Rethinking “Pixel Perfect” Web Design</h1>
<p>hello@smashingmagazine.com (Amit Sheen) — Tue, 20 Jan 2026 10:00:00 GMT</p>
<h1>Rethinking “Pixel Perfect” Web Design — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>12 min read</li><li><a href="http://www.smashingmagazine.com/category/web-design">Web Design</a>,
<a href="http://www.smashingmagazine.com/category/responsive-design">Responsive Design</a>,
<a href="http://www.smashingmagazine.com/category/design-systems">Design Systems</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.</section></p><p>It’s 2026. We are operating in an era of incredible technological leaps, where advanced tooling and AI-enhanced workflows have fundamentally transformed how we design, build, and bridge the gap between the two. The web is moving faster than ever, with groundbreaking features and standards emerging almost daily.</p><p>Yet, in the middle of this high-speed evolution, there’s one thing we’ve been carrying with us since the early days of print, a phrase that feels increasingly out of sync with our modern reality: “Pixel Perfect.”</p><figure><a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/1-pixel-perfect-design.png"></img></a><figcaption>Pixel Perfect? Let’s see... (<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/1-pixel-perfect-design.png">Large preview</a>)</figcaption></figure><p>I’ll be honest, I’m not a fan. In fact, I believe the idea that we can have pixel-perfection in our designs has become <strong>misleading</strong>, <strong>vague</strong>, and ultimately <strong>counterproductive</strong> to the way we build for the modern web. As a community of developers and designers, it’s time we take a hard look at this legacy concept, understand why it’s failing us, and redefine what “perfection” actually looks like in a multi-device, fluid world.</p><h2 id="a-brief-history-of-a-rigid-mindset">A Brief History Of A Rigid Mindset</h2><p>To understand why many of us still aim for pixel perfection today, we have to look back at where it all began. It didn’t start on the web, but as a stowaway from the era when layout software first allowed us to design for print on a personal computer, and GUI design from the late 1980s and ’90s.</p><p>In the print industry, perfection was absolute. Once a design was sent to the press, every dot of ink had a fixed, unchangeable position on a physical page. When designers transitioned to the early web, they brought this <strong>“printed page” mentality</strong> with them. The goal was simple: The website must be an exact, pixel-for-pixel replica of the static mockup created in design applications like Photoshop and QuarkXPress.</p><figure><a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/2-printed-page-mentality.jpg"></img></a><figcaption>Credit: <a href="https://unsplash.com/@msgr?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Geri Sakti</a> on <a href="https://unsplash.com/photos/a-large-machine-with-a-lot-of-papers-on-it-CYrYxz-uvE4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>. (<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/2-printed-page-mentality.jpg">Large preview</a>)</figcaption></figure><p>I’m old enough to remember working with talented designers who had spent their entire careers in the print world. They would hand over web designs and, with total sincerity, insist on discussing the layout in centimeters and inches. To them, the screen was just another piece of paper, albeit one that glowed.</p><p>In those days, we “tamed” the web to achieve this. <a href="https://alistapart.com/article/journey/">We used table-based layouts</a>, nested three levels deep, and stretched <a href="https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/">1×1 pixel “spacer GIFs”</a> to create precise gaps. We designed for a single, “standard” resolution (usually 800×600) because, back then, we could actually pretend we knew exactly what the user was seeing.</p><div><pre><code><!-- A typical "Pixel Perfect" layout from 1998 -->
<table width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" valign="top" bgcolor="#CCCCCC">
       <!-- Sidebar -->
    </td>
    <td width="10"></td>
    <td width="640" valign="top">
      <!-- Content goes here -->
    </td>
  </tr>
</table>
</code></pre></div><h2 id="cracks-in-the-foundation">Cracks In The Foundation</h2><p>The first major challenge to the fixed-table mindset came as early as 2000. In his seminal article, “<a href="https://alistapart.com/article/dao/">A Dao of Web Design</a>”, John Allsopp argued that by trying to force the web into the constraints of print, we were missing the point of the medium entirely. He called the quest for pixel-perfection a “ritual” that ignored the web’s inherent fluidity.</p><blockquote>When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, “ritual,” and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’t make sense.</blockquote><p>Nonetheless, the “pixel-perfection” refused to die. While its meaning has shifted and morphed over the decades, it has rarely been well-defined. Many have tried, such as in 2010 when the design agency <strong>ustwo</strong> released the <a href="https://downloads.ctfassets.net/ve81k805bx04/2bMTFo4agkUgmsSgeu8uik/462da69baf7fc97876b2cd87bc4b857f/PP3.pdf">Pixel Perfect Precision (PPP)</a> (PDF) handbook. But that same year, <a href="https://alistapart.com/article/responsive-web-design/">Responsive Web Design</a> also gained massive momentum, effectively killing the idea that a website could look identical on every screen.</p><p>Yet, here we are, still using a term born from the limitations of monitors dated to the ’90s to describe the complex interfaces of 2026.</p><figure><a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/3-pixel-perfectt-web-design.png"></img></a><figcaption>You keep using that word. I’m not sure it means what you think it means....(<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/3-pixel-perfectt-web-design.png">Large preview</a>)</figcaption></figure><blockquote><strong>Note:</strong> Before we continue, it’s important to acknowledge the exceptions. There are, of course, scenarios where pixel precision is non-negotiable. Icon grids, sprite sheets, canvas rendering, game engines, or bitmap exports often require exact, pixel-level control to function correctly. These, however, are specialized technical requirements, not a general rule for modern UI development.</blockquote><h2 id="why-pixel-perfect-is-failing-the-modern-web">Why “Pixel Perfect” Is Failing the Modern Web</h2><p>In our current landscape, clinging to the idea of “pixel perfection” isn’t just anachronistic, it’s actively harmful to the products we build. Here is why.</p><h3 id="it-is-fundamentally-vague">It Is Fundamentally Vague</h3><p>Let’s start with a simple question: When a designer asks for a “pixel-perfect” implementation, what are they actually asking for? Is it the colors, the spacing, the typography, the borders, the alignment, the shadows, the interactions? Take a moment to think about it.</p><p>If your answer is “everything”, then you’ve just identified the core issue.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20term%20%e2%80%9cpixel-perfect%e2%80%9d%20is%20so%20all-encompassing%20that%20it%20lacks%20any%20real%20technical%20specificity.%20It%e2%80%99s%20a%20blanket%20statement%20that%20masks%20a%20lack%20of%20clear%20requirements.%20When%20we%20say%20%e2%80%9cmake%20it%20pixel%20perfect,%e2%80%9d%20we%20aren%e2%80%99t%20giving%20a%20directive;%20we%e2%80%99re%20expressing%20a%20feeling.%0a&url=https://smashingmagazine.com%2f2026%2f01%2frethinking-pixel-perfect-web-design%2f">The term “pixel-perfect” is so all-encompassing that it lacks any real technical specificity. It’s a blanket statement that masks a lack of clear requirements. When we say “make it pixel perfect,” we aren’t giving a directive; we’re expressing a feeling.</a></p></blockquote><h3 id="the-multi-surface-reality">The Multi-Surface Reality</h3><p>The concept of a “standard screen size” is now a relic of the past. We are building for an almost infinite variety of <a href="https://viewports.fyi/">viewports</a>, resolutions, and aspect-ratios, and this reality is not likely to change any time soon. Plus, the web is no longer confined to a flat, rectangular piece of glass; it can be on a foldable phone that changes aspect ratios mid-session, or on a spatial interface projected into a room.</p><p>Every Internet-connected device <a href="https://css-tricks.com/snippets/css/media-queries-for-standard-devices/">has its own pixel density, scaling factors, and rendering quirks</a>.</p><p>A design that is “perfect” on one set of pixels is, by definition, imperfect on another. Striving for a single, static “perfection” ignores the fluid, adaptive nature of the modern web. When the canvas is constantly shifting, the very idea of a fixed pixel implementation becomes a technical impossibility.</p><figure><a href="https://x.com/jbrewer/status/178528003402379265"></img></a><figcaption>Source: <a href="https://x.com/jbrewer/status/178528003402379265">x.com</a>. (<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/6-tweet.png">Large preview</a>)</figcaption></figure><h3 id="the-dynamic-nature-of-content">The Dynamic Nature Of Content</h3><p>A static mockup is a snapshot of a single state with a specific set of data. But content is rarely static like that in the real world. <a href="https://www.smashingmagazine.com/2014/12/how-to-conduct-website-localization/">Localization is a prime example</a>: a label that fits perfectly inside a button component in English might overflow the container in German or require a different font entirely for CJK languages.</p><p>Beyond text length, localization means changes with currency symbols, date formatting, and numeric systems. Any of these variables can significantly impact a page layout. If a design is built to be “pixel-perfect” based on a specific string of text, it is inherently fragile. A pixel-perfect layout completely collapses the moment content changes.</p><figure><a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/4-pricing-card.png"></img></a><figcaption>A pricing card that looks balanced in English, but shifts or overflows when localized. The fixed-width containers and absolute positioning that work for the English mockup fail to adapt to other languages. (<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/4-pricing-card.png">Large preview</a>)</figcaption></figure><h2 id="accessibility-is-the-real-perfection">Accessibility Is The Real Perfection</h2><p>True perfection means a site that works for everyone. If a layout is so rigid that it breaks when a user increases their font size or forces a high-contrast mode, it isn’t perfect — it’s broken. “Pixel perfect” often prioritizes visual aesthetics over functional accessibility, creating barriers for users who don’t fit the “standard” profile.</p><h2 id="think-systems-not-pages">Think Systems, Not Pages</h2><p>We no longer build pages; we build design systems. We create components that must work in isolation and a variety of contexts, whether in headers, in sidebars, or in dynamic grids. Trying to match a component to a specific pixel coordinate in a static mockup is a fool’s errand.</p><p>A pure “pixel-perfect” approach treats every instance as a unique snowflake, which is the antithesis of a scalable, <a href="https://www.smashingmagazine.com/2023/01/key-good-component-design-selfishness/">component-based architecture</a>. It forces developers to choose between following a static image and maintaining the integrity of the system.</p><h2 id="perfection-is-technical-debt">Perfection Is Technical Debt</h2><p>When we prioritize exact visual matching over sound engineering, we aren’t just making a design choice; we are incurring technical debt. Chasing that last pixel often forces developers to bypass the browser’s natural layout engine.</p><p>Working in exact units leads to <a href="https://css-tricks.com/magic-numbers-in-css/">“magic numbers”</a>, those arbitrary <code>margin-top: 3px</code> or <code>left: -1px</code> hacks, sprinkled throughout the codebase to force an element into a specific position on a specific screen. This creates a fragile, brittle architecture, leading to a never-ending cycle of “visual bug” tickets.</p><pre><code>/* The "Pixel Perfect" Hack */
.card-title {
  margin-top: 13px; /* Matches the mockup exactly on 1440px */
  margin-left: -2px; /* Optical adjustment for a specific font */
}
/* The "Design Intent" Solution */
.card-title {
  margin-top: var(--space-m); /* Part of a consistent scale */
  align-self: start; /* Logical alignment */
}
</code></pre><p>By insisting on pixel-perfection, we are building a foundation that is difficult to automate, difficult to refactor, and ultimately, more expensive to maintain. We have much more flexible ways to calculate sizing in CSS, thanks to <a href="https://css-tricks.com/css-length-units/#relative-units">relative units</a>.</p><h2 id="moving-from-pixels-to-intent">Moving From Pixels To Intent</h2><p>So far, I’ve spent a lot of time talking about what we <em>shouldn’t</em> do. But let’s be clear: Moving away from “pixel perfection” isn’t an excuse for sloppy implementation or a “close enough” attitude. We still need consistency, we still want our products to look and feel high-quality, and we still need a shared methodology for achieving that.</p><p>So, if “pixel perfection” is no longer a viable goal, what <em>should</em> we be striving for?</p><p>The answer, I believe, lies in shifting our focus from individual pixels to <strong>design intent</strong>. In a fluid world, perfection isn’t about matching a static image, but ensuring that the core logic and visual integrity of the design are preserved across every possible context.</p><h3 id="design-intent-over-static-values">Design Intent Over Static Values</h3><p>Instead of asking for a <code>margin: 24px</code> in a design, we should be asking: <em>Why is this margin here?</em> Is it to create a visual separation between sections? Is it part of a consistent spacing scale? When we understand the intent, we can implement it using fluid units and functions (like <code>rem</code> and <code>clamp()</code>, respectively) and use advanced tools, like <a href="https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/">CSS Container Queries</a>, that allow the design to breathe and adapt while still feeling “right”.</p><div><pre><code>/* Intent: A heading that scales smoothly with the viewport */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
/* Intent: Change layout based on the component's own width, not the screen */
.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
</code></pre></div><h3 id="speaking-in-tokens">Speaking In Tokens</h3><p><a href="https://css-tricks.com/what-are-design-tokens/">Design tokens</a> are the bridge between design and code. When a designer and developer agree on a token like <code>--spacing-large</code> instead of <code>32px</code>, they aren’t just syncing values, but instead syncing logic. This ensures that even if the underlying value changes to accommodate a specific condition, the relationship between elements remains perfect.</p><pre><code>:root {
  /* The logic is defined once */
  --color-primary: #007bff;
  --spacing-unit: 8px;
  --spacing-large: calc(var(--spacing-unit) * 4);
}

/* And reused everwhere */
.button {
  background-color: var(--color-primary);
  padding: var(--spacing-large);
}
</code></pre><h3 id="fluidity-as-a-feature-not-a-bug">Fluidity As A Feature, Not A Bug</h3><p>We need to stop viewing the web’s flexibility as something to be tamed and start seeing that flexibility as its greatest strength. A “perfect” implementation is one that looks intentional at 320px, 1280px, and even in a 3D spatial environment. This means embracing intrinsic web design based on an element’s natural size in any context — and using modern CSS tools to create layouts that “know” how to arrange themselves based on the available space.</p><h2 id="death-to-the-handover">Death To The “Handover”</h2><p>In this intent-driven world, the “handover” of traditional design assets has become another relic of the past. We no longer pass static Photoshop files across a digital wall and hope for the best. Instead, we work within <a href="https://www.smashingmagazine.com/2022/04/artifacts-design-systems/"><strong>living design systems</strong></a>.</p><p>Modern tooling allows designers to specify behaviors, not just positions. When a designer defines a component, they aren’t just drawing a box; they’re defining its constraints, its fluid scales, and its relationship to the content. As developers, our job is to implement that logic.</p><p>The conversation has shifted from <em>“Why is this</em> <em>three</em> <em>pixels off?”</em> to <em>“How should this component behave when the container shrinks?”</em> and <em>“What happens to the hierarchy when the text is translated to a longer language?”</em></p><h2 id="better-language-better-outcomes">Better Language, Better Outcomes</h2><p>Speaking of conversations, when we aim for “pixel perfection”, we set ourselves up for friction. Mature teams have long moved past this binary “match-or-fail” mindset towards a more descriptive vocabulary that reflects the complexity of our work.</p><p>By replacing “pixel perfect” with more precise terms, we create shared expectations and eliminate pointless arguments. Here are a few phrases that have served me well for productive discussions around intent and fluidity:</p><ul><li><strong>“Visually consistent with the design system.”</strong><br></br>Instead of matching a specific mockup, we ensure the implementation follows the established rules of our system.</li><li><strong>“Matches spacing and hierarchy.”</strong><br></br>We focus on the relationships and rhythm between elements rather than their absolute coordinates.</li><li><strong>“Preserves proportions and alignment logic.”</strong><br></br>We ensure that the <em>intent</em> of the layout remains intact, even as it scales and shifts.</li><li><strong>“Acceptable variance across platforms.”</strong><br></br>We acknowledge that a site will look different, within a defined and agreed-upon range of variation, and that’s okay as long as the experience remains high-quality.</li></ul><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aLanguage%20creates%20reality.%20Clear%20language%20doesn%e2%80%99t%20just%20improve%20the%20code,%20but%20the%20relationship%20between%20designers%20and%20developers.%20It%20moves%20us%20toward%20a%20shared%20ownership%20of%20the%20final,%20living%20product.%20When%20we%20speak%20the%20same%20language,%20%e2%80%9cperfection%e2%80%9d%20stops%20being%20a%20demand%20and%20starts%20being%20a%20collaborative%20achievement.%0a&url=https://smashingmagazine.com%2f2026%2f01%2frethinking-pixel-perfect-web-design%2f">Language creates reality. Clear language doesn’t just improve the code, but the relationship between designers and developers. It moves us toward a shared ownership of the final, living product. When we speak the same language, “perfection” stops being a demand and starts being a collaborative achievement.</a></p></blockquote><h2 id="a-note-to-my-design-colleagues">A Note To My Design Colleagues</h2><p>When you hand over a design, don’t give us a fixed width, but a set of rules. Tell us what should stretch, what should stay fixed, and what should happen when the content inevitably overflows. Your “perfection” lies in the logic you define, not the pixels you draw.</p><figure><a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/5-rethinking-pixel-perfect-web-design.png"></img></a><figcaption>Don’t give us the photo, give us the recipe. (<a href="https://files.smashing.media/articles/rethinking-pixel-perfect-web-design/5-rethinking-pixel-perfect-web-design.png">Large preview</a>)</figcaption></figure><h2 id="the-new-standard-of-excellence">The New Standard Of Excellence</h2><p>The web was never meant to be a static gallery of frozen pixels. It was born to be a messy, fluid, and gloriously unpredictable medium. When we cling to an outdated model of “pixel perfection”, we are effectively trying to put a leash on a hurricane. It’s unnatural in today’s front-end landscape.</p><p>In 2026, we have the tools to build interfaces that think, adapt, and breathe. We have AI that can generate layouts in seconds and spatial interfaces that defy the very concept of a “screen”. In this world, perfection isn’t a fixed coordinate but a promise; <strong>it’s the promise that no matter who is looking, or what they are looking through, the <em>soul</em> of the design remains intact</strong>.</p><p>So, let’s bury the term once and for all. Let’s leave the centimeters to the architects and the spacer GIFs to the digital museums. If you want something to look exactly the same for the next hundred years, carve it in stone or print it on a high-quality cardstock. But if you want to build for the web, embrace the chaos.</p><p>Stop counting pixels. Start building <em>intent</em>.</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Smashing Animations Part 8: Theming Animations Using CSS Relative Colour</h1>
<p>hello@smashingmagazine.com (Andy Clarke) — Wed, 14 Jan 2026 10:00:00 GMT</p>
<h1>Theming Animations Using CSS Relative Colour — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>13 min read</li><li><a href="http://www.smashingmagazine.com/category/animation">Animation</a>,
<a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>CSS relative colour values are now widely supported. In this article, pioneering author and web designer <a href="https://stuffandnonsense.co.uk/">Andy Clarke</a> shares practical techniques for using them to theme and animate SVG graphics.</section></div><p>I’ve recently refreshed the animated graphics on <a href="https://stuffandnonsense.co.uk/">my website</a> with a new theme and a group of pioneering characters, putting into practice plenty of the techniques I shared in <a href="https://www.smashingmagazine.com/author/andy-clarke/">this series</a>. A few of my animations change appearance when someone interacts with them or at different times of day.</p><figure><a href="https://stuffandnonsense.co.uk/blog"></img></a><figcaption>View this animated SVG on <a href="https://stuffandnonsense.co.uk/blog">my website</a>. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/1-andy-website-animated-graphics.png">Large preview</a>)</figcaption></figure><p>The colours in the graphic atop <a href="https://stuffandnonsense.co.uk/blog">my blog pages</a> change from morning until night every day. Then, there’s the <a href="https://stuffandnonsense.co.uk/blog/let-it-snow">snow mode</a>, which adds chilly colours and a wintery theme, courtesy of an overlay layer and a blending mode.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/2-snow-mode.png"></img></a><figcaption>Snow mode allows my pioneer town background to adapt throughout the day. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/2-snow-mode.png">Large preview</a>)</figcaption></figure><p>While working on this, I started to wonder whether CSS relative colour values could give me more control while also simplifying the process.</p><p><strong>Note</strong>: <em>In this tutorial, I’ll focus on relative colour values and the OKLCH colour space for theming graphics and animations. If you want to dive deep into relative colour, Ahmad Shadeed created a superb <a href="https://ishadeed.com/article/css-relative-colors/">interactive guide</a>. As for colour spaces, gamuts, and OKLCH, our own Geoff Graham <a href="https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/">wrote</a> about them.</em></p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="how-cartoon-animation-taught-me-to-reuse-everything">How Cartoon Animation Taught Me To Reuse Everything</h2><p>The <a href="https://en.wikipedia.org/wiki/Hanna-Barbera">Hanna-Barbera</a> animated series I grew up watching had budgets far lower than those available when William Hanna and Joseph Barbera produced <em>Tom and Jerry</em> shorts at MGM Cartoons. This meant the animators needed to develop techniques to work around their cost restrictions.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/3-yogi-bear-show.png"></img></a><figcaption>The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/3-yogi-bear-show.png">Large preview</a>)</figcaption></figure><p>Repeated use of elements was key. Backgrounds were reused whenever possible, with zooms and overlays helping construct new scenes from the same artwork. It was born of necessity, but it also encouraged thinking in terms of series rather than individual scenes.</p><h2 id="the-problem-with-manually-updating-colour-palettes">The problem With Manually Updating Colour Palettes</h2><p>Let’s get straight to my challenge. In Toon Titles like this one — based on the 1959 Yogi Bear Show episode “Lullabye-Bye Bear” — and my work generally, palettes are limited to a select few colours.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/4-yogi-bear.png"></img></a><figcaption>View this on my <a href="https://stuffandnonsense.co.uk/toon-titles/24b.html">Toon Titles website</a>. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/4-yogi-bear.png">Large preview</a>)</figcaption></figure><p>I create shades and tints from what I call my “foundation” colour to expand the palette without adding more hues.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/5-colour-palette.png"></img></a><figcaption>Colour palette with shades and tints of a foundation colour. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/5-colour-palette.png">Large preview</a>)</figcaption></figure><p>In <a href="https://www.sketch.com">Sketch</a>, I work in the <a href="https://www.smashingmagazine.com/2021/07/hsl-colors-css/">HSL colour space</a>, so this process involves increasing or decreasing the lightness value of my foundation colour. Honestly, it’s not an arduous task — but choosing a different foundation colour requires creating a whole new set of shades and tints. Doing that manually, again and again, quickly becomes laborious.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/6-foundation-colour.png"></img></a><figcaption>Shades and tints of a different foundation colour. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/6-foundation-colour.png">Large preview</a>)</figcaption></figure><p>I mentioned the HSL — <strong>H</strong> (hue), S (saturation), and <strong>L</strong> (lightness) — colour space, but that’s just one of several ways to describe colour.</p><p>RGB — <strong>R</strong> (red), <strong>G</strong> (green), <strong>B</strong> (blue) — is probably the most familiar, at least in its Hex form.</p><p>There’s also LAB — <strong>L</strong> (lightness), <strong>A</strong> (green–red), <strong>B</strong> (blue–yellow) — and the newer, but now widely supported LCH — <strong>L</strong> (lightness), <strong>C</strong> (chroma), <strong>H</strong> (hue) — model in its OKLCH form. With LCH — specifically OKLCH in CSS — I can adjust the lightness value of my foundation colour.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/7-lightness-change-foundation-colour.png"></img></a><figcaption>Lightness changes to my foundation colour. Chroma and Hue remain the same. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/7-lightness-change-foundation-colour.png">Large preview</a>)</figcaption></figure><p>Or I can alter its <em>chroma</em>. LCH chroma and HSL saturation both describe the intensity or richness of a colour, but they do so in different ways. LCH gives me a wider range and more predictable blending between colours.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/8-chroma-changes-foundation-colour.png"></img></a><figcaption>Chroma changes to my foundation colour. Lightness and Hue remain the same. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/8-chroma-changes-foundation-colour.png">Large preview</a>)</figcaption></figure><p>I can also alter the hue to create a palette of colours that share the same lightness and chroma values. In both HSL and LCH, the hue spectrum starts at red, moves through green and blue, and returns to red.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/9-hue-changes-foundation-colour.png"></img></a><figcaption>Hue changes to my foundation colour. Lightness and Chrome remain the same. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/9-hue-changes-foundation-colour.png">Large preview</a>)</figcaption></figure><h2 id="why-oklch-changed-how-i-think-about-colour">Why OKLCH Changed How I Think About Colour</h2><p>Browser support for the OKLCH colour space <a href="https://caniuse.com/wf-oklab">is now widespread</a>, even if design tools — including Sketch — haven’t caught up. Fortunately, that shouldn’t stop you from using OKLCH. Browsers will happily convert Hex, HSL, LAB, and RGB values into OKLCH for you. You can define a CSS custom property with a foundation colour in any space, including Hex:</p><pre><code>/* Foundation colour */
--foundation: #5accd6;
</code></pre><p>Any colours derived from it will be converted into OKLCH automatically:</p><pre><code>--foundation-light: oklch(from var(--foundation) [...]; }
--foundation-mid: oklch(from var(--foundation) [...]; }
--foundation-dark: oklch(from var(--foundation) [...]; }
</code></pre><h2 id="relative-colour-as-a-design-system">Relative Colour As A Design System</h2><p>Think of relative colour as saying: <em>“Take this colour, tweak it, then give me the result.”</em> There are two ways to adjust a colour: absolute changes and proportional changes. They look similar in code, but behave very differently once you start swapping foundation colours. Understanding that difference is what can turn using relative colour into a system.</p><pre><code>/* Foundation colour */
--foundation: #5accd6;
</code></pre><p>For example, the lightness value of my foundation colour is <code>0.7837</code>, while a darker version has a value of <code>0.5837</code>. To calculate the difference, I subtract the lower value from the higher one and apply the result using a <code>calc()</code> function:</p><pre><code>--foundation-dark: 
  oklch(from var(--foundation)
  calc(l - 0.20) c h);
</code></pre><p>To achieve a lighter colour, I add the difference instead:</p><pre><code>--foundation-light:
  oklch(from var(--foundation)
  calc(l + 0.10) c h);
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/10-calculating-colour-difference.png"></img></a><figcaption>Calculating the difference between my foundation colour and Lightness, Chroma, and Hue-adjusted colours. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/10-calculating-colour-difference.png">Large preview</a>)</figcaption></figure><p>Chroma adjustments follow the same process. To reduce the intensity of my foundation colour from <code>0.1035</code> to <code>0.0035</code>, I subtract one value from the other:</p><pre><code>oklch(from var(--foundation)
l calc(c - 0.10) h);
</code></pre><p>To create a palette of hues, I calculate the difference between the hue value of my foundation colour (<code>200</code>) and my new hue (<code>260</code>):</p><pre><code>oklch(from var(--foundation)
l c calc(h + 60));
</code></pre><p>Those calculations are absolute. When I subtract a fixed amount, I’m effectively saying, <em>“Always subtract this much.”</em> The same applies when adding fixed values:</p><pre><code>calc(c - 0.10)
calc(c + 0.10)
</code></pre><p>I learned the limits of this approach the hard way. When I relied on subtracting fixed chroma values, colours collapsed towards grey as soon as I changed the foundation. A palette that worked for one colour fell apart for another.</p><p>Multiplication behaves differently. When I multiply chroma, I’m telling the browser: <em>“Reduce this colour’s intensity by a proportion.”</em> The relationship between colours remains intact, even when the foundation changes:</p><pre><code>calc(c * 0.10)
</code></pre><h2 id="my-move-it-scale-it-rotate-it-rules">My Move It, Scale It, Rotate It Rules</h2><ul><li><strong>Move</strong> lightness (add or subtract),</li><li><strong>Scale</strong> chroma (multiply),</li><li><strong>Rotate</strong> hue (add or subtract degrees).</li></ul><p>I scale chroma because I want intensity changes to stay proportional to the base colour. Hue relationships are rotational, so multiplying hue makes no sense. Lightness is perceptual and absolute — multiplying it often produces odd results.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/11-move-scale-rotate.png"></img></a><figcaption>Lightness: Move it. Chroma: Scale it. Hue: Rotate it. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/11-move-scale-rotate.png">Large preview</a>)</figcaption></figure><h2 id="from-one-colour-to-an-entire-theme">From One Colour To An Entire Theme</h2><p>Relative colour allows me to define a foundation colour and generate every other colour I need — fills, strokes, gradient stops, shadows — from it. At that point, colour stops being a palette and starts being a system.</p><blockquote>SVG illustrations tend to reuse the same few colours across fills, strokes, and gradients. Relative colour lets you define those relationships once and reuse them everywhere — much like animators reused backgrounds to create new scenes.</blockquote><p>Change the foundation colour once, and every derived colour updates automatically, without recalculating anything by hand. Outside of animated graphics, I could use this same approach to define colours for the states of interactive elements such as buttons and links.</p><p>The foundation colour I used in my “Lullabye-Bye Bear” Toon Title is a cyan-looking blue. The background is a radial gradient between my foundation and a darker version.</p><figure><a href="https://stuffandnonsense.co.uk/toon-titles/24b.html"></img></a><figcaption>View this on my <a href="https://stuffandnonsense.co.uk/toon-titles/24b.html">Toon Titles website</a>. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/12-toon-titles-website.png">Large preview</a>)</figcaption></figure><p>To create alternative versions with entirely different moods, I only need to change the foundation colour:</p><pre><code>--foundation: #5accd6;
--grad-end: var(--foundation);
--grad-start: oklch(from var(--foundation)
  calc(l - 0.2357) calc(c * 0.833) h);
</code></pre><figure><a href="https://stuffandnonsense.co.uk/toon-titles/24b.html"></img></a><figcaption>Use the colour picker on my <a href="https://stuffandnonsense.co.uk/toon-titles/24b.html">Toon Titles website</a> to see this in action. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/13-toon-titles-website.png">Large preview</a>)</figcaption></figure><p>To bind those custom properties to my SVG gradient without duplicating colour values, I replaced hard-coded <code>stop-color</code> values with inline styles:</p><div><pre><code><defs>
  <radialGradient id="bg-grad" […]>
    <stop offset="0%" style="stop-color: var(--grad-end);" />
    <stop offset="100%" style="stop-color: var(--grad-start);" />
  </radialGradient>
</defs>
</code></pre></div><pre><code><path fill="url(#bg-grad)" fill="#5DCDD8" d="[...]"/>
</code></pre><p>Next, I needed to ensure that my <a href="https://stuffandnonsense.co.uk/toon-text/index.html">Toon Text</a> always contrasts with whatever foundation colour I choose. A <code>180deg</code> hue rotation produces a complementary colour that certainly pops — but can vibrate uncomfortably:</p><pre><code>.text-light {
  fill: oklch(from var(--foundation)
    l c calc(h + 180));
}
</code></pre><p>A <code>90°</code> shift produces a vivid secondary colour without being fully complementary:</p><pre><code>.text-light {
  fill: oklch(from var(--foundation)
    l c calc(h - 90));
}
</code></pre><p>My recreation of Quick Draw McGraw’s 1959 Toon Title “El Kabong“ uses the same techniques but with a more varied palette. For example, there’s another radial gradient between the foundation colour and a darker shade.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/14-quick-draw-mcgraw.png"></img></a><figcaption>View this on my <a href="https://stuffandnonsense.co.uk/toon-titles/quick-draw-4b.html">Toon Titles website</a>. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/14-quick-draw-mcgraw.png">Large preview</a>)</figcaption></figure><figure><a href="https://stuffandnonsense.co.uk/toon-titles/quick-draw-4b.html"></img></a><figcaption>Use the colour picker on my <a href="https://stuffandnonsense.co.uk/toon-titles/quick-draw-4b.html">Toon Titles website</a> to see this in action. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/15-quick-draw-mcgraw-toon-titles.png">Large preview</a>)</figcaption></figure><p>The building and tree in the background are simply different shades of the same foundation colour. For those paths, I needed two additional <code>fill</code> colours:</p><pre><code>.bg-mid {
  fill: oklch(from var(--foundation)
    calc(l - 0.04) calc(c * 0.91) h);
}

.bg-dark {
  fill: oklch(from var(--foundation)
    calc(l - 0.12) calc(c * 0.64) h);
}
</code></pre><h2 id="when-the-foundations-start-to-move">When The Foundations Start To Move</h2><p>So far, everything I’ve shown has been static. Even when someone uses a colour picker to change the foundation colour, that change happens instantly. But animated graphics rarely stand still — the clue is in the name. So, if colour is part of the system, there’s no reason it can’t animate, too.</p><p>To animate the foundation colour, I first need to split it into its OKLCH channels — lightness, chroma, and hue. But there’s an important extra step: I need to register those values as <em>typed</em> custom properties. But what does that mean?</p><p>By default, a browser doesn’t know whether a CSS custom property value represents a colour, length, number, or something else entirely. That often means <a href="https://css-tricks.com/what-you-need-to-know-about-css-color-interpolation/">they can’t be interpolated smoothly during animation</a>, and jump from one value to the next.</p><p>Registering a custom property tells the browser the type of value it represents and how it should behave over time. In this case, I want the browser to treat my colour channels as numbers so they can be animated smoothly.</p><pre><code>@property --f-l {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.40;
}

@property --f-c {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.11;
}

@property --f-h {
  syntax: "<number>";
  inherits: true;
  initial-value: 305;
}
</code></pre><p>Once registered, these custom properties behave like native CSS. The browser can interpolate them frame-by-frame. I then rebuild the foundation colour from those channels:</p><pre><code>--foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
</code></pre><p>This makes the foundation colour become animatable, just like any other numeric value. Here’s a simple “breathing” animation that gently shifts lightness over time:</p><pre><code>@keyframes breathe {
  0%, 100% { --f-l: 0.36; }
  50% { --f-l: 0.46; }
}

.toon-title {
  animation: breathe 10s ease-in-out infinite;
}
</code></pre><p>Because every other colour in fills, gradients, and strokes is derived from <code>--foundation</code>, they all animate together, and nothing needs to be updated manually.</p><h2 id="one-animated-colour-many-effects">One Animated Colour, Many Effects</h2><p>At the start of this process, I wondered whether CSS relative colour values could offer more possibilities while also making them simpler to implement. I recently added a new gold mine background to my website’s <a href="https://stuffandnonsense.co.uk/contact">contact page</a>, and the first iteration included oil lamps that glow and swing.</p><figure><a href="https://stuffandnonsense.co.uk/contact"></img></a><figcaption>View this animated SVG on <a href="https://stuffandnonsense.co.uk/contact">my website</a>. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/16-gold-mine-scene.png">Large preview</a>)</figcaption></figure><p>I wanted to explore how animating CSS relative colours could make the mine interior more realistic by tinting it with colours from the lamps. I wanted them to affect the world around them, the way real light does. So, rather than animating multiple colours, I built a tiny lighting system that animates just one colour.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/17-overlay-layer-svg.png"></img></a><figcaption>Adding an overlay layer to my SVG. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/17-overlay-layer-svg.png">Large preview</a>)</figcaption></figure><p>My first task was to slot an overlay layer between the background and my lamps:</p><pre><code><path 
  id="overlay"
  fill="var(--overlay-tint)" 
  [...] 
  style="mix-blend-mode: color"
/>
</code></pre><p>I used <code>mix-blend-mode: color</code> because that tints what’s beneath it while preserving the underlying luminance. As I only want the overlay to be visible when animations are turned on, I made the overlay opt-in:</p><pre><code>.svg-mine #overlay {
  display: none;
}
  
@media (prefers-reduced-motion: no-preference) {
  .svg-mine[data-animations=on] #overlay {
    display: block;
    opacity: 0.5;
  }
}
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/18-overlay-gold-mine-scene.png"></img></a><figcaption>The overlay layer tints what’s beneath it. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/18-overlay-gold-mine-scene.png">Large preview</a>)</figcaption></figure><p>The overlay was in place, but not yet connected to the lamps. I needed a light source. My lamps are simple, and each one contains a <code>circle</code> element that I blurred with a filter. The <code>filter</code> produces a very soft blur over the entire circle.</p><div><pre><code><filter id="lamp-glow-1" x="-120%" y="-120%" width="340%" height="340%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="56"/>
</filter>
</code></pre></div><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/19-oil-lamps.png"></img></a><figcaption>Adding oil lamps to my scene. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/19-oil-lamps.png">Large preview</a>)</figcaption></figure><p>Instead of animating the overlay and lamps separately, I animate a single “flame” colour token and derive everything else from that. First, I register three typed custom properties for OKLCH channels:</p><pre><code>@property --fl-l {
  syntax: "<number>"; 
  inherits: true;
  initial-value: 0.86;
}
@property --fl-c {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.12;
}
@property --fl-h {
  syntax: "<number>";
  inherits: true;
  initial-value: 95;
}
</code></pre><p>I animated those channels, deliberately pushing a few frames towards orange so the flicker reads clearly as firelight:</p><div><pre><code>@keyframes flame {
  0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; }
  6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; }
  12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; }
  18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; }
  24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; }
  30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; }
  36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; }
  44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; }
  52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; }
  60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; }
  68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; }
  76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; }
  84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; }
  92% { --fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; }
}
</code></pre></div><p>Then I scoped that animation to the SVG, so the shared variables are available to both the lamps and my overlay:</p><div><pre><code>@media (prefers-reduced-motion: no-preference) {
  .svg-mine[data-animations=on] {
    animation: flame 3.6s infinite linear;
    isolation: isolate;

    /* Build a flame colour from animated channels */
    --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));

    /* Lamp colour derived from flame */
    --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
  
    /* Overlay tint derived from the same flame */
    --overlay-tint: oklch(from var(--flame)
      calc(l + 0.06) calc(c * 0.65) calc(h - 10));
  }
}
</code></pre></div><p>Finally, I applied those derived colours to the glowing lamps and the overlay they affect:</p><pre><code>@media (prefers-reduced-motion: no-preference) {
  .svg-mine[data-animations=on] #mine-lamp-1 > circle,
  .svg-mine[data-animations=on] #mine-lamp-2 > circle {
    fill: var(--lamp-core);
  }
  
  .svg-mine[data-animations=on] #overlay {
    display: block;
    fill: var(--overlay-tint);
    opacity: 0.5;
  }
}
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/20-lamps-overlay-connected.png"></img></a><figcaption>The lamps and overlay are connected. (<a href="https://files.smashing.media/articles/smashing-animations-part-8-css-relative-colour/20-lamps-overlay-connected.png">Large preview</a>)</figcaption></figure><p>When the flame shifts toward orange, the lamps warm up, and the scene warms with them. When the flame cools, everything settles together. The best part is that nothing is written manually. If I change the foundation colour or tweak the flame animation ranges, the entire lighting system updates simultaneously.</p><p>You can see <a href="https://stuffandnonsense.co.uk/contact">the final result on my website</a>.</p><h2 id="reuse-repurpose-revisited">Reuse, Repurpose, Revisited</h2><p>Those Hanna-Barbera animators were forced to repurpose elements out of necessity, but I reuse colours because it makes my work <strong>more consistent</strong> and <strong>easier to maintain</strong>. CSS relative colour values allow me to:</p><ul><li>Define a single foundation colour,</li><li>Describe how other colours relate to it,</li><li>Reuse those relationships everywhere, and</li><li>Animate the system by changing one value.</li></ul><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aRelative%20colour%20doesn%e2%80%99t%20just%20make%20theming%20easier.%20It%20encourages%20a%20way%20of%20thinking%20where%20colour,%20like%20motion,%20is%20intentional%20%e2%80%94%20and%20where%20changing%20one%20value%20can%20transform%20an%20entire%20scene%20without%20rewriting%20the%20work%20beneath%20it.%0a&url=https://smashingmagazine.com%2f2026%2f01%2fsmashing-animations-part-8-css-relative-colour%2f">Relative colour doesn’t just make theming easier. It encourages a way of thinking where colour, like motion, is intentional — and where changing one value can transform an entire scene without rewriting the work beneath it.</a></p></blockquote><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>UX And Product Designer’s Career Paths In 2026</h1>
<p>hello@smashingmagazine.com (Vitaly Friedman) — Mon, 12 Jan 2026 10:00:00 GMT</p>
<h1>UX And Product Designer’s Career Paths In 2026 — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/career">Career</a>,
<a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/inspiration">Inspiration</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>How to shape your career path for 2026, with decision trees for designers and a UX skills self-assessment matrix. The only limits for tomorrow are the doubts we have today. Brought to you by <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, a <strong>friendly video course on UX</strong> and design patterns by Vitaly.</section></div><p>As the new year begins, I often find myself in a strange place — reflecting back at the previous year or looking forward to the year ahead. And as I speak with colleagues and friends at the time, it typically doesn’t take long for a conversation about <strong>career trajectory</strong> to emerge.</p><p>So I thought I’d share a few thoughts on <strong>how to shape your career path</strong> as we are looking ahead to 2026. Hopefully you’ll find it useful.</p><h2 id="run-a-retrospective-for-last-year">Run A Retrospective For Last Year</h2><p>To be honest, for many years, I was mostly reacting. Life was happening <em>to</em> me, rather than me shaping the life that I was living. I was <strong>making progress reactively</strong> and I was looking out for all kinds of opportunities. It was easy and quite straightforward — I was floating and jumping between projects and calls and making things work as I was going along.</p><figure><a href="https://www.linkedin.com/posts/lilyyue_uxdesign-careergrowth-productdesign-activity-7343261653901144066-8nLf?utm_source=social_share_send&utm_medium=member_desktop_web&rcm=ACoAABGhVGkBT-YMeCMZd9fKgSaE_H8BrQil438"></img></a><figcaption><a href="https://www.linkedin.com/posts/lilyyue_uxdesign-careergrowth-productdesign-activity-7343261653901144066-8nLf/">Diverse career paths for UX Designers</a>, a helpful overview by Lili Yue. You might find yourself doing a little bit of everything in this overview — but you need to know where you want to go next. (<a href="https://files.smashing.media/articles/product-designer-career-paths/4-career-paths-ux-designers.jpeg">Large preview</a>)</figcaption></figure><p>Years ago, my wonderful wife introduced <strong>one little annual ritual</strong> which changed that dynamic entirely. By the end of each year, we sit with nothing but paper and pencil and run a thorough <strong>retrospective of the past year</strong> — successes, mistakes, good moments, bad moments, things we loved, and things we wanted to change.</p><p>We look back at our memories, projects, and events that stood out that year. And then we take notes for where we stand in terms of personal growth, professional work, and social connections — and <strong>how we want to grow</strong>.</p><p>These are <strong>the questions</strong> I’m trying to answer there:</p><ul><li>What did I find <strong>most rewarding</strong> and fulfilling last year?</li><li>What <strong>fears and concerns slowed me down</strong> the most?</li><li>What could I <strong>leave behind</strong>, give away or simplify?</li><li>What tasks would be <strong>good to delegate</strong> or automate?</li><li>What are my <strong>3 priorities to grow</strong> this upcoming year?</li><li>What <strong>times do I block</strong> in my calendar for my priorities?</li></ul><p>It probably sounds quite cliche, but these 4–5h of our time every year set a <strong>foundation for changes</strong> to introduce for the next year. This little exercise shapes the trajectory that I’ll be designing and prioritizing next year. I can’t recommend it enough.</p><h2 id="ux-skills-self-assessment-matrix">UX Skills Self-Assessment Matrix</h2><p>Another little tool that I found helpful for professional growth is <a href="https://www.figma.com/community/file/1142203484282738794/design-skills-matrix">UX Skills Self-Assessment Matrix</a> (Figma template) by Maigen Thomas. It’s a neat little tool that’s designed to help you understand what you’d like to do more of, what you’d prefer to do less, and where your <strong>current learning curve</strong> lies vs. where you feel <strong>confident in your expertise</strong>.</p><figure><a href="https://www.figma.com/community/file/1142203484282738794/design-skills-matrix"></img></a><figcaption><a href="https://www.figma.com/community/file/1142203484282738794/design-skills-matrix">A neat little tool</a> to identify where you stand, what you want to do less of, more of, and what you’d like to learn. (<a href="https://files.smashing.media/articles/product-designer-career-paths/2-design-skills-self-assessment-matrix.jpeg">Large preview</a>)</figcaption></figure><p>The exercise typically takes around 20–30 minutes, and it helps identify the <strong>UX skills with a sweet spot</strong> — typically the upper half of the canvas. You’ll also pinpoint areas where you’re improving, and those where you are already pretty good at. It’s a neat reality check — and a great reminder once you review it year after year. Highly recommended!</p><h2 id="ux-career-levels-for-design-systems-teams">UX Career Levels For Design Systems Teams</h2><p>A while back, <a href="https://www.linkedin.com/in/javiercuello/?lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3BarGUwB3ET%2FyNMblHCHHbCg%3D%3D">Javier Cuello</a> has put together a Career Levels For Design System Teams (Figma Kit), a neat little helper for product designers looking to transition into design systems teams or managers building a career matrix for them. The model maps progression levels (Junior, Semi-Senior, Senior, and Staff) to key development areas, with skills and responsibilities required at each stage.</p><figure><a href="https://www.figma.com/community/file/1444342030560583543/design-systems-product-design-career-levels"></img></a><figcaption>Career Levels For Design System Teams (Figma Kit). Kindly put together by Javier Cuello. (<a href="https://files.smashing.media/articles/product-designer-career-paths/5-ux-career-levels.jpeg">Large preview</a>)</figcaption></figure><p>What I find quite valuable in Javier’s model is the mapping of strategy and impact, along with systematic thinking and governance. While as designers we often excel at tactical design — from elegant UI components to file organization in Figma — we often lag a little bit behind in strategic decisions.</p><p>To a large extent, the difference between levels of seniority is moving from tactical initiatives to strategic decisions. It’s proactively looking for organizational challenges that a system can help with. It’s finding and inviting key people early. It’s also about embedding yourself in other teams when needed.</p><p>But it’s also keeping an eye out for situations when design systems fail, and paving the way to make it more difficult to fail. And: adapting the workflow around the design system to ship on a tough deadline when needed, but with a viable plan of action on how and when to pay back accumulating UX debt.</p><h2 id="find-your-product-design-career-path">Find Your Product Design Career Path</h2><p>When we speak about career trajectory, it’s almost always assumed that the career progression inevitably leads to <strong>management</strong>. However, this hasn’t been a path I preferred, and it isn’t always the ideal path for everyone.</p><p>Personally, I prefer to work on intricate fine details of UX flows and deep dive into <strong>complex UX challenges</strong>. However, eventually it might feel like you’ve stopped growing — perhaps you’ve hit a ceiling in your organization, or you have little room for exploration and learning. So where do you go from there?</p><figure><a href="https://uxdesign.cc/fixing-product-design-career-paths-with-the-mirror-model-76152b7e547?sk=v2%2F0a6cb162-4def-4f1c-ac5e-b145597646c7"></img></a><figcaption><a href="https://uxdesign.cc/fixing-product-design-career-paths-with-the-mirror-model-76152b7e547?sk=v2%2F0a6cb162-4def-4f1c-ac5e-b145597646c7">The Mirror Model</a> (<a href="https://drive.google.com/file/d/1BePJyrd8q0D1mVgIV2h8ghds8IbbyzBR/view">PDF</a>) is a helpful way to visualize creative and managerial paths with equivalent influence and compensation. (<a href="https://files.smashing.media/articles/product-designer-career-paths/3-producst-design-career-paths-mirror-model.jpeg">Large preview</a>)</figcaption></figure><p>A helpful model to think about your next steps is to consider Ryan Ford’s <a href="https://uxdesign.cc/fixing-product-design-career-paths-with-the-mirror-model-76152b7e547?sk=v2%2F0a6cb162-4def-4f1c-ac5e-b145597646c7">Mirror Model</a>. It explores <strong>career paths and expectations</strong> that you might want to consider to advocate for a position or influence that you wish to achieve next.</p><p>That’s typically something you might want to study and <strong>decide on your own first</strong>, and then bring it up for discussion. Usually, there are internal opportunities out there. So before changing the company, you can switch teams, or you could shape a more fulfilling role <strong>internally</strong>.</p><p>You just need to find it first. Which brings us to the next point.</p><h2 id="proactively-shaping-your-role">Proactively Shaping Your Role</h2><p>I keep reminding myself of <a href="https://www.linkedin.com/in/jasonmesut?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAAAawX0BwaORuqGb58dyVh03pJIPpuU6s68&lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3BarGUwB3ET%2FyNMblHCHHbCg%3D%3D">Jason Mesut</a>’s observation that when we speak about career ladders, it assumes that we can either go up, down, or fall off. But in reality, you can <strong>move up, move down, and move sideways</strong>. As Jason says, “promoting just the vertical progression doesn’t feel healthy, especially in such a diverse world of work, and diverse careers ahead of us all.”</p><p>So, in the attempt to climb up, perhaps consider also moving sideways. <strong>Zoom out and explore</strong> where your interests are. Focus on the much-needed intersection between business needs and user needs. Between problem space and solution space. Between strategic decisions and operations. Then zoom in. In the end, you might not need to climb anything — but rather just find that right spot that brings your expertise to light and makes the biggest impact.</p><figure><a href="https://www.linkedin.com/posts/lilyyue_uxdesign-careerpath-careergrowth-activity-7345798373368578050-6c77?utm_source=social_share_send&utm_medium=member_desktop_web&rcm=ACoAABGhVGkBT-YMeCMZd9fKgSaE_H8BrQil438"></img></a><figcaption><a href="https://www.linkedin.com/feed/update/urn:li:activity:7345798373368578050/">A career decision map for UX Designers</a>. Kindly put together by Lily Yue. (<a href="https://files.smashing.media/articles/product-designer-career-paths/1-career-decision-map-ux-designers.jpeg">Large preview</a>)</figcaption></figure><p>Sometimes these roles might involve acting as a <strong>“translator”</strong> between design and engineering, specializing in UX and accessibility. They could also involve <strong>automating design processes</strong> with AI, improving workflow efficiency, or focusing on internal search UX or legacy systems.</p><p>These roles are never advertised, but they have a <strong>tremendous impact</strong> on a business. If you spot such a gap and proactively bring it to senior management, you might be able to shape a role that brings your strengths into the spotlight, rather than trying to fit into a predefined position.</p><h2 id="what-about-ai">What About AI?</h2><p>One noticeable skill that is worth sharpening is, of course, around <strong>designing AI experiences</strong>. The point isn’t about finding ways to replace design work with AI automation. Today, it seems like people crave nothing more than actual human experience — created by humans, with attention to humans’ needs and intentions, designed and built and tested with humans, embedding human values and working well for humans.</p><figure><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-ai-design-activity-7340989532290306051-fLtc/?utm_source=share&utm_medium=member_desktop&rcm=ACoAAACDcgQBa_vsk5breYKwZAgyIhsHtJaFbL8"></img></a><figcaption>Design Patterns For AI Interfaces, a quick overview by Sharang Sharma. (<a href="https://files.smashing.media/articles/product-designer-career-paths/6-design-patterns-ai-interfaces.jpeg">Large preview</a>)</figcaption></figure><p>If anything, we should be more <strong>obsessed with humans</strong>, not with AI. If anything, AI amplifies the need for authenticity, curation, critical thinking, and strategy. And that’s a skill that will be very much needed in 2026. We need designers who can design beautiful AI experiences (and frankly, I do have a <a href="https://ai-design-patterns.com/">whole course</a> on that) — experiences people understand, value, use, and <strong>trust</strong>.</p><p>No technology can create <strong>clarity, structure, trust, and care</strong> out of poor content, poor metadata, and poor value for end users. If we understand the fundamentals of good design, and then design with humans in mind, and consider humans’ needs and wants and struggles, we can help users and businesses bridge that gap in a way AI never could. And that’s what you and perhaps your renewed role could bring to the table.</p><h2 id="wrapping-up">Wrapping Up</h2><p>The most important thing about all these little tools and activities is that they help you <strong>get more clarity</strong>. Clarity on where you currently stand and where you actually want to grow towards.</p><p>These are <strong>wonderful conversation starters</strong> to help you find a path you’d love to explore, on your own or with your manager. However, just one thing I’d love to emphasize:</p><blockquote>Absolutely, feel free to refine the role to amplify your strengths, rather than finding a way to match a particular role perfectly.</blockquote><p>Don’t forget: you bring <strong>incredible value</strong> to your team and to your company. Sometimes it just needs to be highlighted or guided to the right spot to bring it into the spotlight.</p><p>You’ve got this — and happy 2026! ✊🏼✊🏽✊🏾</p><h2 id="meet-design-patterns-for-ai-interfaces">Meet “Design Patterns For AI Interfaces”</h2><p>Meet <strong>design patterns that work</strong> for AI products in <a href="https://ai-design-patterns.com/"><strong>Design Patterns For AI Interfaces</strong></a>, Vitaly’s shiny new <strong>video course</strong> with practical examples from real-life products — with a <a href="https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/">live UX training</a> happening soon. <a href="https://www.youtube.com/watch?v=jhZ3el3n-u0">Jump to a free preview</a>. Use code <strong>SNOWFLAKE</strong> to <strong>save 20%</strong> off!</p><p><figure><a href="https://ai-design-patterns.com/"></img></a><figcaption>Meet <a href="https://ai-design-patterns.com/">Design Patterns For AI Interfaces</a>, Vitaly’s video course on interface design & UX.</figcaption></figure></p><h2 id="useful-resources">Useful Resources</h2><ul><li><a href="https://www.figma.com/community/file/1142203484282738794/design-skills-matrix">UX Skills Self-Assessment Matrix (Figma template)</a>, by Maigen Thomas</li><li>“<a href="https://uxdesign.cc/fixing-product-design-career-paths-with-the-mirror-model-76152b7e547?sk=v2%2F0a6cb162-4def-4f1c-ac5e-b145597646c7">Product Designer’s Career Levels Paths</a>” + <a href="https://drive.google.com/file/d/1BePJyrd8q0D1mVgIV2h8ghds8IbbyzBR/view">PNG</a>, by Ryan Ford</li><li><a href="https://www.linkedin.com/feed/update/urn:li:activity:7345798373368578050/">Career Decision Map For UX Designers (PNG)</a>, by Lily Yue</li><li><a href="https://www.linkedin.com/posts/lilyyue_uxdesign-careergrowth-productdesign-activity-7343261653901144066-8nLf/">Diverse Career Paths For UX Designers (PNG)</a>, by Lily Yue</li><li><a href="https://medium.com/shapingdesign">Shaping Designers and Design Teams</a>, by Jason Mesut</li><li><a href="https://miro.com/templates/skills-map-design/">UX Skills Self-Assessment Map template (Miro)</a>, by Paóla Quintero</li><li><a href="https://www.nngroup.com/articles/skill-mapping/">UX Skill Mapping Template (Google Sheets)</a>, by Rachel Krause, NN/g</li><li>“<a href="https://shannonethomas.com/2023/08/08/growth-framework">Design Team’s Growth Matrix</a>”, by Shannon E. Thomas</li><li><a href="https://www.figma.com/community/file/1220482745322443565/figma-product-design-writing-career-levels">Figma Product Design & Writing Career Levels</a>, by Figma</li><li><a href="https://miro.com/templates/content-design-role-frameworks/">Content Design Role Frameworks</a>, by Tempo</li><li>“<a href="https://dscout.com/people-nerds/uxr-career-framework">UX Research Career Framework</a>”, by Nikki Anderson</li><li><a href="https://uxchrisnguyen.gumroad.com/l/uxcareerladder"><em>UX Career Ladders</em> (free eBook)</a>, by Christopher Nguyen</li><li><a href="https://docs.google.com/spreadsheets/d/1cNkL4nY3Z8vTyIpIsvqpaFortYZfF-VIoUE0mkbkRMo/edit?gid=0#gid=0">Product Design Level Expectations</a>, by Aaron James</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Penpot Is Experimenting With MCP Servers For AI-Powered Design Workflows</h1>
<p>hello@smashingmagazine.com (Daniel Schwarz) — Thu, 08 Jan 2026 08:00:00 GMT</p>
<h1>Penpot Is Experimenting With MCP Servers For AI-Powered Design Workflows — Smashing Magazine</h1><h2>By About The AuthorDesigner, dev, editor, writer, and nomad.
More about
Daniel ↬</h2><div><div id="article__content"><div><ul><li>6 min read</li><li><a href="http://www.smashingmagazine.com/category/workflow">Workflow</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span><a href="https://penpot.app/?utm_source=SmashingMagazine&utm_medium=Article&utm_campaign=MCPserver">Penpot</a> is experimenting with MCP (Model Context Protocol) servers, which could lead to designers and developers being able to perform tasks in Penpot using AI that’s able to understand and interact with Penpot design files. Daniel Schwarz explains how <a href="https://github.com/penpot/penpot-mcp">Penpot MCP</a> servers work, what they could mean for creating and managing designs in Penpot, and what you can do to help shape their development.</section></div><p>Imagine that your Penpot file contains a full icon set in addition to the design itself, which uses some but not all of those icons. If you were to ask an AI such as Claude or Gemini to export only the icons that are being used, it wouldn’t be able to do that. It’s not able to interact with Penpot files.</p><p>However, a <strong>Penpot MCP server</strong> can. It can perform a handpicked number of operations under set rules and permissions, especially since Penpot has an extensive API and even more so because it’s <strong>open-source</strong>.</p><p>The AI’s job is simply to understand your intent, choose the right operation for the MCP server to perform (an export in this case), and pass along any parameters (i.e., icons that are being used). The MCP server then translates this into a structured API request and executes it.</p><p>It might help to think of AI as a server in a restaurant that takes your order, the MCP server as both the menu and chef, and the API request as (hopefully) a hot pizza pie on a warm plate.</p><p>Why MCP servers, exactly? Well, Penpot isn’t able to understand your intent because it’s not an LLM, nor does it allow third-party LLMs to interact with your Penpot files for the security and privacy of your Penpot data. Although Penpot MCP servers do act as a <strong>secure bridge</strong>, translating AI intent into API requests using your Penpot files and data as context.</p><p>What’s even better is that because Penpot takes a <strong>design-expressed-as-code approach</strong>, designs can be programmatically created, edited, and analyzed on a granular level. It’s more contextual, more particular, and therefore more powerful in comparison to what other MCP servers offer, and <em>far</em> more thoughtful than the subpar ‘Describe → Generate’ AI workflow that I don’t think anybody really wants. <a href="https://penpot.app/blog/penpot-ai-whitepaper/">Penpot’s AI whitepaper</a> describes this as the bad approach and the ‘Convert to Code’ approach as the ugly approach, whereas MCP servers are more refined and adaptable.</p><h2 id="features-and-technical-details">Features And Technical Details</h2><p>Before we move on to use cases, here are some features and technical details that further explain how Penpot MCP servers work:</p><ul><li>Complies with MCP standards;</li><li>Integrates with the Penpot API for real-time design data;</li><li>Includes a Python SDK, REST API, plugin system, and CLI tools;</li><li>Works with any MCP-enabled AI assistant (Claude in VS Code, Claude in Cursor, Claude Desktop, etc.);</li><li>Supports sharing design context with AI models, and letting them see and understand components;</li><li>Facilitates communication with Penpot using natural language.</li></ul><p>What, then, could MCP servers enable us to do in Penpot, and what have existing experiments already achieved? Let’s take a look.</p><h2 id="penpot-mcp-server-use-cases">Penpot MCP Server Use-Cases</h2><p>If you just want to skip to what Penpot MCP servers can do, Penpot have a few <a href="https://drive.google.com/drive/u/0/folders/1CCuBqHEevWsp15bYkf3W7CLXLja5R_M_">MCP demos</a> stashed in a Google Drive that are more than worth watching. Penpot CEO Pablo Ruiz-Múzquiz mentioned that videos 03, 04, 06, 08, and 12 are their favorites.</p><p>An even faster way to summarize MCP servers is to <a href="https://www.youtube.com/watch?v=KNsvFc4Elfs&list=PLgcCPfOv5v57Sp_vY4VggqUpAbP5fTIkM">watch the unveiling from Penpot Fest 2025</a>.</p><figure></figure><p>Otherwise, let’s take a look at some of the more refined examples that Penpot demonstrated in their <a href="https://community.penpot.app/t/penpot-mcp-server-showcase-ask-for-help/10040?utm_source=SmashingMagazine&utm_medium=Article&utm_campaign=MCPserver">public showcase</a>.</p><h3 id="design-to-code-and-back-again-and-more">Design-to-Code and Back Again (and More)</h3><p>Running on from what I was saying earlier about how Penpot designs are expressed as code, this means that MCP servers can be used to convert design to code using AI, but also code to design, design to documentation, documentation to design system elements, design to code again <em>based</em> on said design system, and then completely new components based on said design system.</p><p>It sounds surreal, but the demo below shows off this <strong>transmutability</strong>, and it’s not from vague instruction but rather previous design choices, regardless of how they were expressed (design, code, or documentation). There are no surprises — these are simply the decisions that you would’ve made anyway based on previous decisions, executed swiftly.</p><p>In the demo, Juan de la Cruz García, Designer at Penpot, frictionlessly transmutes some simple components into documentation, design system elements, code, new components, and even a complete Storybook project like a piece of Play-Doh:</p><figure><p></p><figcaption>Quick demo: Penpot MCP server in action</figcaption></figure><h3 id="design-to-code-design-code-validation-and-simple-operations">Design-to-Code, Design/Code Validation, And Simple Operations</h3><p>In a similar demo below, Dominik Jain, Co-Founder at Oraios AI, creates a Node.js web app based on the design before updating the frontend styles, saves names and identifiers to memory to ensure smooth design-to-code translation before checking it for consistency, adds a comment next to the selected shape in Penpot, and then replaces a scribble in Penpot with an adapted component. There’s a lot happening here, but you can see exactly what Dominik is typing into Claude Desktop as well as Claude’s responses, and it’s <em>very</em> robust:</p><figure><p></p><figcaption>Penpot MCP Server: Developer Workflow. Applications</figcaption></figure><p>By the way, the previous demo used Claude in VS Code, so I should note that <strong>Penpot MCP servers are LLM-agnostic</strong>. Your tech stack is totally up to you. IvanTheGeek managed to <a href="https://community.penpot.app/t/penpot-mcp-server-showcase-ask-for-help/10040/3?utm_source=SmashingMagazine&utm_medium=Article&utm_campaign=MCPserver">set up their MCP server with the JetBrains Rider IDE and Junie AI</a>.</p><h3 id="more-use-cases">More Use Cases</h3><p>Translate a Penpot board to production-ready semantic HTML and modular CSS while leveraging any Penpot design tokens (remember that Penpot designs are already expressed as code, so this isn’t a shot in the dark):</p><figure></figure><p>Generate an interactive web prototype without changing the existing HTML:</p><figure></figure><p>As shown earlier, convert a scribble into a component, leveraging existing design and/or design system elements:</p><figure></figure><p>Create design system documentation from a Penpot file:</p><figure></figure><p>And here are some more use-cases from Penpot and the community:</p><ul><li>Advanced exports,</li><li>Search for design elements using natural language,</li><li>Pull data from external APIs using natural language,</li><li>Easily connect Penpot to other external tools,</li><li>Saving repetitive tasks to memory and executing them,</li><li>Visual regression testing,</li><li>Design consistency and redundancy checking,</li><li>Accessibility and usability analysis and feedback,</li><li>Design system compliance checking,</li><li>Guideline compliance checking (brand, content, etc.),</li><li>Monitor adoption and usage with design analytics,</li><li>Automatically keep documentation in sync with design,</li><li>Design file organization (e.g., tagging/categorization).</li></ul><p>Essentially, Penpot MCP servers lead the way to an <strong>infinite number of workflows</strong> thanks to the efficiency and ease of your chosen LLM/LLM client, but without exposing your data to it.</p><h2 id="what-would-you-use-mcp-servers-for">What Would You Use MCP Servers For?</h2><p>Penpot MCP servers aren’t even at the beta stage, but it is an <strong>active experiment</strong> that you can be a part of. Penpot users have already begun exploring use cases for MCP servers, but Penpot wants to see more. To ensure that the next generation of design tools meets the needs of designers, developers, and product teams in general, they must be built <strong>collectively</strong> and <strong>collaboratively</strong>, especially where AI is concerned.</p><p><strong>Note</strong>: <em>Penpot is looking for beta testers eager to explore, experiment with, and help refine Penpot’s MCP Server. To join, write to <a href="mailto:support@penpot.app">support@penpot.app</a> with the subject line “MCP beta test volunteer.”</em></p><p>Is there anything that you feel Penpot MCP servers could do that current tools aren’t able to do well enough, fast enough, or aren’t able to do at all?</p><p>You can learn <a href="https://github.com/penpot/penpot-mcp">how to set up a Penpot MCP server right here</a> and start tinkering today, or if your brain’s buzzing with ideas already, Penpot want you to <a href="https://community.penpot.app/t/penpot-mcp-server-showcase-ask-for-help/10040?utm_source=SmashingMagazine&utm_medium=Article&utm_campaign=MCPserver">join the discussion</a>, share your feedback, and talk about your use-cases. Alternatively, the comment section right below isn’t a bad place to start either!</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Pivoting Your Career Without Starting From Scratch</h1>
<p>hello@smashingmagazine.com (Joas Pambou) — Wed, 07 Jan 2026 10:00:00 GMT</p>
<h1>Pivoting Your Career Without Starting From Scratch — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>14 min read</li><li><a href="http://www.smashingmagazine.com/category/career">Career</a>,
<a href="http://www.smashingmagazine.com/category/skills">Skills</a>,
<a href="http://www.smashingmagazine.com/category/communication">Communication</a>,
<a href="http://www.smashingmagazine.com/category/inspiration">Inspiration</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Most developers spend their days fixing bugs, shipping features, and jumping into the next sprint without even thinking about it. After a while, you begin to ask yourself, “Is this still what I want to be doing?” This article looks at how you can move into a new direction in your career without starting from scratch, and how the skills you already use, like problem-solving, communication, and empathy, can open new doors.</section></p><p>Has work felt “different” to you? You show up, do your work, fix what needs fixing, and get the job done, but the excitement isn’t quite the same anymore. Maybe the work has become too routine, or maybe you’ve grown in a way your role hasn’t kept up with. You catch yourself thinking, <em>“I’ve been doing this for years, but where do I go from here?”</em></p><p>It’s not always about the burnouts or frustrations. Sometimes it’s just <strong>curiosity</strong>. You’ve learned a lot, built things, solved problems, and now a small part of you wants to see what else you can do. Maybe the rise of AI is making you look at your job differently, or maybe you feel ready for a new kind of challenge that does not look like your current day-to-day.</p><p>I have seen many people across different fields go through this. Developers moving into product work, designers shifting to UX research, engineers getting into teaching, or support folks building communities. Everyone reaches that point where they want their work to feel meaningful again.</p><p>The good thing is you are not starting from zero. The experience you already have, like solving problems, making decisions, working, and communicating with people, those are real, valuable skills that carry over anywhere. Most of the time, the next step is not about leaving tech behind. It’s about finding where your skills make the most sense next.</p><p>This article is about that: How to rethink your path when things start to feel a bit stale, and how to move toward something new without losing everything you’ve built so far.</p><p>When people start thinking about changing careers, the first thing they usually do is focus on what they do not have. The missing skills, the new tools they need to learn, or how far behind they feel. It is a normal reaction, but it is not always the best place to begin.</p><p>Instead, try looking at what is already there. <strong>You have probably built more useful skills than you realize.</strong> Many of us get used to describing ourselves by our job titles, such as developer, designer, or analyst, but those titles do not fully explain what we actually do. They just tell us where we sit on a team. The real story is the work behind the title.</p><p>Think of a developer, for example. On paper, the job is to write code, but in reality, a developer spends most of their time solving problems, making decisions, and building systems that make sense to other people. The same goes for designers. They do not just make things look good; they pay attention to how people think, how they move through a screen, and how to make something feel clear and simple.</p><blockquote>Your skills don’t disappear when your title changes. They just find new ways to show up.</blockquote><p>These are what people call <strong>transferable skills</strong>, but you do not need the fancy term to get the idea. These are abilities that stay useful no matter where you go. Problem-solving, curiosity, clear communication, empathy, and learning fast — these are the things that make you good at what you do, even if the tools or roles change.</p><p>You already use them more than you think. When you fix a bug, you are learning how to track a problem back to its roots. When you explain a technical idea to someone non-technical, you are practicing clarity. When you deal with tight deadlines, you are learning how to manage priorities. None of these disappear if you switch fields. You apply it somewhere else.</p><p>So, before you worry about what you do not know, take a moment to see what you already do well. Write it down if you have to. Not just the tasks, but the thinking behind them. That is where your real value is.</p><h2 id="four-real-world-paths-to-explore">Four Real-World Paths to Explore</h2><p>Once you start seeing your skills beyond your job title, you may realize how many directions you can actually take. The tech world keeps changing fast: tools change, teams change, new roles show up every year, and people move in ways they never planned.</p><p>Here are four real paths that many people in tech are taking today.</p><table><thead><tr><th>From</th><th>To</th><th>What Changes</th><th>Why It Works</th></tr></thead><tbody><tr><td><strong>Developer</strong></td><td><strong>Product Manager</strong></td><td>You move from building the product to shaping what gets built and why.</td><td>Developers already understand tradeoffs, user needs, and how features come together. That is product thinking in action.</td></tr><tr><td><strong>Engineer</strong></td><td><strong>Developer Advocate</strong></td><td>You focus less on code delivery and more on helping others succeed with your product.</td><td>You already know the technology inside out, so turning that knowledge into clear communication makes you a natural teacher.</td></tr><tr><td><strong>Back-end Engineer</strong></td><td><strong>Solutions Engineer</strong></td><td>You bring your problem-solving mindset to real client challenges.</td><td>It is not about selling, it is about understanding problems deeply and building trust through technical skill.</td></tr><tr><td><strong>Designer</strong></td><td><strong>UX Researcher or Service Designer</strong></td><td>You shift from visuals to understanding how people think, feel, and interact.</td><td>Good design starts with empathy, and that same skill fits perfectly in research and experience design.</td></tr></tbody></table><p>What many people discover when they take one of these steps is that their daily work changes, not their identity. The tools and routines might be different, but the core way they think and solve problems stays the same.</p><p>The biggest change is usually <strong>perspective</strong>. Instead of focusing on <em>how</em> something gets built, you begin to care more about <em>why</em> it matters, who it helps, and what impact it has. For many people, that shift often brings back the excitement they might have lost somewhere along the way.</p><h2 id="your-first-steps-towards-a-new-path">Your First Steps Towards A New Path</h2><p>When you find a direction that feels interesting, the next step is figuring out how to move toward it without losing your footing where you are. This is where curiosity turns into a plan.</p><h3 id="1-take-a-look-at-what-you-bring">1. Take A Look At What You Bring</h3><p>Start by checking your strengths. It does not have to be anything complex. Write down what you do well, what feels natural to you, and what people usually ask you for help with.</p><p>If you want a simple guide, <a href="https://www.learningpeople.com/uk/resources/guides/how-to-do-a-personal-skills-audit/?utm_source=chatgpt.com">Learning People</a> has a good breakdown for auditing your personal skills, including a template for identifying and evaluating your skills. Try filling it out; it’s well worth the few minutes it takes to complete.</p><p>After listing your strengths, try matching them with roles you’re curious about. For example, if you’re a developer who enjoys explaining things, that could connect well with mentoring, writing tutorials, or developer advocacy.</p><h3 id="2-learn-by-getting-close-to-it">2. Learn By Getting Close To It</h3><p>Job descriptions aren’t a perfect reflection of the realities of working a specific job. Talking with people who do that job will. So, reach out to people who already do what you’re interested in and ask them what their day-to-day looks like, what parts they enjoy, and what surprised them when they started.</p><p>And if possible, shadow someone or volunteer to help on a project. You don’t need a job change to explore something new. Short, hands-on experiences often teach you far more than any course, and many people are more than willing to take you under their wing, especially if you are offering your time and help in exchange for experience.</p><h3 id="3-build-proof-through-small-experiments">3. Build Proof Through Small Experiments</h3><p>Do something small that points in the direction you want to go. Maybe build a simple tool, write a short piece about what you’re learning, or help a local startup or open-source team. These don’t need to be perfect, but they just need to exist. They show direction, not completion.</p><p>Blogging has always been a perfect way to share your learning path and demonstrate your excitement about it. Plus, it establishes a track record of the knowledge you acquire.</p><h3 id="4-shape-your-story-as-you-grow">4. Shape Your Story As You Grow</h3><p>Instead of going with the idea of <em>“I’m switching careers,”</em> try thinking of it as <em>“I’m building on what I already do.”</em> That simple shift makes your journey clearer. It shows that you’re not starting from zero — you’re simply moving forward with more intention.</p><h2 id="navigating-the-mental-hurdles">Navigating The Mental Hurdles</h2><p>Every career shift, even when it feels exciting, comes with doubts. You might ask yourself, <em>“What if I’m not ready?”</em> or <em>“What if I can’t keep up?”</em> These thoughts are more common than people admit.</p><h3 id="imposter-syndrome">Imposter Syndrome</h3><p>One fear that shows up a lot is <a href="https://www.smashingmagazine.com/2022/07/overcoming-imposter-syndrome-developing-guiding-principles/">imposter syndrome</a>, that feeling you do not belong or that others are “better” or “smarter” at something than you. A recent piece from <a href="https://nordcloud.com/blog/mental-health-tech-imposter-syndrome/">Nordcloud</a> shared that more than half (58%) of IT professionals have felt this at some point in their career.</p><p>Comparison is a silent thief of confidence. Seeing others move faster can make you feel late. But everyone has different opportunities and different timing. What matters is the direction you are moving in, not how fast you go.</p><p>Here’s a thought worth remembering:</p><blockquote>People who have successfully changed their careers did not wait until they felt brave. Most of them still had doubts, but they just moved anyway, one small step at a time.</blockquote><h3 id="starting-again">Starting Again</h3><p>Another worry is the idea of starting over. You may feel that you’ve spent too many years in one space to move into another. But you are not returning to the beginning. You are moving with experience. Your habits, discipline, and problem-solving stay with you. They just show up in a different way.</p><p>It’s hard — and self-defeating — to imagine the work it takes to start all over again, especially when you have invested many years into what you do. But remember, it’s not always too late. Even <a href="https://www.joanwestenberg.com/remember-kurt-vonnegut-was-47/">Kurt Vonnegut was 47</a> when he wrote his seminal book, <em>Slaughterhouse Five</em>. You can still enjoy a very long and fruitful career, even in middle age.</p><h3 id="finances">Finances</h3><p>Money and stability also weigh a lot. The fear of losing income or looking uncertain can hold you back. And everyone’s money situation can be wildly different. You may have family to support, big loans to pay back, a lack of reserves, or any number of completely valid reasons for not wanting to give up a steady paycheck when you’re already receiving one.</p><p>A simple way to reduce that pressure is to start with small steps. Take a small side gig, try part-time work, or help on a short project in the area you’re curious about. These small tests give you clarity without shaking your foundation.</p><h2 id="conversations-with-industry-experts">Conversations With Industry Experts</h2><p>Below are short interviews with a handful of tech professionals serving in different roles. I wanted to talk with real people who have recently switched careers or are in the process of doing so because it helps illustrate the wide range of situations, challenges, and opportunities you might expect to encounter in a career change.</p><h3 id="thomas-dodoo-graphic-designer-5-years-of-experience">Thomas Dodoo: Graphic Designer, 5 Years Of Experience</h3><p></img><strong>Background:</strong> Thomas has an IT background. He first got interested in tech through game development in school, but later discovered that design was what he enjoyed more. Over time, he <a href="https://www.behance.net/thomasdodoo">moved fully into graphic design and branding</a>.</p><p><span>Question:</span> When you were starting, what confused you the most about choosing your path?</p><p><span>Thomas:</span> I wasn’t sure if I should stay with game development or follow design. I liked both, but design came more naturally, so I just kept learning little by little.</p><p><span>Question:</span> Was there a moment that made you take your design work more seriously?</p><p><span>Thomas:</span> Yes, the first time someone trusted me with their full brand. It made me realise this could be more than a hobby.</p><p><span>Question:</span> What skills did you carry over from development into your design work?</p><p><span>Thomas:</span> My background in development helped me think more logically about design. I break things down, think in steps, and focus on how things work, not just how they look.</p><h3 id="adwoa-mensah-product-manager-4-years-of-experience">Adwoa Mensah: Product Manager, 4 Years Of Experience</h3><p></img><strong>Background:</strong> Adwoa moved from software testing to product management.<p><span>Question:</span> When did you realize it was time to change careers?</p></p><p><span>Adwoa:</span> I realised it when I started caring more about <em>why</em> things were being built, not just checking if they worked. I enjoyed asking questions, giving input, and thinking about the bigger picture, and testing alone started to feel limiting.</p><p><span>Question:</span> What new skills did you need to learn to move into your new field?</p><p><span>Adwoa:</span> I had to learn how to communicate better, especially with designers, developers, and stakeholders. I also worked on planning, prioritising work, and understanding users more deeply. I learned most of this by watching product managers I worked with, asking questions, reading, and slowly taking on more responsibility on real projects.</p><h3 id="konstantinos-tournas-ai-engineer">Konstantinos Tournas: AI Engineer</h3><p></img><strong>Background:</strong> Konstantinos started programming with zero experience. He had no technical background at first, but he developed a strong interest in artificial intelligence and <a href="https://huggingface.co/tournas">worked his way into the field</a>.</p><p><span>Question:</span> What moments in your journey made you question yourself, and how did you move past them?</p><p><span>Konstantinos:</span> There were many moments in my career journey when I doubted myself, mainly because I started completely from zero, with no programming background and no connections in the field. What helped me push through was the motivation I had to learn and my genuine love for artificial intelligence. Every time I questioned myself, I reminded myself where I started and how far I had come in such a short amount of time.</p><p><span>Question:</span> When you feel pressure or doubt in your work, what helps you stay grounded?</p><p><span>Konstantinos:</span> When I feel pressure or self-doubt, I usually take a walk in nature. It helps me clear my mind and think creatively about how I can improve my work. In programming, the work rarely stops when your shift ends; problems in the code follow you throughout the day, and overcoming them requires creativity. Walking helps me reset and return with better ideas.</p><p><span>Question:</span> How do you deal with comparing yourself to others in your field?</p><p><span>Konstantinos:</span> Even though I’m competitive by nature, I constantly try to learn from others in my field. I don’t like showing off; I prefer listening. I know I can become great at what I do, but that doesn’t happen overnight. Comparison can be healthy, as long as it pushes you to grow rather than discourages you.</p><p><span>Question:</span> What would you say to someone who feels like they are not good enough to pursue the path they want?</p><p><span>Konstantinos:</span> I started programming without a university degree and with an entirely different background. Patience and persistence truly are the keys to success; it might sound cliché, but they were precisely what helped me. In less than six months, with long hours of focused work, consistency, and determination, I managed to get hired for my dream job simply because I believed in myself and wanted it badly enough.</p><h3 id="yinjian-huang-product-designer-ai-saas-5-years-of-experience">Yinjian Huang: Product Designer (AI, SaaS), 5 Years Of Experience</h3><p></img><strong>Background:</strong> Yinjian <a href="https://yinh.webflow.io/">works in product design</a> across AI, SaaS, and B2B products. Her work focuses on building early-stage products, shaping user experience, and working closely with engineering and product teams on AI-driven features.</p><p><span>Question:</span> Looking back, what is one decision you made that you think others in your field could learn from?</p><p><span>Yinjian:</span> Keep learning across disciplines: design, PM, AI, and engineering. The broader your fluency, the better you can design and reason holistically. Cross‑functional knowledge compounds and unlocks better product judgment.</p><p><span>Question:</span> What do you wish you had known about handling stress, workload, or expectations earlier in your career?</p><p><span>Yinjian:</span> Communicate early if the workload is too heavy or a deadline is at risk. Flag constraints, renegotiate scope, and make trade‑offs explicit. Early clarity beats late surprises.</p><p><span>Question:</span> How do you evaluate whether a new opportunity or challenge is worth taking on?</p><p><span>Yinjian:</span> I evaluate opportunities on three axes: the learning delta (skills I’ll gain), the people I’ll work with, and alignment with my interests.</p><p><span>Question:</span> What advice would you give to someone who wants to grow in your field but feels stuck or unsure of where to start?</p><p><span>Yinjian:</span> Growth can feel overwhelming at first because there’s so much to learn. Build a simple roadmap: start by making your craft solid, then expand adjacent skills. Find the best resources, practice relentlessly, and seek feedback on tight cycles. Momentum comes from small, consistent wins.</p><h2 id="the-bottom-line">The Bottom Line</h2><p>This whole piece is just a reminder that <strong>it’s fine to question where you are and want something different</strong>. Everyone hits that moment when things stop feeling exciting, and you start wondering what’s next. It doesn’t mean you’ve failed. It usually means you’re growing.</p><p>I wrote this because I’ve been in that space too, still figuring out what direction makes the most sense for me. So if you’re feeling stuck or unsure, I hope this gave you something useful. You don’t need to have everything sorted out right now. Just keep learning, stay curious, and take one small step at a time.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Countdown To New Adventures (January 2026 Wallpapers Edition)</h1>
<p>hello@smashingmagazine.com (Cosima Mielke) — Wed, 31 Dec 2025 09:00:00 GMT</p>
<h1>Countdown To New Adventures (January 2026 Wallpapers Edition) — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Whether 2026 has already begun as you’re reading this or you’re still waiting for the big countdown to start, how about some new wallpapers to get your desktop ready for the new year? We’ve got you covered.</section></p><p>A new year is the perfect opportunity to break free from routines, reset habits, and refine how you do things. And while you may have made plenty of New Year’s resolutions, sometimes it’s the <strong>small changes that work wonders</strong> — a tidy desktop and a new wallpaper, for example, that give you a little motivation boost when you need it.</p><p>In this post, you’ll find desktop wallpapers to accompany you through your <strong>first adventures of 2026</strong>, to make you smile, and to bring some happy pops of color to a cold and dark winter day. As every month since we started our monthly <a href="https://www.smashingmagazine.com/category/wallpapers">wallpapers series</a> more than 14 years ago, all of them were created with love by <strong>artists and designers from across the globe</strong> and can be downloaded for free.</p><p>A huge <strong>thank-you</strong> to everyone who shared their designs with us this month — you are truly <em>smashing</em>! Have a happy and healthy new year, everyone!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li><li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit your wallpaper design!</a></strong> 🎨<br></br>We are always <strong>looking for creative talent</strong> and would love to feature <em>your</em> desktop wallpaper in one of our upcoming posts. <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Join in ↬</a></li></ul><h2 id="moonwalker-01-2026">Moonwalker</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/jan-26-moonwalker-full.png" title="Moonwalker"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/jan-26-moonwalker-preview.png" title="Moonwalker - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-640x480.png" title="Moonwalker - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-800x480.png" title="Moonwalker - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-800x600.png" title="Moonwalker - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1024x768.png" title="Moonwalker - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1024x1024.png" title="Moonwalker - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1152x864.png" title="Moonwalker - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1280x720.png" title="Moonwalker - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1280x800.png" title="Moonwalker - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1280x960.png" title="Moonwalker - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1280x1024.png" title="Moonwalker - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1366x768.png" title="Moonwalker - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1400x1050.png" title="Moonwalker - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1440x900.png" title="Moonwalker - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1600x1200.png" title="Moonwalker - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1680x1050.png" title="Moonwalker - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1680x1200.png" title="Moonwalker - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1920x1080.png" title="Moonwalker - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1920x1200.png" title="Moonwalker - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-1920x1440.png" title="Moonwalker - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-2560x1440.png" title="Moonwalker - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/cal/jan-26-moonwalker-cal-3840x2160.png" title="Moonwalker - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-640x480.png" title="Moonwalker - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-800x480.png" title="Moonwalker - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-800x600.png" title="Moonwalker - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1024x768.png" title="Moonwalker - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1024x1024.png" title="Moonwalker - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1152x864.png" title="Moonwalker - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1280x720.png" title="Moonwalker - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1280x800.png" title="Moonwalker - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1280x960.png" title="Moonwalker - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1280x1024.png" title="Moonwalker - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1366x768.png" title="Moonwalker - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1400x1050.png" title="Moonwalker - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1440x900.png" title="Moonwalker - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1600x1200.png" title="Moonwalker - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1680x1050.png" title="Moonwalker - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1680x1200.png" title="Moonwalker - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1920x1080.png" title="Moonwalker - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1920x1200.png" title="Moonwalker - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-1920x1440.png" title="Moonwalker - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-2560x1440.png" title="Moonwalker - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/moonwalker/nocal/jan-26-moonwalker-nocal-3840x2160.png" title="Moonwalker - 3840x2160">3840x2160</a></li></ul><h2 id="home-office-01-2026">Home Office</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/jan-26-home-office-full.png" title="Home Office"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/jan-26-home-office-preview.png" title="Home Office - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-640x480.png" title="Home Office - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-800x480.png" title="Home Office - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-800x600.png" title="Home Office - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1024x768.png" title="Home Office - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1024x1024.png" title="Home Office - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1152x864.png" title="Home Office - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1280x720.png" title="Home Office - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1280x800.png" title="Home Office - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1280x960.png" title="Home Office - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1280x1024.png" title="Home Office - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1366x768.png" title="Home Office - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1400x1050.png" title="Home Office - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1440x900.png" title="Home Office - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1600x1200.png" title="Home Office - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1680x1050.png" title="Home Office - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1680x1200.png" title="Home Office - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1920x1080.png" title="Home Office - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1920x1200.png" title="Home Office - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-1920x1440.png" title="Home Office - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-2560x1440.png" title="Home Office - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/cal/jan-26-home-office-cal-3840x2160.png" title="Home Office - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-640x480.png" title="Home Office - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-800x480.png" title="Home Office - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-800x600.png" title="Home Office - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1024x768.png" title="Home Office - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1024x1024.png" title="Home Office - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1152x864.png" title="Home Office - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1280x720.png" title="Home Office - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1280x800.png" title="Home Office - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1280x960.png" title="Home Office - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1280x1024.png" title="Home Office - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1366x768.png" title="Home Office - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1400x1050.png" title="Home Office - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1440x900.png" title="Home Office - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1600x1200.png" title="Home Office - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1680x1050.png" title="Home Office - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1680x1200.png" title="Home Office - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1920x1080.png" title="Home Office - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1920x1200.png" title="Home Office - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-1920x1440.png" title="Home Office - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-2560x1440.png" title="Home Office - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/home-office/nocal/jan-26-home-office-nocal-3840x2160.png" title="Home Office - 3840x2160">3840x2160</a></li></ul><h2 id="winter-magic-at-home-01-2026">Winter Magic At Home</h2><p>Snow drifted quietly as a child and their loyal dog paused beside the glowing Christmas tree, each ornament holding a small piece of winter wonder. In that still moment, the cold faded away, replaced by warmth, curiosity, and the simple joy of being together. — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/jan-26-winter-magic-at-home-full.png" title="Winter Magic At Home"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/jan-26-winter-magic-at-home-preview.png" title="Winter Magic At Home - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-320x480.png" title="Winter Magic At Home - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-640x480.png" title="Winter Magic At Home - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-800x480.png" title="Winter Magic At Home - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-800x600.png" title="Winter Magic At Home - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1024x768.png" title="Winter Magic At Home - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1024x1024.png" title="Winter Magic At Home - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1152x864.png" title="Winter Magic At Home - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1280x720.png" title="Winter Magic At Home - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1280x800.png" title="Winter Magic At Home - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1280x960.png" title="Winter Magic At Home - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1280x1024.png" title="Winter Magic At Home - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1400x1050.png" title="Winter Magic At Home - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1440x900.png" title="Winter Magic At Home - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1600x1200.png" title="Winter Magic At Home - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1680x1050.png" title="Winter Magic At Home - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1680x1200.png" title="Winter Magic At Home - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1920x1080.png" title="Winter Magic At Home - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1920x1200.png" title="Winter Magic At Home - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-1920x1440.png" title="Winter Magic At Home - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/cal/jan-26-winter-magic-at-home-cal-2560x1440.png" title="Winter Magic At Home - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-320x480.png" title="Winter Magic At Home - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-640x480.png" title="Winter Magic At Home - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-800x480.png" title="Winter Magic At Home - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-800x600.png" title="Winter Magic At Home - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1024x768.png" title="Winter Magic At Home - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1024x1024.png" title="Winter Magic At Home - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1152x864.png" title="Winter Magic At Home - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1280x720.png" title="Winter Magic At Home - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1280x800.png" title="Winter Magic At Home - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1280x960.png" title="Winter Magic At Home - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1280x1024.png" title="Winter Magic At Home - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1400x1050.png" title="Winter Magic At Home - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1440x900.png" title="Winter Magic At Home - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1600x1200.png" title="Winter Magic At Home - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1680x1050.png" title="Winter Magic At Home - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1680x1200.png" title="Winter Magic At Home - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1920x1080.png" title="Winter Magic At Home - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1920x1200.png" title="Winter Magic At Home - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-1920x1440.png" title="Winter Magic At Home - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-26/winter-magic-at-home/nocal/jan-26-winter-magic-at-home-nocal-2560x1440.png" title="Winter Magic At Home - 2560x1440">2560x1440</a></li></ul><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="open-the-doors-of-the-new-year">Open The Doors Of The New Year</h2><p>January is the first month of the year and usually the coldest winter month in the Northern hemisphere. The name of the month of January comes from ‘ianua’, the Latin word for door, so this month denotes the door to the new year and a new beginning. Let’s open the doors of the new year together and hope it will be the best so far! — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/67eedea6-aadd-4f56-8202-eaa25e8dc617/jan-18-open-the-doors-of-the-new-year-full-opt.png" title="Open the Doors of the New Year"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9401740e-29f2-4dc7-828b-a7558c7e82a7/jan-18-open-the-doors-of-the-new-year-preview-opt.png" title="Open the Doors of the New Year - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-320x480.jpg" title="Open the Doors of the New Year - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-640x480.jpg" title="Open the Doors of the New Year - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-800x480.jpg" title="Open the Doors of the New Year - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-800x600.jpg" title="Open the Doors of the New Year - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1024x768.jpg" title="Open the Doors of the New Year - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1024x1024.jpg" title="Open the Doors of the New Year - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1152x864.jpg" title="Open the Doors of the New Year - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1280x720.jpg" title="Open the Doors of the New Year - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1280x800.jpg" title="Open the Doors of the New Year - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1280x960.jpg" title="Open the Doors of the New Year - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1280x1024.jpg" title="Open the Doors of the New Year - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1366x768.jpg" title="Open the Doors of the New Year - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1400x1050.jpg" title="Open the Doors of the New Year - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1440x900.jpg" title="Open the Doors of the New Year - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1600x1200.jpg" title="Open the Doors of the New Year - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1680x1050.jpg" title="Open the Doors of the New Year - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1680x1200.jpg" title="Open the Doors of the New Year - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1920x1080.jpg" title="Open the Doors of the New Year - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1920x1200.jpg" title="Open the Doors of the New Year - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-1920x1440.jpg" title="Open the Doors of the New Year - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-18/open-the-doors-of-the-new-year/nocal/jan-18-open-the-doors-of-the-new-year-nocal-2560x1440.jpg" title="Open the Doors of the New Year - 2560x1440">2560x1440</a></li></ul><h2 id="winter-leaves">Winter Leaves</h2><p>Designed by Nathalie Ouederni from France.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b6387e8e-0e34-450e-9755-5b4df61bfa7f/jan-15-winter-leaves-full-opt.png" title="Winter Leaves"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/742d1dcf-9594-4e83-9c0f-dad564dd3e97/jan-15-winter-leaves-preview-opt.png" title="Winter Leaves - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-320x480.jpg" title="Winter Leaves - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1024x768.jpg" title="Winter Leaves - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1280x1024.jpg" title="Winter Leaves - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1440x900.jpg" title="Winter Leaves - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1600x1200.jpg" title="Winter Leaves - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1680x1200.jpg" title="Winter Leaves - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-1920x1200.jpg" title="Winter Leaves - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/winter-leaves/nocal/jan-15-winter-leaves-nocal-2560x1440.jpg" title="Winter Leaves - 2560x1440">2560x1440</a></li></ul><h2 id="bird-bird-bird-bird">Bird Bird Bird Bird</h2><p>Just four birds, ready for winter. — Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-23-bird-bird-bird-bird-full-opt.png" title="Bird Bird Bird Bird"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-23-bird-bird-bird-bird-preview-opt.png" title="Bird Bird Bird Bird - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-800x480.jpg" title="Bird Bird Bird Bird - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-800x600.jpg" title="Bird Bird Bird Bird - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1024x600.jpg" title="Bird Bird Bird Bird - 1024x600">1024x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1024x768.jpg" title="Bird Bird Bird Bird - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1152x864.jpg" title="Bird Bird Bird Bird - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1280x720.jpg" title="Bird Bird Bird Bird - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1280x800.jpg" title="Bird Bird Bird Bird - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1280x960.jpg" title="Bird Bird Bird Bird - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1280x1024.jpg" title="Bird Bird Bird Bird - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1366x768.jpg" title="Bird Bird Bird Bird - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1400x1050.jpg" title="Bird Bird Bird Bird - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1440x900.jpg" title="Bird Bird Bird Bird - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1440x960.jpg" title="Bird Bird Bird Bird - 1440x960">1440x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1600x900.jpg" title="Bird Bird Bird Bird - 1600x900">1600x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1600x1200.jpg" title="Bird Bird Bird Bird - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1680x1050.jpg" title="Bird Bird Bird Bird - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1680x1200.jpg" title="Bird Bird Bird Bird - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1920x1080.jpg" title="Bird Bird Bird Bird - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1920x1200.jpg" title="Bird Bird Bird Bird - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-1920x1440.jpg" title="Bird Bird Bird Bird - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-2560x1440.jpg" title="Bird Bird Bird Bird - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-2560x1600.jpg" title="Bird Bird Bird Bird - 2560x1600">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-2880x1800.jpg" title="Bird Bird Bird Bird - 2880x1800">2880x1800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-3072x1920.jpg" title="Bird Bird Bird Bird - 3072x1920">3072x1920</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-3840x2160.jpg" title="Bird Bird Bird Bird - 3840x2160">3840x2160</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/bird-bird-bird-bird/nocal/jan-23-bird-bird-bird-bird-nocal-5120x2880.jpg" title="Bird Bird Bird Bird - 5120x2880">5120x2880</a></li></ul><h2 id="start-somewhere">Start Somewhere</h2><p>“If we wait until we’re ready, we’ll be waiting for the rest of our lives. Start today — somewhere, anywhere. — Designed by Shawna Armstrong from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1566d210-86b2-4b7c-9f6a-d9d23622e7fc/jan-15-start-somewhere-full-opt.png" title="Start Somewhere"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b558857-a5ad-464e-a87e-e8e315b5c250/jan-15-start-somewhere-preview-opt.png" title="Start Somewhere - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1280x720.jpg" title="Start Somewhere - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1280x800.jpg" title="Start Somewhere - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1280x960.jpg" title="Start Somewhere - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1280x1024.jpg" title="Start Somewhere - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1400x1050.jpg" title="Start Somewhere - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1440x900.jpg" title="Start Somewhere - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1600x1200.jpg" title="Start Somewhere - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1680x1050.jpg" title="Start Somewhere - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1920x1080.jpg" title="Start Somewhere - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1920x1200.jpg" title="Start Somewhere - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-1920x1440.jpg" title="Start Somewhere - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/start-somewhere/nocal/jan-15-start-somewhere-nocal-2560x1440.jpg" title="Start Somewhere - 2560x1440">2560x1440</a></li></ul><h2 id="squirrel-appreciation-day">Squirrel Appreciation Day</h2><p>Join us in honoring our furry little forest friends this Squirrel Appreciation Day! Whether they’re gathering nuts, building cozy homes, or brightening up winter days with their playful antics, squirrels remind us to treasure nature’s small wonders. Let’s show them some love today! — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2026/jan-25-celebrate-squirrel-appreciation-day-full-opt.png" title="Celebrate Squirrel Appreciation Day"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2026/jan-25-celebrate-squirrel-appreciation-day-preview-opt.png" title="Celebrate Squirrel Appreciation Day! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-320x480.png" title="Celebrate Squirrel Appreciation Day! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-640x480.png" title="Celebrate Squirrel Appreciation Day! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-800x480.png" title="Celebrate Squirrel Appreciation Day! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-800x600.png" title="Celebrate Squirrel Appreciation Day! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1024x768.png" title="Celebrate Squirrel Appreciation Day! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1024x1024.png" title="Celebrate Squirrel Appreciation Day! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1152x864.png" title="Celebrate Squirrel Appreciation Day! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1280x720.png" title="Celebrate Squirrel Appreciation Day! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1280x800.png" title="Celebrate Squirrel Appreciation Day! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1280x960.png" title="Celebrate Squirrel Appreciation Day! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1280x1024.png" title="Celebrate Squirrel Appreciation Day! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1400x1050.png" title="Celebrate Squirrel Appreciation Day! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1440x900.png" title="Celebrate Squirrel Appreciation Day! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1600x1200.png" title="Celebrate Squirrel Appreciation Day! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1680x1050.png" title="Celebrate Squirrel Appreciation Day! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1680x1200.png" title="Celebrate Squirrel Appreciation Day! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1920x1080.png" title="Celebrate Squirrel Appreciation Day! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1920x1200.png" title="Celebrate Squirrel Appreciation Day! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-1920x1440.png" title="Celebrate Squirrel Appreciation Day! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-25/celebrate-squirrel-appreciation-day/nocal/jan-25-celebrate-squirrel-appreciation-day-nocal-2560x1440.png" title="Celebrate Squirrel Appreciation Day! - 2560x1440">2560x1440</a></li></ul><h2 id="cold-penguins">Cold&mldr; Penguins!</h2><p>The new year is here! We waited for it like penguins. We look at the snow and enjoy it! — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d7634dd-0436-423c-8e77-46ace53bc658/jan-19-cold-penguins-full-opt.png" title="Cold Penguins"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/14ea6ccb-56ee-446b-a7b2-35c1db114e61/jan-19-cold-penguins-preview-opt.png" title="Cold Penguins - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-640x480.png" title="Cold Penguins - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-800x480.png" title="Cold Penguins - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1024x768.png" title="Cold Penguins - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1280x720.png" title="Cold Penguins - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1280x800.png" title="Cold Penguins - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1440x900.png" title="Cold Penguins - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1600x1200.png" title="Cold Penguins - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1920x1080.png" title="Cold Penguins - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-1920x1440.png" title="Cold Penguins - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/cold-penguins/nocal/jan-19-cold-penguins-nocal-2560x1440.png" title="Cold Penguins - 2560x1440">2560x1440</a></li></ul><h2 id="cheerful-chimes-city">Cheerful Chimes City</h2><p>Designed by <a href="https://www.designstudiouiux.com/">Design Studio</a> from India.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2025/jan-24-cheerful-chimes-city-full-opt.png" title="Cheerful Chimes City"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2025/jan-24-cheerful-chimes-city-preview-opt.png" title="Cheerful Chimes City - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1440x900.jpg" title="Cheerful Chimes City - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1600x1200.jpg" title="Cheerful Chimes City - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1680x1050.jpg" title="Cheerful Chimes City - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1680x1200.jpg" title="Cheerful Chimes City - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1920x1080.jpg" title="Cheerful Chimes City - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1920x1200.jpg" title="Cheerful Chimes City - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-1920x1440.jpg" title="Cheerful Chimes City - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/cheerful-chimes-city/nocal/jan-24-cheerful-chimes-city-nocal-2560x1440.jpg" title="Cheerful Chimes City - 2560x1440">2560x1440</a></li></ul><h2 id="boom">Boom!</h2><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f2e38180-788a-49de-a0e1-ea967496da96/jan-15-boom-full-opt.png" title="Boom"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ff3fbbc-6e4a-4ce3-9d95-b02aecc722c9/jan-15-boom-preview-opt.png" title="Boom. - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1024x768.jpg" title="Boom. - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1152x864.jpg" title="Boom. - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1280x720.jpg" title="Boom. - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1280x800.jpg" title="Boom. - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1280x960.jpg" title="Boom. - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1280x1024.jpg" title="Boom. - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1366x768.jpg" title="Boom. - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1400x1050.jpg" title="Boom. - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1440x900.jpg" title="Boom. - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1600x1200.jpg" title="Boom. - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1680x1050.jpg" title="Boom. - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1680x1200.jpg" title="Boom. - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1920x1080.jpg" title="Boom. - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1920x1200.jpg" title="Boom. - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-1920x1440.jpg" title="Boom. - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/boom/nocal/jan-15-boom-nocal-2560x1440.jpg" title="Boom. - 2560x1440">2560x1440</a></li></ul><h2 id="peaceful-mountains">Peaceful Mountains</h2><p>“When all the festivities are over, all we want is some peace and rest. That’s why I made this simple flat art wallpaper with peaceful colors.” — Designed by Jens Gilis from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b1e8397-afe8-4e7b-a391-3b79a809d1d0/jan-16-peaceful-mountains-nocal-full-opt.png" title="Peaceful Mountains"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2b108ba6-55e4-47b1-8c7d-6e230361204d/jan-16-peaceful-mountains-nocal-preview-opt.png" title="Peaceful Mountains - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-640x480.png" title="Peaceful Mountains - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-800x600.png" title="Peaceful Mountains - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1024x768.png" title="Peaceful Mountains - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1152x864.png" title="Peaceful Mountains - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1280x720.png" title="Peaceful Mountains - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1280x800.png" title="Peaceful Mountains - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1280x960.png" title="Peaceful Mountains - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1366x768.png" title="Peaceful Mountains - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1400x1050.png" title="Peaceful Mountains - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1440x900.png" title="Peaceful Mountains - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1600x1200.png" title="Peaceful Mountains - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1680x1050.png" title="Peaceful Mountains - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1920x1080.png" title="Peaceful Mountains - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1920x1200.png" title="Peaceful Mountains - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-1920x1440.png" title="Peaceful Mountains - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/peaceful-mountains/nocal/jan-16-peaceful-mountains-nocal-2560x1440.png" title="Peaceful Mountains - 2560x1440">2560x1440</a></li></ul><h2 id="yogabear">Yogabear</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-23-yogabear-full-opt.png" title="Yogabear"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-23-yogabear-preview-opt.png" title="Yogabear - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-640x480.png" title="Yogabear - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-800x480.png" title="Yogabear - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-800x600.png" title="Yogabear - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1024x768.png" title="Yogabear - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1024x1024.png" title="Yogabear - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1152x864.png" title="Yogabear - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1280x720.png" title="Yogabear - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1280x800.png" title="Yogabear - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1280x960.png" title="Yogabear - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1280x1024.png" title="Yogabear - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1366x768.png" title="Yogabear - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1400x1050.png" title="Yogabear - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1440x900.png" title="Yogabear - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1600x1200.png" title="Yogabear - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1680x1050.png" title="Yogabear - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1680x1200.png" title="Yogabear - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1920x1080.png" title="Yogabear - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1920x1200.png" title="Yogabear - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-1920x1440.png" title="Yogabear - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-2560x1440.png" title="Yogabear - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-23/yogabear/nocal/jan-23-yogabear-nocal-3840x2160.png" title="Yogabear - 3840x2160">3840x2160</a></li></ul><h2 id="be-awesome-today">Be Awesome Today</h2><p>“A little daily motivation to keep your cool during the month of January.” — Designed by Amalia Van Bloom from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96b2d588-b8a3-417c-81c6-2ebdf84a8664/jan-14-be-awesome-today-full-opt.png" title="Be Awesome Today"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee17a4f-58d6-444d-a3ed-fb9c81319718/jan-14-be-awesome-today-preview-opt.png" title="Be Awesome Today - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-640x960.jpg" title="Be Awesome Today - 640x960">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-1024x768.jpg" title="Be Awesome Today - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-1280x800.jpg" title="Be Awesome Today - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-1280x1024.jpg" title="Be Awesome Today - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-1440x900.jpg" title="Be Awesome Today - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-1920x1200.jpg" title="Be Awesome Today - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/be-awesome-today/nocal/jan-14-be-awesome-today-nocal-2560x1440.jpg" title="Be Awesome Today - 2560x1440">2560x1440</a></li></ul><h2 id="a-fresh-start">A Fresh Start</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2025/jan-24-a-fresh-start-full-opt.png" title="A Fresh Start"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2025/jan-24-a-fresh-start-preview-opt.png" title="A Fresh Start - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-640x480.png" title="A Fresh Start - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-800x480.png" title="A Fresh Start - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-800x600.png" title="A Fresh Start - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1024x768.png" title="A Fresh Start - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1024x1024.png" title="A Fresh Start - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1152x864.png" title="A Fresh Start - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1280x720.png" title="A Fresh Start - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1280x800.png" title="A Fresh Start - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1280x960.png" title="A Fresh Start - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1280x1024.png" title="A Fresh Start - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1366x768.png" title="A Fresh Start - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1400x1050.png" title="A Fresh Start - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1440x900.png" title="A Fresh Start - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1600x1200.png" title="A Fresh Start - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1680x1050.png" title="A Fresh Start - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1680x1200.png" title="A Fresh Start - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1920x1080.png" title="A Fresh Start - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1920x1200.png" title="A Fresh Start - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-1920x1440.png" title="A Fresh Start - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-2560x1440.png" title="A Fresh Start - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-24/a-fresh-start/nocal/jan-24-a-fresh-start-nocal-3840x2160.png" title="A Fresh Start - 3840x2160">3840x2160</a></li></ul><h2 id="winter-getaway">Winter Getaway</h2><p>“What could be better than a change of scene for a week? Even if you are too busy, just think about it.” — Designed by <a href="https://dribbble.com/izhik">Igor Izhik</a> from Canada.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5738d255-78d6-4dd5-b513-4b574540c194/jan-16-winter-getaway-full.png" title="Winter Getaway"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f0c24ce-e777-4aa5-b473-4b4af7f2ac36/jan-16-winter-getaway-preview-opt.png" title="Winter Getaway - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1024x768.jpg" title="Winter Getaway - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1280x720.jpg" title="Winter Getaway - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1280x800.jpg" title="Winter Getaway - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1280x960.jpg" title="Winter Getaway - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1280x1024.jpg" title="Winter Getaway - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1400x1050.jpg" title="Winter Getaway - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1440x900.jpg" title="Winter Getaway - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1600x1200.jpg" title="Winter Getaway - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1680x1050.jpg" title="Winter Getaway - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1680x1200.jpg" title="Winter Getaway - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1920x1080.jpg" title="Winter Getaway - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1920x1200.jpg" title="Winter Getaway - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-1920x1440.jpg" title="Winter Getaway - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-2560x1440.jpg" title="Winter Getaway - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/winter-getaway/nocal/jan-16-winter-getaway-nocal-2560x1600.jpg" title="Winter Getaway - 2560x1600">2560x1600</a></li></ul><h2 id="happy-new-year-86">Happy New Year ’86</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2026/jan-25-happy-new-year-86-full-opt.png" title="Happy New Year ’86"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2026/jan-25-happy-new-year-86-preview-opt.png" title="Happy New Year ’86 - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-640x480.png" title="Happy New Year ’86 - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-800x480.png" title="Happy New Year ’86 - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-800x600.png" title="Happy New Year ’86 - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1024x768.png" title="Happy New Year ’86 - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1024x1024.png" title="Happy New Year ’86 - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1152x864.png" title="Happy New Year ’86 - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1280x720.png" title="Happy New Year ’86 - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1280x800.png" title="Happy New Year ’86 - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1280x960.png" title="Happy New Year ’86 - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1280x1024.png" title="Happy New Year ’86 - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1366x768.png" title="Happy New Year ’86 - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1400x1050.png" title="Happy New Year ’86 - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1440x900.png" title="Happy New Year ’86 - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1600x1200.png" title="Happy New Year ’86 - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1680x1050.png" title="Happy New Year ’86 - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1680x1200.png" title="Happy New Year ’86 - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1920x1080.png" title="Happy New Year ’86 - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1920x1200.png" title="Happy New Year ’86 - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-1920x1440.png" title="Happy New Year ’86 - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-2560x1440.png" title="Happy New Year ’86 - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jan-25/happy-new-year-86/nocal/jan-25-happy-new-year-86-nocal-3840x2160.png" title="Happy New Year ’86 - 3840x2160">3840x2160</a></li></ul><h2 id="angel-in-snow">Angel In Snow</h2><p>Designed by <a href="https://www.behance.net/DesignStudioBrainer">Brainer</a> from Ukraine.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77fb0123-e3c6-4390-8d96-50bf0d1ee993/jan-17-angel-in-snow-full.png" title="Angel in Snow!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc27f8f-f2bc-4347-a8cf-0d5950ff8435/jan-17-angel-in-snow-preview-opt.png" title="Angel in Snow! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-800x600.jpg" title="Angel in Snow! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1024x768.jpg" title="Angel in Snow! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1152x864.jpg" title="Angel in Snow! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280x800.jpg" title="Angel in Snow! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280x960.jpg" title="Angel in Snow! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1400x1050.jpg" title="Angel in Snow! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1440x900.jpg" title="Angel in Snow! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1600x1200.jpg" title="Angel in Snow! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680x1050.jpg" title="Angel in Snow! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680x1260.jpg" title="Angel in Snow! - 1680x1260">1680x1260</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920x1200.jpg" title="Angel in Snow! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920x1440.jpg" title="Angel in Snow! - 1920x1440">1920x1440</a></li></ul><h2 id="january-fish">January Fish</h2><p>“My fish tank at home inspired me to make a wallpaper with a fish.” — Designed by Arno De Decker from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8008962a-2b4e-45e2-9a46-5df8aeb27a29/jan-15-january-fish-full.png" title="January Fish"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ea1b206-d97d-4545-a698-02055089c51b/jan-15-january-fish-preview-opt.png" title="January Fish - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-320x480.png" title="January Fish - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-640x480.png" title="January Fish - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-800x480.png" title="January Fish - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-800x600.png" title="January Fish - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1024x768.png" title="January Fish - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1024x1024.png" title="January Fish - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1152x864.png" title="January Fish - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1280x720.png" title="January Fish - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1280x800.png" title="January Fish - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1280x960.png" title="January Fish - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1280x1024.png" title="January Fish - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1400x1050.png" title="January Fish - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1440x900.png" title="January Fish - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1600x1200.png" title="January Fish - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1680x1050.png" title="January Fish - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1680x1200.png" title="January Fish - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1920x1080.png" title="January Fish - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1920x1200.png" title="January Fish - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-1920x1440.png" title="January Fish - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-15/january-fish/nocal/jan-15-january-fish-nocal-2560x1440.png" title="January Fish - 2560x1440">2560x1440</a></li></ul><h2 id="dare-to-be-you">Dare To Be You</h2><p>“The new year brings new opportunities for each of us to become our true selves. I think that no matter what you are — like this little monster — you should dare to be the true you without caring what others may think. Happy New Year!” — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1923cade-f8de-4beb-b567-407bf165f4b7/jan-16-dare-to-be-you-full.png" title="Dare To Be You"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db4831f3-a7c5-4d49-b410-5ec9d7d8bdbb/jan-16-dare-to-be-you-preview-opt.png" title="Dare To Be You - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-320x480.png" title="Dare To Be You - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-640x480.png" title="Dare To Be You - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-640x1136.png" title="Dare To Be You - 640x1136">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-750x1334.png" title="Dare To Be You - 750x1334">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-800x480.png" title="Dare To Be You - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-800x600.png" title="Dare To Be You - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1024x768.png" title="Dare To Be You - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1024x1024.png" title="Dare To Be You - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1152x864.png" title="Dare To Be You - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1242x2208.png" title="Dare To Be You - 1242x2208">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1280x720.png" title="Dare To Be You - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1280x800.png" title="Dare To Be You - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1280x960.png" title="Dare To Be You - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1280x1024.png" title="Dare To Be You - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1366x768.png" title="Dare To Be You - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1400x1050.png" title="Dare To Be You - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1440x900.png" title="Dare To Be You - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1600x1200.png" title="Dare To Be You - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1680x1050.png" title="Dare To Be You - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1680x1200.png" title="Dare To Be You - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1920x1080.png" title="Dare To Be You - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-1920x1440.png" title="Dare To Be You - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-2560x1440.png" title="Dare To Be You - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/dare-to-be-you/nocal/jan-16-dare-to-be-you-nocal-2880x1800.png" title="Dare To Be You - 2880x1800">2880x1800</a></li></ul><h2 id="oaken-january">Oaken January</h2><p>“In our country, Christmas is celebrated in January when oak branches and leaves are burnt to symbolize the beginning of the new year and new life. It’s the time when we gather with our families and celebrate the arrival of the new year in a warm and cuddly atmosphere. — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11e0bc06-a288-404b-935f-d5803b065e81/jan-16-oaken-january-full-opt.png" title="Oaken January"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/19bb68e6-267d-4ecc-b045-1453831901bc/jan-16-oaken-january-preview-opt.png" title="Oaken January - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-320x480.jpg" title="Oaken January - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-640x480.jpg" title="Oaken January - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-800x480.jpg" title="Oaken January - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-800x600.jpg" title="Oaken January - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1024x768.jpg" title="Oaken January - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1024x1024.jpg" title="Oaken January - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1152x864.jpg" title="Oaken January - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1280x720.jpg" title="Oaken January - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1280x800.jpg" title="Oaken January - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1280x960.jpg" title="Oaken January - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1280x1024.jpg" title="Oaken January - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1366x768.jpg" title="Oaken January - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1400x1050.jpg" title="Oaken January - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1440x900.jpg" title="Oaken January - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1600x1200.jpg" title="Oaken January - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1680x1050.jpg" title="Oaken January - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1680x1200.jpg" title="Oaken January - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1920x1080.jpg" title="Oaken January - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1920x1200.jpg" title="Oaken January - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-1920x1440.jpg" title="Oaken January - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/oaken-january/nocal/jan-16-oaken-january-nocal-2560x1440.jpg" title="Oaken January - 2560x1440">2560x1440</a></li></ul><h2 id="the-little-paradox">The Little Paradox</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa59d813-bc65-4174-ac71-20fd6cf0d310/jan-22-the-little-paradox-nocal-full-opt.png" title="The Little Paradox"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eae99c1b-bf78-401e-8073-bd46970bd553/jan-22-the-little-paradox-nocal-preview-opt.png" title="The Little Paradox - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-640x480.png" title="The Little Paradox - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-800x480.png" title="The Little Paradox - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-800x600.png" title="The Little Paradox - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1024x768.png" title="The Little Paradox - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1024x1024.png" title="The Little Paradox - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1152x864.png" title="The Little Paradox - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1280x720.png" title="The Little Paradox - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1280x800.png" title="The Little Paradox - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1280x960.png" title="The Little Paradox - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1280x1024.png" title="The Little Paradox - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1366x768.png" title="The Little Paradox - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1400x1050.png" title="The Little Paradox - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1440x900.png" title="The Little Paradox - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1600x1200.png" title="The Little Paradox - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1680x1050.png" title="The Little Paradox - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1680x1200.png" title="The Little Paradox - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1920x1080.png" title="The Little Paradox - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1920x1200.png" title="The Little Paradox - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-1920x1440.png" title="The Little Paradox - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-2560x1440.png" title="The Little Paradox - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/the-little-paradox/nocal/jan-22-the-little-paradox-nocal-3840x2160.png" title="The Little Paradox - 3840x2160">3840x2160</a></li></ul><h2 id="new-year-s-resolution">New Year’s Resolution</h2><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-14-new-years-resolution-full-opt.png" title="New Year's Resolution"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-january-2024/jan-14-new-years-resolution-preview-opt.png" title="New Year's Resolution - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-800x480.jpg" title="New Year's Resolution - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1024x768.jpg" title="New Year's Resolution - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1152x864.jpg" title="New Year's Resolution - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1280x800.jpg" title="New Year's Resolution - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1280x960.jpg" title="New Year's Resolution - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1440x1050.jpg" title="New Year's Resolution - 1440x1050">1440x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1400x900.jpg" title="New Year's Resolution - 1400x900">1400x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1680x1050.jpg" title="New Year's Resolution - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1920x1080.jpg" title="New Year's Resolution - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1920x1200.jpg" title="New Year's Resolution - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-1920x1440.jpg" title="New Year's Resolution - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/new-years-resolution/nocal/jan-14-new-years-resolution-nocal-2560x1440.jpg" title="New Year's Resolution - 2560x1440">2560x1440</a></li></ul><h2 id="don-quijote,-here-we-go!">Don Quijote, Here We Go!</h2><p>This year we are going to travel through books, and you couldn’t start with a better one than <em>Don Quijote de la Mancha</em>! — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela Jimenez</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dafe6e2-fb6d-48b6-b421-a4e1908374dd/jan-22-don-quijote-here-we-go-nocal-full-opt.png" title="Don Quijote, Here We Go!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/338b2187-1a6c-4861-8c35-9030ad7fdbe8/jan-22-don-quijote-here-we-go-nocal-preview-opt.png" title="Don Quijote, Here We Go! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-640x480.png" title="Don Quijote, Here We Go! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-800x480.png" title="Don Quijote, Here We Go! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1024x768.png" title="Don Quijote, Here We Go! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1280x720.png" title="Don Quijote, Here We Go! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1280x800.png" title="Don Quijote, Here We Go! - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1440x900.png" title="Don Quijote, Here We Go! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1600x1200.png" title="Don Quijote, Here We Go! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1920x1080.png" title="Don Quijote, Here We Go! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-1920x1440.png" title="Don Quijote, Here We Go! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-22/don-quijote-here-we-go/nocal/jan-22-don-quijote-here-we-go-nocal-2560x1440.png" title="Don Quijote, Here We Go! - 2560x1440">2560x1440</a></li></ul><h2 id="rubber-ducky-day">Rubber Ducky Day</h2><p>Winter can be such a gloomy time of the year. The sun sets earlier, the wind feels colder, and our heating bills skyrocket. I hope to brighten up your month with my wallpaper for Rubber Ducky Day! — Designed by Ilya Plyusnin from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/717cc825-7e2b-4626-858f-fb5f97050689/jan-20-rubber-ducky-day-nocal-full-opt.png" title="Rubber Ducky Day"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a4c803c-5c7e-41eb-9695-1dc8061a00ec/jan-20-rubber-ducky-day-nocal-preview-opt.png" title="Rubber Ducky Day - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-320x480.png" title="Rubber Ducky Day - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-640x480.png" title="Rubber Ducky Day - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-800x480.png" title="Rubber Ducky Day - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-800x600.png" title="Rubber Ducky Day - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1024x768.png" title="Rubber Ducky Day - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1024x1024.png" title="Rubber Ducky Day - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1152x864.png" title="Rubber Ducky Day - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1280x720.png" title="Rubber Ducky Day - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1280x800.png" title="Rubber Ducky Day - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1280x960.png" title="Rubber Ducky Day - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1280x1024.png" title="Rubber Ducky Day - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1366x768.png" title="Rubber Ducky Day - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1400x1050.png" title="Rubber Ducky Day - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1440x900.png" title="Rubber Ducky Day - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1600x1200.png" title="Rubber Ducky Day - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1680x1050.png" title="Rubber Ducky Day - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1680x1200.png" title="Rubber Ducky Day - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1920x1080.png" title="Rubber Ducky Day - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1920x1200.png" title="Rubber Ducky Day - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-1920x1440.png" title="Rubber Ducky Day - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-20/rubber-ducky-day/nocal/jan-20-rubber-ducky-day-nocal-2560x1440.png" title="Rubber Ducky Day - 2560x1440">2560x1440</a></li></ul><h2 id="a-new-beginning">A New Beginning</h2><p>I wanted to do a lettering-based wallpaper because I love lettering. I chose January because for a lot of people the new year is perceived as a new beginning and I wish to make them feel as positive about it as possible! The idea is to make them feel like the new year is (just) the start of something really great. — Designed by <a href="https://carolinaseq.weebly.com">Carolina Sequeira</a> from Portugal.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d13c1d01-1940-4921-9002-c0d7ebe16ddb/jan-19-a-new-beginning-full-opt.png" title="A New Beginning"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/752814fe-4755-4f8f-80ea-92df0920d427/jan-19-a-new-beginning-preview-opt.png" title="A New Beginning - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-19/a-new-beginning/nocal/jan-19-a-new-beginning-nocal-320x480.png" title="A New Beginning - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/a-new-beginning/nocal/jan-19-a-new-beginning-nocal-1280x1024.png" title="A New Beginning - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/a-new-beginning/nocal/jan-19-a-new-beginning-nocal-1680x1050.png" title="A New Beginning - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-19/a-new-beginning/nocal/jan-19-a-new-beginning-nocal-2560x1440.png" title="A New Beginning - 2560x1440">2560x1440</a></li></ul><h2 id="japanese-new-year">Japanese New Year</h2><p>Designed by Evacomics from Singapore.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31c689b8-6830-4203-89c8-26aeab5d09a2/jan-14-japanese-new-year-full.png" title="Japanese New Year"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21284006-7e47-408c-a240-09658d40ea54/jan-14-japanese-new-year-preview-opt.png" title="Japanese New Year - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-320x480.jpg" title="Japanese New Year - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-768x1024.jpg" title="Japanese New Year - 768x1024">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-1024x768.jpg" title="Japanese New Year - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-1280x800.jpg" title="Japanese New Year - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-1280x1024.jpg" title="Japanese New Year - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-1440x900.jpg" title="Japanese New Year - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-1920x1080.jpg" title="Japanese New Year - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/japanese-new-year/nocal/jan-14-japanese-new-year-nocal-2560x1440.jpg" title="Japanese New Year - 2560x1440">2560x1440</a></li></ul><h2 id="happy-hot-tea-month">Happy Hot Tea Month</h2><p>“You wake me up to a beautiful day; lift my spirit when I’m feeling blue. When I’m home you relieve me of the long day’s stress. You help me have a good time with my loved ones; give me company when I’m all alone. You’re none other than my favourite cup of hot tea. — Designed by <a href="https://acodez.in/">Acodez IT Solutions</a> from India.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c237f3c-4bf8-4bf9-ba83-d6a8be140ad4/jan-17-happy-hot-tea-month-full-opt.png" title="Happy Hot Tea Month!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ccd35ef-a212-48b8-8806-f3ece005ab0a/jan-17-happy-hot-tea-month-preview-opt.png" title="Happy Hot Tea Month! - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-320x480.png" title="Happy Hot Tea Month! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-640x480.png" title="Happy Hot Tea Month! - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800x480.png" title="Happy Hot Tea Month! - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800x600.png" title="Happy Hot Tea Month! - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024x768.png" title="Happy Hot Tea Month! - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024x1024.png" title="Happy Hot Tea Month! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1152x864.png" title="Happy Hot Tea Month! - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280x720.png" title="Happy Hot Tea Month! - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280x960.png" title="Happy Hot Tea Month! - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280x1024.png" title="Happy Hot Tea Month! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1366x768.png" title="Happy Hot Tea Month! - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1400x1050.png" title="Happy Hot Tea Month! - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1440x900.png" title="Happy Hot Tea Month! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1600x1200.png" title="Happy Hot Tea Month! - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680x1050.png" title="Happy Hot Tea Month! - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680x1200.png" title="Happy Hot Tea Month! - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920x1080.png" title="Happy Hot Tea Month! - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920x1200.png" title="Happy Hot Tea Month! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920x1440.png" title="Happy Hot Tea Month! - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-2560x1440.png" title="Happy Hot Tea Month! - 2560x1440">2560x1440</a></li></ul><h2 id="don-t-forget-your-vitamins">Don’t Forget Your Vitamins</h2><p>“Discover the seasonal fruits and vegetables. In January: apple and banana enjoying the snow!” — Designed by Vitaminas Design from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3988d7cd-8cb8-41cd-87df-99400f646d20/jan-14-vitamins-seasonal-fruits-and-vegetables-full-opt.png" title="Don’t Forget Your Vitamins"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/be59751a-e10d-4b24-a2ff-65b4f2ad5a0e/jan-14-vitamins-seasonal-fruits-and-vegetables-preview-opt.png" title="Don’t Forget Your Vitamins - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-320x480.png" title="Don’t Forget Your Vitamins - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-1280x800.png" title="Don’t Forget Your Vitamins - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-1280x1024.png" title="Don’t Forget Your Vitamins - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-1440x900.png" title="Don’t Forget Your Vitamins - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-1920x1080.png" title="Don’t Forget Your Vitamins - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-14/vitamins-seasonal-fruits-and-vegetables/nocal/jan-14-vitamins-seasonal-fruits-and-vegetables-nocal-2560x1440.png" title="Don’t Forget Your Vitamins - 2560x1440">2560x1440</a></li></ul><h2 id="wolf-month">Wolf Month</h2><p>“Wolf-month (in Dutch ‘wolfsmaand’) is another name for January. — Designed by Chiara Faes from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2e8423f-297f-4e8c-bf75-4b88421cfd44/jan-16-wolf-month-full-opt.png" title="Wolf-Month"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed76af7e-eabb-4e78-9dcc-43a6733894c3/jan-16-wolf-month-preview-opt.png" title="Wolf-Month - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-640x480.jpg" title="Wolf-Month - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-800x600.jpg" title="Wolf-Month - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1024x768.jpg" title="Wolf-Month - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1152x864.jpg" title="Wolf-Month - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1280x720.jpg" title="Wolf-Month - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1280x800.jpg" title="Wolf-Month - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1280x960.jpg" title="Wolf-Month - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1366x768.jpg" title="Wolf-Month - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1400x1050.jpg" title="Wolf-Month - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1440x900.jpg" title="Wolf-Month - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1600x1200.jpg" title="Wolf-Month - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1680x1050.jpg" title="Wolf-Month - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1920x1080.jpg" title="Wolf-Month - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1920x1200.jpg" title="Wolf-Month - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-1920x1440.jpg" title="Wolf-Month - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/wolf-month/nocal/jan-16-wolf-month-nocal-2560x1440.jpg" title="Wolf-Month - 2560x1440">2560x1440</a></li></ul><h2 id="a-new-start">A New Start</h2><p>“The new year brings hope, festivity, lots and lots of resolutions, and many more goals that need to be achieved.” — Designed by <a href="https://www.damnperfect.com">Damn Perfect</a> from India.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ce83bcbc-a48c-4fc0-8b68-e8a2fa909e64/jan-17-a-new-start-full-opt.png" title="A New Start"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a0131a75-0786-4acc-8a89-b21a1ff7227a/jan-17-a-new-start-preview-opt.png" title="A New Start - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-320x480.jpg" title="A New Start - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-640x480.jpg" title="A New Start - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800x480.jpg" title="A New Start - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800x600.jpg" title="A New Start - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024x768.jpg" title="A New Start - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024x1024.jpg" title="A New Start - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1152x864.jpg" title="A New Start - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280x720.jpg" title="A New Start - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280x800.jpg" title="A New Start - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280x960.jpg" title="A New Start - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280x1024.jpg" title="A New Start - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1366x768.jpg" title="A New Start - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1400x1050.jpg" title="A New Start - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1440x900.jpg" title="A New Start - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1600x1200.jpg" title="A New Start - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680x1050.jpg" title="A New Start - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680x1200.jpg" title="A New Start - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920x1080.jpg" title="A New Start - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920x1200.jpg" title="A New Start - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920x1440.jpg" title="A New Start - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-2560x1440.jpg" title="A New Start - 2560x1440">2560x1440</a></li></ul><h2 id="get-featured-next-month">Get Featured Next Month</h2><p>Feeling inspired? We’ll publish the <strong>February wallpapers</strong> on January 31, so if you’d like to be a part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We are already looking forward to it!</p></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>How To Design For (And With) Deaf People</h1>
<p>hello@smashingmagazine.com (Vitaly Friedman) — Tue, 30 Dec 2025 10:00:00 GMT</p>
<h1>How To Design For (And With) Deaf People — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>8 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/accessibility">Accessibility</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Practical UX guidelines to keep in mind for 466 million people who experience hearing loss. More design patterns in <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, a <strong>friendly video course on UX</strong> and design patterns by Vitaly.</section></div><p>When we think about people who are deaf, we often assume stereotypes, such as “disabled” older adults with <strong>hearing aids</strong>. However, this perception is far from the truth and often leads to poor decisions and broken products.</p><p>Let’s look at when and how deafness emerges, and how to design better experiences <strong>for people with hearing loss</strong>.</p><figure><a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/1-sign-language.jpg"></img></a><figcaption>Sign language is 4-dimensional, including 3D space and time, and often includes facial expressions, too. From a wonderful talk by <a href="https://www.youtube.com/watch?v=M0cR_HTeWUo">Marie van Driessche</a>. (<a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/1-sign-language.jpg">Large preview</a>)</figcaption></figure><h2 id="deafness-is-a-spectrum">Deafness Is A Spectrum</h2><p>Deafness spans a <strong>broad continuum</strong>, from minor to profound hearing loss. Around 90–95% of deaf people <a href="https://scholarworks.wmich.edu/jssw/vol51/iss1/11/">come from hearing families</a>, and deafness often isn’t merely a condition that people are born with. It frequently occurs due to <strong>exposure to loud noises</strong>, and it also emerges with age, disease, and accidents.</p><figure><a href="https://www.didyousaydeaf.com/hearing-loss-and-how-hearing-loss-works"></img></a><figcaption>A <a href="https://www.didyousaydeaf.com/hearing-loss-and-how-hearing-loss-works">chart</a> showing sound frequencies and decibel levels, illustrating types of hearing loss and common everyday sounds. (<a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/2-chart-sound-frequencies-decibel-levels.jpg">Large preview</a>)</figcaption></figure><p>The loudness of sound is measured in units called <strong>decibels (dB)</strong>. Everybody is on the <a href="https://www.didyousaydeaf.com/hearing-loss-and-how-hearing-loss-works">spectrum of deafness</a>, from normal hearing (up to 15 dB) to profound hearing loss (91+ dB):</p><ul><li><strong>Slight Hearing Loss</strong>, 16–25 dB<br></br>At 16 dB hearing loss, a person can miss up to 10% of speech when a speaker is at a distance greater than 3 feet.</li><li><strong>Mild hearing loss</strong>, 26–40 dB<br></br>Soft sounds are hard to hear, including whispering, which is around 40 dB in volume. It’s more difficult to hear soft speech sounds spoken at a normal volume. At 40dB hearing loss, a person may miss 50% of meeting discussions.</li><li><strong>Moderate hearing loss</strong>, 41–55 dB<br></br>A person may hear almost no speech when another person is talking at normal volume. At a 50dB hearing loss, a person may not pick up to 80% of speech.</li><li><strong>Moderately Severe Hearing Loss</strong>, 56–70 dB<br></br>A person may have problems hearing the sounds of a dishwasher (60dB). At 70 dB, they might miss almost all speech.</li><li><strong>Severe Hearing Loss</strong>, 71–90 dB<br></br>A person will hear no speech when a person is talking at a normal level. They may hear only some very loud noises: vacuum (70 dB), blender (78 dB), hair dryer (90 dB).</li><li><strong>Profound Hearing Loss</strong>, 91+ dB<br></br>Hear no speech and at most very loud sounds such as a music player at full volume (100 dB), which would be damaging for people with normal hearing, or a car horn (110 dB).</li></ul><p>It’s worth mentioning that loss of hearing can also be situational and temporary, as people with “normal” hearing (0 to 25 dB hearing loss) will always encounter situations where they can’t hear, e.g., due to <strong>noisy environments</strong>.</p><h2 id="useful-things-to-know-about-deafness">Useful Things To Know About Deafness</h2><p>Assumptions are always dangerous, and in the case of deafness, there are quite a few that aren’t accurate. For example, most deaf people actually do not know a sign language — it’s only around <a href="https://www.accessibility.com/blog/do-all-deaf-people-use-sign-language">1% in the US</a>.</p><p>Also, despite our expectations, there is actually <strong>no universal sign language</strong> that everybody uses. For example, British signers often cannot understand American signers. There are globally around <a href="https://education.nationalgeographic.org/resource/sign-language/">300 different sign languages</a> actively used.</p><blockquote>“We never question making content available in different written or spoken languages, and the same should apply to signed languages.”<p>— <a href="https://www.linkedin.com/feed/update/urn:li:activity:7178702360649547778?commentUrn=urn%3Ali%3Acomment%3A%28activity%3A7178702360649547778%2C7178776416979718144%29&dashCommentUrn=urn%3Ali%3Afsd_comment%3A%287178776416979718144%2Curn%3Ali%3Aactivity%3A7178702360649547778%29">Johanna Steiner</a></p></blockquote><figure><a href="https://uxplanet.org/podcasts-for-the-deaf-d4d9b5f3ce99"></img></a><figcaption><a href="https://uxplanet.org/podcasts-for-the-deaf-d4d9b5f3ce99">Heardio</a> concept: making podcasts accessible for deaf people â€” with live transcription and sign language avatars. (<a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/3-heardio.jpg">Large preview</a>)</figcaption></figure><p>Sign languages are <a href="https://www.youtube.com/watch?v=M0cR_HTeWUo&t=188">not just gestures or pantomime</a>. They are <strong>4D spatial languages</strong> with their own grammar and syntax, separate from spoken languages, and they don’t have a written form. They rely heavily on facial expression to convey meaning and emphasis. And they are also not universal — every country has its own sign language and dialects.</p><ul><li>You can only understand <strong>30% of words</strong> via lip-reading.</li><li>Most deaf people do not know any <strong>sign language</strong>.</li><li>Many sign languages have local dialects that can be hard to interpret.</li><li>Not all deaf people are fluent signers and often rely on <strong>visual clues</strong>.</li><li>For many deaf people, a spoken language is their <strong>second language</strong>.</li><li><a href="https://www.youtube.com/watch?v=M0cR_HTeWUo"><strong>Sign language is 4-dimensional</strong></a>, incorporating 3D space, time and also facial expressions.</li></ul><h2 id="how-to-communicate-respectfully">How To Communicate Respectfully</h2><p>Keep in mind that many deaf people use the spoken language of their country as <strong>their second language</strong>. So to communicate with a deaf person, it’s best to ask in writing. Don’t ask how much a person can understand, or if they can lip-read you.</p><p>However, as Rachel Edwards <a href="https://www.linkedin.com/posts/rachel-edwards-scotland_excellent-overview-on-designing-for-ddeaf-activity-7409172866983804928-489h?utm_source=share&utm_medium=member_desktop&rcm=ACoAAACDcgQBa_vsk5breYKwZAgyIhsHtJaFbL8">noted</a>, don’t assume someone is comfortable with written language because they are deaf. Sometimes their literacy may be low, and so providing information as text and assuming that covers your deaf users might not be the answer.</p><p>Also, don’t assume that every deaf person can lip-read. You can see only about 30% of words on someone’s mouth. That’s why many deaf people need <strong>additional visual cues</strong>, like text or cued speech.</p><figure><a href="https://www.healthyhearing.com/report/52264-Universal-signs-for-hearing-loss"></img></a><figcaption>7 accessibility symbols for people with hearing loss. <a href="https://www.healthyhearing.com/report/52264-Universal-signs-for-hearing-loss">Universal signs for hearing loss</a>. (<a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/4-accessibility-symbols.png">Large preview</a>)</figcaption></figure><p>It’s also crucial to use <strong>respectful language</strong>. Deaf people do not always see themselves as <em>disabled</em>, but rather as a cultural linguistic minority with a unique identity. Others, as Meryl Evan has <a href="https://www.linkedin.com/feed/update/urn:li:activity:7178702360649547778?commentUrn=urn%3Ali%3Acomment%3A%28activity%3A7178702360649547778%2C7178721132345270272%29&dashCommentUrn=urn%3Ali%3Afsd_comment%3A%287178721132345270272%2Curn%3Ali%3Aactivity%3A7178702360649547778%29">noted</a>, don’t identify as <em>deaf</em> or <em>hard of hearing</em>, but rather as “hearing impaired”. So, it’s mostly up to an individual how they want to identify.</p><ul><li><strong>Deaf</strong> (Capital ‘D’)<br></br>Culturally Deaf people who have been deaf since birth or before learning to speak. Sign language is often the first language, and written language is the second.</li><li><strong>deaf</strong> (Lowercase ‘d’)<br></br>People who developed hearing loss later in life. Used by people who feel closer to the hearing/hard-of-hearing world and prefer to communicate written and/or oral.</li><li><strong>Hard of Hearing</strong><br></br>People with mild to moderate hearing loss who typically communicate orally and use hearing aids.</li></ul><p>In general, <strong>avoid hearing impairment</strong> if you can, and use <em>Deaf</em> (for those deaf for most of their lives), <em>deaf</em> (for those who became deaf later), or <em>hard of hearing</em> (HoH) for partial hearing loss. But either way, ask politely first and then respect the person’s preferences.</p><h2 id="practical-ux-guidelines">Practical UX Guidelines</h2><p>When designing UIs and content, consider these key accessibility guidelines for deaf and hard-of-hearing users:</p><figure><a href="https://prospect.org.uk/article/designing-content-for-users-who-are-deaf-or-hard-of-hearing/"></img></a><figcaption>How to design for users who are deaf or hard of hearing, a Gov.uk-inspired poster by <a href="https://prospect.org.uk/article/designing-content-for-users-who-are-deaf-or-hard-of-hearing/">Prospect.org.uk</a>. <a href="https://d28j9ucj9uj44t.cloudfront.net/uploads/2021/09/Designing_for_accessibility6.pdf">Download a printable PDF</a>. (<a href="https://files.smashing.media/articles/how-design-for-with-deaf-people/5-designing-deaf-users.jpg">Large preview</a>)</figcaption></figure><ol><li><strong>Don’t make the phone required</strong> or the only method of contact.</li><li><strong>Provide text alternatives</strong> for all audible alerts or notices.</li><li><strong>Add haptic feedback</strong> on mobile (e.g., vibration patterns).</li><li><strong>Ensure good lighting</strong> to help people see facial expressions.</li><li><strong>Circular seating</strong> usually works better, so everyone can see each other’s faces.</li><li><strong>Always include descriptions of non-spoken sounds</strong> (e.g., rain, laughter) in your content.</li><li><strong>Add a transcript and closed captions</strong> for audio and video.</li><li><strong>Clearly identify each speaker</strong> in all audio and video content.</li><li><strong>Design multiple ways to communicate</strong> in every instance (online + in-person).</li><li><strong>Invite video participants to keep the camera on</strong> to facilitate lip-reading and the viewing of facial expressions, which convey tone.</li><li><strong>Always test products with the actual community</strong>, instead of making assumptions for them.</li></ol><h2 id="wrapping-up">Wrapping Up</h2><p>I keep repeating myself like a broken record, but better accessibility <strong>always benefits everyone</strong>. When we improve experiences for some groups of people, it often improves experiences for entirely different groups as well.</p><p>As Marie Van Driessche rightfully noted, to design a great experience for accessibility, we must design <strong>with</strong> people, rather than <em>for</em> them. And that means always include people with <strong>lived experience of exclusion</strong> into the design process — as they are the true experts.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAccessibility%20never%20happens%20by%20accident%20%e2%80%94%20it%e2%80%99s%20a%20deliberate%20decision%20and%20a%20commitment.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fhow-design-for-with-deaf-people%2f">Accessibility never happens by accident — it’s a deliberate decision and a commitment.</a></p></blockquote><p>No digital product is neutral. There must be a deliberate effort to make products and services more accessible. Not only does it benefit everyone, but it also shows what a company stands for and values.</p><p>And once you do have a commitment, it will be so much easier to <strong>retain accessibility</strong> rather than adding it last minute as a crutch — when it’s already too late to do it right and way too expensive to do it well.</p><h2 id="meet-smart-interface-design-patterns">Meet “Smart Interface Design Patterns”</h2><p>You can find more details on <strong>design patterns and UX</strong> in <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>15h-video course</strong> 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"><strong>BIRDIE</strong></a> to <strong>save 15%</strong> off.</p><figure><a href="https://smart-interface-design-patterns.com/"></img></a><figcaption>Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design & UX.</figcaption></figure><h2 id="useful-resources">Useful Resources</h2><ul><li><a href="https://www.youtube.com/watch?v=M0cR_HTeWUo">Designing For Deaf People Helps Everyone</a>, by Marie Van Driessche</li><li>“<a href="https://medium.com/@paulrobwest/ux-ui-design-considerations-for-the-deaf-deaf-and-hard-of-hearing-dbfe28850fbe">Design considerations for the Deaf, deaf, and hard of hearing</a>”, by Paul Roberts</li><li><a href="https://www.youtube.com/watch?v=AEXKOASrTVM">Beyond Video Captions and Sign Language</a>, by Svetlana Kouznetsova</li><li>“<a href="https://www.smashingmagazine.com/2023/01/closed-captions-subtitles-ux/">Best Practices For CC and Subtitles UX</a>”, by Vitaly Friedman</li><li><a href="https://www.accessi.org/blog/web-accessibility-for-deaf-users/">Web Accessibility for Deaf Users</a></li><li><a href="https://www.inclusivedesigntoolkit.com/UChearing/hearing.html">Inclusive Design Toolkit: Hearing</a></li><li>“<a href="https://funkybrownchick.substack.com/p/i-hear-you-really-i-do-">What It’s Like To Be Born Hard of Hearing</a>”, by Twanna A. Hines, M.S.</li><li>“<a href="https://uxplanet.org/podcasts-for-the-deaf-d4d9b5f3ce99">Accessibility: Podcasts for the deaf</a>”, by Mubarak Alabidun</li></ul><h3 id="useful-books">Useful Books</h3><ul><li><a href="https://audio-accessibility.com/book/"><em>Sound Is Not Enough</em></a>, by Svetlana Kouznetsova</li><li><em>Mismatch: How Inclusion Shapes Design</em>, by Kat Holmes</li><li><em>Building for Everyone: Extend Your Product’s Reach Through Inclusive Design</em> (+ <a href="https://design.google/library/building-for-everyone">free excerpt</a>), by Annie Jean-Baptiste</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Giving Users A Voice Through Virtual Personas</h1>
<p>hello@smashingmagazine.com (Paul Boag) — Tue, 23 Dec 2025 10:00:00 GMT</p>
<h1>Giving Users A Voice Through Virtual Personas — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>10 min read</li><li><a href="http://www.smashingmagazine.com/category/user-research">User Research</a>,
<a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Turn scattered user research into AI-powered personas that give anyone consolidated multi-perspective feedback from a single question.</section></p><p>In my <a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">previous article</a>, I explored how AI can help us create functional personas more efficiently. We looked at building personas that focus on what users are trying to accomplish rather than demographic profiles that look good on posters but rarely change design decisions.</p><p>But creating personas is only half the battle. The bigger challenge is getting those insights into the hands of people who need them, at the moment they need them.</p><p>Every day, people across your organization make decisions that affect user experience. Product teams decide which features to prioritize. Marketing teams craft campaigns. Finance teams design invoicing processes. Customer support teams write response templates. All of these decisions shape how users experience your product or service.</p><p>And most of them happen without any input from actual users.</p><p>You do the research. You create the personas. You write the reports. You give the presentations. You even make fancy infographics. And then what happens?</p><p>The research sits in a shared drive somewhere, slowly gathering digital dust. The personas get referenced in kickoff meetings and then forgotten. The reports get skimmed once and never opened again.</p><p>When a product manager is deciding whether to add a new feature, they probably do not dig through last year’s research repository. When the finance team is redesigning the invoice email, they almost certainly do not consult the user personas. They make their best guess and move on.</p><p>This is not a criticism of those teams. They are busy. They have deadlines. And honestly, even if they wanted to consult the research, they probably would not know where to find it or how to interpret it for their specific question.</p><p>The knowledge stays locked inside the heads of the UX team, who cannot possibly be present for every decision being made across the organization.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="what-if-users-could-actually-speak">What If Users Could Actually Speak?</h2><blockquote>What if, instead of creating static documents that people need to find and interpret, we could give stakeholders a way to consult all of your user personas at once?</blockquote><p>Imagine a marketing manager working on a new campaign. Instead of trying to remember what the personas said about messaging preferences, they could simply ask: <em>“I’m thinking about leading with a discount offer in this email. What would our users think?”</em></p><p>And the AI, drawing on all your research data and personas, could respond with a consolidated view: how each persona would likely react, where they agree, where they differ, and a set of recommendations based on their collective perspectives. One question, synthesized insight across your entire user base.</p><figure><a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/1-user-research-personas.png"></img></a><figcaption>You can question how personas will react to different scenarios based on the research available. (<a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/1-user-research-personas.png">Large preview</a>)</figcaption></figure><p>This is not science fiction. With AI, we can build exactly this kind of system. We can take all of that scattered research (the surveys, the interviews, the support tickets, the analytics, the personas themselves) and turn it into an <strong>interactive resource</strong> that anyone can query for multi-perspective feedback.</p><h2 id="building-the-user-research-repository">Building the User Research Repository</h2><p>The foundation of this approach is a centralized repository of everything you know about your users. Think of it as a single source of truth that AI can access and draw from.</p><p>If you have been doing user research for any length of time, you probably have more data than you realize. It is just scattered across different tools and formats:</p><ul><li>Survey results sitting in your survey platform,</li><li>Interview transcripts in Google Docs,</li><li>Customer support tickets in your helpdesk system,</li><li>Analytics data in various dashboards,</li><li>Social media mentions and reviews,</li><li>Old personas from previous projects,</li><li>Usability test recordings and notes.</li></ul><p>The first step is gathering all of this into one place. It does not need to be perfectly organized. AI is remarkably good at making sense of messy inputs.</p><p>If you are starting from scratch and do not have much existing research, you can use AI deep research tools to establish a baseline.</p><figure><a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/2-user-research-perplexity.png"></img></a><figcaption>Online deep research with a tool like perplexity can be invaluable as a starting point for user research. (<a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/2-user-research-perplexity.png">Large preview</a>)</figcaption></figure><p>These tools can scan the web for discussions about your product category, competitor reviews, and common questions people ask. This gives you something to work with while you build out your primary research.</p><h2 id="creating-interactive-personas">Creating Interactive Personas</h2><p>Once you have your repository, the next step is creating personas that the AI can consult on behalf of stakeholders. This builds directly on <a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">the functional persona approach I outlined in my previous article</a>, with one key difference: these personas become <strong>lenses</strong> through which the AI analyzes questions, not just reference documents.</p><p>The process works like this:</p><ol><li>Feed your research repository to an AI tool.</li><li>Ask it to identify distinct user segments based on goals, tasks, and friction points.</li><li>Have it generate detailed personas for each segment.</li><li>Configure the AI to consult all personas when stakeholders ask questions, providing consolidated feedback.</li></ol><p>Here is where this approach diverges significantly from traditional personas. Because the AI is the primary consumer of these persona documents, they do not need to be scannable or fit on a single page. Traditional personas are constrained by human readability: you have to distill everything down to bullet points and key quotes that someone can absorb at a glance. But AI has no such limitation.</p><p>This means your personas can be considerably <strong>more detailed</strong>. You can include lengthy behavioral observations, contradictory data points, and nuanced context that would never survive the editing process for a traditional persona poster. The AI can hold all of this complexity and draw on it when answering questions.</p><p>You can also create <strong>different lenses or perspectives within each persona</strong>, tailored to specific business functions. Your “Weekend Warrior” persona might have a marketing lens (messaging preferences, channel habits, campaign responses), a product lens (feature priorities, usability patterns, upgrade triggers), and a support lens (common questions, frustration points, resolution preferences). When a marketing manager asks a question, the AI draws on the marketing-relevant information. When a product manager asks, it pulls from the product lens. Same persona, different depth depending on who is asking.</p><figure><a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/3-persona-lenses.png"></img></a><figcaption>Personas can have different lenses relevant to different functions within the business. (<a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/3-persona-lenses.png">Large preview</a>)</figcaption></figure><p>The personas should still include all the functional elements we discussed before: goals and tasks, questions and objections, pain points, touchpoints, and service gaps. But now these elements become the basis for how the AI evaluates questions from each persona’s perspective, synthesizing their views into actionable recommendations.</p><h2 id="implementation-options">Implementation Options</h2><p>You can set this up with varying levels of sophistication depending on your resources and needs.</p><h3 id="the-simple-approach">The Simple Approach</h3><p>Most AI platforms now offer project or workspace features that let you upload reference documents. In ChatGPT, these are called Projects. Claude has a similar feature. Copilot and Gemini call them Spaces or Gems.</p><p>To get started, create a dedicated project and upload your key research documents and personas. Then write clear instructions telling the AI to consult all personas when responding to questions. Something like:</p><blockquote>You are helping stakeholders understand our users. When asked questions, consult all of the user personas in this project and provide: (1) a brief summary of how each persona would likely respond, (2) an overview highlighting where they agree and where they differ, and (3) recommendations based on their collective perspectives. Draw on all the research documents to inform your analysis. If the research does not fully cover a topic, search social platforms like Reddit, Twitter, and relevant forums to see how people matching these personas discuss similar issues. If you are still unsure about something, say so honestly and suggest what additional research might help.</blockquote><p>This approach has some limitations. There are caps on how many files you can upload, so you might need to prioritize your most important research or consolidate your personas into a single comprehensive document.</p><h3 id="the-more-sophisticated-approach">The More Sophisticated Approach</h3><p>For larger organizations or more ongoing use, a tool like <a href="https://www.notion.com/">Notion</a> offers advantages because it can hold your entire <strong>research repository</strong> and has AI capabilities built in. You can create databases for different types of research, link them together, and then use the AI to query across everything.</p><figure><a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/4-notion-user-research.png"></img></a><figcaption>Notion is a powerful tool for user research with built-in AI functionality that can refer to all your personas as well as your entire research repository. (<a href="https://files.smashing.media/articles/giving-users-voice-virtual-personas/4-notion-user-research.png">Large preview</a>)</figcaption></figure><p>The benefit here is that the AI has access to much <strong>more context</strong>. When a stakeholder asks a question, it can draw on surveys, support tickets, interview transcripts, and analytics data all at once. This makes for richer, more nuanced responses.</p><h2 id="what-this-does-not-replace">What This Does Not Replace</h2><p>I should be clear about the limitations.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aVirtual%20personas%20are%20not%20a%20substitute%20for%20talking%20to%20real%20users.%20They%20are%20a%20way%20to%20make%20existing%20research%20more%20accessible%20and%20actionable.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fgiving-users-voice-virtual-personas%2f">Virtual personas are not a substitute for talking to real users. They are a way to make existing research more accessible and actionable.</a></p></blockquote><p>There are several scenarios where you still need primary research:</p><ul><li>When launching something genuinely new that your existing research does not cover;</li><li>When you need to validate specific designs or prototypes;</li><li>When your repository data is getting stale;</li><li>When stakeholders need to hear directly from real humans to build empathy.</li></ul><p>In fact, you can configure the AI to recognize these situations. When someone asks a question that goes beyond what the research can answer, the AI can respond with something like: <em>“I do not have enough information to answer that confidently. This might be a good question for a quick user interview or survey.”</em></p><p>And when you do conduct new research, that data feeds back into the repository. The personas evolve over time as your understanding deepens. This is much better than the traditional approach, where personas get created once and then slowly drift out of date.</p><h2 id="the-organizational-shift">The Organizational Shift</h2><p>If this approach catches on in your organization, something interesting happens.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20UX%20team%e2%80%99s%20role%20shifts%20from%20being%20the%20gatekeepers%20of%20user%20knowledge%20to%20being%20the%20curators%20and%20maintainers%20of%20the%20repository.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fgiving-users-voice-virtual-personas%2f">The UX team’s role shifts from being the gatekeepers of user knowledge to being the curators and maintainers of the repository.</a></p></blockquote><p>Instead of spending time creating reports that may or may not get read, you spend time ensuring the repository stays current and that the AI is configured to give helpful responses.</p><p>Research communication changes from push (presentations, reports, emails) to pull (stakeholders asking questions when they need answers). <strong>User-centered thinking</strong> becomes distributed across the organization rather than concentrated in one team.</p><p>This does not make UX researchers less valuable. If anything, it makes them more valuable because their work now has a wider reach and greater impact. But it does change the nature of the work.</p><h2 id="getting-started">Getting Started</h2><p>If you want to try this approach, start small. If you need a primer on functional personas before diving in, I have written a <a href="https://boagworld.com/usability/personas/">detailed guide to creating them</a>. Pick one project or team and set up a simple implementation using ChatGPT Projects or a similar tool. Gather whatever research you have (even if it feels incomplete), create one or two personas, and see how stakeholders respond.</p><p>Pay attention to what questions they ask. These will tell you where your research has gaps and what additional data would be most valuable.</p><p>As you refine the approach, you can expand to more teams and more sophisticated tooling. But the core principle stays the same: <strong>take all that scattered user knowledge and give it a voice that anyone in your organization can hear.</strong></p><p>In my previous article, I argued that we should move from demographic personas to functional personas that focus on what users are trying to do. Now I am suggesting we take the next step: from static personas to interactive ones that can actually participate in the conversations where decisions get made.</p><p>Because every day, across your organization, people are making decisions that affect your users. And your users deserve a seat at the table, even if it is a virtual one.</p><h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/">A Closer Look At Personas: What They Are And How They Work | 1</a>”, Shlomo Goltz</li><li>“<a href="https://www.smashingmagazine.com/2018/04/design-process-data-based-personas/">How To Improve Your Design Process With Data-Based Personas</a>”, Tim Noetzel</li><li>“<a href="https://www.smashingmagazine.com/2025/10/how-make-ux-research-hard-to-ignore/">How To Make Your UX Research Hard To Ignore</a>”, Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2023/01/build-strong-customer-relationships-user-research/">How To Build Strong Customer Relationships For User Research</a>”, Renaissance Rachel</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>How To Measure The Impact Of Features</h1>
<p>hello@smashingmagazine.com (Vitaly Friedman) — Fri, 19 Dec 2025 10:00:00 GMT</p>
<h1>How To Measure The Impact Of Features — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>8 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Meet TARS — a simple, repeatable, and meaningful UX metric designed specifically to track the performance of product features. Upcoming part of the <a href="https://measure-ux.com/">Measure UX & Design Impact</a> (use the code 🎟 <code>IMPACT</code> to save 20% off today).</section></div><p>So we design and ship a <strong>shiny new feature</strong>. How do we know if it’s working? How do we measure and track its impact? There is <a href="https://measuringu.com/an-overview-of-70-ux-metrics/">no shortage in UX metrics</a>, but what if we wanted to establish a <strong>simple, repeatable</strong>, meaningful UX metric — specifically for our features? Well, let’s see how to do just that.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/1-impact-features-tars.jpg"></img></a><figcaption>With <a href="https://uxdesign.cc/tars-a-product-metric-game-changer-c523f260306a?sk=v2%2F2a9d7d1e-bae9-4875-9063-4b6a10ae110c">TARS</a>, we can assess how effective features are and how well they are performing.(<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/1-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><p>I first heard about the <strong>TARS framework</strong> from Adrian H. Raudschl’s wonderful article on “<a href="https://uxdesign.cc/tars-a-product-metric-game-changer-c523f260306a?sk=v2%2F2a9d7d1e-bae9-4875-9063-4b6a10ae110c">How To Measure Impact of Features</a>”. Here, Adrian highlighted how his team tracks and decides which features to focus on — and then maps them against each other in a <strong>2×2 quadrants matrix</strong>.</p><p>It turned out to be a very useful framework to <strong>visualize</strong> the impact of UX work through the lens of business metrics.</p><p>Let’s see how it works.</p><h2 id="1-target-audience">1. Target Audience (%)</h2><p>We start by quantifying the <strong>target audience</strong> by exploring what percentage of a product’s users have the specific problem that a feature aims to solve. We can study existing or similar features that try to solve similar problems, and how many users engage with them.</p><p>Target audience <strong>isn’t the same</strong> as feature usage though. As Adrian noted, if we know that an existing Export Button feature is used by 5% of all users, it doesn’t mean that the target audience is 5%. <strong>More users</strong> might have the problem that the export feature is trying to solve, but they can’t find it.</p><blockquote>Question we ask: “What percentage of all our product’s users have that specific problem that a new feature aims to solve?”</blockquote><h2 id="2-a-adoption">2. A = Adoption (%)</h2><p>Next, we measure how well we are <strong>“acquiring”</strong> our target audience. For that, we track how many users actually engage <em>successfully</em> with that feature over a specific period of time.</p><p>We <strong>don’t focus on CTRs or session duration</strong> there, but rather if users <em>meaningfully</em> engage with it. For example, if anything signals that they found it valuable, such as sharing the export URL, the number of exported files, or the usage of filters and settings.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/2-impact-features-tars.jpg"></img></a><figcaption>Adoption rates: from low adoption (<20%) to high adoption (>60%). Illustration by <a href="https://uxdesign.cc/tars-a-product-metric-game-changer-c523f260306a?sk=v2%2F2a9d7d1e-bae9-4875-9063-4b6a10ae110c">Adrian Raudaschl</a>. (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/2-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><p>High <strong>feature adoption</strong> (>60%) suggests that the problem was impactful. Low adoption (<20%) might imply that the problem has simple workarounds that people have relied upon. Changing habits takes time, too, and so low adoption in the beginning is expected.</p><p>Sometimes, low feature adoption has nothing to do with the feature itself, but rather <strong>where it sits in the UI</strong>. Users might never discover it if it’s hidden or if it has a confusing label. It must be obvious enough for people to stumble upon it.</p><p>Low adoption doesn’t always equal failure. If a problem only affects 10% of users, hitting 50–75% adoption within that specific niche means the feature is a <strong>success</strong>.</p><blockquote>Question we ask: “What percentage of active target users actually use the feature to solve that problem?”</blockquote><h2 id="3-retention">3. Retention (%)</h2><p>Next, we study whether a feature is actually used repeatedly. We measure the frequency of use, or specifically, how many users who engaged with the feature actually keep using it over time. Typically, it’s a strong signal for <strong>meaningful impact</strong>.</p><p>If a feature has >50% retention rate (avg.), we can be quite confident that it has a <strong>high strategic importance</strong>. A 25–35% retention rate signals medium strategic significance, and retention of 10–20% is then low strategic importance.</p><blockquote>Question we ask: “Of all the users who meaningfully adopted a feature, how many came back to use it again?”</blockquote><h2 id="4-satisfaction-score-ces">4. Satisfaction Score (CES)</h2><p>Finally, we measure the <strong>level of satisfaction</strong> that users have with that feature that we’ve shipped. We don’t ask everyone — we ask only “retained” users. It helps us spot hidden troubles that might not be reflected in the retention score.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/3-impact-features-tars.jpg"></img></a><figcaption>We ask users how easy it was to solve a problem after they used a feature. Illustration by <a href="https://uxdesign.cc/tars-a-product-metric-game-changer-c523f260306a?sk=v2%2F2a9d7d1e-bae9-4875-9063-4b6a10ae110c">Adrian Raudaschl</a>. (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/3-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><p>Once users actually used a feature multiple times, we ask them <strong>how easy it was to solve</strong> a problem after they used that feature — between “much more difficult” and “much easier than expected”. We know how we want to score.</p><h2 id="using-tars-for-feature-strategy">Using TARS For Feature Strategy</h2><p>Once we start measuring with TARS, we can calculate an <strong>S÷T score</strong> — the percentage of Satisfied Users ÷ Target Users. It gives us a sense of how well a feature is performing for our intended target audience. Once we do that for every feature, we can map all features across 4 quadrants in a <strong>2×2 matrix</strong>.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/4-impact-features-tars.jpg"></img></a><figcaption>Evaluating features on a 2×2 matrix based on S/T score Illustration by <a href="https://uxdesign.cc/tars-a-product-metric-game-changer-c523f260306a?sk=v2%2F2a9d7d1e-bae9-4875-9063-4b6a10ae110c">Adrian Raudaschl</a>. (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/4-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><p><strong>Overperforming features</strong> are worth paying attention to: they have low retention but high satisfaction. It might simply be features that users don’t have to use frequently, but when they do, it’s extremely effective.</p><p><strong>Liability features</strong> have high retention but low satisfaction, so perhaps we need to work on them to improve them. And then we can also identify <strong>core features</strong> and project features — and have a conversation with designers, PMs, and engineers on what we should work on next.</p><h2 id="conversion-rate-is-not-a-ux-metric">Conversion Rate Is Not a UX Metric</h2><p>TARS doesn’t cover conversion rate, and for a good reason. As <a href="https://www.linkedin.com/posts/fabian-lenz-digital-experience-leadership_conversion-rate-is-not-a-ux-metric-yes-activity-7394261839506739200-78G9">Fabian Lenz noted</a>, conversion is often considered to be the <strong>ultimate indicator of success</strong> — yet in practice it’s always very difficult to present a clear connection between smaller design initiatives and big conversion goals.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/5-impact-features-tars.png"></img></a><figcaption>Leading vs. Lagging Measures by <a href="https://measuringu.com/leading-vs-lagging/">Jeff Sauro and James R. Lewis</a>. (But please do avoid NPS at all costs). (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/5-impact-features-tars.png">Large preview</a>)</figcaption></figure><p>The truth is that almost everybody on the team is working towards better conversion. An uptick might be connected to <strong>many different initiatives</strong> — from sales and marketing to web performance boost to seasonal effects to UX initiatives.</p><p>UX can, of course, improve conversion, but it’s not really a UX metric. Often, people simply <strong>can’t choose the product</strong> they are using. And often a desired business outcome comes out of necessity and struggle, rather than trust and appreciation.</p><h3 id="high-conversion-despite-bad-ux">High Conversion Despite Bad UX</h3><p>As Fabian <a href="https://www.linkedin.com/posts/fabian-lenz-digital-experience-leadership_conversion-rate-is-not-a-ux-metric-yes-activity-7394261839506739200-78G9/">writes</a>, <strong>high conversion rate</strong> can happen despite poor UX, because:</p><ul><li><strong>Strong brand power</strong> pulls people in,</li><li>Aggressive but effective <strong>urgency tactics</strong>,</li><li>Prices are extremely attractive,</li><li>Marketing performs brilliantly,</li><li>Historical customer loyalty,</li><li>Users simply have no alternative.</li></ul><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/6-impact-features-tars.jpg"></img></a><figcaption>A practical overview of design metrics and UX scorecards: <a href="https://uxplanet.org/measuring-ux-your-first-step-towards-objective-evaluation-a408b312777b">Measuring UX: Your First Step Towards Objective Evaluation</a> by Roman Videnov. (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/6-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><h3 id="low-conversion-despite-great-ux">Low Conversion Despite Great UX</h3><p>At the same time, a low conversion rate can occur despite great UX, because:</p><ul><li><strong>Offers aren’t relevant</strong> to the audience,</li><li><strong>Users don’t trust the brand</strong>,</li><li>Poor business model or high risk of failure,</li><li>Marketing doesn’t reach the right audience,</li><li>External factors (price, timing, competition).</li></ul><p>An improved conversion is the <strong>positive outcome of UX initiatives</strong>. But good UX work typically improves task completion, reduces time on task, minimizes errors, and avoids decision paralysis. And there are plenty of <a href="https://www.linkedin.com/posts/vitalyfriedman_how-to-measure-ux-httpslnkdine5uedtzy-activity-7332664809382952960-HERA">actionable design metrics we could use</a> to track UX and drive sustainable success.</p><h2 id="wrapping-up">Wrapping Up</h2><p><strong>Product metrics</strong> alone don’t always provide an accurate view of how well a product performs. Sales might perform well, but users might be extremely inefficient and frustrated. Yet the churn is low because users can’t choose the tool they are using.</p><figure><a href="https://files.smashing.media/articles/how-measure-impact-features-tars/7-impact-features-tars.jpg"></img></a><figcaption><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7140641630507687936-YTI7">Design KPIs and UX Metrics</a>, a quick overview by yours truly. Numbers are, of course, placeholders. (<a href="https://files.smashing.media/articles/how-measure-impact-features-tars/7-impact-features-tars.jpg">Large preview</a>)</figcaption></figure><p>We need UX metrics to understand and improve user experience. What I love most about TARS is that it’s a neat way to connect customers’ usage and <strong>customers’ experience with relevant product metrics</strong>. Personally, I would extend TARS with <a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7140641630507687936-YTI7">UX-focused metrics and KPIs</a> as well — depending on the needs of the project.</p><p>Huge thanks to <a href="https://www.linkedin.com/in/adrian-raudaschl/">Adrian H. Raudaschl</a> for putting it together. And if you are interested in metrics, I highly recommend you follow him for practical and useful guides all around just that!</p><h2 id="meet-how-to-measure-ux-and-design-impact">Meet “How To Measure UX And Design Impact”</h2><p>You can find more details on <strong>UX Strategy</strong> in 🪴 <a href="https://measure-ux.com/"><strong>Measure UX & Design Impact</strong></a> (8h), a practical guide for designers and UX leads to measure and show your UX impact on business. Use the code 🎟 <code>IMPACT</code> to save 20% off today. <a href="https://measure-ux.com/">Jump to the details</a>.</p><figure><a href="https://measure-ux.com/" title="How To Measure UX and Design Impact, with Vitaly Friedman"></img></a></figure><h2 id="useful-resources">Useful Resources</h2><ul><li>“<a href="https://measure-ux.com">How To Measure UX and Design Impact</a>”, by yours truly</li><li>“<a href="https://thecdo.school/books">Business Thinking For Designers</a>”, by Ryan Rumsey</li><li>“<a href="https://www.linkedin.com/feed/update/urn:li:activity:7338462034763661312/">ROI of Design Project</a></li><li>“<a href="https://articles.centercentre.com/how-the-right-ux-metrics-show-game-changing-value/">How the Right UX Metrics Show Game-Changing Value</a>”, by Jared Spool</li><li>“<a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-research-activity-7164173642887606274-rEqq">Research Sample Size Calculators</a>”</li></ul><h3 id="further-reading">Further Reading</h3><ul><li>“<a href="https://www.smashingmagazine.com/2025/11/designing-for-stress-emergency/">Designing For Stress And Emergency</a>”, Vitaly Friedman</li><li>“<a href="https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/">AI In UX: Achieve More With Less</a>”, Paul Boag</li><li>“<a href="https://www.smashingmagazine.com/2025/11/accessibility-problem-authentication-methods-captcha/">The Accessibility Problem With Authentication Methods Like CAPTCHA</a>”, Eleanor Hecks</li><li>“<a href="https://www.smashingmagazine.com/2025/09/from-prompt-to-partner-designing-custom-ai-assistant/">From Prompt To Partner: Designing Your Custom AI Assistant</a>”, Lyndon Cerejo</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Smashing Animations Part 7: Recreating Toon Text With CSS And SVG</h1>
<p>hello@smashingmagazine.com (Andy Clarke) — Wed, 17 Dec 2025 10:00:00 GMT</p>
<h1>Recreating Toon Text With CSS And SVG — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>11 min read</li><li><a href="http://www.smashingmagazine.com/category/svg">SVG</a>,
<a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>In this article, pioneering author and web designer <a href="https://stuffandnonsense.co.uk">Andy Clarke</a> shows his techniques for creating <a href="https://stuffandnonsense.co.uk/toon-text/index.html">Toon Text titles</a> using modern CSS and SVG.</section></div><p>After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and “<a href="https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/">How Classic Cartoons Inspire Modern CSS</a>.” To round off this year, I want to show you how to use modern CSS to create that element that makes Toon Titles so impactful: their typography.</p><h2 id="title-artwork-design">Title Artwork Design</h2><p>In the silent era of the 1920s and early ’30s, the typography of a film’s title card created a mood, set the scene, and reminded an audience of the type of film they’d paid to see.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/1-typographic-title-cards.png"></img></a><figcaption>Typographic title cards from the early years of cinema. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/1-typographic-title-cards.png">Large preview</a>)</figcaption></figure><p>Cartoon title cards were also branding, mood, and scene-setting, all rolled into one. In the early years, when major studio budgets were bigger, these title cards were often illustrative and painterly.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/2-tom-jerry-title-cards.png"></img></a><figcaption>Top: William Hanna and Joseph Barbera’s 1940s Tom & Jerry title cards. Bottom: Colour versions released in 1957. © Warner Bros. Entertainment Inc. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/2-tom-jerry-title-cards.png">Large preview</a>)</figcaption></figure><p>But when television boomed during the 1950s, budgets dropped, and cards designed by artists like Lawrence “Art” Goble adopted a new visual language, becoming more graphic, stylised, and less intricate.</p><p><strong>Note:</strong> <em>Lawrence “Art” Goble is one of the often overlooked heroes of mid-century American animation. He primarily worked for Hanna-Barbera during its most influential years of the 1950s and 1960s.</em></p><p>Goble wasn’t a character animator. His role was to create atmosphere, so he designed environments for <em>The Flintstones</em>, <em>Huckleberry Hound</em>, <em>Quick Draw McGraw</em>, and <em>Yogi Bear</em>, as well as the opening title cards that set the tone. His title cards, featuring paintings with a logo overlaid, helped define the iconic look of Hanna-Barbera.</p><p>Goble’s artwork for characters such as Quick Draw McGraw and Yogi Bear was effective on smaller TV screens. Rather than reproducing a still from the cartoon, he focused on presenting a single, strong idea — often in silhouette — that captured its essence. In “The Buzzin’ Bear,” Yogi buzzes by in a helicopter. He bounces away, pic-a-nic basket in hand, in “Bear on a Picnic,” and for his “Prize Fight Fright,” Yogi boxes the title text.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/3-title-cards-yogi-bear.png"></img></a><figcaption>Title cards for Hanna-Barbera’s Yogi Bear. © Warner Bros. Entertainment Inc. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/3-title-cards-yogi-bear.png">Large preview</a>)</figcaption></figure><p>With little or no motion to rely on, Goble’s single frames had to create a mood, set the scene, and describe a story. They did this using flat colours, graphic shapes, and typography that was frequently integrated into the artwork.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/4-title-cards-quick-draw-mcgraw.png"></img></a><figcaption>Title cards for Hanna-Barbera’s Quick Draw McGraw. © Warner Bros. Entertainment Inc. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/4-title-cards-quick-draw-mcgraw.png">Large preview</a>)</figcaption></figure><p>As designers who work on the web, toon titles can teach us plenty about how to convey a brand’s personality, make a first impression, and set expectations for someone’s experience using a product or website. We can learn from the artists’ techniques to create effective banners, landing-page headers, and even good ol’ fashioned splash screens.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="toon-title-typography">Toon Title Typography</h2><p>Cartoon title cards show how merging type with imagery delivers the punch a header or hero needs. With a handful of <code>text-shadow</code>, <code>text-stroke</code>, and <code>transform</code> tricks, modern CSS lets you tap into that same energy.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/5-title-cards-augie-doggie.png"></img></a><figcaption>Title cards for Hanna-Barbera’s Augie Doggie. © Warner Bros. Entertainment Inc. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/5-title-cards-augie-doggie.png">Large preview</a>)</figcaption></figure><h2 id="the-toon-text-title-generator">The Toon Text Title Generator</h2><p>Partway through writing this article, I realised it would be useful to have a tool for generating text styled like the cartoon titles I love so much. <a href="https://stuffandnonsense.co.uk/toon-text/tool.html">So I made one.</a></p><p>My Toon Text Title Generator lets you experiment with colours, strokes, and multiple text shadows. You can adjust paint order, apply letter spacing, preview your text in a selection of sample fonts, and then copy the generated CSS straight to your clipboard to use in a project.</p><h2 id="toon-title-css">Toon Title CSS</h2><p>You can simply copy-paste the CSS that the Toon Text Title Generator provides you. But let’s look closer at what it does.</p><h3 id="text-shadow">Text shadow</h3><p>Look at the type in this title from Augie Doggie’s episode “Yuk-Yuk Duck,” with its pale yellow letters and dark, hard, offset shadow that lifts it off the background and creates the illusion of depth.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/6-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/6-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>You probably already know that <code>text-shadow</code> accepts four values: (1) horizontal and (2) vertical offsets, (3) blur, and (4) a colour which can be solid or semi-transparent. Those offset values can be positive or negative, so I can replicate “Yuk-Yuk Duck” using a hard shadow pulled down and to the right:</p><pre><code>color: #f7f76d;
text-shadow: 5px 5px 0 #1e1904;
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/7-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/7-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>On the other hand, this “Pint Giant” title has a different feel with its negative semi-soft shadow:</p><pre><code>color: #c2a872;
text-shadow:
  -7px 5px 0 #b100e,
  0 -5px 10px #546c6f;
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/8-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/8-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>To add extra depth and create more interesting effects, I can layer multiple shadows. For “Let’s Duck Out,” I combine four shadows: the first a solid shadow with a negative horizontal offset to lift the text off the background, followed by progressively softer shadows to create a blur around it:</p><pre><code>color: #6F4D80;
text-shadow:
  -5px 5px 0 #260e1e, /* Shadow 1 */
  0 0 15px #e9ce96,   /* Shadow 2 */
  0 0 30px #e9ce96,   /* Shadow 3 */
  0 0 30px #e9ce96;   /* Shadow 4 */
</code></pre><p>These shadows show that using <code>text-shadow</code> isn’t just about creating lighting effects, as they can also be decorative and add personality.</p><h3 id="text-stroke">Text Stroke</h3><p>Many cartoon title cards feature letters with a bold outline that makes them stand out from the background. I can recreate this effect using <code>text-stroke</code>. For a long time, this property was only available via a <code>-webkit-</code> prefix, but that also means it’s now supported across modern browsers.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/9-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/9-toon-text-collection.png">Large preview</a>)</figcaption></figure><p><code>text-stroke</code> is a shorthand for two properties. The first, <code>text-stroke-width</code>, draws a contour around individual letters, while the second, <code>text-stroke-color</code>, controls its colour. For “Whatever Goes Pup,” I added a <code>4px</code> blue stroke to the yellow text:</p><pre><code>color: #eff0cd;
-webkit-text-stroke: 4px #7890b5;
text-stroke: 4px #7890b5;
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/10-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/10-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>Strokes can be especially useful when they’re combined with shadows, so for “Growing, Growing, Gone,” I added a thin <code>3px</code> stroke to a barely blurred <code>1px</code> shadow to create this three-dimensional text effect:</p><pre><code>color: #fbb999;
text-shadow: 3px 5px 1px #5160b1;
-webkit-text-stroke: 3px #984336;
text-stroke: 3px #984336;
</code></pre><h3 id="paint-order">Paint Order</h3><p>Using <code>text-stroke</code> doesn’t always produce the expected result, especially with thinner letters and thicker strokes, because by default the browser draws a stroke over the fill. Sadly, CSS still does not permit me to adjust stroke placement as I often do in Sketch. However, the <code>paint-order</code> property has values that allow me to place the stroke behind, rather than in front of, the fill.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/11-paint-order.png"></img></a><figcaption>Left: <code>paint-order: stroke</code>. Right: <code>paint-order: fill</code>. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/11-paint-order.png">Large preview</a>)</figcaption></figure><p><code>paint-order: stroke</code> paints the stroke first, then the fill, whereas <code>paint-order: fill</code> does the opposite:</p><pre><code>color: #fbb999;
paint-order: fill;
text-shadow: 3px 5px 1px #5160b1;
text-stroke-color:#984336;
text-stroke-width: 3px;
</code></pre><p>An effective stroke keeps letters readable, adds weight, and — when combined with shadows and paint order — gives flat text real presence.</p><h2 id="backgrounds-inside-text">Backgrounds Inside Text</h2><p>Many cartoon title cards go beyond flat colour by adding texture, gradients, or illustrated detail to the lettering. Sometimes that’s a texture, other times it might be a gradient with a subtle tonal shift. On the web, I can recreate this effect by using a background image or gradient behind the text, and then clipping it to the shape of the letters. This relies on two properties working together: <code>background-clip: text</code> and <code>text-fill-color: transparent</code>.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/12-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/12-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>First, I apply a background behind the text. This can be a bitmap or vector image or a CSS gradient. For this example from the Quick Draw McGraw episode “Baba Bait,” the title text includes a subtle top–bottom gradient from dark to light:</p><pre><code>background: linear-gradient(0deg, #667b6a, #1d271a);
</code></pre><p>Next, I clip that background to the glyphs and make the text transparent so the background shows through:</p><pre><code>-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
</code></pre><p>With just those two lines, the background is no longer painted behind the text; instead, it’s painted within it. This technique works especially well when combined with strokes and shadows. A clipped gradient provides the lettering with colour and texture, a stroke keeps its edges sharp, and a shadow elevates it from the background. Together, they recreate the layered look of hand-painted title cards using nothing more than a little CSS. As always, test clipped text carefully, as browser quirks can sometimes affect shadows and rendering.</p><h3 id="splitting-text-into-individual-characters">Splitting Text Into Individual Characters</h3><p>Sometimes I don’t want to style a whole word or heading. I want to style individual letters — to nudge a character into place, give one glyph extra weight, or animate a few letters independently.</p><p>In plain HTML and CSS, there’s only one reliable way to do that: wrap each character in its own <code>span</code> element. I could do that manually, but that would be fragile, hard to maintain, and would quickly fall apart when copy changes. Instead, when I need per-letter control, I use a text-splitting library like <a href="https://www.spltjs.com">splt.js</a> (although other solutions are available). This takes a text node and automatically wraps words or characters, giving me extra hooks to animate and style without messing up my markup.</p><p>It’s an approach that keeps my HTML readable and semantic, while giving me the fine-grained control I need to recreate the uneven, characterful typography you see in classic cartoon title cards. However, this approach comes with accessibility caveats, as most screen readers read text nodes in order. So this:</p><pre><code><h2>Hum Sweet Hum</h2>
</code></pre><p>…reads as you’d expect:</p><blockquote>Hum Sweet Hum</blockquote><p>But this:</p><pre><code><h2>
<span>H</span>
<span>u</span>
<span>m</span>
<!-- etc. -->
</h2>
</code></pre><p>…can be interpreted differently depending on the browser and screen reader. Some will concatenate the letters and read the words correctly. Others may pause between letters, which in a worst-case scenario might sound like:</p><blockquote>“H…” “U…” “M…”</blockquote><p>Sadly, some splitting solutions don’t deliver an always accessible result, so I’ve written my own text splitter, <a href="https://stuffandnonsense.co.uk/toon-text/splinter.html#section-install">splinter.js</a>, which is currently in beta.</p><h3 id="transforming-individual-letters">Transforming Individual Letters</h3><p>To activate my Toon Text Splitter, I add a <code>data-</code> attribute to the element I want to split:</p><pre><code><h2 data-split="toon">Hum Sweet Hum</h2>
</code></pre><p>First, my script separates each word into individual letters and wraps them in a <code>span</code> element with class and ARIA attributes applied:</p><pre><code><span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>
</code></pre><p>The script then takes the initial content of the split element and adds it as an aria attribute to help maintain accessibility:</p><div><pre><code><h2 data-split="toon" aria-label="Hum Sweet Hum">
  <span class="toon-char" aria-hidden="true">H</span>
  <span class="toon-char" aria-hidden="true">u</span>
  <span class="toon-char" aria-hidden="true">m</span>
</h2>
</code></pre></div><p>With those class attributes applied, I can then style individual characters as I choose.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/13-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/13-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>For example, for “Hum Sweet Hum,” I want to replicate how its letters shift away from the baseline. After using my Toon Text Splitter, I applied four different <code>translate</code> values using several <code>:nth-child</code> selectors to create a semi-random look:</p><pre><code>/* 4th, 8th, 12th... */
.toon-char:nth-child(4n) { translate: 0 -8px; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { translate: 0 -4px; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { translate: 0 4px; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { translate: 0 8px; }
</code></pre><p>But <code>translate</code> is only one property I can use to <code>transform</code> my toon text.</p><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/14-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/14-toon-text-collection.png">Large preview</a>)</figcaption></figure><p>I could also rotate those individual characters for an even more chaotic look:</p><pre><code>/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) { rotate: -4deg; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { rotate: -8deg; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { rotate: 4deg; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { rotate: 8deg; }
</code></pre><p>But <code>translate</code> is only one property I can use to <code>transform</code> my toon text. I could also <code>rotate</code> those individual characters for an even more chaotic look:</p><pre><code>/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) {
rotate: -4deg; }

/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) {
rotate: -8deg; }

/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) {
rotate: 4deg; }

/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) {
rotate: 8deg; }
</code></pre><p>And, of course, I could add animations to jiggle those characters and bring my toon text style titles to life. First, I created a keyframe animation that rotates the characters:</p><div><pre><code>@keyframes jiggle {
0%, 100% { transform: rotate(var(--base-rotate, 0deg)); }
25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); }
50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); }
75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); }
}
</code></pre></div><p>Before applying it to the <code>span</code> elements created by my Toon Text Splitter:</p><pre><code>.toon-char {
animation: jiggle 3s infinite ease-in-out;
transform-origin: center bottom; }
</code></pre><p>And finally, setting the rotation amount and a delay before each character begins to jiggle:</p><pre><code>.toon-char:nth-child(4n) { --base-rotate: -2deg; }
.toon-char:nth-child(4n+1) { --base-rotate: -4deg; }
.toon-char:nth-child(4n+2) { --base-rotate: 2deg; }
.toon-char:nth-child(4n+3) { --base-rotate: 4deg; }

.toon-char:nth-child(4n) { animation-delay: 0.1s; }
.toon-char:nth-child(4n+1) { animation-delay: 0.3s; }
.toon-char:nth-child(4n+2) { animation-delay: 0.5s; }
.toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
</code></pre><figure><a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/15-toon-text-collection.png"></img></a><figcaption>See this example in my Toon Text collection. (<a href="https://files.smashing.media/articles/smashing-animations-part-7-recreating-toon-text-css-svg/15-toon-text-collection.png">Large preview</a>)</figcaption></figure><h2 id="one-frame-to-make-an-impression">One Frame To Make An Impression</h2><p>Cartoon title artists had one frame to make an impression, and their typography was as important as the artwork they painted. The same is true on the web.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aA%20well-designed%20header%20or%20hero%20area%20needs%20clarity,%20character,%20and%20confidence%20%e2%80%94%20not%20simply%20a%20faded%20full-width%20background%20image.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fsmashing-animations-part-7-recreating-toon-text-css-svg%2f">A well-designed header or hero area needs clarity, character, and confidence — not simply a faded full-width background image.</a></p></blockquote><p>With a few carefully chosen CSS properties — shadows, strokes, clipped backgrounds, and some restrained animation — we can recreate that same impact. I love toon text not because I’m nostalgic, but because its design is intentional. Make deliberate choices, and let a little toon text typography add punch to your designs.</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Accessible UX Research, eBook Now Available For Download</h1>
<p>hello@smashingmagazine.com (Ari Stiles) — Tue, 09 Dec 2025 16:00:00 GMT</p>
<h1>Accessible UX Research, eBook Now Available For Download — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>8 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/accessibility">Accessibility</a>,
<a href="http://www.smashingmagazine.com/category/smashing-books">Smashing Books</a></li></ul><div><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>We’ve got exciting news! eBook versions of “Accessible UX Research,” a new Smashing Book by Michele A. Williams, are now available for download! Which means soon the book will go to the printer. Order the eBook for instant download now or <a data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-product-sku="accessible-ux-research" data-silent="true" href="http://www.smashingmagazine.com/printed-books/accessible-ux-research/">reserve your print copy at the presale price.</a></section></div><p>Smashing Library expands again! We’re so happy to announce our newest book, <strong><em>Accessible UX Research</em></strong>, is now <strong>available for download</strong> in eBook formats. Michele A. Williams takes us for a deep dive into the real world of UX testing, and provides a road map for including users with different abilities and needs in every phase of testing.</p><p>But the truth is, you don’t need to be conducting UX testing or even be a UX professional to get a lot out of this book. Michele gives in-depth descriptions of the <strong>assistive technology we should all be familiar with</strong>, in addition to disability etiquette, common pitfalls when creating accessible prototypes, and so much more. You’ll refer to this book again and again in your daily work.</p><figure><a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-opt.png" title="Tap for a large preview of the book."></img></a></figure><p>This is also your last chance to get your printed copy at our discounted presale price. We expect printed copies to start <strong>shipping in early 2026</strong>. We know you’ll love this book, but don’t just take our word for it — we asked a few industry experts to check out <em>Accessible UX Research</em> too:</p><blockquote></img>“<em>Accessible UX Research</em> stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a <strong>solid framework</strong> for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.<p>This is <strong>the book I wish I had</strong> when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”</p><p>Eric Bailey, Accessibility Advocate</p></blockquote><blockquote></img>“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a <strong>critical piece in the puzzle</strong> of actually doing and integrating that research into accessibility work day to day.”<p>Devon Pershing, Author of <em>The Accessibility Operations Guidebook</em></p></blockquote><blockquote></img>“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the <strong>depth of human experience</strong>. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”<p>Manuel Matuzović, Author of the <em>Web Accessibility Cookbook</em></p></blockquote><blockquote></img>“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A <strong>strong focus on real-world application</strong> equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”<p>Anna E. Cook, Accessibility and Inclusive Design Specialist</p></blockquote><h2>About The Book</h2><p>The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a <strong>practical guide to inclusive UX research</strong>, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.</p><p>Inside, you’ll learn how to:</p><ul><li><strong>Plan research</strong> that includes disabled participants from the start,</li><li><strong>Recruit participants</strong> with disabilities,</li><li><strong>Facilitate sessions</strong> that work for a range of access needs,</li><li><strong>Ask better questions</strong> and avoid unintentionally biased research methods,</li><li><strong>Build trust and confidence</strong> in your team around accessibility and inclusion.</li></ul><p>The book also challenges common assumptions about disability and urges readers to <strong>rethink what inclusion really means</strong> in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.</p><p>High-quality hardcover, 320 pages. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. <strong>Print edition shipping early 2026.</strong> eBook now available for download. <a href="https://smashed.by/accessibleresearchsample">Download a free sample</a> (PDF, 2.3MB) and <a data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-product-sku="accessible-ux-research" data-silent="true" href="http://www.smashingmagazine.com/printed-books/accessible-ux-research/">reserve your print copy at the presale price.</a></p><figure><a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-1-opt.png" title="Tap for a large preview."></img></a><figcaption>“Accessible UX Research” shares successful strategies that’ll help you recruit the participants you need for the study you’re designing. (<a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-1-opt.png">Large preview</a>)</figcaption></figure><h2>Contents</h2><ol><li><strong>Disability mindset</strong>: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</li><li><strong>Diversity of disability</strong>: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</li><li><strong>Disability in the stages of UX research</strong>: Disabled participants can and should be part of every research phase — formative, prototype, and summative.</li><li><strong>Recruiting disabled participants</strong>: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</li><li><strong>Designing your research</strong>: While our goal is to influence accessible products, our research execution must also be accessible.</li><li><strong>Facilitating an accessible study</strong>: Preparation and communication with your participants can ensure your study logistics run smoothly.</li><li><strong>Analyzing and reporting with accuracy and impact</strong>: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.</li><li><strong>Disability in the UX research field</strong>: Inclusion isn’t just for research <em>participants</em>, it’s important for our <em>colleagues</em> as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</li></ol><figure><a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-2-opt.png" title="Tap for a large preview."></img></a><figcaption>The book will challenge your disability mindset and what it means to be truly inclusive in your work. (<a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-2-opt.png">Large preview</a>)</figcaption></figure><h2>Who This Book Is For</h2><p>Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…</p><ol><li>You have been tasked to <strong>improve accessibility of your product</strong>, but need to know where to start to facilitate this successfully.</li><li>You want to establish a <strong>culture for accessibility</strong> in your company, but not sure how to make it work.</li><li>You want to <strong>move from WCAG/EAA compliance</strong> to established accessibility practices and inclusion in research practices and beyond.</li><li>You want to <strong>improve your overall accessibility knowledge</strong> and be viewed as an Accessibility Specialist for your organization.</li></ol><figure><a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-opt.png" title="Tap for a large preview of the book."></img></a></figure><h2>About the Author</h2><p><a href="https://mawconsultingllc.com/"></img></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.</p><h2>Technical Details</h2><ul><li>ISBN: <span>978-3-910835-03-0</span> (print)</li><li><strong>Quality hardcover</strong>, stitched binding, ribbon page marker.</li><li>Free worldwide airmail <strong>shipping from Germany early 2026</strong>. We are currently <strong>unable to ship printed books to the United States</strong> due to customs clearance issues. If you have any questions, please <a href="mailto:help@smashingmagazine.com">contact us any time</a>.</li><li>eBook now available for download as <strong>PDF, ePUB, and Amazon Kindle</strong>.</li><li><strong><a data-component="AddToCart" data-product-path="/ebooks/accessible-ux-research-ebook/" data-product-sku="accessible-ux-research-ebook" data-silent="true" href="http://www.smashingmagazine.com/ebooks/accessible-ux-research-ebook/">Order the eBook for instant download now.</a></strong></li><li><strong><a data-component="AddToCart" data-product-path="/printed-books/accessible-ux-research" data-product-sku="accessible-ux-research" data-silent="true" href="http://www.smashingmagazine.com/printed-books/accessible-ux-research/">Reserve your print copy at the presale price.</a></strong></li></ul><h2>Community Matters ❤️</h2><p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em></a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p><h2>More Smashing Books & Goodies</h2><p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p><p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="http://www.smashingmagazine.com/printed-books/">printed books that stand the test of time</a>. Trine, Heather, and Steven are three of these people. Have you checked out their books already?</p><div><figure><div><a href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/">The Ethical Design Handbook</a></h4><p>A practical guide on ethical design for digital products.</p><p><a data-component="AddToCart" data-product-path="/printed-books/ethical-design-handbook/" data-product-sku="ethical-design-handbook" href="http://www.smashingmagazine.com/printed-books/ethical-design-handbook/">Add to cart <span>$44</span></a></p></figcaption></figure><figure><div><a href="http://www.smashingmagazine.com/printed-books/understanding-privacy/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/understanding-privacy/">Understanding Privacy</a></h4><p>Everything you need to know to put your users first and make a better web.</p><p><a data-component="AddToCart" data-product-path="/printed-books/understanding-privacy/" data-product-sku="understanding-privacy" href="http://www.smashingmagazine.com/printed-books/understanding-privacy/">Add to cart <span>$44</span></a></p></figcaption></figure><figure><div><a href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/"></img></a></div><figcaption><h4><a href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4><p>Learn how touchscreen devices really work — and how people really use them.</p><p><a data-component="AddToCart" data-product-path="/printed-books/touch-design-for-mobile-interfaces/" data-product-sku="touch-design-for-mobile-interfaces" href="http://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Add to cart <span>$44</span></a></p></figcaption></figure></div><div></img>
<span>(cm, il)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>State, Logic, And Native Power: CSS Wrapped 2025</h1>
<p>hello@smashingmagazine.com (Brecht De Ruyte) — Tue, 09 Dec 2025 10:00:00 GMT</p>
<h1>CSS Wrapped 2025 — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>10 min read</li><li><a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/tools">Tools</a>,
<a href="http://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications with a native toolkit more powerful than ever. Here’s an unpacking of the highlights and how they connect to the broader evolution of modern CSS.</section></p><p>If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for <code>border-radius</code> to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don’t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn’t be topped. I’ve never been so happily wrong.</p><p>The Chrome team’s “<a href="https://chrome.dev/css-wrapped-2025/"><strong>CSS Wrapped 2025</strong></a>” is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions — from <a href="https://www.smashingmagazine.com/2024/08/css5-era-evolution/">defining “CSS5” eras</a> to the intricacies of <a href="https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework/">modern layout utilities</a> — I find myself looking at this year’s wrap-up with a huge sense of excitement. We are seeing a shift towards “Optimized Ergonomics” and “Next-gen interactions” that allow us to stop fighting the code and start sculpting interfaces in their natural state.</p><p>In this article, you can find <strong>a comprehensive look at the standout features from Chrome’s report</strong>, viewed through the lens of my recent experiments and hopes for the future of the platform.</p><h2 id="the-component-revolution-finally-a-native-customizable-select">The Component Revolution: Finally, A Native Customizable Select</h2><p>For years, we have relied on heavy JavaScript libraries to style dropdowns, a “decades-old problem” that the platform has finally solved. As I detailed in <a href="https://utilitybend.com/blog/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css">my deep dive into the history of the customizable select</a> (and related articles), this has been a long road involving <a href="https://open-ui.org/">Open UI</a>, bikeshedding names like <code><selectmenu></code> and <code><selectlist></code>, and finally landing on a solution that re-uses the existing <code><select></code> element.</p><p>The introduction of <code>appearance: base-select</code> is a strong foundation. It allows us to fully customize the <code><select></code> element — including the button and the dropdown list (via <code>::picker(select)</code>) — using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers.</p><p>We can opt in to this new behavior without breaking older browsers:</p><pre><code>select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}
</code></pre><p>The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays:</p><ul><li><strong>Demo:</strong> I created a <a href="https://codepen.io/utilitybend/pen/ByawgNN">Poké-adventure demo</a> showing how the new <code><selectedcontent></code> element can clone rich content (like a Pokéball icon) from an option directly into the button.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="JoXwwoZ" data-theme-id="light" data-user="smashingmag">See the Pen [A customizable select with images inside of the options and the selectedcontent [forked]](https://codepen.io/smashingmag/pen/JoXwwoZ) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/JoXwwoZ">A customizable select with images inside of the options and the selectedcontent [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><ul><li><strong>Demo:</strong> A comprehensive look at <a href="https://codepen.io/utilitybend/pen/GgRrLWb">styling the select with only pseudo-elements</a>.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="pvyqqJR" data-theme-id="light" data-user="smashingmag">See the Pen [A customizable select with only pseudo-elements [forked]](https://codepen.io/smashingmag/pen/pvyqqJR) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/pvyqqJR">A customizable select with only pseudo-elements [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><ul><li><strong>Demo:</strong> Or you can kick it up a notch with this <a href="https://codepen.io/utilitybend/pen/ByoBMBm">Menu selection demo using optgroups</a>.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="myPaaJZ" data-theme-id="light" data-user="smashingmag">See the Pen [An actual Select Menu with optgroups [forked]](https://codepen.io/smashingmag/pen/myPaaJZ) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/myPaaJZ">An actual Select Menu with optgroups [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><p>This feature alone signals a massive shift in how we will build forms, reducing dependencies and technical debt.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><p>Creating carousels has historically been a friction point between developers and clients. Clients love them, developers dread the JavaScript required to make them accessible and performant. The arrival of <code>::scroll-marker</code> and <code>::scroll-button()</code> pseudo-elements changes this dynamic entirely.</p><p>These features allow us to create navigation dots and scroll buttons purely with CSS, linked natively to the scroll container. As I wrote on my blog, this was <a href="https://utilitybend.com/blog/love-at-first-slide-creating-a-carousel-purely-out-of-css">Love at first slide</a>. The ability to create a fully functional, accessible slider without a single line of JavaScript is not just convenient; it is a triumph for performance. There are some accessibility concerns around this feature, and even though these are valid, there might be a way for us developers to make it work. The good thing is, all these UI changes are making it a lot easier than custom DOM manipulation and dragging around aria tags, but I digress…</p><p>We can now group markers automatically using <code>scroll-marker-group</code> and style the buttons using anchor positioning to place them exactly where we want.</p><div><pre><code>.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}
</code></pre></div><ul><li><strong>Demo:</strong> My experiment creating a <a href="https://codepen.io/utilitybend/pen/vEBQxNb">carousel purely out of HTML and CSS</a>, using anchor positioning to place the buttons.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="ogxJJjQ" data-theme-id="light" data-user="smashingmag">See the Pen [Carousel Pure HTML and CSS [forked]](https://codepen.io/smashingmag/pen/ogxJJjQ) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/ogxJJjQ">Carousel Pure HTML and CSS [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><ul><li><strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/bNbXZWb">Webshop slick slider remake</a> using <code>attr()</code> to pull background images dynamically into the markers.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="gbrZZPY" data-theme-id="light" data-user="smashingmag">See the Pen [Webshop slick slider remake in CSS [forked]](https://codepen.io/smashingmag/pen/gbrZZPY) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/gbrZZPY">Webshop slick slider remake in CSS [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><h2 id="state-queries-sticky-thing-stuck-snappy-thing-snapped">State Queries: Sticky Thing Stuck? Snappy Thing Snapped?</h2><p>For a long time, we have lacked the ability to know if a <a href="https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css">“sticky thing is stuck” or if a “snappy item is snapped”</a> without relying on IntersectionObserver hacks. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively.</p><p>By setting <code>container-type: scroll-state</code>, we can now style children based on whether they are stuck, snapped, or overflowing. This is a massive “quality of life” improvement that I have been eagerly waiting for since CSS Day 2023. It has even evolved a lot since we can also see the direction of the scroll, lovely!</p><p>For a simple example: we can finally apply a shadow to a header <em>only</em> when it is actually sticking to the top of the viewport:</p><pre><code>.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}
</code></pre><ul><li><strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/XWLQPOe">sticky header</a> that only applies a shadow when it is actually stuck.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="raeooxY" data-theme-id="light" data-user="smashingmag">See the Pen [Sticky headers with scroll-state query, checking if the sticky element is stuck [forked]](https://codepen.io/smashingmag/pen/raeooxY) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/raeooxY">Sticky headers with scroll-state query, checking if the sticky element is stuck [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><ul><li><strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/MWMZoqp">Pokémon-themed list</a> that uses scroll-state queries combined with anchor positioning to move a frame over the currently snapped character.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="vEGvvLM" data-theme-id="light" data-user="smashingmag">See the Pen [Scroll-state query to check which item is snapped with CSS, Pokemon version [forked]](https://codepen.io/smashingmag/pen/vEGvvLM) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/vEGvvLM">Scroll-state query to check which item is snapped with CSS, Pokemon version [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><h2 id="optimized-ergonomics-logic-in-css">Optimized Ergonomics: Logic In CSS</h2><p>The “Optimized Ergonomics” section of CSS Wrapped highlights features that make our workflows more intuitive. Three features stand out as transformative for how we write logic:</p><ol><li><strong><code>if()</code> Statements</strong><br></br>We are finally getting conditionals in CSS. The <code>if()</code> function acts like a ternary operator for stylesheets, allowing us to apply values based on media, support, or style queries inline. This reduces the need for verbose <code>@media</code> blocks for single property changes.</li><li><strong><code>@function</code> functions</strong><br></br>We can finally move some logic to a different place, resulting in some cleaner files, a real quality of life feature.</li><li><strong><code>sibling-index()</code> and <code>sibling-count()</code></strong><br></br>These tree-counting functions solve the issue of staggering animations or styling items based on list size. As I explored in <a href="https://utilitybend.com/blog/styling-siblings-with-css-has-never-been-easier-experimenting-with-sibling-count-and-sibling-index">Styling siblings with CSS has never been easier</a>, this eliminates the need to hard-code custom properties (like <code>--index: 1</code>) in our HTML.</li></ol><h3 id="example-calculating-layouts">Example: Calculating Layouts</h3><p>We can now write concise mathematical formulas. For example, staggering an animation for cards entering the screen becomes trivial:</p><pre><code>.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}
</code></pre><p>I even experimented with using these functions along with trigonometry to place items in a perfect circle without any JavaScript.</p><ul><li><strong>Demo:</strong> <a href="https://codepen.io/utilitybend/pen/wBKQPLr">Staggering card animations dynamically</a>.</li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="RNaEERz" data-theme-id="light" data-user="smashingmag">See the Pen [Stagger cards using sibling-index() [forked]](https://codepen.io/smashingmag/pen/RNaEERz) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/RNaEERz">Stagger cards using sibling-index() [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><ul><li><strong>Demo:</strong> Placing items in a <a href="https://codepen.io/utilitybend/pen/VYvVXLN">perfect circle</a> using <code>sibling-index</code>, <code>sibling-count</code>, and the new CSS <code>@function</code> feature.<br></br></li></ul><figure><p data-default-tab="result" data-height="480" data-slug-hash="XJdoojZ" data-theme-id="light" data-user="smashingmag">See the Pen [The circle using sibling-index, sibling-count and functions [forked]](https://codepen.io/smashingmag/pen/XJdoojZ) by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p><figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/XJdoojZ">The circle using sibling-index, sibling-count and functions [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</figcaption></figure><h2 id="my-css-to-do-list-features-i-can-t-wait-to-try">My CSS To-Do List: Features I Can’t Wait To Try</h2><p>While I have been busy sculpting selects and transitions, the “CSS Wrapped 2025” report is packed with other goodies that I haven’t had the chance to fire up in CodePen yet. These are high on my list for my next experiments:</p><h3 id="anchored-container-queries">Anchored Container Queries</h3><p>I used CSS Anchor Positioning for the buttons in my carousel demo, but “CSS Wrapped” highlights an evolution of this: <strong>Anchored Container Queries</strong>. This solves a problem we’ve all had with tooltips: if the browser flips the tooltip from top to bottom because of space constraints, the “arrow” often stays pointing the wrong way. With anchored container queries (<code>@container anchored(fallback: flip-block)</code>), we can style the element based on which fallback position the browser actually chose.</p><h3 id="nested-view-transition-groups">Nested View Transition Groups</h3><p>View Transitions have been a revolution, but they came with a specific trade-off: they flattened the element tree, which often broke 3D transforms or overflow: clip. I always had a feeling that it was missing something, and this might just be the answer. By using <code>view-transition-group: nearest</code>, we can finally nest transition groups within each other.</p><p>This allows us to maintain clipping effects or 3D rotations during a transition — something that was previously impossible because the elements were hoisted up to the top level.</p><pre><code>.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}
</code></pre><h3 id="typography-and-shapes">Typography and Shapes</h3><p>Finally, the ergonomist in me is itching to try <strong>Text Box Trim</strong>, which promises to remove that annoying extra whitespace above and below text content (the leading) to finally achieve perfect vertical alignment. And for the creative side, <code>corner-shape</code> and the <code>shape()</code> function are opening up non-rectangular layouts, allowing for “squaricles” and complex paths that respond to CSS variables. That being said, I can’t wait to have a design full of squircles!</p><h2 id="a-hopeful-future">A Hopeful Future</h2><p>We are witnessing a world where <strong>CSS is becoming capable of handling logic, state, and complex interactions that previously belonged to JavaScript</strong>. Features like <code>moveBefore</code> (preserving DOM state for iframes/videos) and <code>attr()</code> (using types beyond strings for colors and grids) further cement this reality.</p><p>While some of these features are currently experimental or specific to Chrome, the momentum is undeniable. We must hope for continued support across all browsers through initiatives like Interop to ensure these capabilities become the baseline. That being said, having browser engines is just as important as having all these awesome features in “Chrome first”. These new features need to be discussed, tinkered with, and tested before ever landing in browsers.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIt%20is%20a%20fantastic%20moment%20to%20get%20into%20CSS.%20We%20are%20no%20longer%20just%20styling%20documents;%20we%20are%20crafting%20dynamic,%20ergonomic,%20and%20robust%20applications%20with%20a%20native%20toolkit%20that%20is%20more%20powerful%20than%20ever.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fstate-logic-native-power-css-wrapped-2025%2f">It is a fantastic moment to get into CSS. We are no longer just styling documents; we are crafting dynamic, ergonomic, and robust applications with a native toolkit that is more powerful than ever.</a></p></blockquote><p>Let’s get going with this new era and spread the word.</p><p>This is <a href="https://chrome.dev/css-wrapped-2025/">CSS Wrapped</a>!</p><div></img>
<span>(gg, yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>How UX Professionals Can Lead AI Strategy</h1>
<p>hello@smashingmagazine.com (Paul Boag) — Mon, 08 Dec 2025 08:00:00 GMT</p>
<h1>How UX Professionals Can Lead AI Strategy — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>9 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/workflow">Workflow</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Lead your organization’s AI strategy before someone else defines it for you. A practical framework for UX professionals to shape AI implementation.</section></p><p>Your senior management is excited about AI. They’ve read the articles, attended the webinars, and seen the demos. They’re convinced that AI will transform your organization, boost productivity, and give you a competitive edge.</p><p>Meanwhile, you’re sitting in your UX role wondering what this means for your team, your workflow, and your users. You might even be worried about your job security.</p><p><strong>The problem is that</strong> the conversation about how AI gets implemented is happening right now, and if you’re not part of it, someone else will decide how it affects your work. That someone probably doesn’t understand user experience, research practices, or the subtle ways poor implementation can damage the very outcomes management hopes to achieve.</p><p>You have a choice. You can wait for directives to come down from above, or you can take control of the conversation and lead the AI strategy for your practice.</p><h2 id="why-ux-professionals-must-own-the-ai-conversation">Why UX Professionals Must Own the AI Conversation</h2><p>Management sees AI as efficiency gains, cost savings, competitive advantage, and innovation all wrapped up in one buzzword-friendly package. They’re not wrong to be excited. The technology is genuinely impressive and can deliver real value.</p><p><strong>But without UX input, AI implementations often fail users in predictable ways:</strong></p><ul><li>They automate tasks without understanding the judgment calls those tasks require.</li><li>They optimize for speed while destroying the quality that made your work valuable.</li></ul><p>Your expertise positions you perfectly to guide implementation. You understand users, workflows, quality standards, and the gap between what looks impressive in a demo and what actually works in practice.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h3 id="use-ai-momentum-to-advance-your-priorities">Use AI Momentum to Advance Your Priorities</h3><p>Management’s enthusiasm for AI creates an opportunity to advance priorities you’ve been fighting for unsuccessfully. When management is willing to invest in AI, you can connect those long-standing needs to the AI initiative. Position user research as essential for training AI systems on real user needs. Frame usability testing as the validation method that ensures AI-generated solutions actually work.</p><p>How AI gets implemented will shape your team’s roles, your users’ experiences, and your organization’s capability to deliver quality digital products.</p><h2 id="your-role-isn-t-disappearing-it-s-evolving">Your Role Isn’t Disappearing (It’s Evolving)</h2><p>Yes, AI will automate some of the tasks you currently do. But someone needs to decide which tasks get automated, how they get automated, what guardrails to put in place, and how automated processes fit around real humans doing complex work.</p><p>That someone should be <em>you</em>.</p><p>Think about what you already do. When you conduct user research, AI might help you transcribe interviews or identify themes. But you’re the one who knows which participant hesitated before answering, which feedback contradicts what you observed in their behavior, and which insights matter most for your specific product and users.</p><p>When you design interfaces, AI might generate layout variations or suggest components from your design system. But you’re the one who understands the constraints of your technical platform, the political realities of getting designs approved, and the edge cases that will break a clever solution.</p><p><strong>Your future value comes from the work you’re already doing:</strong></p><ul><li><strong>Seeing the full picture.</strong><br></br>You understand how this feature connects to that workflow, how this user segment differs from that one, and why the technically correct solution won’t work in your organization’s reality.</li><li><strong>Making judgment calls.</strong><br></br>You decide when to follow the design system and when to break it, when user feedback reflects a real problem versus a feature request from one vocal user, and when to push back on stakeholders versus find a compromise.</li><li><strong>Connecting the dots.</strong><br></br>You translate between technical constraints and user needs, between business goals and design principles, between what stakeholders ask for and what will actually solve their problem.</li></ul><p>AI will keep getting better at individual tasks. But you’re the person who decides which solution actually works for your specific context. The people who will struggle are those doing simple, repeatable work without understanding why. Your value is in understanding context, making judgment calls, and connecting solutions to real problems.</p><h2 id="step-1-understand-management-s-ai-motivations">Step 1: Understand Management’s AI Motivations</h2><p>Before you can lead the conversation, you need to understand what’s driving it. Management is responding to real pressures: cost reduction, competitive pressure, productivity gains, and board expectations.</p><p><strong>Speak their language.</strong> When you talk to management about AI, frame everything in terms of ROI, risk mitigation, and competitive advantage. <em>“This approach will protect our quality standards”</em> is less compelling than <em>“This approach reduces the risk of damaging our conversion rate while we test AI capabilities.”</em></p><p><strong>Separate hype from reality.</strong> Take time to research what AI capabilities actually exist versus what’s hype. Read case studies, try tools yourself, and talk to peers about what’s actually working.</p><p><strong>Identify real pain points</strong> AI might legitimately address in your organization. Maybe your team spends hours formatting research findings, or accessibility testing creates bottlenecks. These are the problems worth solving.</p><h2 id="step-2-audit-your-current-state-and-opportunities">Step 2: Audit Your Current State and Opportunities</h2><p>Map your team’s work. Where does time actually go? Look at the past quarter and categorize how your team spent their hours.</p><p><strong>Identify high-volume, repeatable tasks versus high-judgment work.</strong> Repeatable tasks are candidates for automation. High-judgment work is where you add irreplaceable value.</p><p><strong>Also, identify what you’ve wanted to do but couldn’t get approved.</strong> This is your opportunity list. Maybe you’ve wanted quarterly usability tests, but only get budget annually. Write these down separately. You’ll connect them to your AI strategy in the next step.</p><p>Spot opportunities where AI could genuinely help:</p><ul><li><strong>Research synthesis:</strong> AI can help organize and categorize findings.</li><li><strong>Analyzing user behavior data:</strong> AI can process analytics and session recordings to surface patterns you might miss.</li><li><strong>Rapid prototyping:</strong> AI can quickly generate testable prototypes, speeding up your test cycles.</li></ul><h2 id="step-3-define-ai-principles-for-your-ux-practice">Step 3: Define AI Principles for Your UX Practice</h2><p>Before you start forming your strategy, establish principles that will guide every decision.</p><p><strong>Set non-negotiables.</strong> User privacy, accessibility, and human oversight of significant decisions. Write these down and get agreement from leadership before you pilot anything.</p><p><strong>Define criteria for AI use.</strong> AI is good at pattern recognition, summarization, and generating variations. AI is poor at understanding context, making ethical judgments, and knowing when rules should be broken.</p><p><strong>Define success metrics beyond efficiency.</strong> Yes, you want to save time. But you also need to measure quality, user satisfaction, and team capability. Build a balanced scorecard that captures what actually matters.</p><p><strong>Create guardrails.</strong> Maybe every AI-generated interface needs human review before it ships. These guardrails prevent the obvious disasters and give you space to learn safely.</p><h2 id="step-4-build-your-ai-in-ux-strategy">Step 4: Build Your AI-in-UX Strategy</h2><p>Now you’re ready to build the actual strategy you’ll pitch to leadership. <strong>Start small</strong> with pilot projects that have a clear scope and evaluation criteria.</p><p><strong>Connect to business outcomes management cares about.</strong> Don’t pitch <em>“using AI for research synthesis.”</em> Pitch <em>“reducing time from research to insights by 40%, enabling faster product decisions.”</em></p><p><strong>Piggyback your existing priorities on AI momentum.</strong> Remember that opportunity list from Step 2? Now you connect those long-standing needs to your AI strategy. If you’ve wanted more frequent usability testing, explain that AI implementations need continuous validation to catch problems before they scale. AI implementations genuinely benefit from good research practices. You’re simply using management’s enthusiasm for AI as the vehicle to finally get resources for practices that should have been funded all along.</p><p><strong>Define roles clearly.</strong> Where do humans lead? Where does AI assist? Where won’t you automate? Management needs to understand that some work requires human judgment and should never be fully automated.</p><p><strong>Plan for capability building.</strong> Your team will need training and new skills. Budget time and resources for this.</p><p><strong>Address risks honestly.</strong> AI could generate biased recommendations, miss important context, or produce work that looks good but doesn’t actually function. For each risk, explain how you’ll detect it and what you’ll do to mitigate it.</p><h2 id="step-5-pitch-the-strategy-to-leadership">Step 5: Pitch the Strategy to Leadership</h2><p>Frame your strategy as de-risking management’s AI ambitions, not blocking them. You’re showing them how to implement AI successfully while avoiding the obvious pitfalls.</p><p><strong>Lead with outcomes and ROI they care about.</strong> Put the business case up front.</p><p><strong>Bundle your wish list into the AI strategy.</strong> When you present your strategy, include those capabilities you’ve wanted but couldn’t get approved before. Don’t present them as separate requests. Integrate them as essential components. <em>“To validate AI-generated designs, we’ll need to increase our testing frequency from annual to quarterly”</em> sounds much more reasonable than <em>“Can we please do more testing?”</em> You’re explaining what’s required for their AI investment to succeed.</p><p><strong>Show quick wins alongside a longer-term vision.</strong> Identify one or two pilots that can show value within 30-60 days. Then show them how those pilots build toward bigger changes over the next year.</p><p><strong>Ask for what you need.</strong> Be specific. You need a budget for tools, time for pilots, access to data, and support for team training.</p><h2 id="step-6-implement-and-demonstrate-value">Step 6: Implement and Demonstrate Value</h2><p>Run your pilots with clear before-and-after metrics. Measure everything: time saved, quality maintained, user satisfaction, team confidence.</p><p><strong>Document wins and learning.</strong> Failures are useful too. If a pilot doesn’t work out, document why and what you learned.</p><p><strong>Share progress in management’s language.</strong> Monthly updates should focus on business outcomes, not technical details. <em>“We’ve reduced research synthesis time by 35% while maintaining quality scores”</em> is the right level of detail.</p><p><strong>Build internal advocates by solving real problems.</strong> When your AI pilots make someone’s job easier, you create advocates who will support broader adoption.</p><p><strong>Iterate based on what works in your specific context.</strong> Not every AI application will fit your organization. Pay attention to what’s actually working and double down on that.</p><h2 id="taking-initiative-beats-waiting">Taking Initiative Beats Waiting</h2><p>AI adoption is happening. The question isn’t whether your organization will use AI, but whether you’ll shape how it gets implemented.</p><p>Your UX expertise is exactly what’s needed to implement AI successfully. You understand users, quality, and the gap between impressive demos and useful reality.</p><p><strong>Take one practical first step this week.</strong> Schedule 30 minutes to map one AI opportunity in your practice. Pick one area where AI might help, think through how you’d pilot it safely, and sketch out what success would look like.</p><p>Then start the conversation with your manager. You might be surprised how receptive they are to someone stepping up to lead this.</p><blockquote><p><a aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aYou%20know%20how%20to%20understand%20user%20needs,%20test%20solutions,%20measure%20outcomes,%20and%20iterate%20based%20on%20evidence.%20Those%20skills%20don%e2%80%99t%20change%20just%20because%20AI%20is%20involved.%20You%e2%80%99re%20applying%20your%20existing%20expertise%20to%20a%20new%20tool.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fhow-ux-professionals-can-lead-ai-strategy%2f">You know how to understand user needs, test solutions, measure outcomes, and iterate based on evidence. Those skills don’t change just because AI is involved. You’re applying your existing expertise to a new tool.</a></p></blockquote><p>Your role isn’t disappearing. It’s evolving into something more strategic, more valuable, and more secure. But only if you take the initiative to shape that evolution yourself.</p><h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3><ul><li>“<a href="https://www.smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/">Designing With AI, Not Around It: Practical Advanced Techniques For Product Design Use Cases</a>”, Ilia Kanazin & Marina Chernyshova</li><li>“<a href="https://www.smashingmagazine.com/2025/08/beyond-hype-what-ai-can-do-product-design/">Beyond The Hype: What AI Can Really Do For Product Design</a>”, Nikita Samutin</li><li>“<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>”, Lyndon Cerejo</li><li>“<a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">Functional Personas With AI: A Lean, Practical Workflow</a>”, Paul Boag</li></ul><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Beyond The Black Box: Practical XAI For UX Practitioners</h1>
<p>hello@smashingmagazine.com (Victor Yocco) — Fri, 05 Dec 2025 15:00:00 GMT</p>
<h1>Practical XAI For UX Practitioners — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>21 min read</li><li><a href="http://www.smashingmagazine.com/category/ux">UX</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/ai">AI</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>Explainable AI isn’t just a challenge for data scientists. It’s also a design challenge and a core pillar of trustworthy, effective AI products. Victor Yocco offers practical guidance and design patterns for building explainability into real products.</section></p><p>In my <a href="https://www.smashingmagazine.com/2025/09/psychology-trust-ai-guide-measuring-designing-user-confidence/">last piece</a>, we established a foundational truth: for users to adopt and rely on AI, they must <strong>trust</strong> it. We talked about trust being a multifaceted construct, built on perceptions of an AI’s <strong>Ability</strong>, <strong>Benevolence</strong>, <strong>Integrity</strong>, and <strong>Predictability</strong>. But what happens when an AI, in its silent, algorithmic wisdom, makes a decision that leaves a user confused, frustrated, or even hurt? A mortgage application is denied, a favorite song is suddenly absent from a playlist, and a qualified resume is rejected before a human ever sees it. In these moments, ability and predictability are shattered, and benevolence feels a world away.</p><p>Our conversation now must evolve from the <em>why</em> of trust to the <em>how</em> of transparency. The field of <strong>Explainable AI (XAI)</strong>, which focuses on developing methods to make AI outputs understandable to humans, has emerged to address this, but it’s often framed as a purely technical challenge for data scientists. I argue it’s a critical design challenge for products relying on AI. It’s our job as UX professionals to bridge the gap between algorithmic decision-making and human understanding.</p><p>This article provides practical, actionable guidance on how to research and design for explainability. We’ll move beyond the buzzwords and into the mockups, translating complex XAI concepts into concrete design patterns you can start using today.</p><h2 id="de-mystifying-xai-core-concepts-for-ux-practitioners">De-mystifying XAI: Core Concepts For UX Practitioners</h2><p>XAI is about answering the user’s question: “<strong>Why?</strong>” Why was I shown this ad? Why is this movie recommended to me? Why was my request denied? Think of it as the AI showing its work on a math problem. Without it, you just have an answer, and you’re forced to take it on faith. In showing the steps, you build comprehension and trust. You also allow for your work to be double-checked and verified by the very humans it impacts.</p><h3 id="feature-importance-and-counterfactuals">Feature Importance And Counterfactuals</h3><p>There are a number of techniques we can use to clarify or explain what is happening with AI. While methods range from providing the entire logic of a decision tree to generating natural language summaries of an output, two of the most practical and impactful types of information UX practitioners can introduce into an experience are <strong>feature importance</strong> (Figure 1) and <strong>counterfactuals</strong>. These are often the most straightforward for users to understand and the most actionable for designers to implement.</p><figure><a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/1-example-feature-importance.png"></img></a><figcaption>Figure 1: A fictional example of feature importance where a bank system shows the importance of various features that lead to a model’s decision. Image generated using Google Gemini. (<a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/1-example-feature-importance.png">Large preview</a>)</figcaption></figure><h4 id="feature-importance">Feature Importance</h4><p>This explainability method answers, “<strong>What were the most important factors the AI considered?</strong>” It’s about identifying the top 2-3 variables that had the biggest impact on the outcome. It’s the headline, not the whole story.</p><blockquote><strong>Example</strong>: Imagine an AI that predicts whether a customer will churn (cancel their service). Feature importance might reveal that “number of support calls in the last month” and “recent price increases” were the two most important factors in determining if a customer was likely to churn.</blockquote><h4 id="counterfactuals">Counterfactuals</h4><p>This powerful method answers, “<strong>What would I need to change to get a different outcome?</strong>” This is crucial because it gives users a sense of agency. It transforms a frustrating “no” into an actionable “not yet.”</p><blockquote><strong>Example</strong>: Imagine a loan application system that uses AI. A user is denied a loan. Instead of just seeing “Application Denied,” a counterfactual explanation would also share, “If your credit score were 50 points higher, or if your debt-to-income ratio were 10% lower, your loan would have been approved.” This gives Sarah clear, actionable steps she can take to potentially get a loan in the future.</blockquote><h3 id="using-model-data-to-enhance-the-explanation">Using Model Data To Enhance The Explanation</h3><p>Although technical specifics are often handled by data scientists, it’s helpful for UX practitioners to know that tools like <a href="https://www.geeksforgeeks.org/artificial-intelligence/introduction-to-explainable-aixai-using-lime/">LIME</a> (Local Interpretable Model-agnostic Explanations) which explains individual predictions by approximating the model locally, and <a href="https://shap.readthedocs.io/en/latest/example_notebooks/overviews/An%20introduction%20to%20explainable%20AI%20with%20Shapley%20values.html">SHAP</a> (SHapley Additive exPlanations) which uses a game theory approach to explain the output of any machine learning model are commonly used to extract these “why” insights from complex models. These libraries essentially help break down an AI’s decision to show which inputs were most influential for a given outcome.</p><p>When done properly, the data underlying an AI tool’s decision can be used to tell a powerful story. Let’s walk through feature importance and counterfactuals and show how the data science behind the decision can be utilized to enhance the user’s experience.</p><p>Now let’s cover feature importance with the assistance of <strong>Local Explanations (e.g., LIME)</strong> data: This approach answers, “<strong>Why did the AI make <em>this specific</em> recommendation for me, right now?</strong>” Instead of a general explanation of how the model works, it provides a focused reason for a single, specific instance. It’s personal and contextual.</p><blockquote><strong>Example</strong>: Imagine an AI-powered music recommendation system like Spotify. A local explanation would answer, “Why did the system recommend <strong>this specific</strong> song by Adele to <strong>you</strong> right now?” The explanation might be: “Because you recently listened to several other emotional ballads and songs by female vocalists.”</blockquote><p>Finally, let’s cover the inclusion of <strong>Value-based Explanations (e.g. Shapley Additive Explanations (SHAP)</strong> data to an explanation of a decision: This is a more nuanced version of feature importance that answers, “<strong>How did each factor push the decision one way or the other?</strong>” It helps visualize <em>what</em> mattered, and whether its influence was positive or negative.</p><blockquote><strong>Example</strong>: Imagine a bank uses an AI model to decide whether to approve a loan application.</blockquote><p><strong>Feature Importance</strong>: The model output might show that the applicant’s credit score, income, and debt-to-income ratio were the most important factors in its decision. This answers <em>what</em> mattered.</p><p><strong>Feature Importance with Value-Based Explanations (SHAP)</strong>: SHAP values would take feature importance further based on elements of the model.</p><ul><li>For an approved loan, SHAP might show that a high credit score significantly <em>pushed</em> the decision towards approval (positive influence), while a slightly higher-than-average debt-to-income ratio <em>pulled</em> it slightly away (negative influence), but not enough to deny the loan.</li><li>For a denied loan, SHAP could reveal that a low income and a high number of recent credit inquiries <em>strongly pushed</em> the decision towards denial, even if the credit score was decent.</li></ul><p>This helps the loan officer explain to the applicant beyond <em>what</em> was considered, to <em>how each factor contributed</em> to the final “yes” or “no” decision.</p><p>It’s crucial to recognize that the ability to provide good explanations often starts much earlier in the development cycle. Data scientists and engineers play a pivotal role by intentionally structuring models and data pipelines in ways that inherently support explainability, rather than trying to bolt it on as an afterthought.</p><p>Research and design teams can foster this by initiating early conversations with data scientists and engineers about user needs for understanding, contributing to the development of explainability metrics, and collaboratively prototyping explanations to ensure they are both accurate and user-friendly.</p><h2 id="xai-and-ethical-ai-unpacking-bias-and-responsibility">XAI And Ethical AI: Unpacking Bias And Responsibility</h2><p>Beyond building trust, XAI plays a critical role in addressing the profound <strong>ethical implications of AI</strong>*, particularly concerning algorithmic bias. Explainability techniques, such as analyzing SHAP values, can reveal if a model’s decisions are disproportionately influenced by sensitive attributes like race, gender, or socioeconomic status, even if these factors were not explicitly used as direct inputs.</p><p>For instance, if a loan approval model consistently assigns negative SHAP values to applicants from a certain demographic, it signals a potential bias that needs investigation, empowering teams to surface and mitigate such unfair outcomes.</p><p>The power of XAI also comes with the potential for “<strong>explainability washing</strong>.” Just as “greenwashing” misleads consumers about environmental practices, explainability washing can occur when explanations are designed to obscure, rather than illuminate, problematic algorithmic behavior or inherent biases. This could manifest as overly simplistic explanations that omit critical influencing factors, or explanations that strategically frame results to appear more neutral or fair than they truly are. It underscores the ethical responsibility of UX practitioners to design explanations that are genuinely transparent and verifiable.</p><p>UX professionals, in collaboration with data scientists and ethicists, hold a crucial responsibility in communicating the <em>why</em> of a decision, and also the limitations and potential biases of the underlying AI model. This involves setting realistic user expectations about AI accuracy, identifying where the model might be less reliable, and providing clear channels for recourse or feedback when users perceive unfair or incorrect outcomes. Proactively addressing these ethical dimensions will allow us to build AI systems that are truly just and trustworthy.</p><h2 id="from-methods-to-mockups-practical-xai-design-patterns">From Methods To Mockups: Practical XAI Design Patterns</h2><p>Knowing the concepts is one thing; designing them is another. Here’s how we can translate these XAI methods into intuitive design patterns.</p><h3 id="pattern-1-the-because-statement-for-feature-importance">Pattern 1: The “Because” Statement (for Feature Importance)</h3><p>This is the simplest and often most effective pattern. It’s a direct, plain-language statement that surfaces the primary reason for an AI’s action.</p><ul><li><strong>Heuristic</strong>: Be direct and concise. Lead with the single most impactful reason. Avoid jargon at all costs.</li></ul><blockquote><strong>Example</strong>: Imagine a music streaming service. Instead of just presenting a “Discover Weekly” playlist, you add a small line of microcopy.<p><strong>Song Recommendation</strong>: “Velvet Morning”</p><br></br>Because you listen to “The Fuzz” and other psychedelic rock.</blockquote><h3 id="pattern-2-the-what-if-interactive-for-counterfactuals">Pattern 2: The “What-If” Interactive (for Counterfactuals)</h3><p>Counterfactuals are inherently about empowerment. The best way to represent them is by giving users interactive tools to explore possibilities themselves. This is perfect for financial, health, or other goal-oriented applications.</p><ul><li><strong>Heuristic</strong>: Make explanations interactive and empowering. Let users see the cause and effect of their choices.</li></ul><blockquote><strong>Example</strong>: A loan application interface. After a denial, instead of a dead end, the user gets a tool to determine how various scenarios (what-ifs) might play out (See Figure 1).</blockquote><figure><a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/2-example-counterfactuals.png"></img></a><figcaption>Figure 2: An example of Counterfactuals using a what-if scenario, letting the user see how changing different values of the model’s features can impact outcomes. Image generated using Google Gemini. (<a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/2-example-counterfactuals.png">Large preview</a>)</figcaption></figure><h3 id="pattern-3-the-highlight-reel-for-local-explanations">Pattern 3: The Highlight Reel (For Local Explanations)</h3><p>When an AI performs an action on a user’s content (like summarizing a document or identifying faces in photos), the explanation should be visually linked to the source.</p><ul><li><strong>Heuristic</strong>: Use visual cues like highlighting, outlines, or annotations to connect the explanation directly to the interface element it’s explaining.</li></ul><blockquote><strong>Example</strong>: An AI tool that summarizes long articles.<p><strong>AI-Generated Summary Point</strong>:</p><br></br>Initial research showed a market gap for sustainable products.<p><strong>Source in Document</strong>:</p><br></br>“...Our Q2 analysis of market trends conclusively demonstrated that <strong>no major competitor was effectively serving the eco-conscious consumer, revealing a significant market gap for sustainable products</strong>...”</blockquote><h3 id="pattern-4-the-push-and-pull-visual-for-value-based-explanations">Pattern 4: The Push-and-Pull Visual (for Value-based Explanations)</h3><p>For more complex decisions, users might need to understand the interplay of factors. Simple data visualizations can make this clear without being overwhelming.</p><ul><li><strong>Heuristic</strong>: Use simple, color-coded data visualizations (like bar charts) to show the factors that positively and negatively influenced a decision.</li></ul><blockquote><strong>Example</strong>: An AI screening a candidate’s profile for a job.<p>Why this candidate is a 75% match:</p><p><strong>Factors pushing the score up</strong>:</p><p><ul><li>5+ Years UX Research Experience</li><li>Proficient in Python</li></ul><strong>Factors pushing the score down</strong>:</p><br></br><ul><li>No experience with B2B SaaS</li></ul></blockquote><p>Learning and using these design patterns in the UX of your AI product will help increase the explainability. You can also use additional techniques that I’m not covering in-depth here. This includes the following:</p><ul><li><strong>Natural language explanations</strong>: Translating an AI’s technical output into simple, conversational human language that non-experts can easily understand.</li><li><strong>Contextual explanations</strong>: Providing a rationale for an AI’s output at the specific moment and location, it is most relevant to the user’s task.</li><li><strong>Relevant visualizations</strong>: Using charts, graphs, or heatmaps to visually represent an AI’s decision-making process, making complex data intuitive and easier for users to grasp.</li></ul><p><strong>A Note For the Front End</strong>: <em>Translating these explainability outputs into seamless user experiences also presents its own set of technical considerations. Front-end developers often grapple with API design to efficiently retrieve explanation data, and performance implications (like the real-time generation of explanations for every user interaction) need careful planning to avoid latency.</em></p><h2 id="some-real-world-examples">Some Real-world Examples</h2><p><strong>UPS Capital’s DeliveryDefense</strong></p><p>UPS uses AI to assign a “delivery confidence score” to addresses to predict the likelihood of a package being stolen. Their <a href="https://about.ups.com/us/en/our-stories/innovation-driven/ups-s-deliverydefense-pits-ai-against-criminals.html">DeliveryDefense</a> software analyzes historical data on location, loss frequency, and other factors. If an address has a low score, the system can proactively reroute the package to a secure UPS Access Point, providing an explanation for the decision (e.g., “Package rerouted to a secure location due to a history of theft”). This system demonstrates how XAI can be used for risk mitigation and building customer trust through transparency.</p><p><strong>Autonomous Vehicles</strong></p><p>These vehicles of the future will need to effectively use <a href="https://online.hbs.edu/blog/post/ai-in-business">XAI to help their vehicles make safe, explainable decisions</a>. When a self-driving car brakes suddenly, the system can provide a real-time explanation for its action, for example, by identifying a pedestrian stepping into the road. This is not only crucial for passenger comfort and trust but is a regulatory requirement to prove the safety and accountability of the AI system.</p><p><strong>IBM Watson Health (and its challenges)</strong></p><p>While often cited as a general example of AI in healthcare, it’s also a valuable case study for the <em>importance</em> of XAI. The <a href="https://www.henricodolfing.com/2024/12/case-study-ibm-watson-for-oncology-failure.html">failure of its Watson for Oncology project</a> highlights what can go wrong when explanations are not clear, or when the underlying data is biased or not localized. The system’s recommendations were sometimes inconsistent with local clinical practices because they were based on U.S.-centric guidelines. This serves as a cautionary tale on the need for robust, context-aware explainability.</p><h2 id="the-ux-researcher-s-role-pinpointing-and-validating-explanations">The UX Researcher’s Role: Pinpointing And Validating Explanations</h2><p>Our design solutions are only effective if they address the right user questions at the right time. An explanation that answers a question the user doesn’t have is just noise. This is where UX research becomes the critical connective tissue in an XAI strategy, ensuring that we explain the what and how that actually matters to our users. The researcher’s role is twofold: first, to inform the strategy by identifying where explanations are needed, and second, to validate the designs that deliver those explanations.</p><h3 id="informing-the-xai-strategy-what-to-explain">Informing the XAI Strategy (What to Explain)</h3><p>Before we can design a single explanation, we must understand the user’s mental model of the AI system. What do they believe it’s doing? Where are the gaps between their understanding and the system’s reality? This is the foundational work of a UX researcher.</p><h4 id="mental-model-interviews-unpacking-user-perceptions-of-ai-systems">Mental Model Interviews: Unpacking User Perceptions Of AI Systems</h4><p>Through deep, semi-structured interviews, UX practitioners can gain invaluable insights into how users perceive and understand AI systems. These sessions are designed to encourage users to literally draw or describe their internal “mental model” of how they believe the AI works. This often involves asking open-ended questions that prompt users to explain the system’s logic, its inputs, and its outputs, as well as the relationships between these elements.</p><p>These interviews are powerful because they frequently reveal profound misconceptions and assumptions that users hold about AI. For example, a user interacting with a recommendation engine might confidently assert that the system is based purely on their past viewing history. They might not realize that the algorithm also incorporates a multitude of other factors, such as the time of day they are browsing, the current trending items across the platform, or even the viewing habits of similar users.</p><p>Uncovering this gap between a user’s mental model and the actual underlying AI logic is critically important. It tells us precisely what specific information we need to communicate to users to help them build a more accurate and robust mental model of the system. This, in turn, is a fundamental step in fostering trust. When users understand, even at a high level, how an AI arrives at its conclusions or recommendations, they are more likely to trust its outputs and rely on its functionality.</p><h4 id="ai-journey-mapping-a-deep-dive-into-user-trust-and-explainability">AI Journey Mapping: A Deep Dive Into User Trust And Explainability</h4><p>By meticulously mapping the user’s journey with an AI-powered feature, we gain invaluable insights into the precise moments where confusion, frustration, or even profound distrust emerge. This uncovers critical junctures where the user’s mental model of how the AI operates clashes with its actual behavior.</p><p>Consider a music streaming service: Does the user’s trust plummet when a playlist recommendation feels “random,” lacking any discernible connection to their past listening habits or stated preferences? This perceived randomness is a direct challenge to the user’s expectation of intelligent curation and a breach of the implicit promise that the AI understands their taste. Similarly, in a photo management application, do users experience significant frustration when an AI photo-tagging feature consistently misidentifies a cherished family member? This error is more than a technical glitch; it strikes at the heart of accuracy, personalization, and even emotional connection.</p><p>These pain points are vivid signals indicating precisely where a well-placed, clear, and concise explanation is necessary. Such explanations serve as crucial repair mechanisms, mending a breach of trust that, if left unaddressed, can lead to user abandonment.</p><p>The power of AI journey mapping lies in its ability to move us beyond simply explaining the final output of an AI system. While understanding <em>what</em> the AI produced is important, it’s often insufficient. Instead, this process compels us to focus on explaining the <em>process</em> at critical moments. This means addressing:</p><ul><li><strong>Why a particular output was generated</strong>: Was it due to specific input data? A particular model architecture?</li><li><strong>What factors influenced the AI’s decision</strong>: Were certain features weighted more heavily?</li><li><strong>How the AI arrived at its conclusion</strong>: Can we offer a simplified, analogous explanation of its internal workings?</li><li><strong>What assumptions the AI made</strong>: Were there implicit understandings of the user’s intent or data that need to be surfaced?</li><li><strong>What the limitations of the AI are</strong>: Clearly communicating what the AI <em>cannot</em> do, or where its accuracy might waver, builds realistic expectations.</li></ul><p>AI journey mapping transforms the abstract concept of XAI into a practical, actionable framework for UX practitioners. It enables us to move beyond theoretical discussions of explainability and instead pinpoint the exact moments where user trust is at stake, providing the necessary insights to build AI experiences that are powerful, transparent, understandable, and trustworthy.</p><p>Ultimately, research is how we uncover the unknowns. Your team might be debating how to explain why a loan was denied, but research might reveal that users are far more concerned with understanding how their data was used in the first place. Without research, we are simply guessing what our users are wondering.</p><h2 id="collaborating-on-the-design-how-to-explain-your-ai">Collaborating On The Design (How to Explain Your AI)</h2><p>Once research has identified what to explain, the collaborative loop with design begins. Designers can prototype the patterns we discussed earlier—the “Because” statement, the interactive sliders—and researchers can put those designs in front of users to see if they hold up.</p><p><strong>Targeted Usability & Comprehension Testing</strong>: We can design research studies that specifically test the XAI components. We don’t just ask, “*Is this easy to use?*” We ask, “*After seeing this, can you tell me in your own words why the system recommended this product?*” or “*Show me what you would do to see if you could get a different result.*” The goal here is to measure comprehension and actionability, alongside usability.</p><p><strong>Measuring Trust Itself</strong>: We can use simple surveys and rating scales before and after an explanation is shown. For instance, we can ask a user on a 5-point scale, “*How much do you trust this recommendation?*” before they see the “Because” statement, and then ask them again afterward. This provides quantitative data on whether our explanations are actually moving the needle on trust.</p><p>This process creates a powerful, iterative loop. Research findings inform the initial design. That design is then tested, and the new findings are fed back to the design team for refinement. Maybe the “Because” statement was too jargony, or the “What-If” slider was more confusing than empowering. Through this collaborative validation, we ensure that the final explanations are technically accurate, genuinely understandable, useful, and trust-building for the people using the product.</p><h2 id="the-goldilocks-zone-of-explanation">The Goldilocks Zone Of Explanation</h2><p>A critical word of caution: it is possible to <em>over-explain</em>. As in the fairy tale, where Goldilocks sought the porridge that was ‘just right’, the goal of a good explanation is to provide the right amount of detail—not too much and not too little. Bombarding a user with every variable in a model will lead to cognitive overload and can actually <em>decrease</em> trust. The goal is not to make the user a data scientist.</p><p>One solution is <strong>progressive disclosure</strong>.</p><ol><li><strong>Start with the simple.</strong> Lead with a concise “Because” statement. For most users, this will be enough.</li><li><strong>Offer a path to detail.</strong> Provide a clear, low-friction link like “Learn More” or “See how this was determined.”</li><li><strong>Reveal the complexity.</strong> Behind that link, you can offer the interactive sliders, the visualizations, or a more detailed list of contributing factors.</li></ol><p>This layered approach respects user attention and expertise, providing just the right amount of information for their needs. Let’s imagine you’re using a smart home device that recommends optimal heating based on various factors.</p><p><strong>Start with the simple</strong>: “*Your home is currently heated to 72 degrees, which is the optimal temperature for energy savings and comfort.*”</p><p><strong>Offer a path to detail</strong>: Below that, a small link or button: “<em>Why is 72 degrees optimal?</em>“</p><p><strong>Reveal the complexity</strong>: Clicking that link could open a new screen showing:</p><ul><li>Interactive sliders for outside temperature, humidity, and your preferred comfort level, demonstrating how these adjust the recommended temperature.</li><li>A visualization of energy consumption at different temperatures.</li><li>A list of contributing factors like “Time of day,” “Current outside temperature,” “Historical energy usage,” and “Occupancy sensors.”</li></ul><figure><a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/3-example-progressive-disclosure.png"></img></a><figcaption>Figure 3: An example of progressive disclosure in three stages: the simple details with an option to click for more details, more details with the option to understand what will happen if the user changes the settings. (<a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/3-example-progressive-disclosure.png">Large preview</a>)</figcaption></figure><p>It’s effective to combine multiple XAI methods and this Goldilocks Zone of Explanation pattern, which advocates for progressive disclosure, implicitly encourages this. You might start with a simple “Because” statement (Pattern 1) for immediate comprehension, and then offer a “Learn More” link that reveals a “What-If” Interactive (Pattern 2) or a “Push-and-Pull Visual” (Pattern 4) for deeper exploration.</p><p>For instance, a loan application system could initially state the primary reason for denial (feature importance), then allow the user to interact with a “What-If” tool to see how changes to their income or debt would alter the outcome (counterfactuals), and finally, provide a detailed “Push-and-Pull” chart (value-based explanation) to illustrate the positive and negative contributions of all factors. This layered approach allows users to access the level of detail they need, when they need it, preventing cognitive overload while still providing comprehensive transparency.</p><p>Determining which XAI tools and methods to use is primarily a function of thorough UX research. Mental model interviews and AI journey mapping are crucial for pinpointing user needs and pain points related to AI understanding and trust. Mental model interviews help uncover user misconceptions about how the AI works, indicating areas where fundamental explanations (like feature importance or local explanations) are needed. AI journey mapping, on the other hand, identifies critical moments of confusion or distrust in the user’s interaction with the AI, signaling where more granular or interactive explanations (like counterfactuals or value-based explanations) would be most beneficial to rebuild trust and provide agency.</p><figure><a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/4-ai-business-startup-assistant.png"></img></a><figcaption>Figure 4: An example of a fictitious AI business startup assistant. Here, the AI presents the key factor in how the risk level was determined. When the user asks what would change if they manipulate that factor, the counterfactual statement is shown, confirming the impact of that specific factor in the model. (<a href="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/4-ai-business-startup-assistant.png">Large preview</a>)</figcaption></figure><p>Ultimately, the <em>best</em> way to choose a technique is to let user research guide your decisions, ensuring that the explanations you design directly address actual user questions and concerns, rather than simply offering technical details for their own sake.</p><h2 id="xai-for-deep-reasoning-agents">XAI for Deep Reasoning Agents</h2><p>Some of the newest AI systems, known as <a href="https://learn.microsoft.com/en-us/microsoft-copilot-studio/faqs-reasoning">deep reasoning agents</a>, produce an explicit “chain of thought” for every complex task. They do not merely cite sources; they show the logical, step-by-step path they took to arrive at a conclusion. While this transparency provides valuable context, a play-by-play that spans several paragraphs can feel overwhelming to a user simply trying to complete a task.</p><p>The principles of XAI, especially the Goldilocks Zone of Explanation, apply directly here. We can curate the journey, using progressive disclosure to show only the final conclusion and the most salient step in the thought process first. Users can then opt in to see the full, detailed, multi-step reasoning when they need to double-check the logic or find a specific fact. This approach respects user attention while preserving the agent’s full transparency.</p><h2 id="next-steps-empowering-your-xai-journey">Next Steps: Empowering Your XAI Journey</h2><p>Explainability is a fundamental pillar for building <strong>trustworthy and effective AI products</strong>. For the advanced practitioner looking to drive this change within their organization, the journey extends beyond design patterns into advocacy and continuous learning.</p><p>To deepen your understanding and practical application, consider exploring resources like the <a href="https://research.ibm.com/blog/ai-explainability-360">AI Explainability 360 (AIX360) toolkit</a> from IBM Research or Google’s <a href="https://pair-code.github.io/what-if-tool/">What-If Tool</a>, which offer interactive ways to explore model behavior and explanations. Engaging with communities like the <a href="https://responsibleaiforum.com">Responsible AI Forum</a> or specific research groups focused on human-centered AI can provide invaluable insights and collaboration opportunities.</p><p>Finally, be an advocate for XAI within your own organization. Frame explainability as a strategic investment. Consider a brief pitch to your leadership or cross-functional teams:</p><blockquote>“By investing in XAI, we’ll go beyond building trust; we’ll accelerate user adoption, reduce support costs by empowering users with understanding, and mitigate significant ethical and regulatory risks by exposing potential biases. This is good design and smart business.”</blockquote><p>Your voice, grounded in practical understanding, is crucial in bringing AI out of the black box and into a collaborative partnership with users.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>Masonry: Things You Won’t Need A Library For Anymore</h1>
<p>hello@smashingmagazine.com (Patrick Brosset) — Tue, 02 Dec 2025 10:00:00 GMT</p>
<h1>Things You Won’t Need A Library For Anymore — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>20 min read</li><li><a href="http://www.smashingmagazine.com/category/css">CSS</a>,
<a href="http://www.smashingmagazine.com/category/design">Design</a>,
<a href="http://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="http://www.smashingmagazine.com/category/css-grid">CSS Grid</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.</section></p><p>About 15 years ago, I was working at a company where we built apps for travel agents, airport workers, and airline companies. We also built our own in-house framework for UI components and single-page app capabilities.</p><p>We had components for everything: fields, buttons, tabs, ranges, datatables, menus, datepickers, selects, and multiselects. We even had a div component. Our div component was great by the way, it allowed us to do rounded corners on all browsers, which, believe it or not, wasn’t an easy thing to do at the time.</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/1-div-component-example.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/1-div-component-example.png">Large preview</a>)</figcaption></figure><p>Our work took place at a point in our history when JS, Ajax, and dynamic HTML were seen as a revolution that brought us into the future. Suddenly, we could update a page dynamically, get data from a server, and avoid having to navigate to other pages, which was seen as slow and flashed a big white rectangle on the screen between the two pages.</p><p>There was a phrase, made popular by Jeff Atwood (the founder of StackOverflow), which read:</p><blockquote>“Any application that can be written in JavaScript will eventually be written in JavaScript.”<p>— <a href="https://blog.codinghorror.com/all-programming-is-web-programming/#:~:text=any%20application%20that%C2%A0can%C2%A0be%20written%20in%20JavaScript%2C%C2%A0will%C2%A0eventually%20be%20written%20in%20JavaScript">Jeff Atwood</a></p></blockquote><p>To us at the time, this felt like a dare to actually go and create those apps. It felt like a blanket approval to do everything with JS.</p><p>So we did everything with JS, and we didn’t really take the time to research other ways of doing things. We didn’t really feel the incentive to properly learn what HTML and CSS could do. We didn’t really perceive the web as an evolving app platform in its entirety. We mostly saw it as something we needed to work around, especially when it came to browser support. We could just throw more JS at it to get things done.</p><p>Would taking the time to learn more about how the web worked and what was available on the platform have helped me? Sure, I could probably have shaved a bunch of code that wasn’t truly needed. But, at the time, maybe not that much.</p><p>You see, browser differences were pretty significant back then. This was a time when Internet Explorer was still the dominant browser, with Firefox being the close second, but starting to lose market share due to Chrome rapidly gaining popularity. Although Chrome and Firefox were quite good at agreeing on web standards, the environments in which our apps were running meant that we had to support IE6 for a long time. Even when we were allowed to support IE8, we still had to deal with a lot of differences between browsers. Not only that, but the web of the time just didn’t have that many capabilities built right into the platform.</p><figure><a href="https://gs.statcounter.com/browser-market-share/all/worldwide/2010"></img></a><figcaption>Image source: <a href="https://gs.statcounter.com/browser-market-share/all/worldwide/2010">statcounter</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/2-browser-market-share.png">Large preview</a>)</figcaption></figure><p>Fast forward to today. Things have changed tremendously. Not only do we have more of these capabilities than ever before, but the rate at which they become available has increased as well.</p><p>Let me ask the question again, then: Would taking the time to learn more about how the web works and what is available on the platform help you today? Absolutely yes. Learning to understand and use the web platform today puts you at a huge advantage over other developers.</p><p>Whether you work on performance, accessibility, responsiveness, all of them together, or just shipping UI features, if you want to do it as a responsible engineer, knowing the tools that are available to you helps you reach your goals faster and better.</p><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://smashed.by/smashing-workshops"><div></img></div></a></div></aside></div><h2 id="some-things-you-might-not-need-a-library-for-anymore">Some Things You Might Not Need A Library For Anymore</h2><p>Knowing what browsers support today, the question, then, is: What can we ditch? Do we need a div component to do rounded corners in 2025? Of course, we don’t. The <code>border-radius</code> property has been supported by all currently used browsers for more than 15 years at this point. And <code>corner-shape</code> is also coming soon, for even fancier corners.</p><p>Let’s take a look at relatively recent features that are now available in all major browsers, and which you can use to replace existing dependencies in your codebase.</p><p>The point isn’t to immediately ditch all your beloved libraries and rewrite your codebase. As for everything else, you’ll need to take browser support into account first and decide based on other factors specific to your project. The following features are implemented in the three main browser engines (Chromium, WebKit, and Gecko), but you might have different browser support requirements that prevent you from using them right away. Now is still a good time to learn about these features, though, and perhaps plan to use them at some point.</p><h3 id="popovers-and-dialogs">Popovers And Dialogs</h3><p>The <a href="https://developer.mozilla.org/docs/Web/API/Popover_API">Popover API</a>, the <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/dialog"><code><dialog></code> HTML element</a>, and the <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::backdrop"><code>::backdrop</code> pseudo-element</a> can help you get rid of dependencies on popup, tooltip, and dialog libraries, such as <a href="https://floating-ui.com/">Floating UI</a>, <a href="https://atomiks.github.io/tippyjs/">Tippy.js</a>, <a href="https://tetherjs.dev/docs/welcome/">Tether</a>, or <a href="https://react-tooltip.com/">React Tooltip</a>.</p><p>They handle accessibility and focus management for you, out of the box, are highly customizable by using CSS, and can easily be animated.</p><h3 id="accordions">Accordions</h3><p>The <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/details"><code><details></code> element</a>, its <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/details#name"><code>name</code> attribute</a> for mutually exclusive elements, and the <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::details-content"><code>::details-content</code></a> pseudo-element remove the need for accordion components like the <a href="https://getbootstrap.com/docs/5.3/components/accordion/">Bootstrap Accordion</a> or the <a href="https://mui.com/material-ui/react-accordion/">React Accordion component</a>.</p><p>Just using the platform here means it’s easier for folks who know HTML/CSS to understand your code without having to first learn to use a specific library. It also means you’re immune to breaking changes in the library or the discontinuation of that library. And, of course, it means less code to download and run. Mutually exclusive details elements don’t need JS to open, close, or animate.</p><h3 id="css-syntax">CSS Syntax</h3><p><a href="https://developer.mozilla.org/docs/Web/CSS/@layer">Cascade layers</a>, for a more organized CSS codebase, <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/Nesting_selector">CSS nesting</a>, for more compact CSS, new color functions, <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_colors/Relative_colors">relative colors</a>, and <a href="https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix"><code>color-mix</code></a>, new Maths functions like <a href="https://developer.mozilla.org/docs/Web/CSS/abs"><code>abs()</code></a>, <a href="https://developer.mozilla.org/docs/Web/CSS/sign"><code>sign()</code></a>, <a href="https://developer.mozilla.org/docs/Web/CSS/pow"><code>pow()</code></a> and others help reduce dependencies on <a href="https://css-tricks.com/is-it-time-to-un-sass/">CSS pre-processors</a>, utility libraries like Bootstrap and Tailwind, or even runtime CSS-in-JS libraries.</p><p>The game changer <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:has"><code>:has()</code></a>, one of the most requested features for a long time, removes the need for more complicated JS-based solutions.</p><h3 id="js-utilities">JS Utilities</h3><p>Modern Array methods like <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast"><code>findLast()</code></a>, or <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/at"><code>at()</code></a>, as well as Set methods like <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/difference"><code>difference()</code></a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection"><code>intersection()</code></a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/union"><code>union()</code></a> and others can reduce dependencies on libraries like <a href="https://lodash.com/">Lodash</a>.</p><h3 id="container-queries">Container Queries</h3><p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_containment/Container_queries">Container queries</a> make UI components respond to things other than the viewport size, and therefore make them more reusable across different contexts.</p><p>No need to use a JS-heavy UI library for this anymore, and no need to use a <a href="https://github.com/GoogleChromeLabs/container-query-polyfill">polyfill</a> either.</p><h3 id="layout">Layout</h3><p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout">Grid</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid">subgrid</a>, <a href="https://developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Flexbox">flexbox</a>, or <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/columns">multi-column</a> have been around for a long time now, but looking at the <a href="https://2025.stateofcss.com/en-US">results of the State of CSS surveys</a>, it’s clear that developers tend to be very cautious with adopting new things, and wait for a very long time before they do.</p><p>These features have been <a href="https://web-platform-dx.github.io/web-features/">Baseline</a> for a long time and you could use them to get rid of dependencies on things like the <a href="https://getbootstrap.com/docs/5.3/layout/grid/">Bootstrap’s grid system</a>, <a href="https://get.foundation/sites/docs/flexbox-utilities.html">Foundation Framework’s flexbox utilities</a>, <a href="https://bulma.io/documentation/grid/fixed-grid/">Bulma fixed grid</a>, <a href="https://materializecss.com/grid.html">Materialize grid</a>, or <a href="https://tailwindcss.com/docs/columns">Tailwind columns</a>.</p><p>I’m not saying you should drop your framework. Your team adopted it for a reason, and removing it might be a big project. But looking at what the web platform can offer without a third-party wrapper on top comes with a lot of benefits.</p><h2 id="things-you-might-not-need-anymore-in-the-near-future">Things You Might Not Need Anymore In The Near Future</h2><p>Now, let’s take a quick look at some of the things you will not need a library for in the near future. That is to say, the things below are not quite ready for mass adoption, but being aware of them and planning for potential later use can be helpful.</p><h3 id="anchor-positioning">Anchor Positioning</h3><p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_anchor_positioning">CSS anchor positioning</a> handles the positioning of popovers and tooltips relative to other elements, and takes care of keeping them in view, even when moving, scrolling, or resizing the page.</p><p>This is a great complement to the Popover API mentioned before, which will make it even easier to migrate away from more performance-intensive JS solutions.</p><h3 id="navigation-api">Navigation API</h3><p>The <a href="https://developer.mozilla.org/docs/Web/API/Navigation_API">Navigation API</a> can be used to handle navigation in single-page apps and might be a great complement, or even a replacement, to <a href="https://reactrouter.com/">React Router</a>, <a href="https://nextjs.org/docs/routing/introduction">Next.js routing</a>, or <a href="https://angular.io/guide/router">Angular routing tasks</a>.</p><h3 id="view-transitions-api">View Transitions API</h3><p>The <a href="https://developer.mozilla.org/docs/Web/API/View_Transition_API">View Transitions API</a> can animate between the different states of a page. On a single-page application, this makes smooth transitions between states very easy, and can help you get rid of animation libraries such as <a href="https://animejs.com/">Anime.js</a>, <a href="https://greensock.com/gsap/">GSAP</a>, or <a href="https://motion.dev/">Motion.dev</a>.</p><p>Even better, the API can also be used with multiple-page applications.</p><p>Remember earlier, when I said that the reason we built single-page apps at the company where I worked 15 years ago was to avoid the white flash of page reloads when navigating? Had that API been available at the time, we would have been able to achieve beautiful page transition effects without a single-page framework and without a huge initial download of the entire app.</p><h3 id="scroll-driven-animations">Scroll-driven Animations</h3><p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_scroll-driven_animations">Scroll-driven animations</a> run on the user’s scroll position, rather than over time, making them a great solution for storytelling and product tours.</p><p>Some people <a href="https://gt-era.com/">have gone a bit over the top</a> with it, but when used well, this can be a very effective design tool, and can help get rid of libraries like: <a href="https://scrollrevealjs.org/">ScrollReveal</a>, <a href="https://gsap.com/scroll/">GSAP Scroll</a>, or <a href="https://wowjs.uk/">WOW.js</a>.</p><h3 id="customizable-selects">Customizable Selects</h3><p>A <a href="https://developer.mozilla.org/docs/Learn_web_development/Extensions/Forms/Customizable_select">customizable select</a> is a normal <code><select></code> element that lets you fully customize its appearance and content, while ensuring accessibility and performance benefits.</p><p>This has been a long time coming, and a highly requested feature, and it’s amazing to see it come to the web platform soon. With a built-in customizable select, you can finally ditch all this hard-to-maintain JS code for your custom select components.</p><h3 id="css-masonry">CSS Masonry</h3><p><a href="https://developer.chrome.com/blog/masonry-update">CSS Masonry</a> is another upcoming web platform feature that I want to spend more time on.</p><p>With CSS Masonry, you can achieve layouts that are very hard, or even impossible, with flex, grid, or other built-in CSS layout primitives. Developers often resort to using third-party libraries to achieve Masonry layouts, such as the <a href="https://masonry.desandro.com/">Masonry JS library</a>.</p><p>But, more on that later. Let’s wrap this point up before moving on to Masonry.</p><h2 id="why-you-should-care">Why You Should Care</h2><p>The job market is full of web developers with experience in JavaScript and the latest frameworks of the day. So, really, what’s the point in learning to use the web platform primitives more, if you can do the same things with the libraries, utilities, and frameworks you already know today?</p><p>When an entire industry relies on these frameworks, and you can just pull in the right library, shouldn’t browser vendors just work with these libraries to make them load and run faster, rather than trying to convince developers to use the platform instead?</p><p>First of all, we do work with library authors, and we do make frameworks better by learning about what they use and improving those areas.</p><p>But secondly, “just using the platform” can bring pretty significant benefits.</p><h3 id="sending-less-code-to-devices">Sending Less Code To Devices</h3><p>The main benefit is that you end up sending far less code to your clients’ devices.</p><p>According to the <a href="https://almanac.httparchive.org/en/2024/">2024 Web Almanac</a>, the average number of HTTP requests is around 70 per site, <a href="https://almanac.httparchive.org/en/2024/javascript#how-many-javascript-requests-per-page">most of which is due to JavaScript with 23 requests</a>. In 2024, JS overtook images as the dominant file type too. The median number of page requests for JS files is 23, up 8% since 2022.</p><p>And page size continues to grow year over year. The median page weight is around 2MB now, which is 1.8MB more than it was 10 years ago.</p><figure><a href="https://almanac.httparchive.org/en/2024/page-weight"></img></a><figcaption>Image source: <a href="https://almanac.httparchive.org/en/2024/page-weight">Web Almanac</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/3-median-page-weight.png">Large preview</a>)</figcaption></figure><p>Sure, your internet connection speed has probably increased, too, but that’s not the case for everyone. And not everyone has the same device capabilities either.</p><p>Pulling in third-party code for things you can do with the platform, instead, most probably means you ship more code, and therefore reach fewer customers than you normally would. On the web, bad loading performance leads to large abandonment rates and hurts brand reputation.</p><h3 id="running-less-code-on-devices">Running Less Code On Devices</h3><p>Furthermore, the code you do ship on your customers’ devices likely runs faster if it uses fewer JavaScript abstractions on top of the platform. It’s also probably more responsive and more accessible by default. All of this leads to more and happier customers.</p><p>Check my colleague Alex Russell’s <a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">yearly performance inequality gap blog</a>, which shows that premium devices are largely absent from markets with billions of users due to wealth inequality. And this gap is only growing over time.</p><figure><a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/#device-performance"></img></a><figcaption>Image source: <a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/#device-performance">Infrequently Noted</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/4-device-performance.png">Large preview</a>)</figcaption></figure><h2 id="built-in-masonry-layout">Built-in Masonry Layout</h2><p>One web platform feature that’s coming soon and which I’m very excited about is CSS Masonry.</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/5-css-masonry.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/5-css-masonry.png">Large preview</a>)</figcaption></figure><p>Let me start by explaining what Masonry is.</p><h3 id="what-is-masonry">What Is Masonry</h3><blockquote>Masonry is a type of layout that was made popular by Pinterest years ago. It creates independent tracks of content within which items pack themselves up as close to the start of the track as they can.</blockquote><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/6-pinterest-portfolio.png"></img></a><figcaption><a href="pinterest.com">Pinterest</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/6-pinterest-portfolio.png">Large preview</a>)</figcaption></figure><p>Many people see Masonry as a great option for portfolios and photo galleries, which it certainly can do. But Masonry is <strong>more flexible</strong> than what you see on Pinterest, and it’s <strong>not limited to just waterfall-like layouts</strong>.</p><p>In a Masonry layout:</p><ul><li>Tracks can be columns or rows:</li></ul><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/7-layout-columns-rows.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/7-layout-columns-rows.png">Large preview</a>)</figcaption></figure><ul><li>Tracks of content don’t all have to be the same size:</li></ul><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/8-layout-different-sizes.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/8-layout-different-sizes.png">Large preview</a>)</figcaption></figure><ul><li>Items can span multiple tracks:</li></ul><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/9-layout-multiple-tracks.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/9-layout-multiple-tracks.png">Large preview</a>)</figcaption></figure><ul><li>Items can be placed on specific tracks; they don’t have to always follow the automatic placement algorithm:</li></ul><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/10-layout-items-specific-tracks.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/10-layout-items-specific-tracks.png">Large preview</a>)</figcaption></figure><h3 id="demos">Demos</h3><p>Here are a few simple demos I made by using the upcoming implementation of CSS Masonry in Chromium.</p><p><a href="https://microsoftedge.github.io/Demos/css-masonry/new-york.html">A photo gallery demo</a>, showing how items (the title in this case) can span multiple tracks:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/11-photo-gallery-different-sizes.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/11-photo-gallery-different-sizes.png">Large preview</a>)</figcaption></figure><p>Another <a href="https://microsoftedge.github.io/Demos/css-masonry/nature.html">photo gallery showing tracks of different sizes</a>:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/12-photo-gallery-different-tracks.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/12-photo-gallery-different-tracks.png">Large preview</a>)</figcaption></figure><p>A <a href="https://microsoftedge.github.io/Demos/css-masonry/the-daily-oddity.html">news site layout</a> with some tracks wider than others, and some items spanning the entire width of the layout:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/13-news-site-layout.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/13-news-site-layout.png">Large preview</a>)</figcaption></figure><p>A <a href="https://microsoftedge.github.io/Demos/css-masonry/kanban.html">kanban board</a> showing that items can be placed onto specific tracks:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/14-kanban-board.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/14-kanban-board.png">Large preview</a>)</figcaption></figure><p><strong>Note</strong>: <em>The previous demos were made with a version of Chromium that’s not yet available to most web users, because CSS Masonry is only just starting to be implemented in browsers.</em></p><p>However, web developers have been happily using libraries to create Masonry layouts for years already.</p><h3 id="sites-using-masonry-today">Sites Using Masonry Today</h3><p>Indeed, Masonry is pretty common on the web today. Here are a few examples I found besides Pinterest:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/15-site-masonry.png"></img></a><figcaption>Image source: <a href="https://www.erikjo.com/work">Erik Johansson</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/15-site-masonry.png">Large preview</a>)</figcaption></figure><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/16-masonry-site.png"></img></a><figcaption>Image source: <a href="https://www.kristianhammerstad.com/">Kristian Hammerstad</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/16-masonry-site.png">Large preview</a>)</figcaption></figure><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/17-masonry-site.png"></img></a><figcaption>Image source: <a href="https://lusineagouzou.fr/catalogue">L'usine a Gouzou</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/17-masonry-site.png">Large preview</a>)</figcaption></figure><p>And a few more, less obvious, examples:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/18-masonry-layout.png"></img></a><figcaption>A row-direction Masonry layout from <a href="http://agora.io/en/">www.agora.io</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/18-masonry-layout.png">Large preview</a>)</figcaption></figure><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/19-different-size-tracks.png"></img></a><figcaption>Different size tracks from <a href="https://www.thefreedictionary.com/">www.thefreedictionary.com</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/19-different-size-tracks.png">Large preview</a>)</figcaption></figure><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/20-masonry-layout.png"></img></a><figcaption>Image source: <a href="https://onesignal.com/">OneSignal</a>. (<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/20-masonry-layout.png">Large preview</a>)</figcaption></figure><p>So, how were these layouts created?</p><h2 id="workarounds">Workarounds</h2><p>One trick that I’ve seen used is using a Flexbox layout instead, changing its direction to column, and setting it to wrap.</p><p>This way, you can place items of different heights in multiple, independent columns, giving the impression of a Masonry layout:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/21-flexbox-layout.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/21-flexbox-layout.png">Large preview</a>)</figcaption></figure><p>There are, however, two limitations with this workaround:</p><ol><li>The order of items is different from what it would be with a real Masonry layout. With Flexbox, items fill the first column first and, when it’s full, then go to the next column. With Masonry, items would stack in whichever track (or column in this case) has more space available.</li><li>But also, and perhaps more importantly, this workaround requires that you set a fixed height to the Flexbox container; otherwise, no wrapping would occur.</li></ol><h2 id="third-party-masonry-libraries">Third-party Masonry Libraries</h2><p>For more advanced cases, developers have been using libraries.</p><p>The most well-known and popular library for this is simply called <a href="https://masonry.desandro.com/">Masonry</a>, and it gets downloaded about 200,000 times per week <a href="https://www.npmjs.com/package/masonry-layout">according to NPM</a>.</p><p>Squarespace also provides a <a href="https://www.beyondspace.studio/blog/squarespace-masonry-gallery-layout-guide#method-2-using-gallery-section">layout component that renders a Masonry layout</a>, for a no-code alternative, and many sites use it.</p><p>Both of these options use JavaScript code to place items in the layout.</p><h2 id="built-in-masonry">Built-in Masonry</h2><p>I’m really excited that Masonry is now starting to appear in browsers as a built-in CSS feature. Over time, you will be able to use Masonry just like you do Grid or Flexbox, that is, without needing any workarounds or third-party code.</p><p>My team at Microsoft has been implementing built-in Masonry support in the Chromium open source project, which Edge, Chrome, and many other browsers are based on. Mozilla was actually the first browser vendor to <a href="https://github.com/w3c/csswg-drafts/issues/4650">propose an experimental implementation of Masonry</a> back in 2020. And <a href="https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/">Apple has also been very interested</a> in making this new web layout primitive happen.</p><p>The work to standardize the feature is also moving ahead, with agreement within the CSS working group about the general direction and even a new display type <a href="https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-3525043825"><code>display: grid-lanes</code></a>.</p><p>If you want to learn more about Masonry and track progress, check out my <a href="https://patrickbrosset.com/lab/css-masonry-resources/">CSS Masonry resources</a> page.</p><p>In time, when Masonry becomes a Baseline feature, just like Grid or Flexbox, we’ll be able to simply use it and benefit from:</p><ul><li>Better performance,</li><li>Better responsiveness,</li><li>Ease of use and simpler code.</li></ul><p>Let’s take a closer look at these.</p><h3 id="better-performance">Better Performance</h3><p>Making your own Masonry-like layout system, or using a third-party library instead, means you’ll have to run JavaScript code to place items on the screen. This also means that this code will be <em>render blocking</em>. Indeed, either nothing will appear, or things won’t be in the right places or of the right sizes, until that JavaScript code has run.</p><p>Masonry layout is often used for the main part of a web page, which means the code would be making your main content appear later than it could otherwise have, degrading your <a href="https://web.dev/articles/lcp#what-is-lcp">LCP, or Largest Contentful Paint metric</a>, which plays a big role in perceived performance and search engine optimization.</p><p>I tested the Masonry JS library with a simple layout and by simulating a slow 4G connection in DevTools. The library is not very big (24KB, 7.8KB gzipped), but it took 600ms to load under my test conditions.</p><p>Here is a performance recording showing that long 600ms load time for the Masonry library, and that no other rendering activity happened while that was happening:</p><figure><a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/22-performance-recording.png"></img></a><figcaption>(<a href="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/22-performance-recording.png">Large preview</a>)</figcaption></figure><p>In addition, after the initial load time, the downloaded script then needed to be parsed, compiled, and then run. All of which, as mentioned before, was blocking the rendering of the page.</p><p>With a built-in Masonry implementation in the browser, we won’t have a script to load and run. The browser engine will just do its thing during the initial page rendering step.</p><h3 id="better-responsiveness">Better Responsiveness</h3><p>Similar to when a page first loads, resizing the browser window leads to rendering the layout in that page again. At this point, though, if the page is using the Masonry JS library, there’s no need to load the script again, because it’s already here. However, the code that moves items in the right places needs to run.</p><p>Now this particular library seems to be pretty fast at doing this when the page loads. However, it animates the items when they need to move to a different place on window resize, and this makes a big difference.</p><p>Of course, users don’t spend time resizing their browser windows as much as we developers do. But this animated resizing experience can be pretty jarring and adds to the perceived time it takes for the page to adapt to its new size.</p><h3 id="ease-of-use-and-simpler-code">Ease Of Use And Simpler Code</h3><p>How easy it is to use a web feature and how simple the code looks are important factors that can make a big difference for your team. They can’t ever be as important as the final user experience, of course, but developer experience impacts maintainability. Using a built-in web feature comes with important benefits on that front:</p><ul><li>Developers who already know HTML, CSS, and JS will most likely be able to use that feature easily because it’s been designed to integrate well and be consistent with the rest of the web platform.</li><li>There’s no risk of breaking changes being introduced in how the feature is used.</li><li>There’s almost zero risk of that feature becoming deprecated or unmaintained.</li></ul><p>In the case of built-in Masonry, because it’s a layout primitive, you use it from CSS, just like Grid or Flexbox, no JS involved. Also, other layout-related CSS properties, such as gap, work as you’d expect them to. There are no tricks or workarounds to know about, and the things you do learn are documented on MDN.</p><p>For the Masonry JS lib, initialization is a bit complex: it requires a data attribute with a specific syntax, along with hidden HTML elements to set the column and gap sizes.</p><p>Plus, if you want to span columns, you need to include the gap size yourself to avoid problems:</p><div><pre><code><script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<style>
  .track-sizer,
  .item {
    width: 20%;
  }
  .gutter-sizer {
    width: 1rem;
  }
  .item {
    height: 100px;
    margin-block-end: 1rem;
  }
  .item:nth-child(odd) {
    height: 200px;
  }
  .item--width2 {
    width: calc(40% + 1rem);
  }
</style>

<div class="container"
  data-masonry='{ "itemSelector": ".item", "columnWidth": ".track-sizer", "percentPosition": true, "gutter": ".gutter-sizer" }'>
  <div class="track-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item"></div>
  <div class="item item--width2"></div>
  <div class="item"></div>
  ...
</div>
</code></pre></div><p>Let’s compare this to what a built-in Masonry implementation would look like:</p><pre><code><style>
  .container {
    display: grid-lanes;
    grid-lanes: repeat(4, 20%);
    gap: 1rem;
  }
  .item {
    height: 100px;
  }
  .item:nth-child(odd) {
    height: 200px;
  }
  .item--width2 {
    grid-column: span 2;
  }
</style>

<div class="container">
  <div class="item"></div>
  <div class="item item--width2"></div>
  <div class="item"></div>
  ...
</div>
</code></pre><p>Simpler, more compact code that can just use things like <code>gap</code> and where spanning tracks is done with <code>span 2</code>, just like in grid, and doesn’t require you to calculate the right width that includes the gap size.</p><h2 id="how-to-know-what-s-available-and-when-it-s-available">How To Know What’s Available And When It’s Available?</h2><p>Overall, the question isn’t really if you should use built-in Masonry over a JS library, but rather <em>when</em>. The Masonry JS library is amazing and has been filling a gap in the web platform for many years, and for many happy developers and users. It has a few drawbacks if you compare it to a built-in Masonry implementation, of course, but those are not important if that implementation isn’t ready.</p><p>It’s easy for me to list these cool new web platform features because I work at a browser vendor, and I therefore tend to know what’s coming. But developers often share, survey after survey, that keeping track of new things is hard. <strong>Staying informed is difficult</strong>, and companies don’t always prioritize learning anyway.</p><p>To help with this, here are a few resources that provide updates in simple and compact ways so you can get the information you need quickly:</p><ul><li><a href="https://web-platform-dx.github.io/web-features-explorer/">The Web platform features explorer site</a>:<ul><li>You might be interested in its <a href="https://web-platform-dx.github.io/web-features-explorer/release-notes/october-2025/">release notes</a> page.</li><li>And, if you like RSS, check out <a href="https://web-platform-dx.github.io/web-features-explorer/release-notes.xml">the release notes feed</a>, as well as the Baseline <a href="https://web-platform-dx.github.io/web-features-explorer/newly-available.xml">Newly Available</a> and <a href="https://web-platform-dx.github.io/web-features-explorer/widely-available.xml">Widely Available</a> feeds.</li></ul></li><li><a href="https://webstatus.dev/">The Web Platform Status dashboard</a>:<ul><li>You might like its various <a href="https://webstatus.dev/?q=baseline_date%3A2025-01-01..2025-12-31">Baseline year</a> pages.</li></ul></li><li><a href="https://chromestatus.com/roadmap">Chrome Platform Status’ roadmap page</a>.</li></ul><p>If you have a bit more time, you might also be interested in browser vendors’ release notes:</p><ul><li><a href="https://developer.chrome.com/release-notes">Chrome</a></li><li><a href="https://learn.microsoft.com/en-us/microsoft-edge/web-platform/release-notes/">Edge</a></li><li><a href="https://www.firefox.com/en-US/releases/">Firefox</a></li><li><a href="https://developer.apple.com/documentation/safari-release-notes">Safari</a></li></ul><p>For even more resources, check out my <a href="https://patrickbrosset.com/lab/navigating-the-web-platform/">Navigating the Web Platform Cheatsheet</a>.</p><h2 id="my-thing-is-still-not-implemented">My Thing Is Still Not Implemented</h2><p>That’s the other side of the problem. Even if you do find the time, energy, and ways to keep track, there’s still frustration with getting your voice heard and your favorite features implemented.</p><p>Maybe you’ve been waiting for years for a specific bug to be resolved, or a specific feature to ship in a browser where it’s still missing.</p><p>What I’ll say is <strong>browser vendors do listen</strong>. I’m part of several cross-organization teams where we discuss developer signals and feedback all the time. We look at many different sources of feedback, both internal at each browser vendor and external/public on forums, open source projects, blogs, and surveys. And, we’re always trying to create better ways for developers to share their specific needs and use cases.</p><p>So, if you can, please demand more from browser vendors and pressure us to implement the features you need. I get that it takes time, and can also be intimidating (not to mention a high barrier to entry), but it also works.</p><p>Here are a few ways you can get your (or your company’s) voice heard: Take the annual <a href="https://stateofjs.com/">State of JS</a>, <a href="https://stateofcss.com/">State of CSS</a>, and <a href="https://stateofhtml.com/">State of HTML</a> surveys. They play a big role in how browser vendors prioritize their work.</p><p>If you need a specific standard-based API to be implemented consistently across browsers, consider submitting a proposal at the next <a href="https://github.com/web-platform-tests/interop/">Interop project</a> iteration. It requires more time, but consider how <a href="https://docs.google.com/document/d/1ICqlNtdRXlhIlRuXFr1BRgy68R6Q5AwPv2b4hsIWUMY/edit">Shopify</a> and <a href="https://www.rumvision.com/blog/interop-2026-key-apis-for-sitespeed-and-rum/">RUMvision</a> shared their wish lists for Interop 2026. Detailed information like this can be very useful for browser vendors to prioritize.</p><p>For more useful links to influence browser vendors, check out my <a href="https://patrickbrosset.com/lab/navigating-the-web-platform/">Navigating the Web Platform Cheatsheet</a>.</p><h2 id="conclusion">Conclusion</h2><p>To close, I hope this article has left you with a few things to think about:</p><ul><li>Excitement for Masonry and other upcoming web features.</li><li>A few web features you might want to start using.</li><li>A few pieces of custom or 3rd-party code you might be able to remove in favor of built-in features.</li><li>A few ways to keep track of what’s coming and influence browser vendors.</li></ul><p>More importantly, I hope I’ve convinced you of the benefits of using the web platform to its full potential.</p><div></img>
<span>(yk)</span></div></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
<article>
<h1>A Sparkle Of December Magic (2025 Wallpapers Edition)</h1>
<p>hello@smashingmagazine.com (Cosima Mielke) — Sun, 30 Nov 2025 09:00:00 GMT</p>
<h1>A Sparkle Of December Magic (2025 Wallpapers Edition) — Smashing Magazine</h1><h2>By About The Author</h2><div><div id="article__content"><div><ul><li>12 min read</li><li><a href="http://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li></ul><p><section aria-label="Quick summary"><span aria-hidden="true" id="article__start"></span>With December just around the corner, how about some new desktop wallpapers to welcome the last month of the year — and the holiday season, if you’re celebrating? Our latest edition of monthly wallpapers has got you covered. Enjoy!</section></p><p>As the year winds down, many of us are busy wrapping up projects, meeting deadlines, or getting ready for the holiday season. Why not take a moment amid the end-of-year hustle to set the mood for December with some <strong>wintery desktop wallpapers</strong>? They might just bring a sparkle of inspiration to your workspace in these busy weeks.</p><p>To provide you with unique and inspiring wallpaper designs each month anew, we started our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> more than 14 years ago. It’s the perfect opportunity both to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">put your creative skills to the test</a> and to find just the right wallpaper to accompany you through the new month. This December is no exception, of course, so following our <strong>cozy little tradition</strong>, we have a new collection of wallpapers waiting for you below. Each design has been created with love by artists and designers from across the globe and comes in a variety of screen resolutions.</p><p>A huge <strong>thank-you</strong> to everyone who tickled their creativity and shared their wallpapers with us this time around! This post wouldn’t exist without your kind support. ❤️ Happy December!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>.</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li><li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit your wallpaper design!</a></strong> 🎨<br></br>We are always <strong>looking for creative talent</strong> and would love to feature <em>your</em> desktop wallpaper in one of our upcoming posts. <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Join in ↬</a></li></ul><h2 id="zero-gravity-december-12-2025">Zero-Gravity December</h2><p>Floating in space, decorating the Christmas tree, unbothered by the familiar weight of New Year’s resolutions waiting back on Earth every December. — Designed by <a href="https://www.gingeritsolutions.com/">Ginger It Solutions</a> from Serbia.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/dec-25-zero-gravity-december-full.png" title="Zero-Gravity December"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/dec-25-zero-gravity-december-preview.png" title="Zero-Gravity December - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-320x480.png" title="Zero-Gravity December - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-640x480.png" title="Zero-Gravity December - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-800x480.png" title="Zero-Gravity December - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-800x600.png" title="Zero-Gravity December - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1024x768.png" title="Zero-Gravity December - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1024x1024.png" title="Zero-Gravity December - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1152x864.png" title="Zero-Gravity December - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x720.png" title="Zero-Gravity December - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x800.png" title="Zero-Gravity December - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x960.png" title="Zero-Gravity December - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x1020.png" title="Zero-Gravity December - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1400x1050.png" title="Zero-Gravity December - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1440x900.png" title="Zero-Gravity December - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1600x1200.png" title="Zero-Gravity December - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1680x1050.png" title="Zero-Gravity December - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1680x1200.png" title="Zero-Gravity December - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1080.png" title="Zero-Gravity December - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1200.png" title="Zero-Gravity December - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1440.png" title="Zero-Gravity December - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-2560x1440.png" title="Zero-Gravity December - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-320x480.png" title="Zero-Gravity December - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-640x480.png" title="Zero-Gravity December - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-800x480.png" title="Zero-Gravity December - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-800x600.png" title="Zero-Gravity December - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1024x768.png" title="Zero-Gravity December - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1024x1024.png" title="Zero-Gravity December - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1152x864.png" title="Zero-Gravity December - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x720.png" title="Zero-Gravity December - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x800.png" title="Zero-Gravity December - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x960.png" title="Zero-Gravity December - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x1020.png" title="Zero-Gravity December - 1280x1020">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1400x1050.png" title="Zero-Gravity December - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1440x900.png" title="Zero-Gravity December - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1600x1200.png" title="Zero-Gravity December - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1680x1050.png" title="Zero-Gravity December - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1680x1200.png" title="Zero-Gravity December - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1080.png" title="Zero-Gravity December - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1200.png" title="Zero-Gravity December - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1440.png" title="Zero-Gravity December - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-2560x1440.png" title="Zero-Gravity December - 2560x1440">2560x1440</a></li></ul><h2 id="a-quiet-december-walk-12-2025">A Quiet December Walk</h2><p>In the stillness of a snowy forest, a man and his loyal dog share a peaceful winter walk. The world is hushed beneath a blanket of white, with only soft flakes falling and the crunch of footsteps breaking the silence. It’s a simple, serene moment that captures the calm beauty of December and the quiet joy of companionship in nature’s winter glow. — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/dec-25-a-quiet-december-walk-full.png" title="A Quiet December Walk"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/dec-25-a-quiet-december-walk-preview.png" title="A Quiet December Walk - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-320x480.png" title="A Quiet December Walk - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-640x480.png" title="A Quiet December Walk - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-800x480.png" title="A Quiet December Walk - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-800x600.png" title="A Quiet December Walk - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1024x768.png" title="A Quiet December Walk - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1024x1024.png" title="A Quiet December Walk - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1152x864.png" title="A Quiet December Walk - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x720.png" title="A Quiet December Walk - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x800.png" title="A Quiet December Walk - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x960.png" title="A Quiet December Walk - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x1024.png" title="A Quiet December Walk - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1400x1050.png" title="A Quiet December Walk - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1440x900.png" title="A Quiet December Walk - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1600x1200.png" title="A Quiet December Walk - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1680x1050.png" title="A Quiet December Walk - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1680x1200.png" title="A Quiet December Walk - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1080.png" title="A Quiet December Walk - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1200.png" title="A Quiet December Walk - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1440.png" title="A Quiet December Walk - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-2560x1440.png" title="A Quiet December Walk - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-320x480.png" title="A Quiet December Walk - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-640x480.png" title="A Quiet December Walk - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-800x480.png" title="A Quiet December Walk - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-800x600.png" title="A Quiet December Walk - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1024x768.png" title="A Quiet December Walk - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1024x1024.png" title="A Quiet December Walk - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1152x864.png" title="A Quiet December Walk - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x720.png" title="A Quiet December Walk - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x800.png" title="A Quiet December Walk - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x960.png" title="A Quiet December Walk - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x1024.png" title="A Quiet December Walk - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1400x1050.png" title="A Quiet December Walk - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1440x900.png" title="A Quiet December Walk - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1600x1200.png" title="A Quiet December Walk - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1680x1050.png" title="A Quiet December Walk - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1680x1200.png" title="A Quiet December Walk - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1080.png" title="A Quiet December Walk - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1200.png" title="A Quiet December Walk - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1440.png" title="A Quiet December Walk - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-2560x1440.png" title="A Quiet December Walk - 2560x1440">2560x1440</a></li></ul><h2 id="quoted-rudolph-12-2025">Quoted Rudolph</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/dec-25-quoted-rudolph-full.png" title="Quoted Rudolph"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/dec-25-quoted-rudolph-preview.png" title="Quoted Rudolph - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-640x480.png" title="Quoted Rudolph - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-800x480.png" title="Quoted Rudolph - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-800x600.png" title="Quoted Rudolph - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1024x768.png" title="Quoted Rudolph - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1024x1024.png" title="Quoted Rudolph - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1152x864.png" title="Quoted Rudolph - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x720.png" title="Quoted Rudolph - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x800.png" title="Quoted Rudolph - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x960.png" title="Quoted Rudolph - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x1024.png" title="Quoted Rudolph - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1366x768.png" title="Quoted Rudolph - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1400x1050.png" title="Quoted Rudolph - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1440x900.png" title="Quoted Rudolph - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1600x1200.png" title="Quoted Rudolph - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1680x1050.png" title="Quoted Rudolph - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1680x1200.png" title="Quoted Rudolph - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1080.png" title="Quoted Rudolph - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1200.png" title="Quoted Rudolph - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1440.png" title="Quoted Rudolph - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-2560x1440.png" title="Quoted Rudolph - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-3840x2160.png" title="Quoted Rudolph - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-640x480.png" title="Quoted Rudolph - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-800x480.png" title="Quoted Rudolph - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-800x600.png" title="Quoted Rudolph - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1024x768.png" title="Quoted Rudolph - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1024x1024.png" title="Quoted Rudolph - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1152x864.png" title="Quoted Rudolph - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x720.png" title="Quoted Rudolph - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x800.png" title="Quoted Rudolph - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x960.png" title="Quoted Rudolph - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x1024.png" title="Quoted Rudolph - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1366x768.png" title="Quoted Rudolph - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1400x1050.png" title="Quoted Rudolph - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1440x900.png" title="Quoted Rudolph - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1600x1200.png" title="Quoted Rudolph - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1680x1050.png" title="Quoted Rudolph - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1680x1200.png" title="Quoted Rudolph - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1080.png" title="Quoted Rudolph - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1200.png" title="Quoted Rudolph - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1440.png" title="Quoted Rudolph - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-2560x1440.png" title="Quoted Rudolph - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-3840x2160.png" title="Quoted Rudolph - 3840x2160">3840x2160</a></li></ul><h2 id="learning-is-an-art-12-2025">Learning Is An Art</h2><p>The year is coming to an end. A year full of adventures, projects, unforgettable moments, and others that will fade into oblivion. And it’s this month that we start preparing for next year, organizing it and hoping it will be at least as good as the last, and that it will give us 365 days to savor from the first to the last. This month we share Katherine Johnson and some wise words that we shouldn’t forget: ‘I like to learn. It’s an art and a science.’ — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela Jimenez</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/dec-25-learning-is-an-art-full.png" title="Learning Is An Art"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/dec-25-learning-is-an-art-preview.png" title="Learning Is An Art - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-640x480.png" title="Learning Is An Art - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-800x480.png" title="Learning Is An Art - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1024x768.png" title="Learning Is An Art - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1280x720.png" title="Learning Is An Art - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1280x800.png" title="Learning Is An Art - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1440x900.png" title="Learning Is An Art - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1600x1200.png" title="Learning Is An Art - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1920x1080.png" title="Learning Is An Art - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1920x1440.png" title="Learning Is An Art - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-2560x1440.png" title="Learning Is An Art - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-640x480.png" title="Learning Is An Art - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-800x480.png" title="Learning Is An Art - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1024x768.png" title="Learning Is An Art - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1280x720.png" title="Learning Is An Art - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1280x800.png" title="Learning Is An Art - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1440x900.png" title="Learning Is An Art - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1600x1200.png" title="Learning Is An Art - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1920x1080.png" title="Learning Is An Art - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1920x1440.png" title="Learning Is An Art - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-2560x1440.png" title="Learning Is An Art - 2560x1440">2560x1440</a></li></ul><h2 id="chilly-dog,-warm-troubles-12-2025">Chilly Dog, Warm Troubles</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/dec-25-chilly-dog-warm-troubles-full.png" title="Chilly Dog, Warm Troubles"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/dec-25-chilly-dog-warm-troubles-preview.png" title="Chilly Dog, Warm Troubles - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-640x480.png" title="Chilly Dog, Warm Troubles - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-800x480.png" title="Chilly Dog, Warm Troubles - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-800x600.png" title="Chilly Dog, Warm Troubles - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1024x768.png" title="Chilly Dog, Warm Troubles - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1024x1024.png" title="Chilly Dog, Warm Troubles - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1152x864.png" title="Chilly Dog, Warm Troubles - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x720.png" title="Chilly Dog, Warm Troubles - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x800.png" title="Chilly Dog, Warm Troubles - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x960.png" title="Chilly Dog, Warm Troubles - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x1024.png" title="Chilly Dog, Warm Troubles - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1366x768.png" title="Chilly Dog, Warm Troubles - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1400x1050.png" title="Chilly Dog, Warm Troubles - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1440x900.png" title="Chilly Dog, Warm Troubles - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1600x1200.png" title="Chilly Dog, Warm Troubles - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1680x1050.png" title="Chilly Dog, Warm Troubles - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1680x1200.png" title="Chilly Dog, Warm Troubles - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1080.png" title="Chilly Dog, Warm Troubles - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1200.png" title="Chilly Dog, Warm Troubles - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1440.png" title="Chilly Dog, Warm Troubles - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-2560x1440.png" title="Chilly Dog, Warm Troubles - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-3840x2160.png" title="Chilly Dog, Warm Troubles - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-640x480.png" title="Chilly Dog, Warm Troubles - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-800x480.png" title="Chilly Dog, Warm Troubles - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-800x600.png" title="Chilly Dog, Warm Troubles - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1024x768.png" title="Chilly Dog, Warm Troubles - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1024x1024.png" title="Chilly Dog, Warm Troubles - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1152x864.png" title="Chilly Dog, Warm Troubles - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x720.png" title="Chilly Dog, Warm Troubles - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x800.png" title="Chilly Dog, Warm Troubles - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x960.png" title="Chilly Dog, Warm Troubles - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x1024.png" title="Chilly Dog, Warm Troubles - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1366x768.png" title="Chilly Dog, Warm Troubles - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1400x1050.png" title="Chilly Dog, Warm Troubles - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1440x900.png" title="Chilly Dog, Warm Troubles - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1600x1200.png" title="Chilly Dog, Warm Troubles - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1680x1050.png" title="Chilly Dog, Warm Troubles - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1680x1200.png" title="Chilly Dog, Warm Troubles - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1080.png" title="Chilly Dog, Warm Troubles - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1200.png" title="Chilly Dog, Warm Troubles - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1440.png" title="Chilly Dog, Warm Troubles - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-2560x1440.png" title="Chilly Dog, Warm Troubles - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-3840x2160.png" title="Chilly Dog, Warm Troubles - 3840x2160">3840x2160</a></li></ul><h2 id="modern-christmas-magic-12-2025">Modern Christmas Magic</h2><p>A fusion of modern Christmas aesthetics and a user-centric mobile app development company, crafting delightful holiday-inspired digital experiences. — Designed by the <a href="https://www.zco.com/">Zco Corporation Design Team</a> from the United States.</p><figure><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/dec-25-modern-christmas-magic-full.png" title="Modern Christmas Magic"></img></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/dec-25-modern-christmas-magic-preview.png" title="Modern Christmas Magic - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-800x600.png" title="Modern Christmas Magic - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1024x768.png" title="Modern Christmas Magic - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1400x900.png" title="Modern Christmas Magic - 1400x900">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1400x1050.png" title="Modern Christmas Magic - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1600x1200.png" title="Modern Christmas Magic - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1680x1050.png" title="Modern Christmas Magic - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1080.png" title="Modern Christmas Magic - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1200.png" title="Modern Christmas Magic - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1440.png" title="Modern Christmas Magic - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-2560x1440.png" title="Modern Christmas Magic - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-800x600.png" title="Modern Christmas Magic - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1024x768.png" title="Modern Christmas Magic - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1400x900.png" title="Modern Christmas Magic - 1400x900">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1400x1050.png" title="Modern Christmas Magic - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1600x1200.png" title="Modern Christmas Magic - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1680x1050.png" title="Modern Christmas Magic - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1080.png" title="Modern Christmas Magic - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1200.png" title="Modern Christmas Magic - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1440.png" title="Modern Christmas Magic - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-2560x1440.png" title="Modern Christmas Magic - 2560x1440">2560x1440</a></li></ul><div data-audience="non-subscriber" data-remove="true"><aside><div><a data-instant="" href="https://www.smashingmagazine.com/printed-books/image-optimization/"><div></img></source></picture></div></a></div></aside></div><h2 id="dear-moon-merry-christmas">Dear Moon, Merry Christmas</h2><p>Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/69d1bfe5-28c1-489a-80e7-0e74ec404bad/dec-19-dear-moon-merry-christmas-full-opt.png" title="Dear Moon, Merry Christmas"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a6b9bd64-491c-4be4-bb3e-0295fea6f0c6/dec-19-dear-moon-merry-christmas-preview-opt.png" title="Dear Moon, Merry Christmas - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-800x480.jpg" title="Dear Moon, Merry Christmas - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-800x600.jpg" title="Dear Moon, Merry Christmas - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1024x600.jpg" title="Dear Moon, Merry Christmas - 1024x600">1024x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1024x768.jpg" title="Dear Moon, Merry Christmas - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1152x864.jpg" title="Dear Moon, Merry Christmas - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x720.jpg" title="Dear Moon, Merry Christmas - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x800.jpg" title="Dear Moon, Merry Christmas - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x960.jpg" title="Dear Moon, Merry Christmas - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x1024.jpg" title="Dear Moon, Merry Christmas - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1366x768.jpg" title="Dear Moon, Merry Christmas - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1400x1050.jpg" title="Dear Moon, Merry Christmas - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1440x900.jpg" title="Dear Moon, Merry Christmas - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1440x960.jpg" title="Dear Moon, Merry Christmas - 1440x960">1440x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1600x900.jpg" title="Dear Moon, Merry Christmas - 1600x900">1600x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1600x1200.jpg" title="Dear Moon, Merry Christmas - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1680x1050.jpg" title="Dear Moon, Merry Christmas - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1680x1200.jpg" title="Dear Moon, Merry Christmas - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1080.jpg" title="Dear Moon, Merry Christmas - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1200.jpg" title="Dear Moon, Merry Christmas - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1440.jpg" title="Dear Moon, Merry Christmas - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2560x1440.jpg" title="Dear Moon, Merry Christmas - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2560x1600.jpg" title="Dear Moon, Merry Christmas - 2560x1600">2560x1600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2880x1800.jpg" title="Dear Moon, Merry Christmas - 2880x1800">2880x1800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-3072x1920.jpg" title="Dear Moon, Merry Christmas - 3072x1920">3072x1920</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-3840x2160.jpg" title="Dear Moon, Merry Christmas - 3840x2160">3840x2160</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-5120x2880.jpg" title="Dear Moon, Merry Christmas - 5120x2880">5120x2880</a></li></ul><h2 id="its-in-the-little-things">It’s In The Little Things</h2><p>Designed by Thaïs Lenglez from Belgium.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2024/dec-13-its-in-the-little-things-full-opt.png" title="It’s In The Little Things"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2024/dec-13-its-in-the-little-things-preview-opt.png" title="It’s In The Little Things - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-640x480.png" title="It’s In The Little Things - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-800x600.png" title="It’s In The Little Things - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1024x768.png" title="It’s In The Little Things - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1280x1024.png" title="It’s In The Little Things - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1440x900.png" title="It’s In The Little Things - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1600x1200.png" title="It’s In The Little Things - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1680x1050.png" title="It’s In The Little Things - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1920x1080.png" title="It’s In The Little Things - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1920x1200.png" title="It’s In The Little Things - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-2560x1440.png" title="It’s In The Little Things - 2560x1440">2560x1440</a></li></ul><h2 id="the-house-on-the-river-drina">The House On The River Drina</h2><p>“Since we often yearn for a peaceful and quiet place to work, we have found inspiration in the famous house on the River Drina in Bajina Bašta, Serbia. Wouldn’t it be great being in nature, away from civilization, swaying in the wind and listening to the waves of the river smashing your house, having no neighbors to bother you? Not sure about the Internet, though…” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b63a58fb-92a5-4f9d-81b3-c90e2cfd9b5a/dec-16-the-house-on-the-river-drina-full-opt.png" title="The House On The River Drina"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b8776b3-8fdf-469a-b5b2-591d535d02b6/dec-16-the-house-on-the-river-drina-preview-opt.png" title="The House On The River Drina - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-640x480.jpg" title="The House On The River Drina - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-800x600.jpg" title="The House On The River Drina - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1024x1024.jpg" title="The House On The River Drina - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1152x864.jpg" title="The House On The River Drina - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x720.jpg" title="The House On The River Drina - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x960.jpg" title="The House On The River Drina - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x1024.jpg" title="The House On The River Drina - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1366x768.jpg" title="The House On The River Drina - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1400x1050.jpg" title="The House On The River Drina - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1440x900.jpg" title="The House On The River Drina - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1600x1200.jpg" title="The House On The River Drina - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1680x1200.jpg" title="The House On The River Drina - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1080.jpg" title="The House On The River Drina - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1200.jpg" title="The House On The River Drina - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1440.jpg" title="The House On The River Drina - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-2560x1440.jpg" title="The House On The River Drina - 2560x1440">2560x1440</a></li></ul><h2 id="christmas-cookies">Christmas Cookies</h2><p>Christmas is coming and a great way to share our love is by baking cookies. — Designed by <a href="https://www.mariakellerac.com">Maria Keller</a> from Mexico.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57f8e478-f6a2-4eeb-bac0-45d8dd01d7cb/dec-17-christmas-cookies-full.png" title="Christmas Cookies"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/251c117b-6e3a-42eb-b274-82af1abf00ed/dec-17-christmas-cookies-preview-opt.png" title="Christmas Cookies - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-320x480.png" title="Christmas Cookies - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-640x480.png" title="Christmas Cookies - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-640x1136.png" title="Christmas Cookies - 640x1136">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-750x1334.png" title="Christmas Cookies - 750x1334">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-800x480.png" title="Christmas Cookies - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-800x600.png" title="Christmas Cookies - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1024x768.png" title="Christmas Cookies - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1024x1024.png" title="Christmas Cookies - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1152x864.png" title="Christmas Cookies - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1242x2208.png" title="Christmas Cookies - 1242x2208">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x720.png" title="Christmas Cookies - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x800.png" title="Christmas Cookies - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x960.png" title="Christmas Cookies - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x1024.png" title="Christmas Cookies - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1366x768.png" title="Christmas Cookies - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1400x1050.png" title="Christmas Cookies - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1440x900.png" title="Christmas Cookies - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1600x1200.png" title="Christmas Cookies - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1680x1050.png" title="Christmas Cookies - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1680x1200.png" title="Christmas Cookies - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1080.png" title="Christmas Cookies - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1200.png" title="Christmas Cookies - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1440.png" title="Christmas Cookies - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-2560x1440.png" title="Christmas Cookies - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-2880x1800.png" title="Christmas Cookies - 2880x1800">2880x1800</a></li></ul><h2 id="sweet-snowy-tenderness">Sweet Snowy Tenderness</h2><p>You know that warm feeling when you get to spend cold winter days in a snug, homey, relaxed atmosphere? Oh, yes, we love it, too! It is the sentiment we set our hearts on for the holiday season, and this sweet snowy tenderness is for all of us who adore watching the snowfall from our windows. Isn’t it romantic? — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29ad3ce1-0f4e-4c84-a7fd-222e00e8f544/dec-18-sweet-snowy-tenderness-full-opt.png" title="Sweet Snowy Tenderness"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6179490e-9ece-4078-8a4b-d37c27f546b4/dec-18-sweet-snowy-tenderness-preview-opt.png" title="Sweet Snowy Tenderness - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-320x480.jpg" title="Sweet Snowy Tenderness - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-640x480.jpg" title="Sweet Snowy Tenderness - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-800x480.jpg" title="Sweet Snowy Tenderness - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-800x600.jpg" title="Sweet Snowy Tenderness - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1024x768.jpg" title="Sweet Snowy Tenderness - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1024x1024.jpg" title="Sweet Snowy Tenderness - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1152x864.jpg" title="Sweet Snowy Tenderness - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x720.jpg" title="Sweet Snowy Tenderness - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x800.jpg" title="Sweet Snowy Tenderness - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x960.jpg" title="Sweet Snowy Tenderness - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x1024.jpg" title="Sweet Snowy Tenderness - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1366x768.jpg" title="Sweet Snowy Tenderness - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1400x1050.jpg" title="Sweet Snowy Tenderness - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1440x900.jpg" title="Sweet Snowy Tenderness - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1600x1200.jpg" title="Sweet Snowy Tenderness - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1680x1050.jpg" title="Sweet Snowy Tenderness - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1680x1200.jpg" title="Sweet Snowy Tenderness - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1080.jpg" title="Sweet Snowy Tenderness - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1200.jpg" title="Sweet Snowy Tenderness - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1440.jpg" title="Sweet Snowy Tenderness - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-2560x1440.jpg" title="Sweet Snowy Tenderness - 2560x1440">2560x1440</a></li></ul><h2 id="anonymoose">Anonymoose</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/83743101-3686-4fa1-8527-f43b5298c85f/dec-21-anonymoose-nocal-full-opt.png" title="Anonymoose"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/53276d0a-8060-42fc-adea-e59eed8f78e8/dec-21-anonymoose-nocal-preview-opt.png" title="Anonymoose - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-640x480.png" title="Anonymoose - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-800x480.png" title="Anonymoose - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-800x600.png" title="Anonymoose - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1024x768.png" title="Anonymoose - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1024x1024.png" title="Anonymoose - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1152x864.png" title="Anonymoose - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x720.png" title="Anonymoose - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x800.png" title="Anonymoose - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x960.png" title="Anonymoose - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x1024.png" title="Anonymoose - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1366x768.png" title="Anonymoose - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1400x1050.png" title="Anonymoose - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1440x900.png" title="Anonymoose - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1600x1200.png" title="Anonymoose - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1680x1050.png" title="Anonymoose - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1680x1200.png" title="Anonymoose - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1080.png" title="Anonymoose - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1200.png" title="Anonymoose - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1440.png" title="Anonymoose - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-2560x1440.png" title="Anonymoose - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-3840x2160.png" title="Anonymoose - 3840x2160">3840x2160</a></li></ul><h2 id="cardinals-in-snowfall">Cardinals In Snowfall</h2><p>During Christmas season, in the cold, colorless days of winter, Cardinal birds are seen as symbols of faith and warmth. In the part of America I live in, there is snowfall every December. While the snow is falling, I can see gorgeous Cardinals flying in and out of my patio. The intriguing color palette of the bright red of the Cardinals, the white of the flurries, and the brown/black of dry twigs and fallen leaves on the snow-laden ground fascinates me a lot, and inspired me to create this quaint and sweet, hand-illustrated surface pattern design as I wait for the snowfall in my town! — Designed by <a href="https://pineconedream.com/">Gyaneshwari Dave</a> from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27101977-9a61-41b9-9e80-445f3a8932af/dec-18-cardinals-in-snowfall-full-opt.png" title="Cardinals In Snowfall"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a28051e-b3bc-4eff-a30b-2456c249aed5/dec-18-cardinals-in-snowfall-preview-opt.png" title="Cardinals In Snowfall - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-640x960.jpg" title="Cardinals In Snowfall - 640x960">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-768x1024.jpg" title="Cardinals In Snowfall - 768x1024">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1280x720.jpg" title="Cardinals In Snowfall - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1280x1024.jpg" title="Cardinals In Snowfall - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1366x768.jpg" title="Cardinals In Snowfall - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1920x1080.jpg" title="Cardinals In Snowfall - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-2560x1440.jpg" title="Cardinals In Snowfall - 2560x1440">2560x1440</a></li></ul><h2 id="getting-hygge">Getting Hygge</h2><p>There’s no more special time for a fire than in the winter. Cozy blankets, warm beverages, and good company can make all the difference when the sun goes down. We’re all looking forward to generating some hygge this winter, so snuggle up and make some memories. — Designed by <a href="https://www.thehannongroup.com/">The Hannon Group</a> from Washington D.C.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ad2c8c59-c9c4-4153-a57e-8602ff6e09d7/dec-17-getting-hygge-full-opt.png" title="Getting Hygge"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1145e84f-229d-4f9e-82b6-370c707e695c/dec-17-getting-hygge-preview-opt.png" title="Getting Hygge - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-320x480.png" title="Getting Hygge - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-640x480.png" title="Getting Hygge - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-800x600.png" title="Getting Hygge - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1024x768.png" title="Getting Hygge - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1280x960.png" title="Getting Hygge - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1440x900.png" title="Getting Hygge - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1600x1200.png" title="Getting Hygge - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1680x1050.png" title="Getting Hygge - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1680x1200.png" title="Getting Hygge - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1920x1080.png" title="Getting Hygge - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1920x1440.png" title="Getting Hygge - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-2560x1440.png" title="Getting Hygge - 2560x1440">2560x1440</a></li></ul><h2 id="christmas-woodland">Christmas Woodland</h2><p>Designed by <a href="https://melarmstrongdesign.com">Mel Armstrong</a> from Australia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ebce7f3-b902-49e1-8c71-59f7ebffe370/dec-17-christmas-woodland-full.png" title="Christmas Woodland"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ef5c205-d211-4776-ad9e-f69626f25b88/dec-17-christmas-woodland-preview-opt.png" title="Christmas Woodland - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-320x480.png" title="Christmas Woodland - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-640x480.png" title="Christmas Woodland - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-800x480.png" title="Christmas Woodland - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-800x600.png" title="Christmas Woodland - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1024x768.png" title="Christmas Woodland - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1024x1024.png" title="Christmas Woodland - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1152x864.png" title="Christmas Woodland - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x720.png" title="Christmas Woodland - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x800.png" title="Christmas Woodland - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x960.png" title="Christmas Woodland - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x1024.png" title="Christmas Woodland - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1366x768.png" title="Christmas Woodland - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1400x1050.png" title="Christmas Woodland - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1440x900.png" title="Christmas Woodland - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1600x1200.png" title="Christmas Woodland - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1680x1050.png" title="Christmas Woodland - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1680x1200.png" title="Christmas Woodland - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1080.png" title="Christmas Woodland - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1200.png" title="Christmas Woodland - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1440.png" title="Christmas Woodland - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-2560x1440.png" title="Christmas Woodland - 2560x1440">2560x1440</a></li></ul><h2 id="joy-to-the-world">Joy To The World</h2><p>Joy to the world, all the boys and girls now, joy to the fishes in the deep blue sea, joy to you and me. — Designed by Morgan Newnham from Boulder, Colorado.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/542d1894-584a-4537-b3c1-142deda3ab5c/dec-17-joy-to-the-world-full-opt.png" title="Joy To The World"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68553142-95b5-47da-9007-e50407f8c5d9/dec-17-joy-to-the-world-preview-opt.png" title="Joy To The World - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-320x480.png" title="Joy To The World - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-640x480.png" title="Joy To The World - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-800x480.png" title="Joy To The World - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-800x600.png" title="Joy To The World - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1024x768.png" title="Joy To The World - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1024x1024.png" title="Joy To The World - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1152x864.png" title="Joy To The World - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x720.png" title="Joy To The World - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x800.png" title="Joy To The World - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x960.png" title="Joy To The World - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x1024.png" title="Joy To The World - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1400x1050.png" title="Joy To The World - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1440x900.png" title="Joy To The World - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1600x1200.png" title="Joy To The World - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1680x1050.png" title="Joy To The World - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1680x1200.png" title="Joy To The World - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1080.png" title="Joy To The World - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1200.png" title="Joy To The World - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1440.png" title="Joy To The World - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-2560x1440.png" title="Joy To The World - 2560x1440">2560x1440</a></li></ul><h2 id="gifts-lover">Gifts Lover</h2><p>Designed by <a href="https://www.doud.be">Elise Vanoorbeek</a> from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25b69dac-5d0b-4e0a-bf39-b2554ec557db/dec-14-gifts-lover-full.png" title="Gifts Lover"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c9e03e4-efa6-4fb8-8a0d-69f1edd9479a/dec-14-gifts-lover-preview-opt.png" title="Gifts Lover - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-800x480.jpg" title="Gifts Lover - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-800x600.jpg" title="Gifts Lover - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1024x768.jpg" title="Gifts Lover - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1024x1024.jpg" title="Gifts Lover - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1152x864.jpg" title="Gifts Lover - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x800.jpg" title="Gifts Lover - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x960.jpg" title="Gifts Lover - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x1024.jpg" title="Gifts Lover - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1366x768.jpg" title="Gifts Lover - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1400x1050.jpg" title="Gifts Lover - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1440x900.jpg" title="Gifts Lover - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1600x1200.jpg" title="Gifts Lover - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1680x1050.jpg" title="Gifts Lover - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1680x1200.jpg" title="Gifts Lover - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1080.jpg" title="Gifts Lover - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1200.jpg" title="Gifts Lover - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1440.jpg" title="Gifts Lover - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-2560x1440.jpg" title="Gifts Lover - 2560x1440">2560x1440</a></li></ul><h2 id="king-of-pop">King Of Pop</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45cc8a5d-29ae-435d-a68d-2991d779c936/dec-21-king-of-pop-nocal-full-opt.png" title="King Of Pop"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd870c1d-c7fb-44ab-9e70-5cac012691fb/dec-21-king-of-pop-nocal-preview-opt.png" title="King Of Pop - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-640x480.png" title="King Of Pop - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-800x480.png" title="King Of Pop - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-800x600.png" title="King Of Pop - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1024x768.png" title="King Of Pop - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1024x1024.png" title="King Of Pop - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1152x864.png" title="King Of Pop - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x720.png" title="King Of Pop - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x800.png" title="King Of Pop - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x960.png" title="King Of Pop - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x1024.png" title="King Of Pop - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1366x768.png" title="King Of Pop - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1400x1050.png" title="King Of Pop - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1440x900.png" title="King Of Pop - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1600x1200.png" title="King Of Pop - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1680x1050.png" title="King Of Pop - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1680x1200.png" title="King Of Pop - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1080.png" title="King Of Pop - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1200.png" title="King Of Pop - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1440.png" title="King Of Pop - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-2560x1440.png" title="King Of Pop - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-3840x2160.png" title="King Of Pop - 3840x2160">3840x2160</a></li></ul><h2 id="the-matterhorn">The Matterhorn</h2><p>“Christmas is always such a magical time of year so we created this wallpaper to blend the majestry of the mountains with a little bit of magic.” — Designed by Dominic Leonard from the United Kingdom.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94e4bf3b-1ef4-4679-80ab-00c831c2be80/dec-16-the-matterhorn-full-opt.png" title="The Matterhorn"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25937464-9e3c-4bf5-9fc3-611b54699aa6/dec-16-the-matterhorn-preview-opt.png" title="The Matterhorn - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-320x480.png" title="The Matterhorn - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-800x600.png" title="The Matterhorn - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1024x768.png" title="The Matterhorn - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1280x720.png" title="The Matterhorn - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1400x1050.png" title="The Matterhorn - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1680x1200.png" title="The Matterhorn - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1080.png" title="The Matterhorn - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1200.png" title="The Matterhorn - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1440.png" title="The Matterhorn - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-2560x1440.png" title="The Matterhorn - 2560x1440">2560x1440</a></li></ul><h2 id="ninja-santa">Ninja Santa</h2><p>Designed by Elise Vanoorbeek from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/caf4e170-afb2-458a-af83-b67925f3ea7e/dec-13-ninja-santa-full-opt.png" title="Ninja Santa"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72db2dde-7f71-4aac-88c3-f17b540e8343/dec-13-ninja-santa-preview-opt.png" title="Ninja Santa — Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1280x1024.jpg" title="Ninja Santa - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1366x768.jpg" title="Ninja Santa - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1400x1050.jpg" title="Ninja Santa - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1440x900.jpg" title="Ninja Santa - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1600x1200.jpg" title="Ninja Santa - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1680x1050.jpg" title="Ninja Santa - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1680x1200.jpg" title="Ninja Santa - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1920x1080.jpg" title="Ninja Santa - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1920x1440.jpg" title="Ninja Santa - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-2560x1440.jpg" title="Ninja Santa - 2560x1440">2560x1440</a></li></ul><h2 id="ice-flowers">Ice Flowers</h2><p>“I took some photos during a very frosty and cold week before Christmas.” Designed by <a href="https://kyu-to.deviantart.com">Anca Varsandan</a> from Romania.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f14d58a3-b787-483b-a2e4-a3400d50dfed/january-10-ice-flowers-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b4a5499-4254-4d4f-a460-0f0964721a55/january-10-ice-flowers-preview-opt.png">preview</a></li><li>without calendar: <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/101dfe78-547b-4f28-ad00-c3f08302cbe1/january-10-ice-flowers-nocal-1024x768.jpg">1024x768</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/33993672-e95d-4729-a836-7af5f941812c/january-10-ice-flowers-nocal-1280x800.jpg">1280x800</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/14522cd5-614d-4597-b488-44ffa3e6f3f2/january-10-ice-flowers-nocal-1440x900.jpg">1440x900</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d43a061-dd0c-47f9-af83-a3d7413c719b/january-10-ice-flowers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3822fa3-5814-4b90-96bc-ef75191a9243/january-10-ice-flowers-nocal-1920x1200.jpg">1920x1200</a></li></ul><h2 id="christmas-selfie">Christmas Selfie</h2><p>Designed by <a href="https://www.elacarta.com">Emanuela Carta</a> from Italy.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3eac541a-4c0e-45a9-ab06-7ec0fee72084/dec-16-christmas-selfie-full-opt.png" title="Christmas Selfie"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3df98b9f-310f-4a63-b885-6b97ba4edccf/dec-16-christmas-selfie-preview-opt.png" title="Christmas Selfie - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-320x480.png" title="Christmas Selfie - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-800x600.png" title="Christmas Selfie - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1280x800.png" title="Christmas Selfie - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1280x1024.png" title="Christmas Selfie - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1440x900.png" title="Christmas Selfie - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1680x1050.png" title="Christmas Selfie - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-2560x1440.png" title="Christmas Selfie - 2560x1440">2560x1440</a></li></ul><h2 id="winter-wonderland">Winter Wonderland</h2><p>“‘Winter is the time for comfort, for good food and warmth, for the touch of a friendly hand and for a talk beside the fire: it is the time for home.’ (Edith Sitwell) — Designed by <a href="https://itobuz.com/">Dipanjan Karmakar</a> from India.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-16-winter-wonderland-full-opt.png" title="Winter Wonderland"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-16-winter-wonderland-preview-opt.png" title="Winter Wonderland - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x720.jpg" title="Winter Wonderland - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x800.jpg" title="Winter Wonderland - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x960.jpg" title="Winter Wonderland - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x1024.jpg" title="Winter Wonderland - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1366x768.jpg" title="Winter Wonderland - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1400x1050.jpg" title="Winter Wonderland - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1440x900.jpg" title="Winter Wonderland - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1600x1200.jpg" title="Winter Wonderland - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1680x1050.jpg" title="Winter Wonderland - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1680x1200.jpg" title="Winter Wonderland - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1920x1080.jpg" title="Winter Wonderland - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1920x1440.jpg" title="Winter Wonderland - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-2560x1440.jpg" title="Winter Wonderland - 2560x1440">2560x1440</a></li></ul><h2 id="winter-coziness-at-home">Winter Coziness At Home</h2><p>Winter coziness that we all feel when we come home after spending some time outside or when we come to our parental home to celebrate Christmas inspired our designers. Home is the place where we can feel safe and sound, so we couldn’t help ourselves but create this calendar. — Designed by <a href="http://masterbundles.com/">MasterBundles</a> from Ukraine.</p><figure><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-22-winter-coziness-at-home-full-opt.png" title="Winter Coziness At Home"></img></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-22-winter-coziness-at-home-preview-opt.png" title="Winter Coziness At Home - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-320х480.png" title="Winter Coziness At Home - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-640х480.png" title="Winter Coziness At Home - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-800х480.png" title="Winter Coziness At Home - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-800х600.png" title="Winter Coziness At Home - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1024х768.png" title="Winter Coziness At Home - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1024х1024.png" title="Winter Coziness At Home - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1152х864.png" title="Winter Coziness At Home - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280х720.png" title="Winter Coziness At Home - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280х800.png" title="Winter Coziness At Home - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280х960.png" title="Winter Coziness At Home - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280х1024.png" title="Winter Coziness At Home - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1366х768.png" title="Winter Coziness At Home - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1400х1050.png" title="Winter Coziness At Home - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1440х900.png" title="Winter Coziness At Home - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1600х1200.png" title="Winter Coziness At Home - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1680х1050.png" title="Winter Coziness At Home - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1680х1200.png" title="Winter Coziness At Home - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920х1080.png" title="Winter Coziness At Home - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920х1200.png" title="Winter Coziness At Home - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920х1440.png" title="Winter Coziness At Home - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-2560х1440.png" title="Winter Coziness At Home - 2560x1440">2560x1440</a></li></ul><h2 id="enchanted-blizzard">Enchanted Blizzard</h2><p>A seemingly forgotten world under the shade of winter glaze hides a moment where architecture meets fashion and change encounters steadiness. — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/913ccea9-595b-4aff-9550-0afec57203cc/dec-17-enchanted-blizzard-full-opt.png" title="Enchanted Blizzard"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21da6af5-5de8-44c2-9a02-d0e17a1425fa/dec-17-enchanted-blizzard-preview-opt.png" title="Enchanted Blizzard - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-320x480.png" title="Enchanted Blizzard - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-640x480.png" title="Enchanted Blizzard - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-800x480.png" title="Enchanted Blizzard - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-800x600.png" title="Enchanted Blizzard - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1024x768.png" title="Enchanted Blizzard - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1024x1024.png" title="Enchanted Blizzard - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1152x864.png" title="Enchanted Blizzard - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x720.png" title="Enchanted Blizzard - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x800.png" title="Enchanted Blizzard - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x960.png" title="Enchanted Blizzard - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x1024.png" title="Enchanted Blizzard - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1400x1050.png" title="Enchanted Blizzard - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1440x900.png" title="Enchanted Blizzard - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1600x1200.png" title="Enchanted Blizzard - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1680x1050.png" title="Enchanted Blizzard - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1680x1200.png" title="Enchanted Blizzard - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1080.png" title="Enchanted Blizzard - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1200.png" title="Enchanted Blizzard - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1440.png" title="Enchanted Blizzard - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-2560x1440.png" title="Enchanted Blizzard - 2560x1440">2560x1440</a></li></ul><h2 id="all-that-belongs-to-the-past">All That Belongs To The Past</h2><p>“Sometimes new beginnings make us revisit our favorite places or people from the past. We don’t visit them often because they remind us of the past but enjoy the brief reunion. Cheers to new beginnings in the new year!” Designed by <a href="https://dorvandavoudi.com">Dorvan Davoudi</a> from Canada.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/102edbd6-ebf2-4df9-9218-7d506a069725/jan-16-all-that-belongs-to-the-past-full-opt.png" title="All That Belongs To The Past"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3260240-ab67-4cc8-b391-6e4a412e8b75/jan-16-all-that-belongs-to-the-past-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-800x480.jpg" title="All That Belongs To The Past - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-800x600.jpg" title="All That Belongs To The Past - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1024x1024.jpg" title="All That Belongs To The Past - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1152x864.jpg" title="All That Belongs To The Past - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x720.jpg" title="All That Belongs To The Past - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x800.jpg" title="All That Belongs To The Past - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x960.jpg" title="All That Belongs To The Past - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x1024.jpg" title="All That Belongs To The Past - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1366x768.jpg" title="All That Belongs To The Past - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1400x1050.jpg" title="All That Belongs To The Past - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1440x900.jpg" title="All That Belongs To The Past - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1600x1200.jpg" title="All That Belongs To The Past - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1680x1050.jpg" title="All That Belongs To The Past - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1680x1200.jpg" title="All That Belongs To The Past - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1080.jpg" title="All That Belongs To The Past - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1200.jpg" title="All That Belongs To The Past - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1440.jpg" title="All That Belongs To The Past - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-2560x1440.jpg" title="All That Belongs To The Past - 2560x1440">2560x1440</a></li></ul><h2 id="december-through-different-eyes">December Through Different Eyes</h2><p>“As a Belgian, December reminds me of snow, coziness, winter, lights, and so on. However, in the Southern hemisphere, it is summer at this time. With my illustration I wanted to show the different perspectives on December. I wish you all a Merry Christmas and Happy New Year!” — Designed by Jo Smets from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a6afdb7-0898-40ce-9a8c-8d9b0b72db1c/dec-16-december-through-different-eyes-full-opt.png" title="December Through Different Eyes"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/052848c9-5532-465f-bbac-760188d9f416/dec-16-december-through-different-eyes-preview-opt.png" title="December Through Different Eyes - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-320x480.png" title="December Through Different Eyes - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-800x480.png" title="December Through Different Eyes - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1280x800.png" title="December Through Different Eyes - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1280x1024.png" title="December Through Different Eyes - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1920x1080.png" title="December Through Different Eyes - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-2560x1440.png" title="December Through Different Eyes - 2560x1440">2560x1440</a></li></ul><h2 id="silver-winter">Silver Winter</h2><p>Designed by <a href="https://www.violetadabija.com">Violeta Dabija</a> from Moldova.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/37e2aa55-5962-44dd-86a7-9d677e3df446/january-11-silver-winter-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00c28b2f-a996-41f4-a7f4-34c602e7bfd0/january-11-silver-winter-preview-opt.png">preview</a></li><li>without calendar: <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cb3a715-654c-4023-9ec9-a6714a653e46/january-11-silver-winter-52-nocal-1024x768.jpg">1024x768</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35c171e7-9192-492e-bbef-55eaae9b0942/january-11-silver-winter-52-nocal-1280x800.jpg">1280x800</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99a584-7703-408f-bbd5-5f4e1ba2b4f5/january-11-silver-winter-52-nocal-1440x900.jpg">1440x900</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5950575b-f30d-4a0d-83e7-0fc877c911a5/january-11-silver-winter-52-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a862a30e-ec77-410c-b9a4-7f471a63472f/january-11-silver-winter-52-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e627ba9b-47ea-41c4-abb5-3aa7c936750a/january-11-silver-winter-52-nocal-2560x1440.jpg">2560x1440</a></li></ul><h2 id="cozy">Cozy</h2><p>December is all about coziness and warmth. Days are getting darker, shorter, and colder. So a nice cup of hot cocoa just warms me up. — Designed by Hazuki Sato from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/066c8801-c795-4511-a131-3bf9ac7fa84d/dec-18-cosy-nocal-full-opt.png" title="Cozy"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d1eb07b-e179-42ba-9770-2ed95ca02a44/dec-18-cosy-nocal-preview-opt.png" title="Cozy - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-320x480.png" title="Cozy - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-640x480.png" title="Cozy - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-960x560.png" title="Cozy - 960x560">960x560</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1024x768.png" title="Cozy - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1280x960.png" title="Cozy - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1440x900.png" title="Cozy - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1600x1200.png" title="Cozy - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1920x1080.png" title="Cozy - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1920x1200.png" title="Cozy - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-2560x1440.png" title="Cozy - 2560x1440">2560x1440</a></li></ul><h2 id="tongue-stuck-on-lamppost">Tongue Stuck On Lamppost</h2><p>Designed by <a href="https://www.joshcleland.com">Josh Cleland</a> from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eddae94-833f-43b7-9c6b-8c9c044ab034/december-11-tongue-stuck-on-lamppost-20-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6516be4f-fabe-4082-ac09-2fe769521ee8/december-11-tongue-stuck-on-lamppost-20-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-2560x1440.jpg">2560x1440</a></li></ul><h2 id="on-to-the-next-one">On To The Next One</h2><p>Endings intertwined with new beginnings, challenges we rose to and the ones we weren’t up to, dreams fulfilled and opportunities missed. The year we say goodbye to leaves a bitter-sweet taste, but we’re thankful for the lessons, friendships, and experiences it gave us. We look forward to seeing what the new year has in store, but, whatever comes, we will welcome it with a smile, vigor, and zeal. — Designed by <a href="https://www.popwebdesign.net/web-development-serbia.html">PopArt Studio</a> from Serbia.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c22cc2-cd45-4f32-9c92-947a65625e26/dec-21-on-to-the-next-one-nocal-full-opt.png" title="On To The Next One"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df993d7f-d090-4724-9436-01e6e3cd70e8/dec-21-on-to-the-next-one-nocal-preview-opt.png" title="On To The Next One - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-320x480.jpg" title="On To The Next One - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-640x480.jpg" title="On To The Next One - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-800x480.jpg" title="On To The Next One - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-800x600.jpg" title="On To The Next One - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1024x768.jpg" title="On To The Next One - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1024x1024.jpg" title="On To The Next One - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1152x864.jpg" title="On To The Next One - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x720.jpg" title="On To The Next One - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x800.jpg" title="On To The Next One - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x960.jpg" title="On To The Next One - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x1024.jpg" title="On To The Next One - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1366x768.jpg" title="On To The Next One - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1400x1050.jpg" title="On To The Next One - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1440x900.jpg" title="On To The Next One - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1600x1200.jpg" title="On To The Next One - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1680x1050.jpg" title="On To The Next One - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1680x1200.jpg" title="On To The Next One - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1080.jpg" title="On To The Next One - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1200.jpg" title="On To The Next One - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1440.jpg" title="On To The Next One - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-2560x1440.jpg" title="On To The Next One - 2560x1440">2560x1440</a></li></ul><h2 id="christmas-owl">Christmas Owl</h2><p>Christmas waves a magic wand over this world, and behold, everything is softer and more beautiful. — Designed by Suman Sil from India.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f4c81c4-baa1-4ce1-9757-0d5d6e485eb2/dec-17-christmas-owl-full-opt.png" title="Christmas Owl"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b68a038c-82d8-4c8d-acaa-1038bccaf8e0/dec-17-christmas-owl-preview-opt.png" title="Christmas Owl - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x720.jpg" title="Christmas Owl - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x800.jpg" title="Christmas Owl - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x960.jpg" title="Christmas Owl - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1366x768.jpg" title="Christmas Owl - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1400x1050.jpg" title="Christmas Owl - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1440x900.jpg" title="Christmas Owl - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1600x1200.jpg" title="Christmas Owl - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1680x1050.jpg" title="Christmas Owl - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1680x1200.jpg" title="Christmas Owl - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1080.jpg" title="Christmas Owl - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1200.jpg" title="Christmas Owl - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1440.jpg" title="Christmas Owl - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-2560x1440.jpg" title="Christmas Owl - 2560x1440">2560x1440</a></li></ul><h2 id="catch-your-perfect-snowflake">Catch Your Perfect Snowflake</h2><p>“This time of year, people tend to dream big and expect miracles. Let your dreams come true!” Designed by <a href="https://dribbble.com/izhik">Igor Izhik</a> from Canada.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2f6a5c7-a3a2-4cb0-82c1-1fcfdb02e27d/dec-15-catch-your-perfect-snowflake-full-opt.png" title="Catch Your Perfect Snowflake"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27fb2569-e973-4bcb-919a-f8d786e008b1/dec-15-catch-your-perfect-snowflake-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-800x480.jpg" title="Catch Your Perfect Snowflake - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-800x600.jpg" title="Catch Your Perfect Snowflake - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1024x768.jpg" title="Catch Your Perfect Snowflake - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1024x1024.jpg" title="Catch Your Perfect Snowflake - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1152x864.jpg" title="Catch Your Perfect Snowflake - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x720.jpg" title="Catch Your Perfect Snowflake - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x800.jpg" title="Catch Your Perfect Snowflake - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x960.jpg" title="Catch Your Perfect Snowflake - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x1024.jpg" title="Catch Your Perfect Snowflake - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1400x1050.jpg" title="Catch Your Perfect Snowflake - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1440x900.jpg" title="Catch Your Perfect Snowflake - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1600x1200.jpg" title="Catch Your Perfect Snowflake - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1680x1050.jpg" title="Catch Your Perfect Snowflake - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1680x1200.jpg" title="Catch Your Perfect Snowflake - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1080.jpg" title="Catch Your Perfect Snowflake - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1200.jpg" title="Catch Your Perfect Snowflake - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1440.jpg" title="Catch Your Perfect Snowflake - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-2560x1440.jpg" title="Catch Your Perfect Snowflake - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-2560x1600.jpg" title="Catch Your Perfect Snowflake - 2560x1600">2560x1600</a></li></ul><h2 id="winter-garphee">Winter Garphee</h2><p>“Garphee’s flufiness glowing in the snow.” Designed by Razvan Garofeanu from Romania.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/acb0bd7c-2868-4176-9468-d1e06f31f96f/december-12-winter-garphee-81-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/158e76da-934e-4e62-bdb1-32616ccd9e84/december-12-winter-garphee-81-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-2560x1440.jpg">2560x1440</a></li></ul><h2 id="trailer-santa">Trailer Santa</h2><p>“A mid-century modern Christmas scene outside the norm of snowflakes and winter landscapes.” Designed by Houndstooth from the United States.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40a7c173-9928-4a55-bc4c-4d48f339b3da/december-12-trailer-santa-21-full-opt.png"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3703c2-593a-4ff4-a08a-52cb237ddb64/december-12-trailer-santa-21-preview-opt.png" title="Trailer Santa">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-2560x1440.jpg">2560x1440</a></li></ul><h2 id="winter-solstice">Winter Solstice</h2><p>“In December there’s a winter solstice; which means that the longest night of the year falls in December. I wanted to create the feeling of solitude of the long night into this wallpaper.” — Designed by Alex Hermans from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eaf114e2-475a-4945-9185-ce491e025194/dec-15-winter-solstice-full-opt.png" title="Winter Solstice"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c31b7a20-902c-4956-a266-a88bd5a4b7cb/dec-15-winter-solstice-preview-opt.png">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-320x480.jpg" title="Winter Solstice - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-640x480.jpg" title="Winter Solstice - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-800x480.jpg" title="Winter Solstice - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-800x600.jpg" title="Winter Solstice - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1024x768.jpg" title="Winter Solstice - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1024x1024.jpg" title="Winter Solstice - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1152x864.jpg" title="Winter Solstice - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x720.jpg" title="Winter Solstice - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x800.jpg" title="Winter Solstice - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x960.jpg" title="Winter Solstice - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x1024.jpg" title="Winter Solstice - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1366x768.jpg" title="Winter Solstice - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1400x1050.jpg" title="Winter Solstice - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1440x900.jpg" title="Winter Solstice - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1600x1200.jpg" title="Winter Solstice - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1680x1050.jpg" title="Winter Solstice - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1680x1200.jpg" title="Winter Solstice - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1080.jpg" title="Winter Solstice - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1200.jpg" title="Winter Solstice - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1440.jpg" title="Winter Solstice - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-2560x1440.jpg" title="Winter Solstice - 2560x1440">2560x1440</a></li></ul><h2 id="christmas-time">Christmas Time</h2><p>Designed by Sofie Keirsmaekers from Belgium.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a9988e43-6ee8-414c-8136-ac6939c5182e/dec-13-christmas-time-full-opt.png" title="Christmas Time!"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf1ce792-3363-4899-9714-fd569b53452b/dec-13-christmas-time-preview-opt.png" title="Christmas Time! — Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-320x480.png" title="Christmas Time! - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1024x1024.png" title="Christmas Time! - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1280x1024.png" title="Christmas Time! - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1440x900.png" title="Christmas Time! - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1920x1200.png" title="Christmas Time! - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-2560x1440.png" title="Christmas Time! - 2560x1440">2560x1440</a></li></ul><h2 id="happy-holidays">Happy Holidays</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p><figure><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e16c6728-d3a1-4800-8a6e-e3c45d2512ac/dec-20-happy-holidays-full-opt.png" title="Happy Holidays"></img></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56b7fbec-60c7-4776-96d0-028c06c5a552/dec-20-happy-holidays-preview-opt.png" title="Happy Holidays - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-640x480.png" title="Happy Holidays - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-800x480.png" title="Happy Holidays - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-800x600.png" title="Happy Holidays - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1024x768.png" title="Happy Holidays - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1024x1024.png" title="Happy Holidays - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1152x864.png" title="Happy Holidays - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x720.png" title="Happy Holidays - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x800.png" title="Happy Holidays - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x960.png" title="Happy Holidays - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x1024.png" title="Happy Holidays - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1366x768.png" title="Happy Holidays - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1400x1050.png" title="Happy Holidays - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1440x900.png" title="Happy Holidays - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1600x1200.png" title="Happy Holidays - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1680x1050.png" title="Happy Holidays - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1680x1200.png" title="Happy Holidays - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1080.png" title="Happy Holidays - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1200.png" title="Happy Holidays - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1440.png" title="Happy Holidays - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-2560x1440.png" title="Happy Holidays - 2560x1440">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-3840x2160.png" title="Happy Holidays - 3840x2160">3840x2160</a></li></ul><h2 id="get-featured-next-month">Get Featured Next Month</h2><p>Feeling inspired? We’ll publish the <strong>January wallpapers</strong> on December 31, so if you’d like to be a part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We are already looking forward to it!</p></div></div></div><br><span style='font: #ff0000'>Generated by <a href='https://github.com/andreskrey/readability.php'>Readability.php</a>.</span>
</article>
</main></body></html>

Articles on Smashing Magazine — For Web Designers And Developers

The Site-Search Paradox: Why The Big Box Always Wins

Why The Big Box Always Wins — Smashing Magazine

By About The Author

The “Syntax Tax” And The Death Of Exact Match

Why Google Wins: It’s Not Power, It’s Context

The UX Of “Maybe”: Designing For Probabilistic Results

Case Study: The Cost Of “Invisible” Content

The Internal Language Gap

The 4-step Site-search Audit Framework

Phase 1: The “Zero-result” Audit

Phase 2: Query Intent Mapping

Phase 3: The “Fuzzy” Matching Test

Phase 4: Scoping And Filtering UX

Reclaiming The Search Box: A Strategy For IA Professionals

Using A Google-powered Search Bar

The Simple Search UX Checklist

Conclusion: The Search Bar Is A Conversation

Testing Font Scaling For Accessibility With Figma Variables

Testing Font Scaling For Accessibility With Figma Variables — Smashing Magazine

By About The Author

Accessibility And Design

We Don’t Control Everything

Increase Font Size

Compliance With Guidelines

Standardized Access

iPhones

Google Chrome

Test In Figma

Where Do We Want To Go?

How Do We Make This Happen?

1. Designing The Interfaces

2. Apply Auto Layouts To All Elements

3. Structuring And Applying Text Styles

4. Define The Set Of Variables 100%

5. Apply The Variables To The Text Styles

6. Define The Variables For Increasing The Text Size

7. Apply Variables To Different Scale Versions

8. Identify Areas For Improvement

9. Make Corrections And Adjustments To The Design

10. Go Back To The Beginning And Repeat The Process

The Role Of Design Systems

Example File

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly

Why They Break And How To Fix Them Properly — Smashing Magazine

By About The Author

The Three Things Actually Causing This

The Overflow Problem

The Stacking Context Trap

The Containing Block Surprise

Why Absolute Positioning Fails Alone

The Fixes That Actually Work

Portals: The Fix That Ultimately Worked For Me

Fixed Positioning (And Why It’s Trickier Than It Looks)

CSS Anchor Positioning: Where I Think This Is Heading

Sometimes The Fix Is Just Moving The Element

What Modern CSS Still Doesn’t Solve

A Decision Guide For Your Situation

Conclusion

Further Reading

Modal vs. Separate Page: UX Decision Tree

UX Decision Tree — Smashing Magazine

By About The Author

Modals vs. Dialogs vs. Overlays vs. Lightboxes

Modals → For Single, Self-Contained Tasks

Pages → For Complex, Multi-Step Workflows

Avoid Both For Repeated Tasks

Modals vs. Pages: A Decision Tree

Wrapping Up

Meet “Smart Interface Design Patterns”

Useful Resources

Anime vs. Marvel/DC: Designing Digital Products With Emotion In Flow

Designing Digital Products With Emotion In Flow — Smashing Magazine

By About The Author

Emotion In Flow (Anime: Dan da Dan)

Emotion In Conflict (Marvel/DC: James Gunn’s Superman)

Quick Definitions

How Emotions Shape Product Memorability

UX Examples: Emotion In Flow vs. Emotion In Conflict

Emotion In Flow

What Is `corner-shape`?