UX, the experience
Can people do what they came to do, quickly and without mistakes? It starts long before any colours are chosen.
UI/UX design in plain words
UX is how easy and pleasant something is to use. UI is what you see and touch: the buttons, text and colours. Good design is mostly invisible. People find what they came for without having to think about it.
- 4.5:1contrast for normal text
- 24 × 24 pxsmallest tap target
- 5 peoplefind most problems in a test
Find the six mistakes
This booking screen for a yoga studio has six small problems that cost real bookings. Tap anything that looks wrong. Each one you find comes with the rule that fixes it. Then switch to the fixed screen.
of 6 found
Tap a part of the screen that looks wrong.
- ?Not found yet
- ?Not found yet
- ?Not found yet
- ?Not found yet
- ?Not found yet
- ?Not found yet
UI and UX, the difference
Two words that are always said together, for two different jobs.
UI, the interface
Buttons, text, colours, icons and spacing. It turns the plan into something people can see and touch.
Both, one goal
A beautiful screen that confuses people fails. So does a clear one that nobody trusts.
The principles in plain words
These eight ideas are behind almost every good website and app. Hover or tap any item to see the details.
- Talk to five customers
- Watch how they do it today
- Write down their words
- Menu in your customers' words
- A few main menu items
- One clear job for every page
- Size, colour and space
- One main button
- Most important first
- 4.5:1 for normal text
- At least 16 px on phones
- Short lines, clear headings
- At least 24 × 24 px
- 44 px is better
- Space between them
- Buttons look like buttons
- Same words for the same action
- A small design system
- Hover, focus and pressed
- Loading and success
- Errors that say how to fix them
- Five people find most problems
- Give a task, then stay quiet
- Fix and test again
How a design project runs
Each step is cheaper to change than the next, so the big questions get answered early.
- Step 1
Research
Who uses it, what they need and what gets in their way today.
- Step 2
Structure
The pages, the menu and the paths people take from arriving to getting what they came for.
- Step 3
Wireframes
The layout in simple grey boxes, before colours and photos distract anyone.
- Step 4
Visual design
Colour, type, photos and components, built on your brand.
- Step 5
Test and refine
A clickable prototype tried by real people, then fixed, before anything is built.
Four UX myths
- Good design means prettyIt means easy. Pretty helps when it is also clear.
- People read everythingThey scan for the words they came for.
- More options make people happyEvery extra choice slows the decision.
- Testing needs a big budgetFive people and an afternoon are enough to start.
Questions about UI/UX design
What is the difference between UI and UX?
UX is the whole experience: whether people can do what they came for, easily. UI is the visible part of it: buttons, text, colours and layout. Good UX can exist with a plain UI, but a nice UI cannot save a confusing experience.
Does a small business website need UX design?
Yes, in a smaller form. Knowing what your customers look for, putting it first and making the next step obvious matters on a five-page website as much as in a big app.
Which tools do designers use?
Figma is the most common tool for wireframes, designs and clickable prototypes today. Pen and paper is still the fastest way to start.
Is accessibility part of UX?
Yes. Contrast, text size, tap targets and keyboard use make a website easier for everyone, not only for people with a disability. See our accessibility audit.
Can you design our website or app?
Yes. We research, design and test it with you, then build it. See UI/UX design.
Want a second pair of eyes on yours?
Send us your website address. We look at it the way your customers do and come back with what we would change first.