UI vs UX Design: What Is the Difference? With Examples

Published October 24, 2026 · Last updated October 24, 2026 · By the WebSolutions LLC team

UI and UX are usually written together, as in "UI/UX design", which makes them sound like one thing. They are closely linked but answer different questions. UX (user experience) is about whether a website or app actually helps people do what they came to do. UI (user interface) is about the screens, controls and visual details they use to do it. This guide explains both in plain terms, with examples from ordinary business websites, and shows how to apply them to your own site.

The short answer

UX design shapes the whole experience: what people need, the steps they take, the content they see and how easy it is to finish the task. UI design shapes the interface itself: layout, typography, colour, buttons, form fields, icons and how each element looks and responds. A beautiful interface on top of a confusing process is good UI with poor UX. A sensible process with cramped, hard-to-read screens is good UX thinking with poor UI.

What is UX design?

Nielsen Norman Group, a long-established user experience research firm, defines user experience as encompassing all aspects of the end user's interaction with a company, its services and its products, and stresses that it is wider than the user interface (NN/g: the definition of user experience). The international standard ISO 9241-210 sets out requirements and recommendations for human-centred design principles and activities throughout the life cycle of interactive systems, and lists websites among its examples (ISO 9241-210:2019). In practice, human-centred design means understanding users and their context, designing with that knowledge and checking the result with real users.

What does a UX designer do?

• Research. Talks to customers and staff, reviews analytics, enquiries and support questions, and finds out what people are really trying to do.
• Information architecture. Organises pages and navigation so that people can find things using their own words, not internal jargon.
• User journeys. Maps the steps from arriving on the site to getting in touch, booking or buying, and removes unnecessary steps.
• Wireframes and prototypes. Sketches page layouts and clickable mock-ups to test ideas before anything is built.
• Usability testing. Watches real people try to complete tasks and fixes what trips them up.

What is UI design?

UI design is the visual and interactive layer that people actually see and touch. A UI designer decides:

• The layout grid, spacing and visual hierarchy of each page type
• Typography: fonts, sizes, line lengths and heading styles
• Colour, including enough contrast for text to be readable
• The look and states of buttons, links, menus and form fields (normal, hover, focus, error, disabled)
• Icons, imagery and illustrations
• Interface text such as button labels and error messages, often together with a content designer
• How the layout adapts on phones and tablets; see our responsive web design guide

UI decisions are usually collected into a style guide or design system, so new pages stay consistent with existing ones.

UI vs UX: side-by-side

UI vs UX examples from a business website

A contact form

• UX: asking only for the details you really need, explaining what happens after someone submits, and making sure the form is easy to find from every service page.
• UI: visible labels above each field, fields large enough to tap on a phone, a clear submit button and error messages that say exactly what to fix next to the field concerned.

Navigation

• UX: grouping services the way customers think about them and naming menu items in their words.
• UI: a menu that is readable, clearly shows the current page and works with a keyboard and on small screens.

A pricing or quote page

• UX: answering the questions people have before they get in touch, in the order they have them.
• UI: a scannable layout with clear headings and comparison tables that scroll properly on a phone.

Is a wireframe UI or UX?

Wireframes are mainly a UX tool. They show structure, content priority and the steps in a task without colours or final visuals, so people can discuss what goes where before anyone polishes the look. UI design then turns approved wireframes into finished screens. Design tools are used for both; the tool does not decide whether the work is UI or UX, the question being answered does.

Where accessibility fits

Accessibility belongs to both. UX decides that every task must be possible without a mouse and that instructions are clear; UI makes sure colour contrast, focus indicators, text size and touch targets meet the WCAG 2.2 guidelines. Our website accessibility checklist lists practical checks for both sides.

Simple principles to start with

Nielsen Norman Group's ten usability heuristics are a widely used checklist for reviewing interfaces (NN/g: 10 usability heuristics). A few that matter on almost every small business site:

• Show what is happening. Confirm that a form was sent and say what happens next.
• Speak the user's language. Use the words customers use for your services.
• Be consistent. Buttons, links and headings should look and behave the same on every page.
• Prevent errors. Use the right input types, sensible defaults and clear format hints.
• Keep it simple. Remove content and options that do not help people decide or act.

How to improve UI and UX on your own site

1. Write down the three most important things visitors come to do, such as request a quote, check a service or find opening hours.
2. Ask a few people who have never seen the site to try those tasks on a phone while you watch quietly. Note where they hesitate.
3. Check your analytics and Search Console for pages people leave quickly or searches that bring them to the wrong page. Our SEO basics guide explains how to set up Search Console.
4. Fix structure and content problems first (UX), then polish the visual details (UI).
5. Check speed as well: a slow page is a poor experience however well it is designed. See our website speed optimization guide.

Good UX also lines up with search. Google says its core ranking systems look to reward content that provides a good page experience, and that there is no single page experience signal (Google Search Central: page experience). Useful content that is easy to use is what both visitors and search engines are looking for.

UI and UX are part of the design stage of any website project; our guide to web design vs web development shows where they fit. We offer UI/UX design, wireframing and prototyping as part of our design services. If your site gets visitors but few enquiries, contact us and we will start with a review of the main user journeys.