Theory
You built FestConnect. Was it any good?
In web and mobile courses you BUILT FestConnect, the fest registration app: HTML, buttons, a working form. It functioned.
But ask a first-year student to actually register on it, and watch: they hunt for the button, mistype the date, give up halfway. The code was correct; the EXPERIENCE was painful.
This subject is the missing half: not how to build a product, but how to make it good to USE. And its very first idea is the distinction every exam tests: UI versus UX.
Theory
The restaurant, not the plate
Walk into a restaurant. The UI is the plating and the menu design: how the food LOOKS, how the card reads: the visible surface.
The UX is the WHOLE evening: how easily you booked, whether the waiter was kind, how long the food took, whether you left happy and would return.
Beautiful plating (great UI) cannot save a 2-hour wait and a rude waiter (bad UX). UI is one part of UX: and a product can look gorgeous yet feel awful to use.
Theory
UI and UX, formally
UI (User Interface) is the visual and interactive surface of a product: what the user SEES and TOUCHES: screens, layout, colours, buttons, icons, typography.
UX (User Experience) is the overall experience of using the product: how easy, useful, efficient and SATISFYING the whole journey feels: from before opening it to after finishing the task.
The relationship: UI is a PART of UX. The interface is one ingredient of the experience, alongside speed, clarity, usefulness, and how the product makes you feel. Great UX needs good UI plus much more.
At a glance
UI vs UX (the distinction the exam wants)
| Aspect | UI (User Interface) | UX (User Experience) |
|---|---|---|
| What it is | The visual/interactive surface | The overall experience |
| Question | How does it LOOK? | How does it FEEL to use? |
| Focus | Screens, colour, layout, buttons | Journey, ease, usefulness, satisfaction |
| Scope | One part of UX | The whole; UI is inside it |
| FestConnect example | The register button's colour and shape | Whether a student registers without frustration |
Theory
Where UI/UX lives in building a product
UI/UX is not a coat of paint added at the end. It runs ACROSS the product lifecycle:
research (who are the users, what do they need) → design (structure, flows, wireframes) → prototype → test with real users → iterate → then develop.
Designing BEFORE coding is the point: a flaw caught in a wireframe costs minutes to fix; the same flaw caught after FestConnect is fully built costs a rewrite. Good UI/UX reduces friction, raises adoption and satisfaction, and is far cheaper to get right early: which is why designers work upstream of developers.
Quiz
A FestConnect screen has beautiful colours and elegant fonts, but students cannot figure out how to actually submit their registration. How is this best described?
- Good UI but poor UX: it looks great yet the experience of using it fails
- Good UX but poor UI: the experience is fine, only the looks are off
- Both good UI and good UX
- Neither UI nor UX applies to registration screens
Show the answer
Good UI but poor UX: it looks great yet the experience of using it fails
Elegant visuals are good UI (the surface looks right), but if users cannot complete their core task, the EXPERIENCE fails: poor UX. This is the single most important distinction in the subject and its favourite exam scenario: looks and usability are different axes, and a pretty product can be unusable. Option B reverses the diagnosis. Option C ignores the failed task. Option D denies the concepts apply, when registration is exactly a UX-critical flow. The lesson: never mistake a beautiful interface for a good experience; UI is necessary but nowhere near sufficient.
Think first
Can UX be good with bad UI, or vice versa?
Think of a product that is ugly but a joy to use, and one that is gorgeous but painful. What does each pairing prove about the UI/UX relationship? Then tap.
Show the answer
Both pairings happen, and both are instructive. Ugly but usable (think a plain government portal that actually lets you pay a bill in 3 clicks): weak UI, decent UX: proving usefulness and ease matter more than beauty. Gorgeous but painful (a stunning app where you cannot find anything): strong UI, poor UX: proving looks cannot rescue a broken journey. Together they prove UI is a PART of UX, not the whole: you need good UI AND ease AND usefulness for great UX. The mature designer optimises the whole experience, never just the surface.
Watch out
UI/UX confusions to avoid
Using UI and UX as synonyms: they are DIFFERENT: UI is the surface, UX the whole experience; UI sits inside UX. This is the field's defining distinction: never blur it.
"UX = making it pretty": prettiness is UI; UX is about the experience working: useful, easy, satisfying.
Treating design as end-stage decoration: UI/UX spans the whole lifecycle and belongs BEFORE coding, where fixes are cheap.
Abstract design-speak: ground every point in a real FestConnect screen and a real student, not blog buzzwords.
Theory
The subject is one long project
This whole subject runs ONE real design process on FestConnect: you will research its users (Unit 2), design its structure and screens (Unit 3), make it look right (Unit 4), and test, iterate and make it accessible (Unit 5). By the end you will have redesigned FestConnect properly. Next lesson names the philosophy behind all of it: user-centered design: the radical idea that you design for the USER, not for yourself.
Summary
Key takeaways
- UI (User Interface) is the visual/interactive surface: what users see and touch (layout, colour, buttons).
- UX (User Experience) is the overall experience: how easy, useful and satisfying the whole journey feels.
- UI is a PART of UX; a product can have good UI but poor UX (pretty yet unusable).
- Analogy: UX is the whole restaurant evening; UI is the plating.
- UI/UX spans the product lifecycle (research -> design -> prototype -> test -> iterate -> develop) and belongs before coding.
- Designing early makes fixes cheap; good UI/UX raises adoption and satisfaction.
- Memory hook: UI is how it looks, UX is how it feels to use.