What is the difference between UX and UI?
UX (user experience) design is about whether a product works for the person using it: what they came to do, the steps it takes, where they get stuck. UI (user interface) design is about what they see and touch on each screen: layout, type, colour, buttons and the way elements respond. A UX designer decides that a checkout needs three steps instead of six; a UI designer decides how each of those three screens looks.
The two overlap constantly, which is why most job titles now say "UI/UX designer" and why the vocabulary below mixes both. A beautiful interface on a confusing flow still loses users, and a well-planned flow with unreadable buttons does too.
UX design terms
These are the words you hear early in a project, before anything is drawn.
1. User persona
A short profile of a typical user: who they are, what they are trying to do and what gets in their way. A good persona is built from real research (interviews, analytics, support questions), not imagination. It keeps the team designing for an actual person rather than for themselves.
2. User flow
The path a user takes to finish one task, drawn as boxes and arrows: landing page, product page, cart, checkout, confirmation. Mapping the flow shows extra steps and dead ends before they are designed. A user journey is the wider version, covering what happens before and after the screens, such as an email or a phone call.
3. Information architecture
How content is organised, grouped and labelled: the menu structure, the categories, what sits on which page. Usually shown as a sitemap diagram. When users say a site is "confusing", the information architecture is often the cause, not the visual design.
4. Usability testing
Watching real people try to complete tasks on a design or prototype, without helping them. Five testers will usually reveal the biggest problems. It can be done in person or remotely with tools such as Maze or Lookback.
5. Affordance
A visual clue that tells people what they can do with an element. A raised button looks pressable; an underlined word looks clickable; a handle looks draggable. When an element has weak affordance, such as a text link styled exactly like body text, people miss it.
UI design terms
These come up once screens are being designed and reviewed.
6. Visual hierarchy
The order in which the eye reads a screen, set by size, weight, colour, contrast and position. The most important thing on the page should be the first thing people notice. If everything is bold, nothing is.
7. Padding, margin and white space
Padding is the space inside an element, between its edge and its content. Margin is the space outside, between one element and the next. White space (or negative space) is the overall empty space on a screen. Used consistently, on a scale such as 4, 8, 16, 24 and 32 pixels, spacing is most of what makes an interface look deliberate. It also groups content: elements placed close together read as related, which is the law of proximity at work.
8. Grid
The invisible columns and gutters that elements line up to. Websites often use a 12-column grid on desktop, collapsing to four columns on mobile. A grid is why a well-designed page looks tidy even when every section is different.
9. Call to action (CTA)
The element that asks the user to do the main thing: "Get a quote", "Add to cart", "Book a call". A page should have one primary CTA, styled to stand out, and secondary actions styled more quietly.
10. Breadcrumbs
The small trail near the top of a page (Home / Work / S-Line) showing where the page sits in the site. Breadcrumbs help users on deep pages find their way back, and breadcrumb markup helps Google show the page's position in search results.
Wireframe, mockup and prototype: what is the difference?
These three words describe stages, and mixing them up is the most common cause of confused design feedback.
11. Wireframe
A low-detail layout made of grey boxes and labels, with no colour or imagery. It settles what goes where and in what order. Comment on structure and content at this stage, not fonts.
12. Mockup
A static, full-colour design of the screen with real type, colours and images. It looks like the finished page but does nothing when clicked. In graphic design the word also means a realistic preview of artwork on an object; see our guide to graphic design mockups.
13. Prototype
A clickable version of the mockups, linked so you can move through a flow as if it were the real product. On client projects we build prototypes in Figma so people can try the flow on their own phone before any code is written, as we did on the S-Line project.
| Stage | Looks like | Answers the question |
|---|---|---|
| Wireframe | Grey boxes and labels | What goes where? |
| Mockup | The finished design, static | What will it look like? |
| Prototype | Clickable screens | How will it work? |
More UI and UX terms in one line
A quick glossary of other user interface terms you will meet in briefs, reviews and developer handovers.
| Term | What it means |
|---|---|
| 60-30-10 rule | A colour balance guide: 60% dominant colour, 30% secondary, 10% accent for actions |
| A/B test | Showing two versions to different users and measuring which performs better |
| Above the fold | The part of a page visible before scrolling |
| Accessibility (a11y) | Designing so people with visual, motor, hearing or cognitive impairments can use the product, measured against WCAG |
| Alt text | A text description of an image, read aloud by screen readers |
| Card | A contained block grouping an image, title and action, often in a grid |
| Component | A reusable UI element, such as a button or input, built once and used everywhere |
| Contrast ratio | How much text stands out from its background; WCAG asks for at least 4.5:1 for body text |
| Dark pattern | A design that tricks users into something they did not intend, such as a hidden unsubscribe link |
| Design system | The documented set of components, tokens and rules a product is built from |
| Design tokens | Named values for colour, spacing and type shared between design files and code |
| Empty state | What a screen shows when there is no data yet, such as an empty cart |
| Focus state | The visible outline showing which element is selected when using a keyboard |
| Hamburger menu | The three-line icon that opens a hidden navigation menu |
| Heuristic evaluation | An expert review of a design against established usability principles |
| Hover state | How an element changes when a mouse pointer is over it |
| Microcopy | Small interface text: button labels, hints, error messages |
| Micro-interaction | A small animated response to an action, such as a heart filling when tapped |
| Modal | A window that opens over the page and must be dealt with before continuing |
| MVP | Minimum viable product: the smallest version that can be released to learn from real users |
| Onboarding | The first-run screens or hints that teach a new user the product |
| Responsive design | One layout that adapts to phone, tablet and desktop screen widths |
| Skeleton screen | Grey placeholder shapes shown while content loads |
| Stepper | A progress indicator such as "Step 2 of 4" in a multi-step form |
| Toast | A brief message that appears and disappears on its own, such as "Saved" |
| Tooltip | A small label that appears on hover or tap to explain an element |
| Vertical rhythm | Line heights and spacing set to multiples of one base unit so content aligns down the page |
| Wizard | A multi-step flow that asks for one thing per screen, such as checkout or onboarding |
Accessibility deserves a special mention. In the EU, the European Accessibility Act has applied to many online shops and digital services since June 2025, so clients selling into Europe increasingly ask for WCAG-level contrast, keyboard navigation and alt text by default.
How to use these terms in a design review
You do not need the whole vocabulary to brief a designer, but a few terms make feedback much faster. Before a review, ask which stage you are looking at:
- On a wireframe, comment on order, content and what is missing. "The pricing section should come before testimonials" is useful; "I don't like grey" is not.
- On a mockup, comment on visual hierarchy, colour, type and imagery. Say what you want people to notice first.
- On a prototype, try to complete a real task, such as booking a call, and note where you hesitated.
Describe problems rather than solutions. "I couldn't find the contact button" lets the designer fix the cause, which may be weak affordance or poor hierarchy; "make the button red" fixes one symptom. Our posts on common UI design mistakes and the UX design process show these terms in context.
Sources
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (w3.org)
- Nielsen Norman Group: Why You Only Need to Test with 5 Users, Jakob Nielsen (nngroup.com)
- European Commission: European Accessibility Act, Directive (EU) 2019/882, applying from 28 June 2025 (commission.europa.eu)
Common questions
- What do UI and UX stand for?
- UI stands for user interface: the screens, buttons, text and visuals a person interacts with. UX stands for user experience: how easy and satisfying it is to get something done with the product as a whole. UI is one part of UX.
- Which UI design terms should a beginner learn first?
- Start with the ones you will hear in every review: wireframe, mockup, prototype, padding, margin, grid, visual hierarchy and call to action. Then learn the accessibility terms, such as contrast ratio, focus state and alt text, because clients and developers will ask about them.
- Do clients need to know UI and UX terms?
- Not to hire a designer. Knowing wireframe, mockup and prototype does make reviews faster, because you know what stage you are commenting on and what kind of feedback helps.
- What is a design system?
- The full set of reusable components, design tokens and usage rules a product is built from, documented so designers and developers make the same decisions. Brand guidelines are the print-era equivalent.
- What is the difference between padding and margin?
- Padding is the space inside an element, between its border and its content. Margin is the space outside it, separating it from neighbouring elements. Both should come from one spacing scale so the layout stays consistent.
- What is affordance in UX design?
- Affordance is any visual clue that shows how an element can be used, such as a button that looks pressable or a link that looks clickable. Weak affordance is a common reason users miss important actions.
