People often say "UI/UX" as if it were one job. They are closely connected, but they answer different questions:
- UX (User Experience): Does the product solve the user's problem easily? It covers research, flows, structure and usability.
- UI (User Interface): How does it look and feel? It covers layout, colour, typography, buttons and visual consistency.
A beautiful app that confuses users has good UI and bad UX. A plain app where everything is easy to find has good UX that could use better UI.
UI vs UX at a glance
| UX design | UI design | |
|---|---|---|
| Main question | Is it useful and easy? | Is it clear and attractive? |
| Outputs | Personas, user flows, wireframes, usability findings | Mockups, design systems, components, prototypes |
| Measured by | Task success, time on task, drop-off | Consistency, readability, visual hierarchy |
| Typical tools | Interviews, FigJam, Maze | Figma, design tokens, icon sets |
The UX design process (5 steps)
Most teams follow a version of Design Thinking. Here it is applied to a real problem: *students abandon a course enquiry form on mobile*.
1. Empathise: research the users
Talk to 5 to 8 real users and watch them use the product. Look at analytics: where exactly do people drop off?
*Finding*: 60% leave at the "Qualification details" step; the dropdown has 40 options and is hard to scroll on a phone.
2. Define: write the problem clearly
"Prospective students on mobile need to request course information in under a minute, but the long form makes them give up."
A clear problem statement stops the team from jumping to random solutions.
3. Ideate: generate many solutions
Sketch ideas quickly: shorter form, WhatsApp enquiry, ask qualification later, smart defaults. Pick the ideas with the best impact for the least effort.
4. Prototype: make it testable
Build a clickable prototype in Figma: name, phone, course, then submit. Move qualification to a follow-up call.
5. Test: validate with users
Give 5 users the prototype and one task: "Ask about the Data Analytics course." Measure completion and time. Iterate on anything that confuses them.
*Result*: average completion time dropped from 2 minutes 40 seconds to 35 seconds in testing.
Five users typically reveal most of the major usability problems. Test early and often rather than once at the end.
Core UI principles every beginner should know
- Visual hierarchy: the most important thing should be the most noticeable (size, weight, colour, position).
- Consistency: the same action looks the same everywhere. A design system enforces this.
- Spacing: use a fixed scale (4, 8, 16, 24, 32 px). White space makes screens easier to scan.
- Contrast: text must be readable. WCAG recommends at least 4.5:1 contrast for normal text.
- Feedback: every action needs a response: loading states, success messages, clear errors.
Skills and tools for beginners
- Figma: auto layout, components, variants, prototyping.
- Fundamentals: typography, colour, grids, accessibility.
- Research basics: interviews, usability testing, simple surveys.
- A portfolio of case studies: show the problem, your process and the measurable result, not just pretty screens.
- Basic HTML/CSS knowledge: it helps you design things developers can actually build.
How AI is changing UI/UX work
AI tools can generate layout ideas, placeholder copy and first-draft wireframes in seconds, and summarise interview notes. Designers who use AI well spend less time on repetitive work and more time on research and decisions. AI cannot replace talking to real users or judging what is right for the business.
Interview questions
- What is a wireframe vs a mockup vs a prototype? Wireframe: low-detail structure. Mockup: high-fidelity static design. Prototype: clickable flow for testing.
- What is a persona? A research-based profile of a typical user, with goals and pain points, used to guide decisions.
- How do you handle a stakeholder who disagrees with research findings? Show the evidence (recordings, metrics), propose a quick test, and agree on what success looks like.
Next steps
Redesign one screen of an app you use daily and document the process as a case study. Then learn Flexbox and Grid to understand how designs are built, or join the UI/UX + AI course.