Skip to Content
FoundationsUI vs UX

UI vs UX

If you’re new to design, you’ve probably heard the terms UI and UX thrown around together. Some people use them interchangeably — but they’re not the same thing. In fact, understanding the difference between UI and UX is one of the first steps in becoming a thoughtful designer.

UI vs UX

What’s the difference?

UI (User Interface) is about how the product looks and feels on the screen. Everything you see and interact with.

UI includes:

  • Visual design (colors, typography, spacing)
  • Layout & composition
  • Designing interactive elements like buttons, sliders, input fields
  • Style guides and design systems to keep everything consistent

What UI Designers do:

  • Design the aesthetics of the interface
  • Make interfaces accessible and easy to use
  • Ensure visual consistency across the app or website
  • Craft delightful interactions and microinteractions

UI is what turns UX plans into a visual, interactive experience.

UX is NOT just about screens.

It is about the entire journey someone goes through when interacting with a product or service.

It includes:

  • How the product works
  • How the flow feels from start to finish
  • Whether it’s helpful, logical, or frustrating
  • What happens before, during, and after using the product

What UX Designers do:

  • User research: Understanding who the users are and what they need
  • User flows: Mapping how people will move through the product
  • Wireframes: Basic outlines of screens (no colors or visuals yet)
  • Prototyping & testing: Checking what works before building the real thing

UX is all about making things easy, intuitive, and valuable for people.


UI and UX work best together

Let’s use a metaphor:

UX is the blueprint. UI is the paint, furniture, and decorations.

Imagine building a house:

  • UX is deciding how many rooms you need, where the kitchen should go, and how people will move around.
  • UI is choosing the colors, furniture, and lighting.

Without UX, the house might look beautiful—but have doors in the wrong places. Without UI, it might be perfectly planned—but feel dull, cold, or hard to live in.

You need both:

  • A product that works well (UX)
  • A product that looks and feels right (UI)

Together, they create a complete, satisfying experience.

ConceptUI (User Interface)UX (User Experience)
FocusVisuals, interaction, layoutFunctionality, logic, flow
GoalMake it beautiful, accessible, and usableSolve user problems, make it usable
Concerned withColors, typography, aestheticsStructure, research, strategy
Typical outputHigh-fidelity designs, mockups, UI kitsWireframes, prototypes, journey maps
ToolsFigma, Sketch, Adobe XD, FramerFigJam, Miro, Notion, Figma (for wireframes)

Real-world example: Booking a flight

  1. UX ensures:
    • You can search for flights quickly
    • It’s clear how to choose dates and times
    • Payment is secure and easy
    • You get a confirmation email right away
  2. UI ensures:
    • Buttons are easy to tap
    • Colors guide your attention
    • Fonts are easy to read
    • The interface looks polished and trustworthy
Last updated on