At Daasign we have shipped UI across funded startups, SaaS scale-ups, and enterprise workstreams including McKinsey and Montblanc. The pattern we see most often is the same: teams treat UI as decoration applied at the end, rather than a structural decision made at the beginning. This guide fixes that framing. Have a quick question about ui? Read our expert answers on ui.

What does UI mean?

UI stands for user interface and refers to the point of contact between a human and a digital product, every screen, state, and interaction a user can trigger. A UI is not the same as UX: UX covers the full experience arc, while UI is the specific visual and interactive layer a person actually sees and touches.

The term entered mainstream software usage in the 1980s with the release of the Apple Lisa and Macintosh, which brought graphical user interfaces to consumer hardware. Before that, interfaces were command-line only. Today, Figma, Framer, and tools like Storybook have made UI a collaborative, code-adjacent discipline rather than a purely visual one. A UI designer in 2025 who cannot hand off a design system to a React developer is working at half capacity.

The three types of user interfaces

There are three primary interface types, and confusing them leads to misaligned briefs and wasted sprints. Each has a different design logic, different tooling, and different performance benchmarks.

• Graphical user interfaces (GUIs) are the dominant type: web apps, mobile apps, SaaS dashboards. Interaction happens via mouse, touch, or keyboard against visual elements. Figma is the standard design tool here.

• Voice user interfaces (VUIs) depend on spoken commands and audio feedback. Alexa, Siri, and IVR systems fall here. The design challenge is conversational flow, not visual hierarchy.

• Command-line interfaces (CLIs) predate GUIs and are still used heavily in developer tooling and DevOps workflows. Stripe's CLI, Vercel's CLI. Design here means information architecture and clear syntax, not aesthetics.

For most funded startups and SaaS products, GUI is the relevant type. The rest of this guide assumes that context.

How UI design actually works: the process

A functional UI design process has five stages, and skipping any one of them creates downstream problems that cost more to fix than the skip saved. Here is the sequence we use across retainer engagements at Daasign.

1. Research and requirements

Before opening Figma, define what the interface needs to do. That means user research, yes, but also technical requirements: what states does this component need to handle, what data is variable, what edge cases exist? A login screen has at least six states: default, focused, error, loading, success, and locked. Designing only the default state and handing it over is one of the most common reasons a front-end build takes three times longer than estimated.

On a McKinsey workstream we shipped a 40-screen enterprise tool in eight weeks because we front-loaded two weeks of requirements mapping. Every component had its states documented before a single pixel was placed. That is not slow. That is the only way to go fast at scale.

2. Design thinking: framing before executing

Design thinking as a framework gets a lot of abstract treatment. In practice, it means one thing for UI work: you do not jump to solutions. You define the problem the UI needs to solve for a specific user at a specific moment. For a B2B SaaS onboarding flow, that might mean the problem is not "users drop off at step 3" but rather "users cannot understand what step 3 is asking them to input." Those require completely different UI responses. One needs a progress redesign. The other needs inline contextual help and field-level microcopy.

3. Wireframing and information architecture

Wireframes establish layout and hierarchy without visual styling. Low-fidelity wireframes take one to two days per screen group. Skipping this stage and going straight to high-fidelity mockups is a common mistake in fast-moving teams. You end up with beautiful screens that are structured incorrectly, and restructuring a high-fidelity component library is a painful, expensive operation.

4. High-fidelity UI and design systems

This is where the visual layer is built: colour, type, spacing tokens, component states, and interaction behaviour. A proper design system in Figma with auto-layout, component variants, and a shared token library takes roughly three to six weeks to build from scratch for a mid-size SaaS product. Once it exists, shipping new screens takes 30 to 60 percent less time per sprint. Without it, every new screen is a negotiation with past decisions.

For Montblanc's e-commerce work, we built a component system that allowed the brand's internal team to extend new product pages without touching the core design logic. That kind of handoff is the goal of serious UI work.

5. Handoff, documentation, and translation

Translation here means translating design intent into developer-ready specifications. This is where most agency relationships break down. Figma files without proper annotation, without responsive behaviour documented, without interaction states specified, are not handoff-ready. They are a guessing game for the engineering team. Figma's Dev Mode helps, but it does not replace a designer who can speak to a developer and explain why a specific spacing decision was made.

If you are working with a design production partner, insist on handoff documentation as a deliverable, not an afterthought.

What good UI design actually costs

A freelance UI designer day rate in Western Europe and North America sits between $500 and $1,200 per day in 2025. A mid-size SaaS product redesign with a design system runs between $25,000 and $80,000 depending on scope, existing brand assets, and number of screen states required. A design-as-a-service subscription like Daasign starts significantly below the cost of a full-time senior designer, which in the US averages $130,000 to $160,000 per year in total compensation.

The mistake I see most often is founders budgeting for UI design based on screen count alone. Ten screens with a proper component system costs less long-term than thirty screens with no system. The variable is not quantity. It is structural debt.

For SaaS products specifically, a SaaS UI/UX design subscription model makes more economic sense than project-based work once you have product-market fit and need ongoing iteration. The break-even against a full-time hire typically happens around the six-month mark.

The part most guides miss: UI and conversion are the same thing

Every UI decision is a conversion decision. Button placement affects click-through rate. Input field length affects form completion. Typography contrast affects reading comprehension, which affects time-on-page, which affects purchase intent. None of this is theoretical. A 2014 study by Google found that users form aesthetic judgements about a UI within 50 milliseconds of seeing it. A 2023 Baymard Institute analysis found that 18 percent of US shoppers abandoned a checkout because the process was "too complicated or long." That is a UI problem, not a marketing problem.

The point most UI guides avoid is this: a visually impressive UI that does not reduce cognitive load is worse than a plain one that does. Awwwards-level aesthetics are not the goal. Clarity under pressure is the goal. We have won four Awwwards at Daasign, and the work that won was not the most visually complex. It was the most considered.

How to use UI in a sentence

When writing or speaking about UI in a professional context, it functions as both a noun and an adjective. "The UI needs a revision" uses it as a noun. "A UI designer should own the component library" uses it as an adjective modifying a noun. In product documentation and briefs, write it out as "user interface" on first mention, then abbreviate to UI. Avoid "the UI/UX" as a single compound noun: they are related but distinct disciplines, and conflating them in a brief almost always leads to a scope that is too vague to execute against.

UI requirements: what to define before you hire anyone

Before engaging a designer, agency, or subscription service, you should be able to answer five questions. What are the core user flows (aim for three to five primary flows)? What devices and screen sizes need support? What is the existing brand system, if any? What are the technical constraints on the front-end stack (React, Webflow, iOS, etc.)? And what does success look like in measurable terms, whether that is task completion rate, conversion rate, or time-to-complete a specific action?

Without answers to these five questions, any UI brief is underspecified. You will spend the first two to three weeks of an engagement just getting alignment that should have happened before the invoice was signed.

If you are an agency looking to offload UI production, the same logic applies. A design partner for agencies needs a clear brief, not a vague "make it look good" handoff. The cleaner the requirements you bring, the faster the output.

When UI design alone is not enough

UI design does not fix a broken product strategy. It does not compensate for missing features. And it does not rescue a go-to-market problem. The error I see in early-stage startups is using a UI refresh as a substitute for positioning work. A well-designed interface that communicates the wrong value proposition will convert worse than a plainer one that communicates the right one.

Similarly, UI work without a development partner who can implement it faithfully is wasted. Pixel-perfect design that gets approximated in code is a common failure mode. The gap between a Figma file and a live product can represent 20 to 40 percent of the original design intent disappearing. That gap is a process problem, not a design problem, and it is one reason subscription-based design models that include developer collaboration tend to produce better shipped outcomes than one-off project agencies.

For startups still figuring out the model, a startup design subscription typically costs $3,500 to $7,000 per month and covers ongoing UI work without the overhead of hiring, onboarding, or managing a full-time designer headcount.

Language resources and further context

The ISO 9241 standard covers ergonomics of human-system interaction and is the closest thing to an official specification for UI quality criteria. It defines usability across effectiveness, efficiency, and satisfaction, three dimensions that map directly to conversion, task completion time, and user retention. If you are ever in a procurement situation where UI quality needs to be formally assessed, ISO 9241-210 is the reference framework.

For teams building multilingual products, UI design for translation requires specific constraints: German text runs 30 to 40 percent longer than English, Arabic and Hebrew are right-to-left, and CJK (Chinese, Japanese, Korean) characters require different type-scale logic. Designing for English-only and retrofitting translation is a reliable way to break your layout in eight languages at once. Build internationalisation requirements into the design system from sprint one if your product serves more than one language market.

What to do next

If you have a UI problem you can describe in one sentence, you are ready to have a useful conversation. If you cannot describe it yet, start with the five requirements questions above and work until you can. Across 40-plus retainer engagements, the projects that move fastest are the ones where the founder comes in with a specific problem, not a general request for "better design."

When you are ready, book a 20-min intro and bring the one-sentence version of your UI problem. We will tell you in that call whether it is a UI issue, a UX issue, a strategy issue, or all three.