Web design proposals often list “UX/UI design” as a single line item, but UX vs UI design isn’t a matter of wording. They are two different jobs, and a proposal can promise both while really delivering only the second.
Here’s a definition you can repeat in a meeting, a side-by-side comparison, one enquiry form split into UX and UI decisions, and a checklist for your next project.
The short answer
UX (user experience) design is how the whole experience works and feels. UI (user interface) design is the screens, controls and visual layer people actually see and touch.
The difference between UX and UI comes down to this. UX decides what visitors need, what the site should contain and in what order, and how someone gets from arriving to getting what they came for. UI decides how each of those moments looks and responds: layout, type, colour, buttons, form fields and their states. A website needs both, and when one is missing, visitors feel it even if they can’t name it.
What UX design covers on a website
Don Norman popularised the term “user experience” at Apple in the early 1990s, and Nielsen Norman Group’s definition is deliberately broad: every part of a person’s interaction with a company, its services and its products.
On a website, UX design narrows that to a practical question: can the people you want to reach find what they need, understand it, trust it and act on it, with as little effort as possible? Done well, it’s mostly invisible.
Research and goals
Who visits, what they came to do, what they need to know before getting in touch, and what the business needs from the site. On a small project, that can be a structured conversation, your analytics and Search Console queries, and the questions your sales team hears every week.
Structure and navigation
Which pages exist, what they’re called and how they’re grouped. This is information architecture, and it’s where many business websites go wrong: menus organised around internal departments instead of the words customers use. Our guide to website navigation design goes deeper.
Journeys, friction and testing
The route from a Google search to an enquiry, the order information appears on each page, how forms behave, how long visitors wait and whether the site works with a keyboard or screen reader. Then watching real people try real tasks, which often settles arguments that internal meetings can’t.
What you should see. UX work produces things you can review: a sitemap, user journeys, wireframes (simple, usually greyscale layouts that show content and priority without styling), content outlines and notes from testing.
What UI design covers on a website
UI design turns that plan into something people can see and use. It isn’t the same as branding: your brand supplies the ingredients, such as logo, colours and typefaces, and UI turns them into working pages and controls.
Layout, type and colour
The grid, spacing, typefaces and palette, arranged so the eye lands on what matters first (see visual hierarchy in web design). Readability is part of the job: at level AA, WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and 3:1 for the visual parts people need to identify a control, such as the edge of a form field.
Components and their states
Buttons, links, form fields, cards and menus, each designed in every state it can be in: default, hover, keyboard focus, pressed, disabled, loading, error and success. A design that only shows the default state leaves the developer to guess the rest.
Responsive behaviour and tap targets
How each component rearranges from a narrow phone to a wide screen, and how big the tap targets are. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels at level AA, with exceptions such as links inside a sentence. Its stricter AAA level asks for 44 by 44, a more comfortable target for buttons and menus. Our guide to mobile-first vs responsive design covers the approach.
What you should see. Mock-ups of key pages at phone and desktop widths, a style guide or component library, and specifications a developer can build from.
UX vs UI design side by side
| At a glance | UX design | UI design |
|---|---|---|
| The question it answers | Does this work for the people using it? | Is it clear, usable and on-brand on screen? |
| Main focus | Needs, structure, journeys, content order, friction | Layout, type, colour, components, states, responsiveness |
| Typical outputs | Sitemap, journeys, wireframes, content outlines, test notes | Mock-ups, style guide, component library, specs |
| When it happens | First, and again after launch | Once the structure is agreed, through to the build |
| How you judge it | Can people complete key tasks without help? | Can people see what matters and what to tap? |
| When it’s missing | Handsome pages nobody can find their way around | A logical site that looks dated or is hard to read |
A worked example: one enquiry form, two sets of decisions
Say an engineering firm wants more quote requests from its website. Here is how the work on its enquiry form splits.
The UX decisions
- Where the form appears. On every service page, next to the information that prompts the question, not only on a Contact page three clicks away.
- What it asks. Only what the team needs to reply usefully. A budget question might qualify leads or put off the best prospects, so decide it with the people who answer enquiries rather than by guessing.
- What people need to know before sending. What happens next, when they’ll hear back, and that asking for a quote commits them to nothing.
- The alternatives. Some buyers would rather call or message. Offer the channels your customers use, in the languages they use.
- What happens when something goes wrong. Which mistakes to catch, when, and making sure nothing the visitor typed is lost.
- What happens afterwards. A confirmation that sets expectations, an acknowledgement email, and tracking so the business sees which pages produce enquiries.
The UI decisions
- Visible labels above each field, not placeholder text that disappears once someone starts typing.
- A single column, so the eye moves one way and nothing is skipped on a phone.
- A button that says what it does. “Request a quote” rather than “Submit”, easy to tap, with a loading state so nobody presses it twice.
- Error messages beside the field they refer to, marked with an icon or text as well as colour, because colour alone fails people who can’t distinguish it.
- A visible focus style, so keyboard users always know where they are.
Where the two meet
Look at the error message. Deciding what it says and how it explains the fix is UX, and the wording matters most. Where the message appears, its colour and its icon are UI. Split those between two people who never talk, and you get a neat red box that says “Invalid input”.
Good website work treats UX and UI as one conversation, not two handovers. Our guide to web form design has the full checklist.
Why your website needs both
Strong UI, weak UX. A site that wins compliments at launch and loses visitors afterwards: jargon in the menu, prices impossible to find, service pages with no next step.
Strong UX, weak UI. The structure is sound, but the pages look dated, the text is small and faint, and buttons don’t look like buttons. Visitors judge credibility quickly, and a tired interface undermines good content.
Both, working with everything else. UX and UI are two ingredients, not the whole recipe. A well-designed site still loses people if it loads slowly, can’t be found on Google or says nothing specific. Our guide to what makes a good website shows how design depends on strategy, development, performance, SEO, content, conversion and continuous improvement, and where AI now fits in.
Do UX and UI need to be separate people?
Not necessarily. Large product organisations often hire UX researchers, UX designers and UI designers separately. On a business website, one designer covering both, working closely with the developer and whoever writes the content, is normal and often better. Two things matter more than job titles.
The UX thinking happens first. Structure is cheap to change on a wireframe and expensive to change in finished designs. “UX/UI designer” on a profile doesn’t prove anyone will ask who your customers are.
The developer is part of the experience. Load speed, form behaviour and keyboard access depend heavily on the build. A design that can’t be built well isn’t good UX, however good the mock-up looks.
How to tell if a website project includes real UX work
Ask for evidence, not labels. Before you sign, check:
Then ask directly: “What will I see and approve before the first visual design?” and “How will you decide what goes on the homepage, and in what order?”
The red flag. If the first thing you’re shown is a polished homepage mock-up, the structural questions were either answered without you or never asked. Our list of questions to ask before hiring a web designer covers ownership, cost and process as well.
Frequently asked questions
Is UX more important than UI?
Neither works without the other. A polished interface can’t rescue a page that answers the wrong questions, and a sound structure still loses visitors if the text is hard to read or the buttons are hard to find.
Does a small business website really need UX design?
Yes, scaled to the project. Even a five-page site needs someone to decide what each page is for, what visitors must see before getting in touch, and how the enquiry works on a phone. That may take hours rather than weeks, but skipping it produces brochures nobody acts on.
Where does copywriting fit, UX or UI?
Mostly UX. The words on buttons, labels, headings and error messages decide whether people understand what to do, which is why many teams call it UX writing. Draft real content alongside the wireframes rather than pouring it into finished designs.
What’s the difference between UX and CX?
Customer experience (CX) covers every contact someone has with your business, from sales calls to delivery, invoices and support. In most website projects, UX refers to the website itself. Good website UX supports the wider customer experience, for example by setting honest expectations about how quickly you reply.
What to do next
When you brief a website, ask for UX and UI by what they produce, not by the label: a structure and page plans to approve before anything is styled, then designs that work on a phone, meet accessibility standards and make the next step obvious.
Our website design and development projects start with a conversation about your customers and a sitemap agreed in a written, fixed-price proposal. Page-by-page designs in your brand are then reviewed together and approved before development starts.
Already have a site and can’t tell whether its problems are structural or visual? Work through our guide to running a website UX audit, or ask for a free website audit. It looks at how the site works on a phone and how easily visitors can get in touch, which is usually where missing UX work shows first.