UX design shapes the whole user experience of a website; UI design shapes the visible interface on which that experience happens. The difference between UI and UX can be compared to a house: user experience is the floor plan with its routes and rooms, the user interface is the walls, lighting and signage. Good websites need both.
What is the difference between UI and UX?
The standard ISO 9241-210 describes user experience as a person's perceptions and responses resulting from the actual or anticipated use of a product, system or service. The Nielsen Norman Group puts it more broadly: it covers all aspects of the interaction with a company, its services and its products. For a website, UX therefore means questions such as: can I find what I am looking for? Do I understand the offer? Can I reach an enquiry in a few steps?
UI design provides the visible answer. It includes grids, type sizes, colours, buttons, form fields, icons and the states in between, for example when a field has been filled in wrongly. A beautiful interface on a confusing structure stays confusing. A good structure in a careless interface, on the other hand, earns little trust.
How does a project with UX and UI run?
A typical workflow begins by clarifying goals and audiences and moves from structure and sketches to design. In between come tests with real users, which reveal weaknesses before money goes into building.
| Phase | Focus | Typical deliverables |
|---|---|---|
| Understand | UX | Goals, audiences, main tasks, analysis of existing data |
| Structure | UX | Page structure, user journeys, wireframes |
| Test | UX | Prototype, observation of test users, list of weaknesses |
| Design | UI | Style direction, colours, typography, finished page designs |
| Systematise | UI | Components such as buttons and forms, states, spacing |
| Build | UI and UX | Development, checking against the design, improvement after launch |
On small projects the phases run leaner. One designer takes both roles and testing is limited to three to five people. That is often enough to find the biggest hurdles.
How do you write a brief for UX and UI?
A good brief answers a few questions clearly. First: what should the website do for your business, for example enquiries, bookings or orders? Second: who visits, and with what question? Third: which tasks must succeed quickly? Fourth: what data already exists, such as customer questions, analytics or complaints?
Add constraints such as budget, timeline, existing CMS and brand rules, plus two or three examples you like or dislike, each with a reason. That gives the design team criteria rather than a matter of taste.
How do you recognise good UX and good UI?
The Nielsen Norman Group publishes ten usability heuristics, such as feedback on system status, consistency and error prevention. They work well as a checklist for your own site. Good UI shows in legibility, unambiguous buttons and understandable error messages. Good UX shows in visitors reaching their goal without instructions.
- Goal and audience of the website described in two sentences
- The three most important visitor tasks named
- Page structure and wireframes agreed before colour designs
- Prototype tested with three to five people
- Buttons, forms and error messages designed consistently
- Success criteria set before launch
Conclusion: structure first, then interface
UX and UI complement each other: structure decides whether visitors arrive, the interface whether they feel at home there. How larger projects capture this in a reusable system is explained in What is a design system?. You will find more principles in What makes award-level web design?. If you want to rework your website, see our graphic and UI design service or describe your project.
