User Interface

Definition

The user interface (UI) is the layer of a product through which a person directly interacts with it — the buttons, forms, type, colour, motion, and layout that translate the underlying system into something usable.

User interface is the meeting point between human and machine. Every visible pixel and every interaction (click, tap, hover, scroll, keystroke) is part of the UI. Good UI translates the model in the engineer's head into something a non-engineer can manipulate intuitively. Bad UI forces the user to learn the system rather than the other way around.

UI design is a discipline of constraints: hit areas big enough for fingers, contrast strong enough for sun-readable mobile screens, hierarchy clear enough that the primary action is unmistakable. It overlaps with graphic design and visual communication, but UI must also account for state, feedback, and edge cases — what does a button do while loading, on error, when disabled, when the network is offline?

Origin

The phrase "user interface" emerged in the 1970s alongside command-line computing; "graphical user interface" (GUI) was popularised by Xerox PARC's Alto in the early 1970s and brought to market by Apple's Lisa (1983) and Macintosh (1984).

How it works

Define the system's primary tasks and the order they happen in.
Establish a visual hierarchy — primary actions, secondary actions, content, navigation, system status.
Choose components from a design system (or invent only what's missing) so behaviour is consistent.
Specify every state — default, hover, active, focus, disabled, loading, error, empty, success.
Test contrast, hit area, and focus order against accessibility standards (WCAG 2.1 AA minimum).
Hand off with annotated specs or a design-token-driven Figma library that engineers can build from directly.

When to use it

Use when

On any product with a digital surface — web, mobile, desktop, kiosk, embedded device.
When existing UI feels inconsistent across screens — a design system can unify it.
When a redesign is justified by behaviour data, not just refreshing for its own sake.

Skip when

As decoration applied at the end. UI decisions baked into wireframes and prototypes shape conversion long before colour gets chosen.
Without a usability foundation. Beautiful UI on top of a confusing flow makes the confusion more confident.

Key metrics

Click-through rate on primary CTAs.
Form completion rate.
Accessibility audit score (Lighthouse, Axe, WAVE).
Visual consistency — % of UI built from system components vs. one-off styles.

Examples

The new UI uses a single accent colour to highlight every primary action.
A clean UI cannot rescue a confused information architecture.
Our UI library cut new-page implementation time from 2 days to 2 hours.

In practice at Makreate

Makreate UI work pairs visual systems with interaction logic, so every button behaves the same way across every page. A recent fintech client had 14 different button styles across their app — we audited, consolidated, and shipped a system of 4 button variants with documented states. New feature work shipped 3x faster after that, because engineers stopped guessing.

UX Design →

Common mistakes

Treating UI as decoration applied at the end. UI choices made in the wireframe stage determine conversion ceiling.
Inconsistent components across screens — every snowflake compounds into maintenance debt.
Ignoring loading, empty, and error states. Real software spends a lot of time in those states; design them.
Designing only the happy path. Production UI is mostly edge cases.
Picking colours and type before defining hierarchy. Hierarchy comes from contrast, not from preference.

Frequently asked

What's the difference between UI and UX?

UI is the surface — buttons, type, colour, layout. UX is the entire experience: UI + copy + performance + pricing + support + emotional outcome. UI is part of UX, not the same thing.

Do I need a design system for my UI?

If you have more than a handful of screens or more than one engineer building UI, yes. Design systems pay back in faster shipping, fewer bugs, and brand consistency. Below that scale, a small component library is enough.

How long does UI design take?

A small product (10–20 screens): 2–4 weeks. A full SaaS app (100+ screens) with a design system: 8–16 weeks. Brand-new products tend to take longer because the visual language is being invented, not reused.