Naming is hard. The language we use shapes the way we think about things, but also the conversation we have about it. That’s why we have so much confusion about colors, icons, UI components, features — and that’s why we struggle to name design tokens, HTML classes, and variables.

Sometimes, the names we choose are too generic, so it’s difficult to understand what exactly is meant. And sometimes they are too specific, leaving little room for flexibility and reuse. How do we choose the right names? And which naming conventions work best? Let’s take a closer look.

How To Name Things

If you’re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames is a wonderful resource jam-packed with ideas that get you thinking outside the box.

The site provides thematically grouped lists of words perfect for naming. You’ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldn’t instantly come to one’s mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing.

How To Name Colors

How would you choose the right name for a given color? Fortunately, David Aerne maintains a tremendous repository of color names, currently with 30355 unique color names, sourced from various references and 1000s of user contributions.

Of course, the repository comes with a color picker and name search and plenty of other color pickers as well. Tremendous work, which is also a fantastic reference to keep nearby.

How To Name Layers and Groups

What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups, and components in a consistent and scalable way.

As Javier points out, a good name has a logical structure, is short, meaningful, known by everyone, and not related to visual properties. He shares do’s and don’ts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components.

How To Name Design Tokens

How to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. The parent company of products such as Mailchimp, QuickBooks, TurboTax, and Mint developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.

Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuit’s design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed.

Frequent Names For UI Components

Looking at what other people call similar things is a great way to start when you’re struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.

It’s a collection that includes plenty of examples for more than 50 UI components — from accordion to visually hidden — and also lists other names that the UI components go by. A fantastic resource, and not only with regard to naming.

Bonus: Name That UI, a visual dictionary of common UI components.

How To Name New Features

Features often have low adoption due to poor discoverability. Feature adoption needs time — first the feature must be discovered, then understood, then tried, learned, and eventually built into existing workflow. Erin Gannon has written a helpful practical guide on how to make sure all of it happens.

Good names are driven by user needs and problems. They should signal the value or outcome of a feature (the job-to-be-done), and — most importantly! — tap into the user’s own language. So ask people to explain a feature in their own words and then use the words they use.

How To Name Variables (Taxonomy Map)

A wonderful example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.

The map illustrates four collections required to support the system and connections between tokens — from brand and primitives to semantics and pages. It builds on top of Nathan Curtis’ work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.

If you want to explore more approaches to naming design tokens, I’ve put together a list of useful Figma kits and resources that are worth checking out.

Design Token Naming Guide + Inventory

Romina Kavcic created a helpful little tool for naming design tokens — from learning how they work and how to name them well to configuring your own naming structure with components, categories, states, and roles.

Bonus: The Design Token Names Inventory spreadsheet, with a simple structure with four levels to give you a bird’s-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track, and filter your tokens.

Naming Products or Services

If you are looking for the right name for your product or service, Onym is a fantastic open-source repository that organizes tools and resources for finding names for brainstorming, vetting, guides, sprints, etymologies — all the way to cautionary tales and agencies that name things, as well as useful books to take a look at.

Useful Bookmarks for Naming Things

A quick-reference list of tools and guides for naming just about… well, anything, in one place:

Wrapping Up

The right name is the one that’s well-understood and used by the team and users. So much time is wasted speaking about the very same thing but in different dialects — the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. That’s what often causes frustration and confusion.

So if you see low adoption, it might be merely because of the name. And pay attention to potential naming conflicts and put them in a backlog of things to address later. It’s one of those fine little details that can reduce frustration and confusion and help teams work together better.

Meet “Design Patterns For AI Interfaces”

Meet Design Patterns For AI Interfaces, Vitaly’s new video course with practical examples from real-life products — with a live UX training happening soon. Jump to a free preview.

(yk)

The post A Practical Guide To Naming Things appeared first on The NOKIA Blog.

Historically, part of this ritual includes installing a ton of apps. I add the requisite Adobe design tools, the Microsoft Office suite for productivity, and a host of other software. Apps for email, FTP, media conversion, and a local web server environment remain staples.

My current system is now a few years old, and I have dozens (hundreds?) of these apps. They still serve their purpose. But it recently dawned on me that most of what I use could be replaced by a web browser. That will likely mean fewer apps to install on my next computer.

These are words I never thought I’d utter. My web design career began before the first release of Netscape. As such, I’ve had a love/hate relationship with browsers. For every benefit, there have been limitations and quirks to deal with.

These days, you can do pretty much anything within your chosen browser. That got me thinking: are traditional design apps still relevant? Should we abandon them for browser-based tools? I’m not so sure, but let’s figure this out together.

Modern Web Apps Break Boundaries

It used to be that most browser-based apps were inferior to their desktop counterparts. Common workflows like text and media editing felt clunky and minimally useful. I used them in a pinch and usually came away frustrated.

Meanwhile, desktop powerhouses like Excel, Photoshop, and Dreamweaver were infinitely more flexible. They were built for those who care about quality and require high-level functionality. Such professional-grade tools have always been worth the cost.

That narrative has been turned on its head by a combination of more powerful web standards and server technologies. There are now online video editing platforms that can produce top-notch results. Design tools like Figma make it easy to create and share interactive mockups. Google’s suite of productivity tools offers all the bells and whistles without compromise. Even Photoshop has an online version these days.

Collaboration might be the biggest selling point of all. You can keep clients and colleagues in the loop with minimal effort. This improves efficiency and saves us from the never-ending email chains of yesteryear.

And the appeal of these apps goes beyond functionality and convenience. They’re also cross-platform and device-agnostic. It used to be that you’d need a desktop app built specifically for your operating system. Using a browser means it works on Windows, Linux, macOS, Android, iOS, and more.

Then there are the hardware requirements. Granted, you should still have a system with plenty of memory and a modern graphics processor. However, having a massive hard drive isn’t necessary when storing files in the cloud.

The old boundaries of software have vanished. Doing all the things within a browser isn’t a chore like it used to be. And these apps may be enough for most web designers.

Trust and Content Ownership Are Concerns

Software is always an investment, regardless of how you access it. There are also privacy and security risks to consider. Browser-based tools often amplify those concerns.

Companies like Adobe and Microsoft have some level of tracking within their desktop apps. And they do connect to the internet. So, this is nothing new. But working in a browser opens up a different (or, at least, a bigger) can of worms.

For instance, cloud storage is quite convenient. But what happens if the provider gets sold or goes out of business? Will you lose access to your data? Are policies in place to maintain account security in the event of a breach or server crash? The answers aren’t always clear, and you may not find out until something bad happens.

Then there is the matter of artificial intelligence (AI). It seems like every tool on the planet has an AI integration of sorts. How are these features used on your content? Does the provider train their models with your work? Could your sensitive information become exposed online?

Working online also opens you up to third-party tracking. It may be something relatively innocent, like an analytics suite. But ad networks and similar companies could be watching you – and there is no guarantee they’ll abide by the rules.

These are important questions to answer when thinking about your (and your client’s) data. Again, desktop apps aren’t immune to these issues. But an online app that shows up overnight deserves an honest assessment. The risks could far outweigh the benefits.

Desktop Apps Are Still Relevant When Control Matters

It’s truly amazing to see how far web technologies have come in the past decade. You can see it in both commercial and open-source software. Functionality once reserved for powerful desktop devices can now exist in the palm of your hand (and with responsive design, for that matter).

I still believe there’s a tradeoff, however. The work-from-anywhere tools we use have plenty of benefits (provided you really do want to work from your lawn chair). But you lose a measure of control along the way.

There’s something to be said for storing files locally (with routine backups, of course). Not to mention the ability to customize an app’s layout or tool set to match your workflow. There’s a level of personalization you don’t seem to get in a browser.

The reality is that you don’t need desktop software for every purpose. There are plenty of online tools that will do the job. But there are scenarios where these old-school beasts make sense.

For example, I can’t imagine Disney making their next hit movie solely within a browser. And web designers who want full control of their workflow might want to keep a few items installed on their hard drives. I know I will.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Are Browser-Based Apps Enough for Web Designers? appeared first on The NOKIA Blog.

Sooner or later, a CFO looks at your wireframes and asks what any of it actually does for the bottom line. Storyboards don’t answer that question, and the era when a 5-minute pitch could answer it ended, unfortunately, a while ago.

These days, if you want to win budget, buy-in, and backing for UX, the design has to be provably good for the business, not only for the people using it.

And proving that takes more than taping a dollar sign to a redesign. You have to understand how your organization defines value in the first place, how it measures that value, and how a credible line gets drawn between a design initiative and an outcome leadership already cares about.

Rather than scatter tips, this article follows one worked example the whole way through. Meridian is a mid-size B2B SaaS company, and it is entirely made up — that label matters, so it gets repeated where it counts. Its onboarding redesign carries the same figures from goal-setting through cost accounting, causal testing, and the final ROI number, because a framework only becomes tangible when the numbers connect. Every step is one you can rerun inside your own organization.

Why ROI Matters More Than Ever in UX Conversations

Companies now want clarity on what every dollar buys, and “delightful user experiences” stopped clearing that bar some time ago. I still remember a former colleague celebrating a $1 million redesign he’d gotten greenlit mostly on the strength of a couple of three.js tricks. Try that pitch in front of a finance team today and see how far the particles get you.

Executives don’t hate UX, they just hate vagueness. A pitch built on “users will find it easier” loses, every time, to the department promising 12% more sales in Q3. The difference is the one between a streamlined checkout flow that reduced cart abandonment with completed purchases up 22%, and the same work rewarded with “the QA testers like it.” One of those goes on your resume. The rest of this article is about earning the first version, with Meridian’s numbers doing the work.

When Business Goals And KPIs Don’t Exist Yet

Most writing about UX ROI makes a convenient assumption: that the organization already owns clean business goals and KPIs for you to hook your work onto. Real companies are messier than that. Plenty run on ambitions like “grow faster” or “improve the customer journey” that nobody ever broke into anything measurable, and an ROI case built on that ambiguity sounds impressive right up until somebody scrutinizes it.

So the first job is often to help the organization define what success even looks like. Interview stakeholders across departments — what does product consider a good quarter, where does customer success watch users struggle, where do sales deals stall — and listen for the themes that keep resurfacing across conversations, because those recurring themes are the company’s latent business objectives. A useful forcing function is the OKR model (Objectives and Key Results), which doesn’t tolerate vagueness.

At Meridian, the stated ambition was “improve the rate of new users’ adoption of the platform,” which you can neither design toward nor measure against. Interviews turned up the real shape of the problem. Trial users needed a median of 14 days to reach first value, most churned before getting there, and onboarding questions were burying the support queue. Out of that came an OKR with actual edges: reduce median time-to-first-value from 14 days to 7 with the use of a guided setup flow, and lift trial-to-paid conversion from 8% to 9.5%.

One warning about formalizing KPIs: Impose them from inside the UX team and leadership will suspect you’ve rigged the field in your own favor, so co-create them with whoever owns the outcome — though never at the price of accepting targets that set your team up for an uncomfortable situation. Meridian’s head of product agreed that setup-completion rate was a fair proxy for onboarding usability, and customer success signed off on time-to-first-value, a number already sitting on their own dashboard.

A KPI ladder that ends at a metric somebody already watches buys you credibility before any design work starts.

Quantifying The Full Cost Of The Investment

ROI has a denominator, and the denominator is where most UX teams go wrong. You can’t calculate a return without strategic financial planning, yet cost usually gets counted as designer salaries or consulting hours and nothing else. A finance team will find the rest whether or not you counted it, so count it first.

Direct costs are the visible ones. Meridian’s redesign ran $45,000 in design and research labor plus another $8,000 in tooling and participant incentives. Licenses for Figma, UserTesting, Hotjar, analytics platforms, research incentive spend — all of it belongs in the total, and that’s before the inevitable instances of vendor lock-in every UX team eventually faces. Engineering sits in the same column, because a UX redesign doesn’t stop at the mockup. Building the guided setup took two frontend sprints plus a QA pass, $38,000 worth, and the project generated about $4,000 of coordination overhead along the way in new syncs and shared dashboards.

The line item nearly everyone misses, and the one worth stealing from this article if you steal nothing else, is stakeholder time. Workshops, design reviews, and feedback sessions all pull senior people away from their primary work. A VP of Product spending four hours a week in UX reviews is a VP not spending those hours on roadmap planning or partner negotiations. Log the attendance — who came, for how long, at what seniority — and price it at fully loaded cost, meaning salary plus benefits divided by productive hours. A quarter’s worth of workshops, reviews, and interviews at Meridian priced out at $22,000.

Add it all up: $45,000 in design labor, $8,000 in tooling, $38,000 in engineering, $22,000 in stakeholder time, $4,000 in coordination. The investment is $117,000. Saying that number out loud beats saying “we spent $45K on design,” precisely because it already includes everything a finance team would have dug up on its own.

Proving Causation, Not Just Correlation

Most UX ROI pitches die right here. Conversions rose after the redesign, sure — and the CFO wants to know how you ruled out the new pricing, the seasonal traffic bump, and the marketing campaign that shipped the same week. Without a convincing answer, your entire ROI story crumbles.

After all these years, the gold standard for proving causation is still A/B testing: run the old experience against the new one on an even traffic split until the sample means something.

Onboarding happens to suit a phased rollout, which is why Meridian could do this cleanly. For eight weeks, half of new trial signups received the redesigned guided setup while half stayed on the legacy flow. Control converted to paid at 8.0%. The variant came in at 9.4%. With roughly 6,100 trials inside the window, the difference was statistically significant, but a 1.4-point gap on a single test is still the kind of result that deserves a second look before anyone builds a budget on it, which is one reason the team held back on attribution below. Where a split isn’t feasible — a change too structural, a user base too small — fall back to a time series instead. Measure steadily for weeks before the change, implement, then keep measuring against the baseline you established.

Documenting whatever else happens around the same time as your UX change is the unglamorous half of causation.

A pricing-page test from Meridian’s marketing team overlapped weeks five through eight of the rollout. The UX team noted it, confirmed it hit both cohorts evenly, and still chose to attribute only 70% of the observed lift to the redesign in the final math. There is no formula that produces that number; treat it as an illustrative assumption for this example.

The team asked how much of the lift could plausibly belong to the pricing test if it had helped one cohort slightly more than the other, settled on a ceiling of about a third, and rounded the redesign’s share down to 70%. Your figure will differ. What matters is that it is written down and argued for before the results arrive, not fitted to them afterwards. That restraint is worth money in a skeptical room. “We attribute roughly 70% of the lift to the onboarding change, with the remainder likely influenced by concurrent pricing work” survives cross-examination; claiming everything does not. Cohort analysis then backed the number up, since the lift held across acquisition channels and tenure bands, and at that point the skeptics had very little left to work with.

Leading and lagging indicators belong on the same slide, because each covers the other’s weakness. Meridian’s leading indicators moved first — setup completion climbed from 62% to 89%, median time-to-first-value dropped from 14 days to 6.5 — and the lagging trial-to-paid number followed. Mechanism first, business outcome second. Presented together, they form a causal chain that’s harder to poke holes in than either one alone.

The ROI Calculation, End to End

So what did Meridian actually earn? The company sees about 40,000 trial signups a year. Lifting conversion from 8.0% to 9.4% adds roughly 560 paying customers annually, and at an average of $1,800 in annual recurring revenue per account, those customers represent about $1,008,000 in new ARR. Applying the conservative 70% attribution from the causal work trims the defensible figure to roughly $706,000.

Set that against the full $117,000 investment and the first-year ROI lands near 5:1, with payback arriving in roughly two months. There’s a second line, too. Onboarding-related support tickets dropped about 30%, some 3,600 fewer tickets a year, worth another $54,000 annually at $15 per resolved ticket. Keep it as its own line rather than folding it into one swollen headline number. The case reads as more honest that way and loses none of its force.

Three assumptions carry that result, and each belongs on the slide next to it. The 40,000 signups and the $1,800 average ARR are the prior year’s actuals held flat, so a growth or pricing change moves the outcome in either direction. The 70% attribution is the illustrative assumption from the causal work, not a measured quantity. And the two-month payback counts new ARR as it lands rather than revenue recognized net of churn, which flatters the timeline; on a net basis the payback stretches to roughly a quarter. State those three plainly and a finance team can adapt the example to its own numbers. Hide them and the whole thing starts to look like marketing math, however careful the experiment was.

What persuades in the final presentation is not sophistication. Open with the baseline: what stalled trials and support volume were already costing. Show the delta in terms leadership reads fluently, metrics like conversion rate uplift chief among them. A chart of setup completion climbing from 62% to 89% will beat a paragraph of UX jargon, and a translation like “each abandoned setup costs us 0.3 support tickets” beats the chart. Above all, keep every figure identical from the first slide to the last. A room full of finance people forgives many things, but never numbers that wobble between slides.

Tailoring The Case To Whoever Holds The Purse Strings

Budget decisions come out of coalitions. A CFO may hold the final say when adding AI to the checkout process, but marketing, product, and customer success all lean on that decision, and each means something different by “value.”

A CFO hears cost, revenue, and risk. A CMO hears conversion and acquisition cost, since UX is a lever for increasing marketing ROI. Product counts support tickets; customer success thinks in retention. The underlying numbers never change; only the framing rotates, and a CFO wants a projection, not a moodboard. Meridian’s CFO slide read “the onboarding redesign protects roughly $706,000 in new ARR a year against a $117,000 investment,” while the CMO version led with what a 9.4% trial conversion does to blended acquisition cost.

Beyond the Dollar Sign: Qualitative and Non-Financial Metrics

Some UX outcomes never translate cleanly into revenue, and pretending they do weakens the parts of your case that are solid.

The trick with qualitative evidence is collecting it rigorously enough that nobody can wave it off as anecdote.

Scores like Net Promoter Score (NPS), CSAT, and Customer Effort Score already sit inside most reporting cadences, which makes them cheap to borrow. Tie your work to their movement, and segment wherever the data allows.

Meridian could say that NPS among trial users on the redesigned onboarding was 51 against 34 for the legacy flow, which lands far harder than any blended average. Verbatim feedback from surveys, support transcripts, and app store reviews adds the emotional weight the scores lack. Internal tools deserve the same discipline, since employee experience is increasingly recognized as a business driver — a dashboard redesign that hands account managers 45 minutes a day back is a productivity gain, a satisfaction gain, and a retention lever all in one.

Brand perception resists direct measurement but leaves tracks in repeat visits, organic referrals, and social sentiment. It carries extra weight in trust-sensitive industries like finance or healthcare, and it forms fast, given that UX design influences the first impressions of a whopping 94% of customers.

Whatever you collect, systematize the collecting. Run pre- and post-surveys with consistent question sets, use structured usability testing with task-based scoring, and put the qualitative right next to the quantitative when you present.

“Setup completion rose from 62% to 89%, and in post-test interviews 8 of 10 participants called the new flow intuitive, against 3 of 10 for the old one” — a pairing like that is much harder to dismiss than either half on its own.

Making the Case Stick

UX loses the budget battle unless it’s mapped to company-wide objectives, so phrase the proposal in the words of this year’s board presentation.

Nobody at Meridian pitched “simplify the onboarding UI”; the pitch was a redesigned trial experience worth 1.4 points of upgrade rate, roughly $1M in annual recurring revenue before attribution. Bring evidence in both registers, since that is what social proof is for: the case, clearly labeled, plus screenshots, impact graphs, and user quotes. Find internal allies who can repeat the ROI narrative in rooms you’ll never enter, and write the playbook down, because repeatable ROI is what earns recurring investment.

Resources for Going Deeper

This topic has been explored extensively by researchers, practitioners, and consultancies. Here’s a curated set of resources worth studying if you want to build a stronger ROI practice around UX.

• “Measuring the User Experience” by Tom Tullis and Bill Albert is the definitive guide to UX metrics. It covers everything from task-based measurements to survey design to statistical analysis, and it’s written for practitioners, not academics.
• Jared Spool’s “The $300 Million Button” case study is a classic example of how a single UX change (removing a mandatory registration step) generated massive revenue uplift. It’s a story every UX professional should have in their back pocket.
• Forrester’s research on UX ROI provides enterprise-focused frameworks for building business cases around experience design, including their widely cited finding that every dollar invested in UX returns $100.
• “UX Strategy” by Jaime Levy bridges the gap between design thinking and business strategy, offering practical tools for aligning UX initiatives with organizational goals and market positioning.
• The Design Value Index by the Design Management Institute tracks publicly traded companies that invest heavily in design against the S&P 500. The data consistently shows that design-led companies outperform the index by significant margins, and it’s a powerful data point for executive presentations.
• Google’s HEART framework provides a structured approach to selecting UX metrics at scale. HEART stands for Happiness, Engagement, Adoption, Retention, and Task success, and it’s particularly useful for teams that struggle to decide which metrics to track.

Conclusion

A seat at the table never comes from beauty or novelty. It comes from measurable, defensible impact, which means UX leaders have to trade the artist’s posture for the strategist’s. Speak in outcomes rather than outputs. Connect pixels to profit.

When someone challenges the numbers, don’t flinch. Show the controlled experiment, the cohort analysis, and the before-and-after metrics, every figure holding steady from the first slide to the last, the way Meridian’s did, with the customer quotes and the employee-satisfaction data sitting right beside the revenue impact. Prove the work does more than delight users, and be ready to defend the ratio line by line. That’s when the CFO leans in, and that’s when design stops being optional.

(yk)

The post Building A UX ROI Case That Survives The Boardroom appeared first on The NOKIA Blog.

Ever since the commercialisation of the Graphical User Interface pioneered by systems like the Xerox Star and popularised by the original Apple Macintosh, software has relied heavily on point-and-click interactions. If you wanted to book a trip, buy a pair of shoes, or research a health symptom, you were expected to navigate a labyrinth of user interfaces. You click menus, adjust range sliders, fill out multi-step forms, deal with cookie pop-ups, and open dozens of browser tabs just to cross-reference basic information. We have become accustomed to spending more time managing the software rather than actually achieving our goals.

That contract is officially changing. Driven by advances in artificial intelligence and large language models, a new generation of web tools is pioneering a radical philosophy: Intent-Driven Design. Rather than expecting our users to learn complex menus and click through elaborate sales funnels, these platforms operate by capturing high-level human goals and silently executing the grunt work in the background.

This vision builds on long-standing HCI concepts like Golden Krishna’s “The Best Interface Is No Interface” and Don Norman’s principles of human-centered design.

The ultimate goal of modern web design is no longer to build prettier buttons or flashy animations; it is to eliminate the interface entirely.

Well, at least what we understand based on our current experience.

It is essential for UX designers to understand the changes we’re witnessing and even re-evaluate our role, shifting our focus from designing visible interfaces to guiding transparent, intent-driven AI experiences.

The Death Of The “10-click” Process

To understand where web design is going, we first have to look at the friction we have accepted as “normal” for decades.

Consider the traditional workflow of buying a flight online. The user experience is intentionally hyper-interactive:

1. Navigate to a travel aggregator or airline website.
2. Select “Round Trip” from a dropdown menu.
3. Type the origin city and wait for auto-complete.
4. Type the destination city and wait for auto-complete.
5. Click a calendar modal, toggle through months, and select departure and return dates.
6. Choose the number of passengers and cabin class.
7. Click “Search” and wait for the results page to load.
8. Filter by price, layover duration, departure time, and airline.
9. Sort the results and scan through dozens of individual options.
10. Click through a three-page checkout funnel dodging upsells for rental cars and travel insurance.

This is a classic point-and-click UI paradigm. The computer acts as a passive container of data, and the human acts as the orchestrator, manually inputting parameters, interpreting raw outputs, and executing each micro-step along the way.

Intent-driven design flips this dynamic entirely. Instead of forcing you to navigate the mechanical steps of how to find a flight, the interface asks a simple question: What are you trying to accomplish?

When you express a goal, such as “Find me a non-stop flight to Chicago next weekend under $300 that arrives before 5 PM”, the software reads your intent, executes the multi-step search query behind the scenes, compares the options, and presents a single actionable resolution. The ten clicks dissolve into one clear intent outcome.

Three Web Platform Examples Replacing Buttons With Intent

This shift isn’t a theoretical vision of the distant future. Some of the world’s most accessible websites allow you to experience intent-capturing systems already.

1. Perplexity AI: Search Without The Open Tabs

Traditional search engines like Google were built as directories. You typed a keyword, and the interface rewarded you with ten blue links. The actual work of opening five tabs, skimming long articles, dodging ads, and manually assembling an answer was left to you. Although this is now changing, with AI content appearing first when you search on Google.

Perplexity AI allows anyone to perform instant intent-based searches. Instead of forcing you to click into multiple tabs, the interface synthesises the perfect result for your context.

• The interaction: You ask a complex question in plain English: “Compare the top three budget laptops for a computer science student, focusing on battery life and keyboard quality.”
• The invisible work: In under two seconds, the platform searches the web, reads dozens of articles, evaluates hardware specifications, and cross-references user reviews.

• The result: (See screen above) Instead of throwing web pages at you, Perplexity dynamically generates a single custom answer complete with formatted comparison tables, pros and cons lists, and concise inline citations. You get the outcome of thirty clicks in just one.

2. Vercel v0: Web Design Without Dragging And Dropping

For years, creating a website meant using visual builders like Figma or drag-and-drop web editors. As designers, we spent hours manually drawing rectangles, picking hexadecimal colour codes, adjusting padding values, and sometimes writing CSS code.

Vercel v0 lets anyone test its generative interface builder right from the home page without signing in.

• The Interaction: A user types a descriptive goal into the input prompt: “Create a modern dark-mode dashboard for a subscription SaaS app showing monthly revenue, active users, and a customer churn chart.”
• The invisible work: The underlying AI understands layout principles, accessibility guidelines, UI component libraries, and responsiveness. It writes clean HTML, Tailwind CSS, and React code in real time.
• The result: Rather than spending an afternoon manipulating elements, the user receives a fully functional, pixel-perfect user interface in seconds! The traditional visual design tool disappears, replaced by raw human intent.

3. Goblin.tools: Breaking Down Overwhelming Tasks

Many traditional productivity tools require you to manually construct task lists, drag items across Kanban boards, and assign micro-deadlines. Goblin.tools is a free, single-page suite of single-task AI tools designed specifically for neurodivergent users or anyone feeling overwhelmed, requiring zero sign-ups or configuration.

• The interaction: You enter a vague, intimidating goal into the Magic Todo tool, such as “Prepare for a job interview”.
• The invisible work: Instead of forcing you to plan every step, the system analyses the cognitive load of the goal and automatically breaks it down into small, actionable sub-tasks adjusted to your preferred level of detail.
• The result: The interface eliminates the stressful task-planning phase and presents a clean checklist tailored to your exact goal.

The Core Pillars Of Intent-driven Web Design

When you remove traditional menus, sidebars, and forms, how do you keep a website usable? Designers pioneering this space rely on three core pillars:

1. High-level Goals

An invisible interface doesn’t always wait for you to type a command — it leverages context to anticipate user needs. Guided by industry standards like Apple’s Human Interface Guidelines on Contextual & Ambient Design, modern systems read environmental metadata, such as device state, location, and past interaction patterns, to trigger proactive actions.

For example:

• Time and location: A food delivery web app prioritising your saved home address and dinner items automatically at 6:30 PM on a weekday.
• Cross-app history: A calendar application noticing an email about an upcoming appointment and surfacing a one-click “Add to Schedule” card without forcing you to copy and paste event details manually.

2. Generative UI

In traditional web design, every user sees the exact same layout. An e-commerce store shows the same navigation bar whether you are a first-time visitor looking for customer support or a returning customer tracking a package.

As highlighted in the Nielsen Norman Group’s analysis on AI as a new UX paradigm, computing is shifting from command-based interaction to outcome-specification. This enables Generative UI, where interfaces are rendered dynamically on the fly based on what you are trying to do in that exact moment. For example, platforms like Vercel v0 demonstrate how raw intent can instantly render functional code components without manual layout building. If you express a desire to compute complex financial data, the interface generates a dynamic calculator widget on demand, receding once your goal is completed.

3. Execution by AI Agents

Traditional interfaces are obsessed with prevention, constantly peppering users with confirmation pop-ups (“Are you sure you want to delete this file?”).

Intent-driven interfaces adapt Jakob Nielsen’s 10 Usability Heuristics on User Control and Error Recovery by shifting the safety net from prevention to easy reversibility. Because autonomous agents take actions on your behalf, products prioritise frictionless rollback mechanisms. A prominent “Undo” button, simple revision prompts (“Make this summary shorter”), and transparent audit logs replace intrusive warning modals.

The Hidden Risks

While removing interface friction is liberating, stripping away visual controls introduces significant product design challenges. When software acts on inferred intent rather than direct point-and-click commands, designers must navigate critical ethical and technical pitfalls.

The Illusion Of Control

When a website makes decisions for you, it can quickly feel patronising or invasive. As explored by the Stanford Human-Computer Interaction (HCI) Group, automation must maintain clear boundaries to prevent user frustration. Furthermore, ethical frameworks from the Center for Humane Technology emphasise that product designers must guard against manipulative defaults.

Designers must strike a delicate balance: automate routine execution, but explicitly prompt the user for high-stakes confirmations (such as financial transactions, publishing public content, or altering privacy settings).

The Black Box Problem

In a traditional UI, if you get an unexpected result, you can usually diagnose the issue — perhaps you checked the wrong filter box or selected an incorrect date.

With an intent-driven interface, troubleshooting becomes harder. To address this “black box” challenge, the Google PAIR (People + AI Research) Guidebook advocates for transparent feedback loops. The system must explicitly state its interpretation (“Searching for non-stop flights to Chicago under $300…”) so users can calibrate trust and correct misinterpretations instantly.

From A UX Perspective

As a UX designer, always being curious to understand how our design approach is changing in the world of AI, I find it essential that we re-evaluate the foundational elements of our craft.

Rather than designing static buttons and rigid forms, we need to learn to map and present dynamic, generative UI components that adapt on the fly to user intent.

By mastering these evolving patterns, like ambient feedback, inline prompts, and transparent AI status indicators, we can ensure that screenless, agent-driven tools remain intuitive, ethical, and deeply human-centered.

Conclusion

The ultimate goal: The best design is no design.

For decades, the digital industry has evaluated software success through engagement metrics like time spent in app, click-through rates, and page views per session. Websites were deliberately engineered to maximise visual engagement and interaction volume.

The philosophy behind Golden Krishna’s seminal book The Best Interface Is No Interface, aligned with the broader Center for Humane Technology’s Time Well Spent movement, turns these metrics on their head. The ultimate test of a modern digital product is no longer how visually captivating its buttons are, but rather: How effectively did this software solve the problem and get out of the user’s way?,

We are entering an era where web applications will no longer be measured by the beauty of their interfaces, but by their ability to render those complex interfaces completely obsolete. The future of the web isn’t more interaction — it is seamless, invisible completion.

(ah, yk)

The post The Death Of The Button: Why The Best Interface Is No Interface appeared first on The NOKIA Blog.

Yes, you could create a few versions of the branding materials and call it a day, letting your client pick the ones they like the most. But let’s be real: it’s one thing to see your design on a computer screen, and it’s another to see it in real life.

What would your design look like on stationery? Would the logo fit on the pen your clients are planning on giving away to their customers? Does the business card carry the weight of expertise, backed by professional design and structured information?

If you’re a designer, you know how much a single branding identity material can say. It’s a game-changer. So the next time you prepare branding identity materials, look into mockups.

Realistic representations of what your designs would look like in 3D and when placed in various settings, branding identity mockups help you assess your own designs and convince your clients.

From business cards and coffee cups to stationery and contextual mockups, there’s something for every project you’re passionate about in this beautiful collection of branding identity mockup templates for Photoshop.

You might also like our collection for free InDesign branding templates.

What are Branding Identity Mockup Templates?

Branding identity templates are pre-designed files that allow you to showcase your branding elements in a real-world context. Whether it’s your logo playing the solo on a business card, your color palette painting the background of a website, or your typography setting the rhythm on a letterhead – mockup templates let you visualize the symphony in action!

1. Logos & Colors: See how your visual elements interact and harmonize on various platforms and materials.
2. Typography & Imagery: Visualize the rhythm and flow of your text and images across different mediums.
3. Business Collateral: Business cards, letterheads, envelopes – see your brand melody resonate in every piece.
4. Digital Presence: Witness the harmony of your brand’s digital footprint – websites, social media, and more.

It’s not just about seeing; it’s about experiencing your brand from the audience’s seats, feeling the vibes, the beats, the highs, and the lows of your brand’s symphony.

In Photoshop PSD Format

Simple and professional, these branding identity mockup templates are perfect for companies and corporations. You can pick from 3 different styles for phone, envelope, business card, and other mockups. You can hide the ones you don’t want and easily win over your audience with a photorealistic presentation!

Free to Download, in Photoshop PSD Format

The Stationery Cards Mockup Scene is a template that allows you to showcase your branding elements in a natural and minimalist setting. With customizable objects and high-resolution images, you can create a stunning presentation that beautifully showcases your brand identity.

Free to Download, in Figma Format

Spark is a free collection of branding and corporate identity mockup templates for Figma that can help you showcase your design in a professional and polished way. With various templates for different branding elements, you can create a diverse range of presentations.

Free to Download, in Photoshop PSD Format

The Stationery Branding Identity Mockup is a customizable, realistic, and professional presentation template for your brand identity. You can showcase your branding elements in different contexts and ensure your brand identity is consistent and impactful.

Free to Download, in Photoshop PSD Format

This Stationery Branding Mockup will help showcase your branding elements professionally and realistically. And with its various objects, including documents, business cards, pencils, stamps, notebooks, and more, you can create a stunning presentation.

In Photoshop PSD Format

Minimalist and incredibly professional, these isometric corporate branding identity mockups for Photoshop are perfect for B2B audiences! Composed of crucial mockups such as stationery, business cards, small boxes, and envelopes, this set offers a simple way to showcase your design. Add it to your branding toolkit, and wow your clients!

In Photoshop PSD Format

Elegant and sophisticated, this stationary branding mockup template set is perfect for your next presentation. Pick from various elements, from standard branding mockups such as business cards and letterheads to leather files and CDs. You’ll also get five different PSD scenes – there really is something for everyone!

Free to Download, in Figma Format

This free Figma file is a branding mockup template with an extensive collection of items, including a mug, clock, pen, pencils, notepads, tote bag, flag, and more. This mockup template will allow you to create diverse branding presentations for clients.

Free to Download, in Photoshop PSD Format

This free dark branding mockup is a photorealistic template that allows you to showcase your branding elements in a professional and modern way. With easy-to-use smart object layers, you can customize the template to fit your brand identity and create an impressive presentation.

In Photoshop PSD Format

If you want your branding identity to shine, choose this corporate identity mockup set. With plenty of elements (which also include lanyard straps, flash drives, lighters, and more), you can make sure that your design fits your clients’ needs. Easily add your work in Photoshop, and delight your audience!

Free to Download, in Photoshop PSD Format

This free photorealistic stationery branding mockup set is a collection of eight Photoshop PSD templates that can help you showcase your branding elements realistically and professionally.

Free to Download, in Photoshop PSD Format

This free corporate branding identity mockup is a customizable template that can help create stunning presentations for your corporate brand identity and showcase your branding elements professionally.

In Photoshop PSD Format

Photorealistic and elegant, this minimal stationery branding mockup template comes with everything you need to share your vision with the world. From flash drives and business cards to letterheads, and pens, you’ll get plenty of options to showcase your design. You can even edit background textures and colors!

Free to Download, in Photoshop PSD Format

For an elegant corporate identity, check out this business stationery mockup set. The template is free for commercial and personal use and can be edited via smart objects in Photoshop.

Free to Download, in Photoshop PSD Format

This free PSD stationery scene creator comes with 18 different items that you can place on the canvas as you please to create a unique presentation for a corporate identity.

In Photoshop PSD Format

Perfect for tech brands, this corporate branding identity mockup set for Photoshop has everything you need: 8 photorealistic PSD scenes, elements such as business cards and letterheads, as well as shopping bags and diaries with decorative elements. Mix and match to get beautiful results that seamlessly combine professional and practical!

Free to Download, in Photoshop PSD Format

This classic branding identity mockup includes a set of stationery items as well as product tags that you can use to present a complete brand identity. The mockup includes smart layers and individual items that you can arrange to your liking.

Free to Download, in Photoshop PSD Format

Try this free mockup if you’re looking for a unique way to present a brand identity. With it, you will be able to show your client how his brand will look on laptops, smartphones, and tablets.

In Photoshop PSD Format

Make your branding stand out with this corporate branding identity set! It’s a perfect fit if you’re working on a corporate project and want to showcase bold logos in colors complementary to black and yellow. Add your branding to mugs, lanyards, envelopes, flash drives, and more!

Free to Download, in Photoshop PSD Format

Thanks to this branding and corporate identity mockup, you will be able to easily present any brand that needs a classic presentation. A number of different items are included that you can arrange as you like.

Free to Download, in Photoshop PSD Format

Check out this stationery branding mockup if you’re looking for a dark and elegant mockup file. The template includes a variety of stationery items and smart objects for easy editing.

In Photoshop PSD Format

Photorealistic and effective, these branding and stationery mockup templates for Photoshop are perfect for putting your designs in the spotlight. Featuring elements such as business cards, pencils, and tablets, this branding identity set offers incredibly photorealistic results. You’ll get seven distinct mockups and replaceable backgrounds for beautiful presentations!

Free to Download, in Photoshop PSD Format

This colorful branding mockup is an excellent choice for a vibrant and bold brand with a retro feel. Thanks to smart objects, the template is easy to edit, and you can even customize the shadows for a more realistic look.

Free to Download, in Photoshop PSD Format

Use this corporate identity mockup to give a holistic overview of your brand design. The template is easily editable with smart objects and includes a complete stationery set as well as a stamp, shopping bags, USB keys, and more.

In Photoshop PSD Format

Fun yet professional, these branding stationery mockup templates offer everything you need to amaze your clients! With 7 PSD files, and plenty of elements such as papers, folders, envelopes, badges, tubes, and pencils, you’ll love showcasing your designs. You can easily change the color of backgrounds and elements!

In Photoshop PSD Format

With an already set scene and endless combinations, these branding identity mockup templates are easy to customize in Photoshop. Pick from a plethora of elements such as coffee cups, letterheads, tubes, and flash drives. Then, combine them as you see fit, replace the background texture, and have fun while presenting!

Free to Download, in Photoshop PSD Format

This stationery mockup set includes a complete stationery set designed with a minimalistic approach. The template includes smart objects for easy editing, and you can even edit the shadows and the backgrounds.

Free to Download, in Photoshop PSD Format

Take a look at this modern corporate identity mockup. It features a complete stationery set with a modern design and includes smart objects that make it easy to customize.

In Photoshop PSD Format

With photorealistic scenes and over 60 elements, this versatile stationery branding identity mockup creator is an absolute dreamboat. Add your designs, change the background textures and colors, add layer styles (unlimited foil stamp colors), and more! Add this set to your kit – you can use it for every project!

In Photoshop PSD Format

Realistic and personable, these office stationery branding mockup templates are perfect for friendly, down-to-Earth brands that want to emphasize their personality. With elements like letterheads and CDs and five different scenes, you can easily bring your designs closer to your audience. All it takes is a few clicks in Photoshop!

In Photoshop PSD Format

A professional flat-lay business stationery mockup set, this asset is perfect for presenting your branding identity designs in a simple and straightforward manner. You’ll get a few key elements set against a blue backdrop, such as letterheads, business cards, and envelopes, all easily customizable with Photoshop smart objects.

Free to Download, in Photoshop PSD Format

This template is an excellent choice if you need a simple CV mockup. You can easily place your design via smart objects and then customize fonts, colors, and other aspects of the CV.

Free to Download, in Photoshop PSD Format

Try this corporate mockup template if you need an elegant way to present your brand. The template includes a light and a dark version with a complete stationery set.

Free to Download, in Photoshop PSD Format

With this retro business card mockup, you will be able to showcase your retro business card designs with ease. The template can be edited via smart objects, and it includes two different business card sizes.

In Photoshop PSD Format

Coffee branding and merchandising have never looked this good! This gorgeous set of photorealistic coffee branding mockups comes with all the elements you need: coffee and sugar bags, cups, shopping bags, brochures, and more! And with five beautiful PSD scenes, your audience will really wake up and smell the coffee!

In Photoshop PSD Format

You’ve never seen a set of branding identity essentials as comprehensive as this one! With five different PSD mockups, and every element under the sun (from lanyards and tubes to professional business cards and journals), you’ll get everything you need for a perfect corporate branding presentation!

In Photoshop PSD Format

If you’re working with a beer brand, it’s time to display your designs in an informal setting. And nothing works better than this mockup template featuring two people clinking beer mugs. You can customize the tablet illustration, as well as the beer bottle labels. Have fun!

In Photoshop PSD Format

Elegant and depicted in earthy tones, Athena branding identity mockup templates are a perfect fit for fashion, beauty, and other aesthetically-conscious brands. You can completely customize the 11 branding mockups: adjust colors, replace the background, and add foil stamping. Make your designs shine with these stunning, photorealistic branding identity templates!

In Photoshop PSD Format

A pristine 2D and 3D corporate identity mockup templates for Photoshop, this set comes with all the essentials (tablet, phone, letterhead, business cards, envelopes, and more). You can easily customize these branding identity mockup templates with Photoshop smart objects to create professional and photorealistic presentations your corporate clients will adore.

In Photoshop PSD Format

Nothing says luxury more than this branding identity mockup set! With six high-quality background textures and 11 Photoshop elements, you can paint an atmospheric picture with your designs depicted on leather file covers, crisp envelopes, and business cards that send a clear message: this is a brand you can trust.

In Photoshop PSD Format

This simple, photorealistic branding identity mockup template set will help you create a convincing presentation! Pick from 9 incredible mockups, change the background color, and add your designs to lanyards, envelopes, business cards, and other corporate identity essentials. Save time, and showcase your work with these phenomenal corporate identity mockups!

In Photoshop PSD Format

Let your audience get up close and personal with your design through this atmospheric branding mockup kit. The scene is staged – and it’s time for your designs to shine! Change colors and backgrounds, experiment with foil stamping, and make this mockup work for you and your brand.

In Photoshop PSD Format

Envision your designs in their true environment: a desk. This corporate branding mockup allows you to add your logos and other graphics to elements such as screens (laptop, tablet, phone, and Mac), letterheads and envelopes, coffee cups, tubes, and more! Add designs in Photoshop, and your clients will love you!

In Photoshop PSD Format

Dynamic and interesting, these branding identity mockup templates are a perfect fit for engaging brands! Easily add your designs to letterheads, tri-fold brochures, calendars, hangers, and more! You’ll definitely get plenty of options, including two photorealistic scenes. Not even the sky is the limit with these branding mockups!

In Photoshop PSD Format

Create a stunning brand presentation with these beautiful branding identity mockups. Copperstone branding templates for Photoshop contain 10 PSD files, as well as plenty of options such as selective foil stamping, customizable backgrounds and colors, and more! Professionally lit, these mockups offer incredibly photorealistic results that your clients will love.

In Photoshop PSD Format

Working with a coffee brand, or just designing a visual identity for coffee lovers? These coffee branding mockup templates are the perfect choice! With plenty of elements (including coffee bags, shopping bags, and labels), and customization options for shadows, backgrounds, and colors, you’ll love creating your next branding presentation!

In Photoshop PSD Format

Can school actually be cool? You bet! These back-to-school and office supplies mockups prove that everything is possible with a design as gorgeous as yours. Pick from plenty of elements (notebooks, screens, envelopes, erasers, glue, and more), adjust the background and colors, and get ready to amaze with your presentation!

Show Your Brand’s Personality!

Your design is the first gateway to your brand. And when you’re creating branding identity materials, you have to make sure that they’re enticing and keep the prospect interested in your products.

Fortunately, you no longer have to rely on your hunch. Instead, pick one of these beautiful mockups, and show your clients how they’ll win over their customers. From coffee cups to stationery mockups, you’ll get plenty of incredible options.

More Logo Templates

Read more articles by Paul Andrew

The post 40+ Best Branding Identity Mockup Templates appeared first on The NOKIA Blog.

When you have the task of looking through so many resumes, you’re not only looking for candidates with the most experience or best skills, but you’re also looking for something that makes them stand out. That is especially true when applying for jobs in the creative industry.

And that is why resume design has such an important role in the application process.

There are plenty of web-based services for creating a resume, and yes, the internet is chock full of basic resume templates. However, not many of those have been designed with creativity in mind. They certainly don’t consider modern design trends or the competitiveness of applying for a creative role.

The free resume templates for designers we have for you are the perfect starting points for creating a CV that will help you stand out and land your dream job. They have all been created by designers for designers.

Which Resume Template Format Should You Choose?

The right format depends on the application you prefer to work in and how the finished resume will be submitted. Some formats give you greater control over the layout, while others make ongoing edits easier.

• Figma: A good choice for designers who want browser-based editing, familiar layout controls, and easy PDF export.
• InDesign: Best suited to detailed page layouts, precise typography, and resumes with matching cover letters or portfolio pages.
• Illustrator: Useful for highly visual designs and custom vector graphics, although editing longer sections of text can be less convenient.
• Photoshop: Suitable for image-led layouts, but it is not always the best option for a text-heavy resume.
• Microsoft Word: Practical for frequent updates and applications that request a DOCX file. Word templates may also be easier for recruiters to open and review.

Check the required application version, included fonts, and available file types before downloading. If a template includes several formats, choose the one you already know well.

Free to Download and in Photoshop PSD Format

The Neat Resume is a contemporary, highly customizable free template with an eye-catching header, well-organized content sections, and a clean, minimalist design that focuses on beautiful typography.

In Photoshop PSD, AI & InDesign Formats

This resume template prioritizes readability, making it a polished option for creating a professional resume. In addition to a resume template, you will also get a cover letter and a printable portfolio template.

Free to Download and in Figma Format

This free resume template is simple and minimalist, with well-organized and spacious content sections. It is fully customizable in Figma, with editable colors, fonts, and layout.

In Word, Photoshop PSD, AI & InDesign Formats

This highly creative resume template features a clean, minimalist design and clearly labeled, organized layers, making it easy to customize in your favorite application.

Free to Download and in Figma Format

This professional resume template focuses on beautiful typography and perfectly laid-out content sections. In addition to the resume template, you will also get a printable portfolio template designed in the same clean style.

In Photoshop PSD, AI & Word Formats

This modern resume template has a minimalist layout with a focus on big and bold typography. It’s fully customizable to match your personal branding and includes sections for education, work experience, and skills. It also comes with a matching cover letter template.

Free to Download and in InDesign Format

This free resource is a highly customizable resume and cover letter template with a minimalist, professional design and well-organized sections to highlight your skills, education, and experience.

In Word, AI & InDesign Formats

With its focus on creativity, this resume template is perfect for designers and creatives who want to create a polished and highly professional resume.

Free to Download and in Sketch & Photoshop PSD Formats

This free resume template has a simple and stylish design, well-organized sections, and customizable Sketch and Photoshop files. Its attention to detail and readability make it an excellent option for creating a professional-looking resume.

Free to Download and in Figma Format

This free resume template has been designed for UX and UI roles with plenty of space for projects and skills. Built in Figma for easy editing. It is perfect for portfolios and product design roles.

Free to Download and in Illustrator AI Format

Whether you’re looking for your first creative job or a professional looking to update your resume, this free and highly customizable minimalistic resume is all you need to make a memorable first impression.

Free to Download and in Photoshop PSD, Sketch & Word Formats

Clean, colorful, and highly customizable, this free template is an excellent choice for creative job seekers and professionals who need to create or update their resumes quickly.

Free to Download and in Figma Format

This is a collection of 20 modern, minimally designed resume templates. All templates focus on clarity and readability, making them an excellent option for creating a professional resume in Figma.

Free to Download and in Figma Format

This collection of five free Figma resume templates features bold typography, eye-catching graphics, and minimalist layouts. It is perfect for designers, developers, and marketers looking to create a professional resume.

Free to Download and in Figma Format

This spacious resume template features a black-and-white color scheme and is perfect for highlighting your work experience, portfolio, education, and contact information.

Free to Download and in Word & InDesign Formats

Make a great first impression with this resume template, which features bold and beautiful typography. It can be edited in InDesign or Microsoft Word.

Free to Download and in Word & InDesign Formats

This minimalistic resume template has a clean design and a two-column layout. It also has plenty of room for your profile photos. This free template can be edited in InDesign and Word.

Free to Download and in Illustrator AI Format

This two-page resume template features a bold design that’s perfect for promoting your skills and projects. It can be edited in Illustrator.

Free to Download and in Photoshop PSD Format

If you want a creative resume design, take a look at this resume template. You can edit it in Photoshop and use it to apply for a job in any creative field.

Free to Download and in Photoshop PSD Format

This resume template has a clean, two-column layout that’s easy to edit. The template has been designed in Photoshop and comes with well-organized layers.

Free to Download and in Photoshop PSD Format

Check out this resume template featuring an elegant and minimalist design. This Photoshop PSD template includes a one-page resume layout and well-organized layers for easy editing.

Free to Download and in Illustrator AI Format

This resume was designed in Illustrator and contains a two-page resume and a matching cover letter template. Thanks to its minimal design, it can be used for any type of job application.

Free to Download and in Photoshop PSD & Illustrator AI Formats

This stunning resume template will capture the attention of any employer. It has a beautiful header section and uses modern, clean typography that makes an impact.

Free to Download and in Illustrator AI Format

This clean resume template has a standard two-column layout. In the larger column, you can showcase your education and work history. In the sidebar, you can share your contact information and skills. This template can be edited in Illustrator.

What to Include in a Designer Resume

A designer resume should communicate your experience quickly while giving recruiters a clear route to your work. There is no need to fill every available section if the information does not support the role.

• Name and role: State your name and the type of design position you are applying for.
• Contact details: Add a professional email address, phone number, and general location. A full postal address is rarely needed.
• Portfolio link: Place a direct link near the top of the page so it is easy to locate.
• Professional profile: Write a brief overview of your experience, specialisms, and the type of work you do.
• Work experience: List relevant roles in reverse chronological order. Include results and responsibilities rather than a list of routine tasks.
• Selected projects: Mention relevant client, freelance, or personal projects when they add useful context.
• Design skills: Include methods, disciplines, and applications that relate directly to the position.
• Education and training: Add relevant qualifications, courses, and certifications without giving them more space than your professional work.

References can be supplied when requested, so they do not need to take up room on the resume.

Final Recommendations

Choose a template that suits both your experience and the position. A recent graduate may need more room for education and selected projects, while an experienced designer will probably want greater space for employment history and results.

Treat the template as a starting point. Replace every piece of sample content, remove sections you do not need, and adjust the type sizes and spacing around your own information. Check that links work, dates follow a consistent format, and the smallest text remains comfortable to read.

Before sending the resume, review it at its actual size and ask someone else to proofread it. Export a PDF for direct applications, but keep an editable copy for future updates. If a recruitment portal requests a particular file type, follow that instruction rather than submitting the most decorative version.

A restrained design with clear information will usually serve you better than a complicated layout. The resume should give employers a useful overview of your experience, while your portfolio provides the fuller picture of your design work.

Read more articles by Paul Andrew

The post 20+ Best Free Resume Templates for Creatives in 2026 appeared first on The NOKIA Blog.

Designers have spent years saying they would do better work if the organisation got out of the way. Not always in those exact words, obviously. It usually comes out as something more reasonable: we didn’t get enough engineering time, product had already decided the solution, the roadmap was too packed, leadership only cared about this quarter’s numbers, research got cut, the experiment was never run properly, the design debt was known about, but nobody wanted to spend a sprint fixing it.

Much of this is true. Most designers have worked inside that awkward middle space between product and engineering. Product frames the problem, or at least thinks it does. Engineering decides what is feasible, or at least what is affordable. Design is expected to make the thing clearer, simpler, more coherent, more usable, and occasionally more desirable, while also being careful not to disrupt the plan too much.

That position has always been uncomfortable.

Designers are told to think strategically, but often lack the power to act strategically.

They can spot the broken onboarding flow, the confusing upgrade path, the empty state that makes users feel stupid, the feature that looks reasonable in a product review but makes no sense in real use. Seeing the problem is one thing. Getting it fixed is another.

So design often becomes an argument. You make the case. You annotate the flow. You bring the research clip. You point to the support tickets. You show the Figma prototype. You explain why the “small edge case” is actually the first-run experience for half your new users. Then everyone nods, agrees it matters, and moves on to whatever had already made it onto the roadmap.

This is one reason AI is more interesting for design than the usual “will it replace designers?” debate suggests. The real change is not that designers can make more screens. Nobody needs more screens. The interesting change is that designers may need less permission.

The Bull Case: Designers Need Less Permission

A good designer can now move from “we should fix this” to “I fixed this, and pushed it live.” They can prototype the alternative onboarding flow, write and test clearer product copy, build a rough working version of the interaction, clean up small pieces of design debt without waiting three months for a roadmap slot, and make the better thing visible enough that it becomes harder to ignore.

That changes the politics of the work. Design has often relied on persuasion because designers lacked direct means of production. AI weakens that dependency. Not everywhere, and not for everything. Complex products still have architecture, infrastructure, data models, permissions, security, compliance, legacy systems, and all the other unglamorous reasons software is hard. But the boundary is moving.

More of the gap between having the idea and making the idea real can now be crossed by a motivated designer with the right tools.

In this version of the future, designers become less permission-dependent: less reliant on product to bless the problem, less reliant on engineering to make every small improvement real, less trapped in the role of internal critic, taste-provider, or Figma operator. More able to make, test, repair, and ship.

The best designers start to look less like traditional product designers and more like hybrid product leaders. They still care about interaction, hierarchy, language, flow, brand and craft, but they also understand the commercial shape of the problem. They can make trade-offs. They can prototype in code, or close enough to code. They can use AI to explore options quickly, then use judgment to throw most of them away. They can sit with a founder or PM and move from a vague product concern to something tangible by the end of the day.

There may be fewer of these people, but they will be harder to ignore. The current design-org model was partly built around scarcity: scarce engineering time, slow production, expensive prototypes, handoffs between specialists, heavy coordination across teams. If AI reduces some of that scarcity, it probably reduces the need for some of the roles that grew around it. The optimistic case is not that every designer keeps their job and gets a productivity boost. That feels like wishful thinking. The more believable version is that the total number of designers goes down, but the designers who remain have more direct influence over the product.

That is not a bad outcome for the strongest designers. It may even be the thing many of them have wanted for years.

The Bear Case: Autonomy Exposes The Gaps

Autonomy has teeth. If AI gives designers more room to act, it also removes some of the cover. The same constraints that held good designers back have also protected weaker ones from being tested too directly.

For years, it has been easy to say: I had a better idea, but we never got the engineering time. Sometimes that was exactly what happened. Sometimes the better idea was never really more than a critique. It had not been made concrete. It had not been tested. It had not dealt with the awkward trade-offs. It sounded strong because it lived safely in opposition to the shipped thing.

A lot of designers are good at noticing what is wrong. Fewer are good at deciding what should happen instead. Fewer still can make that alternative real enough for other people to judge. AI will expose this gap.

If you can prototype the recommendation, the recommendation has to get better. If you can make the alternative flow, the flow has to survive contact with details. If you can test the product copy, you have to care what happens when users read it. If you can fix the small piece of design debt, you have to decide whether it was really worth fixing.

Some designers are not as strategic as they think they are. They have learned the language of strategy without the discomfort of owning outcomes. They can talk about user needs, business goals, systems thinking, and product quality, but struggle when asked to make a call. They want influence, but not the exposure that comes with it.

The profession has spent a long time arguing that design deserves more power. Fine. But more power means fewer excuses. It means the work is judged less by the elegance of the argument and more by the quality of the thing you made, tested, or changed. That is a better standard, but it will not be kind to everyone.

There is a second bear case, and it is probably the one large design teams should worry about most. Product and engineering already have more institutional power than design in most companies. They own the roadmap, the technical architecture, the sprint machinery, the metrics, and usually the language leadership understands. Design often has to translate its concerns into someone else’s terms before they count.

AI may not rebalance that power. It may hand product and engineering enough design capability to make design easier to bypass. A PM who can generate a decent flow, decent copy, and a decent prototype may not feel the same need to involve design early. An engineer who can use AI to produce a reasonable interface may decide the design system covers enough of the decision-making. A founder who can get to a polished demo in an afternoon may confuse polish with product thinking.

The problem is not that these people will suddenly become great designers. The problem is that many companies do not know the difference between great design and plausible design. Plausible design is dangerous. It looks coherent in a product review. It uses the right components. The spacing is fine. The copy is not embarrassing. The flow mostly works. Nobody in the meeting feels strongly enough to object. So it ships.

A lot of bad product decisions already survive because they look plausible. AI will produce more of them. This is where design could lose ground quickly: not because taste, judgment, research, and interaction thinking stop mattering, but because the visible outputs of design become easier for other functions to imitate.

If a company already thinks design is mostly screens, prototypes, and polish, AI gives it a cheaper way to get those things.

In that world, design does not gain more agency. It gets narrowed. The remaining designers manage the design system, police component usage, review flows that have already been decided, tidy the interface, maintain brand consistency, and get pulled into high-stakes launches, executive demos, and the occasional messy cross-platform problem. Useful work, but a smaller surface area. Less shaping the product, more maintaining the furniture.

This is why the “AI will automate the boring 20%” argument feels too comforting. In some companies, perhaps that is what happens. But in large tech organisations, where design teams grew around coordination, production and process, the cut could be much deeper. Not 20%. Maybe 50%. Maybe more. Especially in places where leadership never really understood why the design team had grown so large in the first place.

Where I Think We Might End Up

The painful part is that both futures can be true at the same time. AI can make the best designers more capable and many average designers less necessary. It can give design more agency while reducing design headcount. It can help a small number of designers move closer to product leadership while pushing others into governance and clean-up work. It can free designers from waiting for permission, then reveal that some were more comfortable waiting than acting.

The designers who do well will not be the ones who merely use AI to produce more options. Options are cheap now. They will be the ones who know which option is worth pursuing, why it matters, how to test it, what to cut, where the product is lying to itself, and when “good enough” is quietly damaging the business.

They will have taste, but taste will not be enough. They will need product judgment, technical curiosity, commercial awareness and the nerve to make decisions before every variable is settled. They will need to be comfortable moving between a customer conversation, a prototype, a pricing concern, a brand question, and a messy implementation detail without insisting that all of those belong to someone else.

I’m not completely sure where we end up. I hope it is closer to the bull case: fewer permission structures, more making, more agency, better designers finally able to show what they can do without being held back by the machinery around them.

I fear it may be closer to the bear case: product and engineering absorb much of the work, companies decide plausible design is good enough, and design loses status, headcount, and strategic ground.

In reality, it will probably be some uncomfortable mix of the two. Some designers will use AI to gain more agency. Some companies will use it to need fewer designers. Some teams will produce better work because the distance between judgment and execution gets shorter. Others will ship more plausible mediocrity because nobody in the room can tell the difference.

For years, designers have said they could create more value if they were less constrained by the organisation around them. AI is about to test that claim. Some will finally get to prove it. Some will find out the constraints were doing them a favour.

Further Resources

• “Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts,” Huei-Hsin Wang and Megan Brown (NN/Group)
  Lately, the UX design field has been flooded with AI-powered prototyping tools that generate interfaces instantly from natural-language prompts. Despite the massive marketing hype, this evaluation with real design scenarios revealed that while these tools can follow instructions to achieve a general goal, they often lack the sophistication to weigh design tradeoffs and to produce thoughtful, high-quality designs without extensive guidance from humans.
• “AI Design Tools Are Marginally Better: Status Update,” Megan Brown, Caleb Sponheim and Taylor Dykes (NN/Group)
  AI-powered design tools have improved, but we’re still nowhere near the usefulness we’ve been promised, nor are design professionals yet in danger of being replaced by AI. This article reviews in detail several tools and some specific AI-powered features, including: Figma’s Rename Layers, Rewrite This, Find More Like; Khroma Color; and Midjourney. The authors also take a look at the wireframe and prototype generation capabilities of some AI tools.
• design + AI conference

(mb, yk)

The post The Bull And Bear Case For Digital Design In The Age Of AI appeared first on The NOKIA Blog.

When a branding project fails, it usually happens long before the logo stage: in the strategy phase, when words like “modern,” “trustworthy,” “premium,” “friendly,” and “disruptive” are left undefined. The result is a gap between what the brand is supposed to communicate and what the designer is expected to create. This is the space I like to call the “pre-concept” phase.

At the beginning of a project, designers usually receive many inputs: a brief, a few stakeholder conversations, competitor references, maybe a moodboard or a list of adjectives. From there, they are expected to create visual concepts that feel right. But “right” is difficult to judge when the team has not agreed on what the brand is supposed to communicate in the first place.

As an example, a health tech company we worked with said they wanted to look modern, trustworthy, and disruptive. At first, “disruptive” sounded like a push toward something bold and unconventional. But as we talked, it became clear that disruption, for them, still had to feel credible inside a conservative healthcare environment. Their clients were large government medical institutions. A brand that felt too rebellious, experimental, or visually loud would not create the right kind of trust.

In other words, their version of “disruptive” looked more traditional than the word suggested.

The problem was not that the client used the wrong language. The problem was that the language was too broad to guide design decisions. Before a designer can turn strategy into a visual concept, those words need to become more specific. What kind of modern? Trustworthy in what way? Disruptive compared to whom? And how far can the brand move away from category expectations before it starts to feel wrong for its audience?

This article is about that pre-concept phase: the work that happens after the kickoff but before the first visual direction. While the broader brand identity process for digital products includes strategy, concepts, implementation, and the assets a product team needs to build consistently, this article focuses on the earlier work that makes the first concept possible: researching the brand context, uncovering hidden assumptions with stakeholders, and turning shared direction into a visual foundation. Rather, a practical bridge between what the brand needs to mean and how it might begin to look.

The first place to build that bridge is the brand workshop, where broad discovery needs to become a clearer understanding of the brand context.

Stage 1: Research The Brand Context

A brand workshop will naturally cover the standard discovery topics: the business, its goals, the product or service, the competitive landscape, and the target audience. This article will not try to list every question a designer should ask in that workshop. For readers who want a broader starting point, we prepared a Brand Workshop Toolkit: Questions and Exercises, a FigJam framework we use in our studio to structure discovery conversations.

Here, I want to focus on a smaller set of questions that are easy to skip but extremely useful before visual work begins. These questions are less about collecting facts and more about clarifying perception. They help the team understand what the brand needs to make people believe, where it needs to feel credible, and which category assumptions it should follow or challenge.

Perception sits at the center of brand discovery because the brand is shaped in someone else’s mind.

“A brand is a person’s gut feeling about a product, service, or company.”

— Marty Neumeier, The Brand Gap

If the brand ultimately lives in someone else’s perception, the workshop has to clarify what perception the team is trying to create.

The perception questions I focus on are:

• What should people believe about the company after seeing the brand for the first time?
• What would make the brand feel credible in this category?
• If the brand were a person in the room, how would they speak?
• What do customers currently misunderstand about the company, product, or category?
• Where does the brand need to fit the category, and where does it need to break from it?

These questions help reveal the assumptions behind people’s opinions, instead of simply adding more opinions to the room. The questions matter because brand attributes often sound aligned before they are actually understood. A stakeholder may say the brand should feel “premium,” and everyone may nod. But one person may mean refined and editorial. Another may mean expensive and exclusive. Another may mean clean, quiet, and minimal. The word sounds shared, but it can lead to three completely different visual systems.

For instance, in the health tech project mentioned earlier, the client described the desired brand as “disruptive.” In many categories, that might suggest something bold, loud, or unconventional. But their audience was large government medical institutions, so disruption had to be expressed through clarity, efficiency, and confidence rather than rebellion. If we had taken the word at face value, the visual direction could easily have moved too far from what their audience would trust.

In another project, a fintech team wanted the brand to feel “bold” without losing credibility. That word created useful tension. The word bold could mean bright colors, oversized typography, and a highly expressive system. But in a financial category, it also had to carry signals of security, control, and competence. The question was not whether the brand should be bold, but what kind of boldness would still feel trustworthy.

When the team can define what these attributes mean in context, the designer is no longer working from broad adjectives. They are working from a clearer design problem.

Stage 2: Reveal Hidden Assumptions With Stakeholders

Strategically selected questions can uncover part of the verbal layer, but words alone are rarely enough. To move from language into visual direction, it helps to incorporate exercises that make stakeholders think through images, associations, and relative perception.

Jake Knapp makes a similar point in GV’s Three-Hour Brand Sprint:

“The point of these exercises is to make the abstract idea of “our brand” into something concrete.”

— Jake Knapp

The following two exercises help translate what stakeholders say about the brand into material that can later inform look and feel, design principles, and concept development.

This is also where stakeholder participation becomes important. When clients only receive a strategy presentation, they can stay passive. They may agree in the meeting without noticing the assumptions they are bringing into the process. But when they have to place a competitor on a map, choose an image, or explain why a certain reference feels credible, they become active participants. Their attitudes, beliefs, and disagreements become visible before they have a chance to derail the first concept review.

I usually start by looking outward at the category, then inward at the brand itself.

Exercise 1: Competitor Perception Mapping

Before the workshop, collect screenshots of competitor brands, websites, product interfaces, social visuals, or other visible brand touchpoints. During the workshop, ask the client team to place those competitors on a simple two-axis map.

This exercise is not about deciding which competitors have “good” or “bad” design. It is about understanding how the client reads the category: what feels credible, what feels generic, what feels too conservative, what feels too experimental, and where there may be an open visual territory for the brand.

The axes should be chosen based on the tension the brand needs to solve. For example:

• Traditional to progressive.
• Corporate to human.
• Understated to bold.
• Accessible to exclusive.

For a health tech company that wants to feel innovative but works with conservative medical institutions, the map might use traditional to progressive and corporate to human. For a fintech brand that wants to stand out without losing trust, it might use understated to bold and accessible to exclusive.

The most useful part of this exercise is often not the final map, but the disagreement it creates. One stakeholder may read a competitor as progressive, while another sees it as generic. One may see a brand as premium, while another reads it as cold. These disagreements reveal how different people define trust, innovation, credibility, and differentiation. That is exactly the kind of ambiguity that needs to be resolved before design begins.

Exercise 2: Visual Brand Driver

After the team has discussed the category, I like to turn the conversation inward. One exercise we use for this is called Visual Brand Driver. Each stakeholder is asked to choose images for a set of unrelated categories: transport, typeface, activity, furniture, mood, object, animal, architecture, and drink.

The instruction is important: the images should not represent the person’s personal taste. They should represent the company.

For example, if the company were a type of transport, what would it be? A quiet electric car, a high-speed train, a private jet, a bicycle, a delivery van? If it were a piece of furniture, would it be a soft lounge chair, a precise modular desk, or a heavy boardroom table?

After choosing the images, each person adds four or five adjectives to explain why they selected them. This part matters more than the image itself. The same object can mean different things to different people. A train might suggest speed, structure, reliability, mass accessibility, or a fixed route. A lounge chair might suggest comfort, calm, informality, or lack of urgency.

The exercise helps create a deeper layer of brand perception. Instead of asking people to describe the company directly, it asks them to think through metaphor and association. Patterns and contradictions become visible. One stakeholder may see the brand as refined and calm, another as energetic and experimental. One may describe the company as precise and structured, another as warm and flexible.

Those differences are not a problem. They are useful materials. They show what needs to be clarified before the visual concept phase begins.

This exercise is also helpful because it separates brand perception from aesthetic preference. A stakeholder may personally like a certain image, but if it does not describe the company, it should not be part of the exercise. That distinction is important throughout the branding process. The question is not “Do we like this?” but “Does this express the right thing about the brand?”

Stage 3: Turn Shared Direction Into A Visual Foundation

Once the workshop has revealed the main assumptions, the next client meeting can turn that shared understanding into a visual foundation. This is still not the first identity concept. It is a working layer between strategy and design, where the client can react to perception, visual principles, and early asset directions before the designer invests time in full concepts.

We usually structure this meeting around three connected layers:

1. Look and feel
   What should the brand feel like?
2. Design code
   How can key brand ideas become visual principles?
3. Branding assets
   What early choices should guide typography, color, logo direction, imagery, and illustration?

Together, these layers move the conversation from perception to practical design boundaries.

Look And Feel

Look and feel boards are not collections of visuals the team likes. They are perception boards. The designer collects references based on the workshop: desired perception, category tension, competitor codes, stakeholder disagreements, and brand character.

If the brand needs to feel trustworthy, modern, and human, the board should help the team discuss what kind of trust, modernity, and humanity are appropriate. Is the brand calm and institutional, or warm and accessible? Is it progressive through precision, or through a more expressive editorial tone?

The point is to let the client respond to perception before reacting to a logo, color palette, or finished visual system.

Design Code

Design code makes the direction more specific by translating key brand ideas into visual principles.

For a parenting app in Germany, personalized support for your unique journey might become organic shapes, handwritten lines, and softer compositions. Parenting is messy and magical might become soft gradients, layered imagery, and playful irregularity. Research-backed support for real life might introduce doctor calls, data snapshots, infographics, and editorial layouts that make the brand feel credible.

For a PR agency working with prop tech companies, momentum in motion might become lines, arrows, ripple effects, or motion blur. Springboard might become a lift-off moment and elastic visual energy. Building blocks might become modular shapes or stacked compositions.

The team is not choosing the final graphic expression here. It is testing whether the visual metaphors make sense before concept design begins.

Brand Assets

The final layer brings the conversation down to the building blocks of identity: typography, color, logo style, photography, illustration, and graphic language.

At this stage, the team can discuss questions such as:

• Should the typography feel editorial, technical, warm, precise, expressive, or restrained?
• Should the color palette follow category codes or create contrast?
• Should the logo be a quiet typographic mark, a flexible symbol, or a more expressive character?
• Should photography feel documentary, polished, intimate, product-led, everyday, or aspirational?
• Should illustration explain complex ideas, add warmth, or become a distinctive brand language?

This gives the designer boundaries without making the final identity predictable. The next step is still concept design, but the team is no longer starting from vague adjectives or private expectations.

Pre-Concept Checklist

Before moving into the first concept, it helps to pause and check whether the team has enough shared direction. The checklist is not meant to make every decision in advance. It is meant to make sure the designer is not starting from vague words, hidden assumptions, or unresolved disagreements.

Before creating the first concept, check whether the team has:

• A clear understanding of what the brand needs to communicate.
• A defined brand character.
• A shared sense of what that character means and what it does not mean.
• Visual references tied to perception, not taste.
• Key brand ideas translated into visual principles.
• Early direction for typography, color, imagery, and graphic language.
• Documented areas of agreement and disagreement.
• A clear sense of which concept directions would be wrong before designing them.

This last point is especially useful. A strong pre-concept phase not only tells the designer what to explore. It also clarifies what to avoid: directions that would be too expected, too cold, too playful, too conservative, too loud, too generic, or too far from what the audience can trust.

When the team can name those boundaries, the first concept becomes easier to evaluate. The conversation shifts from “I like it” or “I do not like it” to “Does this express the brand we agreed on?”

The First Concept Should Not Be A Guess

The first concept should not feel like a guess or a surprise reveal. It should feel like the next step in a direction the team already understands.

That does not mean removing intuition, experimentation, or creative risk from the branding process. It means giving those things a sharper problem to solve. When the team has clarified the brand character, tested visual perception, translated ideas into design principles, and discussed the early building blocks of the identity, the designer can explore with more confidence.

Pre-concept work does not need to make the final identity predictable. It needs to make the conversation around it more meaningful. Instead of asking whether the work matches someone’s private expectation, the team can ask a better question: Does this visual direction express what the brand needs to become?

(yk)

The post From Kickoff To First Concept: How To Turn Brand Strategy Into Visual Direction appeared first on The NOKIA Blog.

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 page builders, it reimagines the website creation experience with a freeform infinite canvas, an integrated CMS, and a comprehensive set of built-in features. The result is a streamlined workflow that gives you greater creative freedom while producing cleaner, faster websites.

Whether you’re a designer seeking pixel-perfect control, a developer looking for cleaner output, or a business owner who simply wants to build a professional website without unnecessary complexity, Kirki aims to remove many of the limitations that have long been associated with WordPress page builders.

In this review, we’ll compare Kirki with traditional WordPress builders across the factors that matter most when choosing a website builder, including:

• Pricing and overall value,
• Impact on website performance,
• Ease of use versus design flexibility,
• Built-in features and functionality,
• Theme compatibility and layout customization.

By the end, you’ll have a clear understanding of where Kirki stands and whether it’s the right choice for your next WordPress project.

A Closer Looks At Kirki

Kirki is a no-code visual website builder for WordPress, designed to bridge the gap where other page builders fall short.

Unlike other page builders, Kirki is an all-in-one solution that aims to provide everything you need to build websites without any third-party dependencies, shifting from the norm in WordPress!

And the best part? It’s all included in your subscription, so you won’t be hit with surprise upgrades.

The Most Feature-Packed Free WordPress Builder

Before anything else, Kirki has a free version, and it’s genuinely powerful.

You can download Kirki for free directly from WordPress.org and start building right away. The free version is not a watered-down teaser. It’s a heavily feature-packed builder that lets you design modern websites on an infinite canvas without spending a cent.

Scale Without Limits With the Pro Plan

For those who want to unlock the full Kirki experience, the Pro plans are surprisingly affordable for the value they deliver.

The Starter plan is just $59/year for one site and includes all premium features. Compare that with Elementor Pro’s Essential plan, which starts at $60/year and still keeps several essentials behind paywalls. With Kirki, what you see is what you get, everything included from day one.

Kirki also offers a Lifetime plan for a one-time payment of $499, giving you unlimited use forever. No renewals, no upcharges, no surprises.

While most page builders upsell critical features or require multiple add-ons to function properly, Kirki keeps it simple. One platform, all features, no hidden costs. Dynamic content, pop-up builder, form builder, submission manager, the entire growing template library — all included from the start across every plan.

Explore Kirki pricing.

Website Performance Comparison

Performance directly impacts user experience, SEO, and conversion rates. So, to get a clear picture of how different page builders impact performance, we put Kirki and Elementor to the test under identical conditions to see how each builder stacks up.

We installed both on a clean WordPress setup using the default Twenty Twenty-Five theme to ensure a fair comparison. Then, we created identical layouts using comparable design elements and ran Lighthouse performance audits to measure load time, responsiveness, and Core Web Vitals.

Test Conditions:

• Clean WordPress installation,
• Same theme: Twenty Twenty-Five,
• Same layout structure and design elements,
• Lighthouse is used for performance scoring.

Sample Layout:

Kirki’s Performance:

Elementor’s Performance:

Kirki’s Code Output:

Elementor’s Code Output:

The difference was immediately clear. Kirki generated a much cleaner DOM with significantly fewer <div>s and no unnecessary wrappers, resulting in faster load times and higher scores across all boards.

Elementor, on the other hand, added heavily nested markup and extra scripts, even on this simple layout, which dragged down its performance.

If clean code, fast loading, and technical efficiency are priorities for you, Kirki clearly comes out ahead.

Exploring The Features

Now that we’ve seen how Kirki outperforms the competition and does so at a highly competitive price, let’s dive into the features to see what makes it such a powerful all-in-one builder.

Freeform Infinite Canvas For True Design Freedom

What makes Kirki different from the existing page builders is its infinite canvas.

With Kirki, you finally get the layout flexibility modern design demands, and no longer need to place elements into rigid structures.

Design on an infinite canvas where you can pan freely, zoom in and out, place elements exactly where you want, overlap sections, layer backgrounds, and build complex interactions, all visually.

Every element’s layout behavior is editable on canvas, giving you pixel-level control without touching code.

The editor supports both light and dark modes for a more comfortable, focused workspace.

If you’ve used Figma or Webflow, you’ll feel instantly at home. If you haven’t, this is the most natural way to design websites you’ve ever tried.

Concurrent Editing Across All Responsive Views

With Kirki’s infinite canvas, all your responsive views, Desktop, Tablet, Landscape, and Mobile, are visible side by side simultaneously. You don’t switch modes. You work across all of them at once, in real time, on the same canvas.

This means you can spot a layout issue on mobile while designing the desktop version, fix it instantly, and move on without ever breaking your flow. No back and forth.

And because Kirki uses a cascading system, changes made at larger breakpoints automatically flow down to smaller ones, so you’re never starting from scratch at every screen size. You only step in where you need to, making adjustments where the design requires it and letting the rest handle itself.

Instant Figma to Kirki Handoff

Talking about Figma, if you have a design ready in Figma, you can instantly import it into Kirki to create a functional website with no need to rebuild from scratch.

Your imported design comes in fully responsive by default, adapting to all screen sizes, including any custom breakpoints you define.

And it supports unlimited breakpoints, too. You can define layout behavior exactly how you want it, and styles will cascade intelligently across smaller screens.

No Third-Party Plugins Needed for Dynamic Content

In traditional WordPress, handling dynamic content means installing the ACF or other third-party plugins.

But with Kirki, all of that is natively integrated. It comes with a powerful Dynamic Content Manager that lets you:

• Create custom content types and fields.
• Use reference and multi-reference relationships.
• Build dynamic templates visually.
• Add dynamic SEO to template pages.
• Apply advanced filtering to Collection elements.

All without writing a single line of code or relying on external plugins.

Reusable Styling With Class-Based Editing

Kirki also has an efficient way to manage design at scale without repetitive work.

It uses a class-based styling system that brings structure and scalability to your design process. When you style an element, those styles are automatically saved as reusable CSS classes.

Here’s what that means for you:

• You can create global classes for common components like buttons, cards, or headings.
• Reuse those styles across pages and projects with consistency.
• Update a class once, and every instance updates instantly.
• You can also create subclasses to make slight variations, like secondary buttons, while still inheriting styles from the parent.

CSS Variables for Global Styling

Kirki takes styling even further with Global Variables, allowing you to define design tokens like colors, fonts, spacing, and sizing that can be reused across your entire site.

You can pair these global variables with your class-based structure to:

• Maintain visual consistency.
• Update values globally with a single change.
• Easily manage themes like switching between light and dark modes with one click.

And while Kirki offers a fully visual experience, it doesn’t limit advanced users. You can write custom CSS for any class or element, and even inject JavaScript at the page or element level when needed.

Build Complex Interactions and Animations Visually

When it comes to modern animations and interactive design, Kirki leaves traditional WordPress page builders far behind.

Its fully visual interaction builder lets you create dynamic, immersive experiences.

You can build scroll-based animations, hover and click effects, interactive sections that respond across devices, and control visibility, motion, and behavior all within a visual interface.

For advanced users, Kirki includes a timeline-based editor where you can:

• Create multi-step animations.
• Fine-tune transitions with precise timing, easing, delays, and sequencing.

Even text animations get special attention.

You can animate text by character, word, or full element. Choose custom triggers (scroll, hover, load, etc.) and select from various transition styles or create your own.

Kirki no-code website builder truly helps you move past generic and create unique animations and complex interactions.

Seamless Integration Management with Kirki Apps

Kirki takes the hassle out of connecting third-party tools with its intuitive Kirki Apps system. You can install and manage essential integrations such as analytics, CRMs, email marketing platforms, support widgets, and more, all from within the Kirki editor itself.

This centralized approach means you never have to leave your workspace. The clean, user-friendly interface guides you through the connection process visually, making setup fast and straightforward even if you’re not a technical expert.

Kirki brings the first real multi-user co-editing experience to WordPress. Multiple team members can work on the same page, at the same time, seeing each other’s changes unfold live on the canvas.

You see your teammates’ cursors moving in real time. You watch edits happen as they happen. Every change is color-coded and attributed, so the entire team stays oriented without ever having to ask.

Your team can also leave comments directly on the canvas, pinned exactly where the change needs to happen. For agencies, freelancers working with clients, and in-house teams juggling multiple contributors, this makes a huge of a difference.

Before you publish your site, Kirki helps ensure your site is technically sound with its built-in Page Audit tool.

It automatically scans your layout for:

• Missing alt text on images,
• Broken links,
• Unassigned or duplicate classes,
• Accessibility issues,
• And more.

So you’re not just building beautiful pages — you’re shipping fast, accessible, SEO-ready websites with confidence.

Theme & Layout Options

Kirki has a growing library of high-quality templates and modular layout options, so you’re never out of options.

Template Kits: Full Website Packs

Kirki’s Template Kits include complete multi-page website designs for every industry. Pick a template, update the content, and you’re ready to launch.

New template kits are added regularly, so you’re always equipped with the latest design trends. And the best part? At no additional cost. You get access to the finest designs without ever paying extra.

Pre-Designed Pages

Need just a landing page or a pricing page? Kirki also offers standalone pre-designed pages you can drop into your project and customize instantly.

Pre-Made Sections

Prefer to build from scratch but don’t want to start with a blank canvas? It also has ready-made sections like hero banners, testimonials, pricing blocks, and FAQs. You can visually assemble your layout in minutes using these.

How Easy Is Kirki To Use?

Kirki has come a long way in terms of accessibility.

The interface has been refined, the workflow is more intuitive, and a growing library of pre-made blocks, sections, pages, and full templates means you’re rarely starting from a blank canvas unless you want to.

That said, if you want something dead simple just to build a basic five-page site fast, there are lighter options out there like Elementor. But they come at the cost of power, performance, design control, and long-term flexibility.

Kirki is built for people who care about what they’re building. If you want pixel-level control, clean code output, truly responsive layouts, dynamic content, advanced interactions, and a site that scales without breaking, Kirki delivers all of that, and it’s more accessible than ever to get there.

To help you get up to speed quickly, Kirki includes:

• A refined, intuitive interface that’s easier to navigate than ever;
• An extensive and growing library of templates, pages, pre-built sections, UI components, and wireframes to kickstart any project instantly;
• Guided onboarding to walk you through the essentials;
• An AI generator that can scaffold entire pages and layouts in seconds.

The bottom line is that Kirki rewards the time you put into learning it. And with everything that’s been added recently, that time is shorter than ever.

What Users Are Saying

For many users, Kirki is more than just a builder. It’s the all-in-one tool WordPress has been waiting for. They are calling it the future of WordPress, a truly great alternative to tools like Framer and Webflow.

Why Kirki Outshines Traditional Website Builders

Building a professional WordPress website shouldn’t mean compromising on speed, flexibility, or performance. Kirki is designed to give designers, developers, and businesses a modern visual building experience that goes beyond the limitations of traditional page builders.

Modern Freeform Visual Builder

Design without being restricted by rigid rows or predefined layouts. Kirki’s intuitive freeform canvas lets you place, arrange, and customize elements exactly where you want them, giving you complete creative freedom.

Real-Time Responsive Editing

Perfect your website for every screen size with side-by-side responsive editing. Instantly preview and fine-tune your desktop, tablet, and mobile layouts simultaneously, eliminating the guesswork from responsive design.

Everything You Need in One Builder

Forget installing multiple add-ons and third-party extensions. Kirki includes the essential tools, widgets, and features you need in a single, integrated platform, reducing complexity while improving reliability.

Performance-Optimized Code Output

Great websites don’t just look good—they load fast. Kirki generates clean, lightweight, and optimized code that helps improve page speed, user experience, and search engine performance.

Seamless Figma to WordPress Workflow

Transform your Figma designs into fully functional WordPress pages with minimal effort. Reduce development time and maintain design accuracy from concept to launch.

Create dynamic websites with data-driven content, engaging animations, sophisticated interactions, and global styling controls that keep your branding consistent across every page.

A Powerful Free Version To Get Your Site Ready

Start building immediately with a feature-rich free version that includes everything you need to create a polished, professional website before deciding to upgrade.

After putting Kirki through its paces, the answer is a clear yes. Kirki not only matches traditional WordPress page builders where it counts, but it surpasses them in nearly every critical area.

From its cleaner, faster code output and outstanding performance to its unparalleled design freedom and powerful built-in features, Kirki solves many of the pain points that users have accepted for years.

Its all-in-one approach eliminates the need for multiple plugins, saving time, money, and technical headaches. If you’re serious about building high-quality, scalable, and visually stunning websites, Kirki isn’t just an alternative; it’s the future of WordPress site building.

Ready to experience the difference yourself? Try Kirki today and start building faster, cleaner, and smarter.

(yk)

The post Meet Kirki: WordPress’s First Visual Builder With An Infinite Canvas appeared first on The NOKIA Blog.

AI-generated prototypes often don’t deliver consistently decent results because of tiny inconsistencies scattered all across a design system. I’s decisions made but not documented, hard-coded values never cleaned up, or relying too much on AI making sense of mock-ups or design flows on its own.

Yesterday I stumbled upon a useful practical guide by Hardik Pandya from Atlassian — on how to reduce drifts, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Let’s see how it works.

1. Design Decisions Are Infrastructure

Unsurprisingly, better AI prototypes come from better data — but also from better human guidance. We shouldn’t assume that AI knows how to choose the right component and how to design with accessibility in mind. It needs priorities, a clear path on how we make decisions, design principles, examples, do’s and don’ts.

In fact, we should treat design decisions as infrastructure. That means that every time we make a decision — not just a design decision, but even a decision on how to actually prioritize our work and how we make decisions around here — it must find a path into the spec file that is then consumed by AI.

2. Auditing: FigmaLint

One of the useful tools to audit the quality of the design system is FigmaLint. It’s a useful free Figma plugin for auditing tokens, states, accessibility, binding tokens, renaming layers, detecting detached instances, missing interactive states and hard-coded values — and preparing the design documentation.

If you often have to work with vendors and third parties who supply you with their design systems and component libraries, that’s a great helper to have by your side — especially if you want to improve the quality of prototypes, AI-generated code, and AI-written documentation.

3. Three Layers: Spec Files + Token Layer + Auditing

To ensure quality, we establish design principles, guidelines, and rules in the form of “spec files”. It’s structured Markdown files that include spacing rules, color choices, component usage guidelines, priorities, etc. AI is going to read and reuse that spec file every time it’s going to generate a prototype.

Because the spec files are text files, it’s much more cost-effective but also much more accurate, just because we don’t rely on AI recognizing or decoding patterns from mock-ups but get specific guidelines instead. In fact, extending code is often a more effective way than generating code from mock-ups.

The token layer lists and keeps updated all tokens used throughout the design system. AI always chooses from a closed set of named variables instead of inventing plausible values ad hoc.

An audit script catches what AI gets wrong. It scans the prototype and flags every hard-coded value and flags it if necessary. It can be a regular software doing that, with AI waiting for its feedback to come back.

Finally, when a design system ships updates, a sync routine flags which spec files need updating. The goal is to make sure that AI always reads up-to-date, current specs, not the ones written against an outdated version.

4. Examples of AI-Ready Design Systems

Wrapping Up

Ultimately, AI cannot magically resolve technical debt or design debt without proper guidance. It relies heavily on clear decisions, established priorities, and well-defined principles.

The more deliberate and precise designers are in guiding AI, the better the overall outcomes will be. This requires not just cleaning up and improving design systems but also maintaining them over time as decisions need to trickle down into Markdown files. We’ll be busy for years to come.

Meet “Design Patterns For AI Interfaces”

Meet Design Patterns For AI Interfaces, Vitaly’s new video course with 100s of real-life examples and UX guidelines to design AI features that people actually use — with a live UX training later this year. Jump to a free preview.

Useful Resources

(yk)

The post How To Make Your Design System AI-Ready appeared first on The NOKIA Blog.

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

In financial product testing, the problem is sharper. Finance users are trained to notice when something feels off: a balance that doesn’t add up, a field that accepts anything. When a banking prototype skips real authentication, participants don’t just disengage; they stop mid-session to flag it. The team walks away with findings that reflect how users behave in a demonstration, not in a real product.

The fix is narrower than you’d think. Identify the moment where participant trust is established and make that interaction real. In a banking app, that moment is the login.

This tutorial builds it: credentials that validate, a live error state, and a biometric animation that feels native — no code required.

What We’re Building: A Login That Behaves Like A Shipped Product

The login flow, built around Pie Bank, a mobile banking prototype, includes functional text inputs, a masked password field, credential validation, a live error state, and a Face ID animation timed to feel indistinguishable from iOS.

What you’ll need:

• A login UI from Figma (or any supported design tool)
• ProtoPie Studio — free to start, everything in this tutorial works on the free plan
• A Lottie file for the Face ID animation (this one is what we used)
• The finished Pie Bank prototype file — download it to follow alongside, or use it as a reference after you build

Step 1: Import From Figma Choose Scene, Not Flattened

In Figma, open the ProtoPie plugin with your login frame selected and choose Scene when exporting. Flattened collapses everything into a single image; Scene preserves your layer hierarchy so every element arrives in ProtoPie as a separate, targetable layer.

Before moving on: rename every layer meaningfully. “Input Username” not “Rectangle 14”. You’ll reference these names in formulas: vague names compound into real time lost.

Step 2: Swap Static Fields For Inputs That Actually Accept Text

ProtoPie’s native Input layer accepts real keyboard entry: participants type actual text, not tap a placeholder. Go to Text  → Input, drag an Input layer onto your canvas, and nest it inside your username field group. Match it visually: placeholder text Username, background fill and font to match your design.

Hit preview. Click the field. Type. That’s the prototype starting to behave like an app rather than depicting one.

Rename this layer Input Username, duplicate it, and nest the copy inside your password field group.

Step 3: One Property Change Masks The Password

On the duplicated layer, change placeholder text to Password and set Type to Text Password. ProtoPie handles the masking: no custom logic needed.

Preview both fields: username shows text, password shows dots. It already feels real, and you haven’t written a single condition.

Step 4: Build The Destination Scene Before Wiring Navigation

Add a new scene, even a blank one. The most common sequencing mistake in ProtoPie is trying to wire a navigation response before a destination exists. Create it first.

Step 5: Wire The Button: It Works, But It Still Lets Everyone Through

Select Log In, add a Tap trigger, set response to Jump, target your dashboard scene, transition Slide in from right to left.

Preview and tap. It navigates: but for any input, including nothing. The prototype is still lying. The next two steps are the fix.

Step 6: Add Variables So The Prototype Remembers What Was Typed

At the bottom-left of ProtoPie, add two Text type variables: username and password. Bind each to its input layer with a formula:

input("Input Username").text
input("Input Password").text

Enable the debug icons: green overlays will show live variable values as you type. When you see your keystrokes appear in real time, the binding is confirmed.

Step 7: Add A Condition So Only Valid Credentials Get Through

Go back to the Tap trigger on the login button. Add a Condition with two rules, both must be true:

• username equals alex.c@gmail.com
• password equals ABC123

Move the Jump response inside this condition. Wrong credentials, empty fields, wrong format: none get through. Participants now have to actually log in. That single constraint changes the texture of every test session that follows.

Step 8: Build The Error State, The Interaction Most Prototypes Skip

Find your error message layer, rename it Error Text, set initial opacity to 0. Add a second condition (the inverse of the first), and inside it, a Change Property response setting Error Text opacity to 100.

Wrong credentials: error appears. Correct credentials: dashboard. Two outcomes: which is what makes this testable, not just demonstrable.

Step 9: Add the Face ID Animation, The Detail That Makes Testers Ask “Is This Real”

Go to Media, drag a Lottie layer onto canvas, load your Face ID file, and position it off-screen above the iPhone frame. On your Login with Face ID button, add a Tap trigger (rename it Tap Face ID) with four responses in sequence:

• Move: Lottie container to Y: 60
• Playback: Seek: time 0s (resets so it always plays from the start)
• Playback: Play: Lottie file
• Jump: to dashboard

Step 10: Stagger The Timing, This Is What Makes It Feel Native

Without delays, all four responses fire at once and the scene jumps before the animation plays. Add offsets:

Enable Reset selected scenes on Jump: without it, navigating back leaves the animation stuck at Y: 60.

Preview: tap Face ID, animation drops in, plays, screen transitions. A biometric login indistinguishable from the real thing.

A Login This Real Changes What You Can Learn From Your Prototype

When authentication actually works, the error state becomes a genuine research touchpoint: do users understand the message, do they retry, do they reach for Face ID instead? These are questions a faked login can’t answer.

In stakeholder reviews, the flow speaks for itself. In engineering handoff, the interaction panel documents the behavior (conditional logic, variable bindings, timing) so engineers see intent, not interpretation.

This is why FinTech teams invest in login fidelity even when the login isn’t the feature being tested. It’s where participant trust is established. Get it right, and everything downstream produces better signal.

This tutorial is part of the FinTech Prototyping with ProtoPie series on the ProtoPie blog. The series builds Pie Bank from the ground up across four chapters, covering the dashboard, money transfer logic, and camera integration. If this tutorial was useful, the rest of the series goes further.

(mnj, il)

The post Your Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It) appeared first on The NOKIA Blog.

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, practical items like soap and vacuums into must-have experiences.

But utility software — especially maintenance tools, a type of system software designed to analyze, configure, optimize, and maintain a computer — hasn’t made that leap from something you open as a chore to an experience you choose with excitement. And that means those brands are missing an interesting design opportunity: these tools are well overdue for a more intelligent, more human, and less emotionally flat approach.

“The Most Underexplored Frontier In UX Is The Maintenance Layer.”

Utility software still feels like a chore. Using it has all the excitement of pulling out that dusty old vacuum from the back of the closet. These four common software design assumptions illustrate why the category hasn’t yet transcended its chore status.

• Assuming the user already resents the task: they’re here because something is wrong, not because they chose to open this tool. Designing accordingly means assuming they want the software to be fast, clinical, invisible, and something to get out of the way, not get into. But a design built for resentment produces tools that deserve it. If you expect your users to want to get out of the product as fast as possible, they’ll feel it in the design.
• Assuming function is enough and feelings are for consumer apps: emotion in interface design is decoration. The maintenance layer is infrastructure, and nobody decorates infrastructure. But nobody decorated dish soap either, until Method. They didn’t change the product, just the user’s relationship to the tool they use to accomplish a task.
• Assuming your users are not your fans because nobody cares about maintenance tools: utility tools don’t build communities, and nobody posts about running a disk cleanup. But people care deeply about tools that respect their time and make complex things simple for them to use. The MacPaw team listens to our community and implements many of the features they ask for, because we know users can be fans too, and they should shape how our products work.
• Assuming that designers shouldn’t waste pixels on personality: you need to hide complexity and show minimal UI. Utility software should look neutral, technical, and forgettable.

But when software hides the system, people lose trust in it.

Design always starts with function — function shapes form. But if that function can’t be made completely invisible and people still have to interact with it, it inevitably becomes part of their experience. In that case, people expect it not just to work, but to match their environment, influence their mood, and contribute to their overall experience.

A good example is a watch. Its core function is simple: show the time. But because a watch occupies physical space in a person’s world, you want more from it than just functionality. It needs to play an aesthetic role and complement the environment.

“The Maintenance Layer Is A Behavioral Problem, Not Just A UX One.”

The user experience in utility software matters more than the industry tends to admit. In utility software, experience is not something added on top of function. It emerges from how the function is structured, explained, and interacted with. If you think you can design the most functional app on the market without considering how users understand and experience the process, you’re missing an opportunity to build a relationship with that user.

Part of that ignored UX element is a behavioral problem: users don’t avoid utility software because using it is hard, but instead because it produces no positive emotional signal at any point. The problem is rarely complex. It’s the absence of meaningful interaction during the process of using the app.

Another issue is focusing solely on function. The aesthetic-usability effect shows us clearly that if something looks better, it feels better — ATM screens in a 1995 study were judged easier to use if the screen layout was more attractive. Even something as purely functional as an ATM screen display needs attention to how the function is structured, presented, and perceived.

And then there’s the memory problem. People remember the emotional peak and the ending of an experience, not the average. A completed process that ends with a clear “done” is remembered more positively than one that just fades out, even if the end task is completed successfully in both cases. System tools rarely intentionally design the ending of an interaction — they just stop running.

“Thoughtful System Design Can Transform Maintenance From A Technical Chore Into A Seamless User Experience.”

What does emotional design actually mean, then, in utility UX? Here are three principles the MacPaw team follows to design its products against the category norm.

Translating system complexity into human language

Maintenance tools deal with storage, task management, and background processes. Good design explains what’s happening, avoids system jargon, and communicates outcomes clearly.

Linear’s game-changing move that illustrates this principle was agreeing on straightforward units of work, like projects and teams, that any new user can immediately understand. That helps them spend less time ramping up and more time building.

Make the process clear and show progress

System tools run complex processes. Design should show progress, impact, and system change to create trust and control.

Vercel’s deployment infrastructure is an excellent example here. When you trigger a build, the browser tab favicon changes — a spinner while building, a green checkmark when done, a red X if it fails. It’s ruthlessly functional, not visual or warm, but it’s emotionally intelligent: it exists purely to reduce the low-level anxiety of waiting for a build to finish.

Design the moment of completion

Maintenance tasks often end quietly. But completion is the emotional payoff. Design should emphasize clarity of results, a sense of resolution, and visible improvement so users remember a positive and distinct ending.

Take the new CleanMyMac by MacPaw after its 2024 major update. Unlike the maintenance utility category norm, CleanMyMac uses visual language, including color, depth, motion, icons, and 3D illustrations, to shift the focus from diagnosing problems to showing progress: space cleared, threats removed, time saved. Instead of confronting the user with what’s wrong, the interface closes with a picture of a machine that’s already working better.

The task is the same, but the ending tells a different story, giving the user a picture of a machine that’s already working better.

“Even if you don’t care about emotional design as a principle, the change is coming anyway.”

The market is forcing this issue even for those who don’t find the argument I’ve made here compelling.

That’s partly generational — designers and users who grew up with Linear, Figma, and Notion have a completely different baseline for the tools they use. Good software is not a happy accident for them, but a given. That generation is now the primary audience for maintenance software, and so the old “it’s fine, it’s just a utility” excuse doesn’t work philosophically or commercially. Just like Dyson and Method changed how entire product categories approached design, the current state of utility software is shifting for good.

And digital fatigue is the current cultural state. The resurgence of vinyl records, film cameras, and dumbphones is not merely nostalgia, but a signal that the emotional relationship between people and their tools is changing.

The question has shifted from whether your utility software should feel better to use to whether it can afford not to.

(il)

The post Rethinking The Experience Of System Tools appeared first on The NOKIA Blog.