UI (user interface) is the presentation layer of a website: layout, type, colour, buttons, icons, and the controls on a screen. UX (user experience) is the quality of the path through that interface: whether a visitor understands where they are, what to do next, and whether the task succeeds.
A handsome page can still be a poor experience. A clear experience can still look unfinished. Web design work has to cover both, or the site either confuses people or fails to look credible.
What UI decisions cover
- Visual hierarchy: what the eye hits first
- Spacing, alignment, and consistency between pages
- Button labels that look clickable
- Colour used for meaning, not only for brand decoration
- States: hover, focus, error, disabled, and success
- How the same component looks on a phone and on a desktop
UI is what you can point at in a screenshot. It still includes behaviour you can see, such as a menu opening.
What UX decisions cover
- Who the visitor is and what they came to do
- The order of steps, including what happens after a form is sent
- Navigation labels and grouping, which is information architecture
- How errors are explained and recovered from
- Whether the mobile path is a real path, not a squeezed desktop
- Trust cues placed where a decision happens: delivery area, price, contact, credentials
UX shows up in a task. “Find the Johor service page and request a quotation” is a UX test. “Do you like the blue?” is a UI opinion.
How they show up on one page
| Moment | UI question | UX question |
|---|---|---|
| Landing | Is the heading readable and on brand? | Does the heading tell the visitor they are in the right place? |
| Menu | Are the items visible and tappable? | Are the labels words the visitor would use? |
| Form | Are fields aligned and errors visible? | Are you asking only for what the next step needs? |
| Confirmation | Does the success message look intentional? | Does the visitor know what happens next and when? |
Checking UI and UX on the same task
- Pick one task a real visitor performs
- Walk it on a phone without help
- Note where the meaning was unclear
- Note where the control was hard to see or tap
- Fix the path first, then polish the visuals
A practical example
A services page uses a strong photograph and a precise grid. That is UI. The only way to ask for a visit is a “Submit” button in the footer that opens a form labelled with internal department names. Visitors stall. The UX fix is a plain “Request a site visit” action in the first screen, a short form, and a confirmation that states a person will reply on a business day. The photograph can stay.
The same split applies when a marketing site and a logged-in tool live together. The difference between those products is covered in website vs web application. Interface polish does not turn a brochure into an operations system, and a capable system can still be unpleasant to use.
Key takeaways
- UI is what people see and operate. UX is whether the task works.
- Judge UI in the layout. Judge UX by completing a task.
- Fix confusing steps before you restyle them.
- Phone and desktop can fail independently.
FAQ
Can one person do both?
Often, on a small site. The work is still two checks: visual consistency, and task completion. Skipping the task check is how pretty sites fail.
Is UX only for web applications?
No. A five-page company site has UX: finding a phone number, trusting an address, and sending an enquiry. Complexity grows with the product, but the idea is the same.
Where do loading speed and accessibility fit?
They support both. A layout people cannot reach by keyboard fails UX and UI. Speed metrics are a separate guide; do not treat this page as a performance audit.