The short answer

UX - user experience - is everything about how it feels to accomplish something with a product: whether the flow makes sense, whether steps are missing or unnecessary, whether the person ends up frustrated or done. UI - user interface - is the visual and interactive surface that experience travels through: the screens, layout, typography, colors, and components. UI is part of UX; UX is bigger than UI.

A product can have a beautiful UI and terrible UX - gorgeous screens arranged into a flow that loses people. It can also have plain UI and excellent UX - an ugly internal tool everyone finds effortless. The two qualities move independently, which is exactly why the words are worth keeping apart.

What UX covers

UX work asks: does this product let the right person accomplish the right thing, with the least friction? Its raw material is user behavior, and its typical outputs are structural:

  • Research - interviews, usability tests, and analytics that establish what users actually need and where they struggle.
  • Flows and information architecture - what steps exist, in what order, and how the product's content is organized so people can find things.
  • Wireframes and prototypes - low-fidelity versions of the structure, tested before the expensive visual work happens.
  • Usability judgments - is the error recoverable, is the wait explained, does the empty state teach.

The tell of UX work: you can evaluate it without seeing final visuals. A flow diagram on a whiteboard can already be right or wrong.

What UI covers

UI work asks: at this moment, on this screen, is everything clear, consistent, and comfortable to use? Its raw material is visual and interactive detail:

  • Layout and hierarchy - what the eye finds first, second, third; whether the important action reads as important.
  • Typography, color, and spacing - the craft that makes screens legible and makes fifty of them feel like one product.
  • Components and their states - buttons, forms, and controls, in every state they can be in - the layer a design system exists to standardize.
  • Micro-interactions - the hover, the transition, the loading state; small physics that make an interface feel responsive rather than inert.

The tell of UI work: you must see it to evaluate it. It lives at the surface, at full fidelity.

Side by side

The axes that actually separate the two in day-to-day work:

  • Question asked. UX: "can people get this done?" UI: "is this screen clear and well-made?"
  • Unit of work. UX works on journeys - multi-step paths through the product. UI works on screens and components.
  • When it happens. UX judgments come earliest - structure is cheapest to change before visuals exist. UI is where the finished quality gets made. In practice both loop rather than hand off once.
  • How it's measured. UX shows up in task completion, support tickets, and drop-off points. UI shows up in comprehension, brand feel, and how often people press the wrong thing.
  • What "bad" looks like. Bad UX: "I gave up." Bad UI: "I found it, but it was squinty, cramped, and off-brand."

Why the line blurs

Job titles muddy this on purpose. Most companies hire "product designers" who do both, because on real teams the work interleaves: moving a button (UI) changes what people notice next (UX); simplifying a flow (UX) deletes screens someone styled (UI). The distinction describes kinds of work, not necessarily two separate people.

The vocabulary still earns its keep at the boundaries: a usability researcher is doing UX with no UI in sight; a design-system maintainer is doing UI craft at scale. And in feedback - the place the words get misused most - the distinction decides who can act on what you said.

Using the words well

Practical guidance, especially for managers reviewing design work:

  • "Users won't understand they need to connect their account before importing" - that's UX feedback. It questions the flow, and it's actionable at the structure level.
  • "This screen feels cramped and the primary button doesn't stand out" - that's UI feedback. It accepts the flow and questions the surface.
  • "I don't like it" is neither. Say which one you mean - whether the path is wrong or the surface is wrong - and the review gets shorter and the fix gets cheaper.

One question sorts almost any comment: would this still be a problem if the screens were redrawn beautifully? If yes, it's UX. If no, it's UI.

References