"UI/UX" is often written as one word, but they are two different disciplines. Mixing them up leads to pretty products that are frustrating to use, or functional products that look untrustworthy. Understanding the difference helps you hire the right people, brief designers correctly and judge your own website or app.
Key takeaways
- UX = how it works and feels (research, structure, flow, ease).
- UI = how it looks and responds (visual design, components, interaction details).
- Great products need both, in the right order: UX first, then UI.
- Good design is measured by user success and business results, not by decoration.
The house analogy
Think of building a house. UX is the floor plan: where rooms are, how you move between them, whether the kitchen is near the dining room. UI is the interior design: paint, furniture and lighting. A beautiful house with a confusing layout is exhausting to live in. A perfectly planned house with no styling feels cold. You want both.
What is UX design?
User experience design is about the whole journey a person has with a product or service: finding it, understanding it, using it, getting help and coming back. UX designers research real users, define problems, structure information and design flows that make tasks easy.
Typical UX activities
- User research: interviews, surveys, observation, analytics review.
- Personas and journey maps.
- Information architecture: organising content and navigation.
- User flows and wireframes (low-detail layouts).
- Prototyping and usability testing.
- Accessibility planning.
What is UI design?
User interface design is the visual and interactive layer people see and touch. UI designers choose colour, typography, spacing, icons, imagery, buttons and component behaviour (hover, focus, error states), and they ensure the product feels consistent and on-brand.
Typical UI activities
- Visual style: colour palettes, type scales, grids.
- Design systems and component libraries.
- High-fidelity mock-ups and responsive layouts.
- Micro-interactions and animation.
- Icon sets and illustration style.
- Handoff to developers with specifications.
UI vs UX: side by side
| Aspect | UX design | UI design |
|---|---|---|
| Core question | "Does it solve the user's problem easily?" | "Does it look and feel right to use?" |
| Focus | Journey, structure, usability | Visuals, components, interaction details |
| Main outputs | Research findings, flows, wireframes, prototypes | Style guides, mock-ups, design systems |
| Measured by | Task success, time on task, drop-off, satisfaction | Consistency, clarity, brand fit, visual accessibility |
| Typical tools | Figma, FigJam, Miro, Maze, analytics | Figma, Sketch, Adobe tools |
| Happens | Early and throughout | After structure is clear, then refined |
Examples that show the difference
Checkout page
- UX issue: asking users to create an account before buying, a five-step form and unexpected shipping costs at the end. Users abandon the cart.
- UI issue: tiny buttons, low-contrast text and inconsistent fonts make the page look untrustworthy.
- Fix: guest checkout, fewer fields and transparent costs (UX) plus clear buttons, readable text and a consistent style (UI).
Mobile banking app
- UX: a logical menu, quick access to common tasks, helpful error messages, secure but quick login.
- UI: tidy cards, legible numbers, clear colours for credits and debits, accessible touch targets.
Business website
- UX: a clear value proposition, easy-to-find services and contact details, and a short path to enquire.
- UI: a professional look, balanced white space and imagery that supports the message.
The design process
- Discover: goals, users, competitors, constraints, analytics.
- Define: problems to solve, success metrics, user stories.
- Structure: sitemap, flows and wireframes.
- Prototype and test: clickable prototypes tested with five or more target users; fix issues.
- Visual design: UI style, components and responsive layouts.
- Build: designers and developers collaborate; check implementation against design.
- Measure and iterate: analytics, heatmaps, feedback and A/B tests.
Principles of good UX and UI
- Clarity: users should understand what to do next without thinking.
- Consistency: same patterns, same meanings everywhere.
- Feedback: show system status, loading states and confirmations.
- Hierarchy: make the most important content and actions stand out.
- Accessibility: sufficient colour contrast, keyboard use, alt text, readable text sizes and labels. Accessible design benefits everyone.
- Performance: slow is bad UX. See our speed guide.
- Mobile-first: design for small screens and touch.
- Error prevention and recovery: make mistakes hard and fixing them easy.
Skills and tools
UX skills
Research, empathy, analytical thinking, information architecture, wireframing, usability testing, communication.
UI skills
Visual design, typography, colour theory, layout, design systems, motion, attention to detail.
Shared tools
Figma for design and prototyping, FigJam or Miro for workshops, Maze or Lookback for testing, Google Analytics or similar for behaviour data. Helpful free utilities include our colour converter and colour picker from image.
Careers and learning path
- Roles: UX researcher, UX designer, UI designer, product designer (combines both), interaction designer, UX writer.
- Learn: design fundamentals, Figma, research methods, accessibility standards (WCAG), basic HTML and CSS.
- Build: a portfolio of two or three case studies showing problem, research, process, solution and results; redesigning a real local business site is a good start.
- Adjacent path: many designers move toward front-end development. See our web developer roadmap.
Common mistakes
- Starting with colours and logos before understanding users.
- Designing for yourself instead of the audience.
- Skipping usability testing because "it looks fine".
- Copying competitors without understanding why choices were made.
- Ignoring accessibility and mobile.
- Treating design as a one-off project instead of continuous improvement.
Why it matters for your business
Every confusing step, unclear label or slow page silently loses customers. Investing in UX and UI is usually among the highest-return improvements you can make to a website or app. Our team combines design and engineering so what is designed is exactly what ships. Explore our website and app development service, see our portfolio, or ask for a free UX review of your site.
