123 Design StudioThe debate around UX vs UI is one of the most persistent sources of confusion in our industry, and it costs teams real money when roles, deliverables and expectations get blurred. User experience (UX) is the strategy and structure behind a product; user interface (UI) is the visual and interactive surface people actually touch. They overlap, they depend on each other, but they are not the same discipline.
Defining UX and UI without the jargon
UX design is concerned with how a product works and how it feels to use over time. It draws on research, information architecture, interaction design and usability principles documented by the Nielsen Norman Group. The UX designer asks: what is the user trying to accomplish, what stands in their way, and what is the shortest credible path to success?
UI design is concerned with how the product looks and responds at the level of pixels and state. Typography, color, spacing, iconography, component states, motion and visual hierarchy are UI territory. A strong UI translates the UX intent into something legible, consistent and pleasant, often codified in a design system.
UX is the skeleton and nervous system; UI is the skin and expression. Remove either and the product fails differently, but it fails.
Where the two disciplines overlap
The overlap is large and growing. Interaction design sits between them: a focus state, a loading skeleton, an error message, or a micro-interaction is both a usability decision and a visual one. Principles from Laws of UX by Jon Yablonski, such as Fitts's Law or the Aesthetic-Usability Effect, apply to both layers at once. Good practitioners refuse to draw a hard wall here.
Concrete examples
- Checkout flow: deciding to remove a forced account-creation step is UX. Choosing the button color, label and spacing for "Continue as guest" is UI.
- Search: deciding that filters should persist after a back-navigation is UX. Designing the filter chips, their selected state and tap target is UI.
- Onboarding: sequencing three screens that defer permissions until they are needed is UX. The illustration style, progress indicator and copy tone are UI.
- Forms: inline validation timing and error recovery are UX; the red border, helper text style and icon are UI.
UX vs UI at a glance
| Dimension | UX | UI |
|---|---|---|
| Core question | Does it work and solve the problem? | Is it clear, consistent and appealing? |
| Primary inputs | Research, analytics, user goals | Brand, design system, visual hierarchy |
| Typical artifacts | Flows, wireframes, journey maps, IA | Mockups, components, tokens, prototypes |
| Success metric | Task completion, fewer errors | Clarity, consistency, perceived quality |
| Fails as | Confusing, frustrating, abandoned | Ugly, inconsistent, hard to read |
How studios staff both
Smaller studios often hire hybrid "product designers" who carry a flow from research through high-fidelity UI. As teams scale, specialization returns: a UX researcher or strategist defines the problem, an interaction designer shapes the flow, and a UI designer or design-systems lead owns the visual language and component library. The healthiest setups keep these people in the same room rather than handing off over a wall.
Why the distinction matters in practice
Confusing the two leads to predictable failures: beautiful interfaces that no one can use, or perfectly logical flows that look untrustworthy and lose conversions. Treat UX and UI as two lenses on the same product. Validate the structure with users early, then invest in the surface once the flow is proven.
Working principles
- Prototype the flow in low fidelity before choosing colors.
- Test usability with real users, not stakeholders.
- Codify UI decisions in tokens and components to stay consistent.
- Keep research findings visible to the whole team.