In the previous lesson you met the terms UX and UI. People often use them as if they were one word, but UX vs UI is a real distinction: they describe different kinds of thinking. Knowing the difference helps you read job descriptions, talk to your team, and decide what to focus on while learning.
UX: how it works and how it feels
User experience design deals with the journey. It asks who the users are, what they are trying to achieve, which steps they take, and where they get stuck. A UX designer works mostly with research notes, flows, structures and rough layouts. Much of UX is invisible: a good UX decision might be removing a whole screen.
UI: how it looks and responds
User interface design deals with the surface. It decides how each screen looks and behaves: layout grids, spacing, colours, fonts, icons, button states, error messages and small animations. A UI designer makes the product clear, consistent and on-brand, usually with a shared set of components.
UX vs UI: side-by-side comparison
| Question | UX design | UI design |
|---|---|---|
| Main focus | The problem, the user and the flow | The screens and the controls |
| Typical questions | Do users need this step? What do they expect next? | Is the main button easy to spot? Is the text readable? |
| Common outputs | Research findings, personas, user flows, sitemaps, wireframes | High-fidelity mockups, style guides, components, design tokens |
| Measured by | Task success, time on task, errors, satisfaction | Clarity, consistency, accessibility, visual polish |
| Figma features used most | FigJam boards, simple frames, prototype links | Auto layout, Components and variants, Variables, Dev Mode hand-off |
One screen, two kinds of decisions
Imagine a bus-ticket app and its “Select seat” screen. Here is how the two roles contribute to the same screen:
UX decisions
- Show the total fare before the user picks a seat, so there is no surprise later.
- Let the user pick the boarding point on this screen instead of on a later one, because research showed people care about it early.
- Allow changing the seat without starting the booking again.
UI decisions
- Available, booked and ladies-reserved seats use different colours and icons, so colour-blind users can tell them apart.
- The “Continue” button stays fixed at the bottom with enough contrast and a large touch area.
- Seat numbers use a readable size and the same font as the rest of the app.
Tip: A beautiful UI cannot rescue a broken flow, and a smart flow still fails if people cannot read the buttons. Users experience both at once, so the two disciplines must agree.
Who does what in a team?
In large companies you may see separate roles: UX researcher, interaction designer, UI or visual designer, UX writer. In startups and smaller agencies in India, one “UI/UX designer” often covers all of these and also works closely with front-end developers. Product designer is another common title for the same broad role.
As a beginner you should practise both sides. Employers usually want to see that you can explain why a design works (UX) and also make it look finished (UI).
Skills to practise on each side
| UX skills | UI skills |
|---|---|
| Interviewing users and listening without judging | Spacing and alignment on a grid |
| Mapping user flows and journeys | Choosing and pairing colours with enough contrast |
| Organising content and naming menu items | Setting a clear type scale |
| Writing problem statements | Building reusable components with states |
| Running usability tests | Preparing clean files for developer hand-off |
Notice that the UX column is mostly about thinking and talking with people, while the UI column is mostly about visual craft. Both need clear communication, because you must explain your decisions to teammates and clients.
Where UI meets code
UI decisions eventually become CSS. Colours become CSS colours, spacing becomes the box model, and Figma Variables map neatly to CSS custom properties. Designers who understand this make hand-off smoother and avoid designs that are hard to build.
Watch out: Do not call yourself “only UI” to avoid research. Even visual decisions, such as which button should be most prominent, depend on knowing what users are trying to do.
For a longer discussion with career tips, read the blog post UX vs UI design: the real difference. Next, we look at a structured way to approach any design problem: the design thinking process.