Fupio is the easiest way to share online Learn more »
Join FupioArticles on Smashing Magazine — For Web Designers And Developers
Recent content in Articles on Smashing Magazine — For Web Designers And Developers
Smashing MagazineThe Many Faces Of September (2026 Wallpapers Edition) — Smashing MagazineCould there be a better way to welcome the new month than with a new collection of desktop wallpapers? Whether you’re holding tightly onto summer or eagerly awaiting autumn, we’ve got some eye-catching designs to make your September just a bit more colorful. Enjoy!
When that happens, the data usually takes the blame. The numbers weren’t
Smashing MagazineRethinking Data Visualisation: A UX Approach To Dashboards That Actually Drives Decisions — Smashing MagazineData visualisation sits at the intersection of two disciplines that rarely talk to each other: data and design. Meriem Benhabiles explores what changes when you bring structured UX thinking to dashboards and data presentations, from the questions you ask before opening any tool to the decisions that determine whether an insight actually lands.
Every website is at its best the day it ships. The final branch merges, the site goes live exactly as designed, and it is briefly perfect. It will never be this good again.
Not because anything breaks. The site keeps working. But the market moves, the messaging shifts, a competitor launches something, and the careful thing you built slowly stops matching the company it represents. A year later, it is a period piece. Not broken, just
Smashing MagazineWhy Your Website Should Never Stop Changing — Smashing MagazineEvery website peaks on launch day and slowly drifts from there, not because it breaks, but because nobody has time to keep it current. Autonomous websites, continuously optimized by agents after launch, aim to change that. Pierre Burgy shares what they learned building for full website autonomy and the deeper design problem they uncovered along the way.
<div>s pretending to be circles. But if you’ve ever met a real <circle>, you’ll know that they’ve got a lot more going for them. Dressed in SVG, they fit into a wider range of crowds than a humble <div> wearing HTML/CSS can. <img> has a strict no .html policy.The
<img> tag is not as static as its name suggests. AnySmashing MagazineTiming Charts: A Blueprint For SMIL Animations — Smashing MagazineDiscover SMIL, the often-overlooked way to animate SVGs that works inside `` tags and can fully animate everything in an SVG without JavaScript.
Starting from Aug 2, 2026, AI labelling is a legal requirement for any company that
Smashing MagazineNew EU Guidelines For AI Labelling — Smashing MagazineNew EU guidelines, why AI sparkles aren’t enough, when AI labels are required, and what the rules mean for AI-powered features and products.
When front-end developers and UX engineers are tasked with building a web interface that feels tactile, bouncy, or destructive, the industry instinct is almost always the same: reach for a physics engine. Frameworks like Matter.js, Cannon.js, or custom WebGL solutions have become the gold standard for creating immersive, gamified websites.
When our team at Isadora Agency set
Smashing MagazineBuilding Tactile UX: Honoring Intentional Design With Lottie — Smashing MagazineWhen tasked with building a highly interactive, tactile web experience, the architecture must serve the art direction. In this article, Alexey Kopytin explains their architectural rationale for building a digital stress-relief squeeze toy game using Lottie animations, DOM events, and distance-based math to maintain absolute control over their designers’ intentional motion.
package.json today are now built into the browser.In a typical mid-sized JavaScript app, you can often find somewhere between 60KB and 90KB (minified and gzipped) of dependencies that the platform can now handle on its own. Date and number formatting, HTTP requests, modals, tooltips,
Smashing MagazineHow Baseline Can Help You Ship Less JavaScript — Smashing MagazineThe gap between “you need a library for this” and “the browser does this” keeps closing. A practical guide to auditing your dependencies and finding what the web platform can now handle for you.
This August is no exception, of course, so
Smashing MagazineSmall Joys And Big Adventures (August 2026 Wallpapers Edition) — Smashing MagazineWhether you’re enjoying some well-earned time off this August or are jumping headfirst into a new project, how about some new desktop wallpapers to accompany you on all those big and small adventures the month might bring? Well, we’ve got you covered!
Much
Smashing MagazineThe Bull And Bear Case For Digital Design In The Age Of AI — Smashing MagazineAs AI reshapes product design, it could give designers greater autonomy or expose the gaps that autonomy makes harder to hide. Exploring both the bull and bear cases, Andy Budd examines what happens when designers need less permission to act.
The phrase “artificial intelligence” has many excited, especially those in tech. But for those of us in creative fields like digital art and design, AI can be more concerning than it is exciting.
AI-generated art, videos, and images have flooded the internet, raising questions about whether more companies will turn to tools like OpenAI’s Dall-E, Midjourney, <Leonardo.ai>, and more, rather than employing human artists. What’s more,
Smashing MagazineThinking Outside The Box: Digital Design In The AI Era — Smashing MagazineMany of the AI tools we interact with take the form of text boxes. But what if there was a different way to interact with AI? Oleksii Hrzhehorzhevskyi explores a different approach to creating a new AI assistant and how designers can navigate the field as AI continues to change it.
Most React developers have never opened the Network tab and actually looked at a Flight payload. It looks like a mix of JSON fragments,
Smashing MagazineWeaponizing And Defending The React Flight Protocol: Deserialization Sinks In RSCs — Smashing MagazineWhile React Server Components rely on the custom Flight protocol to stream interactive UIs, this same mechanism introduces powerful deserialization sinks that attackers can exploit. Durgesh Pawar breaks down the mechanics behind the CVSS 10.0 “React2Shell” vulnerability to show how protocol manipulation can lead to remote code execution.
You almost can’t miss it as a web developer; it’s in almost every performance guide, and to be fair, it is good advice. We all know the browser’s main thread is single-threaded, meaning it can only do one thing at a time.
Plus, as we know, the main thread isn’t ours alone; we share
Smashing MagazineWhen It Makes Sense To “Block” The Main Thread — Smashing MagazineThe common rule of thumb is to never “block” the browser’s main thread when running JavaScript tasks. But is this a hard rule? Victor Ayomipo describes a use case he encountered involving a screenshot extension where he made an exception to the rule and decided that blocking the main thread was absolutely the right thing to do.
At the beginning of a project, designers usually receive many inputs: a brief, a few stakeholder conversations,
Smashing MagazineFrom Kickoff To First Concept: How To Turn Brand Strategy Into Visual Direction — Smashing MagazineThe strongest visual concepts don’t start in Figma. They start with the right questions. Explore the pre-concept phase of brand identity design, where teams research brand context, uncover hidden assumptions with stakeholders, and turn shared direction into a visual foundation before a single concept is created.
Smashing MagazineDesigning For Distressed Users: Why Mental Health Apps Shouldn’t Follow Every UI Fashion — Smashing MagazineMany UI trends are designed to capture attention and signal innovation, but those goals often conflict with the needs of mental health apps: reducing cognitive strain, fostering trust, and providing a sense of refuge. Kat Homan introduces an evaluation framework that helps designers assess whether trendy visual and interaction patterns support or undermine the unique goals of mental health experiences.
For years, WordPress users have relied on traditional page builders to create websites without writing code. While these builders made web design more accessible, many still come with familiar compromises — rigid layouts, reliance on multiple third-party plugins, bloated code, and performance trade-offs that can slow down your site.
Kirki takes a different approach. Instead of building on the conventions of older
Smashing MagazineMeet Kirki: WordPress’s First Visual Builder With An Infinite Canvas — Smashing MagazineWe have been building websites inside boxes for years on WordPress. Let’s take a closer look at [Kirki](https://kirki.com/), the first freeform visual builder with an infinite canvas, and explore how it redefines the experience with cleaner performance, full design freedom, and zero plugin dependency.
Users don’t get excited about shiny new “smart” workflows, or navigating Terminal commands, or jumping between endless back-and-forth chat interactions. They need seamless integrations of
Smashing MagazineUsers Don’t Need More Tools: They Need Seamless Integrations — Smashing MagazineA closer look at why users don’t need more tools in their daily lives. What they need are seamless integrations of useful features to match already existing, established mental models. Brought to you by Design Patterns For AI Interfaces, **friendly video course on UX** and design patterns by Vitaly.
Smashing MagazineMatching AI Modality To User Intent: Designing The Right Interface — Smashing MagazineWe’ve fallen into conversational tunnel vision, defaulting every AI capability into a chat-based interface simply because LLMs are trained on dialogue data. But great UX is about matching modality to users’ context, intent, and cognitive load, so the interface adapts to the user, not the other way around.
We know that right now, a senior engineer is shipping a checkout flow they “built” in a single afternoon. AI assistant does the heavy lifting, happy path runs clean, and a rotating chevron spins on the order summary. Two weeks later, engineering gets a notice from customer support: a blind customer using a screen reader can’t complete the purchase because the “Pay Now” control is a
<div> with a click handler. No
Smashing MagazineWhy Accessibility Is An Operational Capability, Not A Feature — Smashing MagazineTeams can generate UI faster than ever, but they still have to guarantee that what they ship is usable, secure, and maintainable. Accessibility as an operational capability rather than a compliance checklist or end-of-project audit, and what that looks like in practice.
For this post, artists and designers from across the globe once again tickled their creativity and designed desktop wallpapers that capture that very special July feeling, just as it has been a
Smashing MagazineSnapshots Of Summer (July 2026 Wallpapers Edition) — Smashing MagazineJuly is just around the corner, and that means... It’s time for some new desktop wallpapers! As every month, the wallpapers in this collection were created by the community for the community and can be downloaded for free. Enjoy!
This is the risk at the heart of designing with AI today: probabilistic systems wrapped in deterministic interfaces. The AI offers a
Smashing MagazineDesigning With Uncertainty: How AI Supercharges Probabilistic Thinking — Smashing MagazineIn a world where AI is informing more design choices, it’s easy to mistake predictions for certainties. This article introduces Probabilistic Design, a mindset that allows UX and product teams to accept uncertainty, decipher AI outputs with nuance, and make smart, adaptive decisions.
I recently felt very disturbed after watching a YouTube video showcasing a humanoid robot that looked and acted with uncanny realism. While a closer look
Smashing MagazineThe Impact Of Humanoid Robots On Humanity — Smashing MagazineWe have officially moved past the era of humanoid robots as mere public relations stunts. As they become increasingly lifelike, society may soon face profound social, psychological, and ethical challenges. What happens when the boundary between humans and machines becomes almost impossible to distinguish?
I pulled out my phone, tethered to cellular, and got a shaky connection. The app loaded, but every click was a
Smashing MagazineThe Architecture Of Local-First Web Development — Smashing MagazineAn honest perspective on building local-first web apps in 2026, written for developers who’ve been doing this long enough to be skeptical of silver bullets.
You’ve got your Transparency Matrix ready. You know which
Smashing MagazinePractical Interface Patterns For AI Transparency (Part 2) — Smashing MagazineWhy traditional loading patterns like spinners fail in agentic AI experiences, and how interface patterns that reveal the system’s process, status, and decision-making can improve transparency and build user trust.
A UX design role is as much about research
Smashing MagazineTen Data-Backed Truths Of User Experience ROI — Smashing MagazineEvery extra second of friction has a measurable business cost. Carrie Webster shares ten data-backed UX facts that link user experience directly to revenue, retention, and long-term growth.
What’s Coming
The current spec only counts all element siblings. But the CSSWG has documented a planned extension in issue #9572: an
of <selector> argument,
Smashing MagazineAdvanced Tree Counting: Mathematical Layouts With sibling-index() And sibling-count() — Smashing MagazineMeet `sibling-index()` and `sibling-count()`. Staggered cascade effect in one line of CSS without `:nth-child()` rules or JS workarounds. Works for 5 items or 5,000.
To understand our customers, we must triangulate across four levels of customer understanding
Smashing MagazineFour Levels Of Customer Understanding — Smashing MagazineWhat people say, feel, think, and do are often very different things. To understand the underlying reasons for user behavior, it helps to look beyond the surface and explore hidden motivations, root causes, and the different layers of reality that shape how people act. Brought to you by Measuring UX Impact, **friendly video course on UX** and design patterns by Vitaly.
Cognitive disability is an umbrella term for several disabilities that impact how people process information, and it usually affects memory, focus, and/or learning. It is the most prevalent disability in the U.S. (13.9% via
Smashing MagazineThe Benefits Of Cognitive Inclusion In UX Research — Smashing MagazineFindings from an exploratory user research study highlighting the unique insights and practical UX recommendations shared by participants with cognitive disabilities.
There’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that
Smashing MagazineYour Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It) — Smashing MagazineThere’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that awareness.
Smashing MagazineAlgorithmic Theming Engines: Building Self-Correcting Color Systems With contrast-color() — Smashing MagazineSeventy percent of websites still fail basic WCAG contrast checks in 2025. After years of design system tooling, accessibility linters, and JavaScript libraries, nothing moved the needle. We didn’t need better libraries. We needed better CSS. `contrast-color()` is that better CSS.
That’s exactly what our monthly wallpapers series has been all
Smashing MagazineJune Is For Exploring (2026 Wallpapers Edition) — Smashing MagazineLet’s kick off June — and the beginning of summer — with some fresh inspiration! Artists and designers from across the globe once again tickled their creativity to welcome the new month with a new collection of desktop wallpapers. Enjoy!
Yesterday I stumbled upon a useful practical guide by Hardik Pandya from Atlassian — on how to reduce drifts, minimize mistakes, maintain context,
Smashing MagazineHow To Make Your Design System AI-Ready — Smashing MagazinePractical guide on how to reduce drifts, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Brought to you by Design Patterns For AI Interfaces, **friendly video course on UX** and design patterns by Vitaly.
Your grandmother’s vacuum was a trusty but ugly workhorse hidden in a dark closet. Dyson turned that practical tool into an aspirational product, one you love leaving out even when guests come over. Dish soap was just dish soap until Method put it in a glass container, and it became an addition to, not a distraction from, the aesthetics of your kitchen. Physical product brands spent the last two decades transforming mundane,
The tricky part is that the interface is not in a fixed state; it keeps changing as new content comes in. It grows where lines become longer and new blocks appear. Something that was just below the screen can suddenly move, and the user’s scroll position becomes harder to
That’s where our monthly wallpapers series comes in. For the past 15 years,
“Now I don’t have to bug [someone].”
Product designers don’t need to bug researchers anymore — retrieval-augment generation (RAG) tools surface insights instantly. Product Managers don’t need to bug designers for mockups — AI generates acceptable options. Engineers don’t need to bug accessibility teams — automated scanners flag issues in real-time.
For many, getting halfway through an important form only to be unceremoniously kicked back to the login
Where would you even start? Legacy stories are often daunting, adventurous, and utterly confusing. They represent a mixture of fast-paced decisions, quick fixes, and accumulating UX
We typically respond to this anxiety with one of two extremes. We either keep the system a Black Box, hiding everything to maintain simplicity, or we panic and provide a Data Dump, streaming every log
They align teams and inform decision-making. They also keep us afloat amidst all the hype, big assumptions, desire for faster delivery, and AI workslop. But how do we choose the right ones, and how do we get started? Let’s find out.
Real-World Design
For this
Smashing MagazineThe Joy Of A Fresh Beginning (April 2026 Wallpapers Edition) — Smashing MagazineWith the new month just around the corner, could there be a better occasion to freshen up your desktop? If you’re looking for some unique and inspiring wallpapers to accompany you on all those adventures that April may bring — and maybe spark some new ideas, too — well, this post has got you covered.
Twenty-five years later, we are still building search bars that act like 1990s index
Smashing MagazineThe Site-Search Paradox: Why The Big Box Always Wins — Smashing MagazineSuccess 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?
However, the second
Smashing MagazineTesting Font Scaling For Accessibility With Figma Variables — Smashing MagazineAccessibility 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.
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
Smashing MagazineModal vs. Separate Page: UX Decision Tree — Smashing MagazineHow 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.
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
Smashing MagazineAnime vs. Marvel/DC: Designing Digital Products With Emotion In Flow — Smashing MagazineDesign 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.
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
Smashing MagazineMoving From Moment.js To The JS Temporal API — Smashing MagazineThe 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.
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
Smashing MagazineBeyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing MagazineFor 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.
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
Smashing MagazineBuilding Dynamic Forms In React And Next.js — Smashing MagazineSome forms stay UI, while others quietly become rule engines. Here’s why these two different approaches exist and how to choose between them.
Smashing MagazinePersuasive Design: Ten Years Later — Smashing MagazineMany 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.
Yet, nothing has unsettled designers quite like AI.
When generative AI tools first entered my workflow, my reaction wasn’t excitement — it was unease, with
Smashing MagazineHuman Strategy In An AI-Accelerated Workflow — Smashing MagazineUX 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.