UI and UX are often used interchangeably. They’re different things, and understanding the distinction helps you ask better questions when evaluating design work.

UI vs. UX: The Actual Distinction

User Experience (UX) design is concerned with how a product feels to use. It encompasses the whole journey: discovery, onboarding, completing tasks, encountering problems. UX asks: does this product help users accomplish their goals, and does the process feel reasonable?

User Interface (UI) design is concerned with how a product looks and how individual elements function. Typography, colour, spacing, button states, icons, layout. UI asks: does this interface communicate clearly and behave consistently?

A useful analogy: a building’s UX includes how easy it is to navigate from the entrance to your office, how the space makes you feel, how well it supports the activities happening inside. The UI is the materials, finishes, signage, and lighting.

Good UX and poor UI: a product that helps users accomplish tasks efficiently but looks cheap or inconsistent.

Good UI and poor UX: a product that looks polished but is confusing to navigate.

The goal is both.

Core UX Design Principles

Make the user’s goal clear, not the system’s logic. Navigation and labels should map to user goals (“Send money”, “View my statements”), not to the underlying system architecture. Users don’t care how your database is structured.

Reduce friction at decision points. Every decision a user has to make is a cognitive cost. Remove decisions where possible. Default to sensible options. Save state so users don’t repeat themselves.

Provide clear feedback. When a user takes an action, they need to know what happened. Confirmation messages, loading states, and error messages aren’t polish — they’re essential to the interaction contract.

Design for error recovery. Users make mistakes. The question isn’t whether they’ll click the wrong thing; it’s how hard it is to recover. Undo, confirmation dialogs for irreversible actions, and clear error messages are not optional for serious products.

Accommodate different levels of expertise. New users need guidance. Experienced users need efficiency. These goals conflict. Solve the conflict with progressive disclosure, keyboard shortcuts, and customisable interfaces rather than choosing one audience over the other.

Core UI Design Principles

Consistency. Buttons that look the same should behave the same. Spacing should follow a grid. Typography should follow a scale. Consistency reduces the cognitive load of interpreting the interface on each new screen.

Hierarchy. Not all information is equally important. Typography weight, size, and colour communicate hierarchy. The most important elements should be most visually prominent.

Contrast. Text must have sufficient contrast against its background to be readable. This is an accessibility requirement (WCAG 2.1 AA minimum 4.5:1 for normal text) and a basic usability requirement.

Affordance. An element’s appearance should suggest how to interact with it. Buttons should look clickable. Text inputs should look editable. Sliders should look draggable.

Alignment. Elements aligned to a grid look intentional. Misaligned elements look accidental, even if their content is correct. Alignment is a major component of perceived quality.

The UX Design Process

Discovery and research. Understand users, their goals, and their frustrations before designing anything. User interviews, analytics review, competitive analysis.

Information architecture. Define the structure of the product before designing individual screens. What are the primary sections? How do they relate? Card sorting and tree testing help validate IA before building.

Wireframing. Low-fidelity representations of key screens and flows. Resolve layout and flow decisions here, before investing in visual design.

Prototyping. Clickable prototypes that can be tested with users. Figma is the standard tool. The goal is to find problems before development starts.

Usability testing. Put the prototype in front of real users and observe them completing tasks. Five participants will reveal most major usability issues. This is not optional.

High-fidelity design. Visual design based on validated wireframes. Typography, colour, imagery, component states.

Handoff. Delivering designs to engineering in a format they can implement. Annotated Figma files, design tokens, and component libraries.

Implementation review. Checking the built product against designs. Catching discrepancies before launch.

Design Tools in 2026

Figma is the industry standard for UI/UX design and prototyping. Nearly all professional design teams use it. Its collaboration features, component system, and prototyping capabilities have made it the default tool for the past several years.

FigJam (part of Figma) for collaborative whiteboarding, user journey maps, and workshop activities.

Maze and UserTesting for remote usability testing. Record sessions with real users completing tasks in your prototype.

Hotjar and Microsoft Clarity for analytics — heatmaps, session recordings, and funnel analysis on live products.

Zeplin was the standard handoff tool before Figma’s dev mode. Most teams now use Figma directly for handoff.

Measuring Design Quality

Good design has measurable outcomes:

  • Task completion rate: What percentage of users complete key flows without errors or abandonment?
  • Time on task: How long does it take to complete common tasks?
  • Error rate: How often do users make mistakes (wrong inputs, navigation errors)?
  • Conversion rate: For commercial products, does the design drive the actions that generate revenue?
  • Customer satisfaction (CSAT/NPS): How do users feel about the product?

These metrics should be established before design work begins and measured after implementation.

If you’re building a product and need design from scratch, or if you’re evaluating whether your existing design is working, get in touch. We build both the design and the product.