Key takeaways
- UX (user experience) design is about how a product works: journeys, structure and ease of use.
- UI (user interface) design is about how it looks and feels: layout, type, colour, components and motion.
- UX comes first — research and structure — then UI turns it into polished screens.
- A beautiful interface on a confusing journey still loses customers, and vice versa.
- On small teams one designer often does both; the skills are different but overlap.
UI and UX are often written together as "UI/UX", which makes them sound like one thing. They are closely linked but answer different questions: UX asks "does this work for the people using it?"; UI asks "is it clear, attractive and consistent?"
What is UX design?
User experience (UX) design shapes how a product works from the user's point of view. It starts with research — who the users are, what they are trying to do and where they struggle — and turns that into structure: user journeys, information architecture, wireframes and flows.
- User research and interviews.
- Journey maps and user flows.
- Information architecture: how content and navigation are organised.
- Wireframes and prototypes.
- Usability testing.
What is UI design?
User interface (UI) design turns that structure into the screens people see and touch: layout, typography, colour, icons, buttons, states and motion. It makes the product clear, consistent and on-brand, and defines the components developers build from.
- Visual design of every screen and state.
- Typography, colour and spacing systems.
- Components and design systems.
- Interaction details and micro-animations.
- Accessibility: contrast, sizes and focus states.
An example: an online store's checkout
- UX decisions: How many steps checkout has, whether guest checkout is allowed, the order of fields, what happens when a card fails.
- UI decisions: How the steps look, the style of the form fields and error messages, the colour and size of the pay button.
A checkout with lovely buttons but too many steps loses sales (a UX problem). A logical checkout with low-contrast text and tiny tap targets loses sales too (a UI problem). Our ecommerce UX design principles show both in action.
How UI and UX work together
- Research: UX research defines the problem and the users.
- Structure: UX turns it into flows and wireframes, tested early.
- Visual design: UI turns wireframes into polished, branded screens.
- Prototype and test: Both test the result with users and refine it.
- Handover: A design system and specs guide development.
Do you need a UI designer, a UX designer or both?
Large teams often have specialists. Most businesses work with designers who cover both, leaning one way or the other. What matters is that both kinds of question get answered: does it work, and is it clear and appealing?
Frequently asked questions
Which comes first, UI or UX?
UX comes first: research and structure define how the product works, then UI design turns it into polished screens.
Is UX design only for apps?
No. Websites, online stores, software and even forms and emails all have a user experience to design.
What tools do UI and UX designers use?
Figma is the standard for design and prototyping, alongside research, analytics and testing tools.
Our UI/UX design team researches, designs and tests interfaces for websites, stores, apps and SaaS products, and hands over files your developers can build from.
Filed under
Tags
Jay Patel