UX vs UI design: what each one is and how they work together

UX (user experience) design is how a website works for the people using it, and UI (user interface) design is how it looks and feels on the screen. UX asks whether a visitor can find what they came for and finish the task, like booking a service or requesting a quote. UI covers the parts they see and touch: layout, fonts, colors, buttons and forms. You need both. A beautiful site that confuses people will not convert, and a well-planned site that looks sloppy will not earn trust.

Here is what each one covers, how the design process works, and how to tell if your site is getting it right.

UX vs UI in plain terms

Think of a restaurant. UX is the whole visit: finding the place, getting seated, reading the menu, ordering, paying and leaving happy. UI is the menu design, the table setting and the signs on the restroom doors. A great-looking menu does not help if the kitchen loses your order. A smooth kitchen does not help if nobody can read the menu.

On a website, UX is the plan and the path. UI is the surface people interact with along that path.

On most business websites one designer does both, which is fine as long as the UX thinking comes first.

The UX process, step by step

1. Research

Good UX starts with learning about real visitors. Common methods:

• User interviews. Talk to five or ten customers. Ask what they were trying to do when they found you and what almost stopped them.
• Analytics. GA4 shows which pages people land on, where they leave and which traffic sources convert.
• Heatmaps and recordings. A heatmap shows where people click and how far they scroll. Session recordings let you watch individual visits.

2. Personas and jobs to be done

A persona is a short profile of a typical visitor, like "homeowner with a leaking roof, on a phone, wants a quote today." Jobs to be done focuses on the task the visitor is "hiring" your site to do. Both keep the team designing for real needs, not personal taste.

3. Information architecture and sitemaps

Information architecture is how content is grouped and labeled. A sitemap shows every page and how they connect. This is where you decide that "Services" holds six pages, not twenty, and that pricing gets its own page.

4. User flows

A user flow maps the steps from landing to finishing a task. For a plumber: Google search, service page, check the service area, tap "Call now." Mapping it shows steps you can cut.

5. Wireframes

A wireframe is a gray-box layout that shows what goes where on each page, without colors or photos. It keeps the conversation on structure and content order.

6. Prototypes

A prototype links screens together so people can click through before any code exists. Tools like Figma make this quick. We cover how in what Figma is and how it works.

7. Usability testing

Give a few real people a task, like "find out if they serve your town and request a quote," and watch without helping. You learn more from watching three people struggle with a menu than from an hour of team debate. Small, frequent rounds of testing tend to beat one big test at the end.

8. Iteration

Fix what you found, then test again. After launch, analytics and recordings keep showing you what to improve.

The craft of UI design

Visual hierarchy

Hierarchy tells the eye where to go first. Size, weight, color and position should make the most important thing on the page, usually the headline and main button, stand out right away.

Layout and grids

A grid keeps columns and edges lined up so pages feel orderly. Most sites use a 12-column grid on desktop that collapses to one column on phones.

Typography

Pick one or two typefaces, set a clear scale for headings and body text, and keep body text large enough to read on a phone.

Color and contrast

Color sets the mood, but contrast decides whether people can read it. The W3C's WCAG contrast guidance asks for a ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA. Large text means about 18 point, or 14 point bold. WCAG also asks for at least 3:1 for non-text elements like input borders, icons and focus indicators. See our accessibility guide for the rest.

Spacing

White space groups related items and separates unrelated ones. Using a fixed spacing scale, such as multiples of 8 pixels, makes pages feel consistent without much effort.

Consistency, components and design systems

Buttons, cards and forms should look and act the same everywhere. A design system is the shared set of components, styles and rules that makes that happen.

States

Every interactive part has more than one look. Plan for:

• Hover and focus (keyboard users need a visible focus ring)
• Error (what a form field looks like when something is wrong, with a message saying how to fix it)
• Empty (what a page shows before there is any content, like an empty cart)
• Loading (a spinner or skeleton so people know something is happening)

Microcopy

Microcopy is the small text on buttons, labels and error messages. "Get my free quote" beats "Submit." "Please enter a 5-digit ZIP code" beats "Invalid input." Words are part of the interface, which is why website copywriting matters as much as visuals.

Motion

Small animations can show cause and effect, like a menu sliding open. Keep them short. Some people get dizzy from motion, and browsers support a prefers-reduced-motion setting so sites can tone animation down for them. Respect it.

Principles worth knowing

Nielsen's 10 usability heuristics

Jakob Nielsen's 10 usability heuristics, first published in 1994, are still the standard checklist for reviewing an interface. In our own words:

1. Show what is happening. Give feedback, like a confirmation after a form is sent.
2. Speak the user's language. Use words your customers use, not internal jargon.
3. Let people undo. Give a clear way back or out.
4. Be consistent. Follow common web conventions and your own patterns.
5. Prevent errors. Design so mistakes are hard to make in the first place.
6. Show, do not make people remember. Keep options visible.
7. Offer shortcuts. Let repeat visitors move faster.
8. Keep it simple. Cut anything that competes with what matters.
9. Write helpful error messages. Say what went wrong and how to fix it, in plain words.
10. Provide help. Make answers easy to find when people need them.

Fitts's law

Fitts's law says the time it takes to reach a target depends on its size and distance. Bigger, closer buttons are faster to hit. That is why main buttons should be large and tap targets on phones should not be tiny.

Hick's law

Hick's law says decision time goes up as the number and complexity of choices goes up. A menu with 25 items slows people down. Fewer, clearer choices help them act.

Mobile-first

Mobile-first design means designing for the small screen first, then adding layout for bigger screens. It forces you to decide what really matters.

Accessibility is part of UX

A site some people cannot use with a keyboard or screen reader has bad UX for them. Build accessibility in from the wireframe stage.

UX and UI for business websites

Business sites have one main job: turn visitors into leads or customers.

• Clear value proposition above the fold. In a few seconds, visitors should know what you do, who it is for and what to do next.
• Plain navigation labels. "Services," "Pricing," "About" and "Contact" beat clever names. People scan for familiar words.
• Obvious calls to action. One main call to action per page, repeated where it makes sense, with a button that looks like a button.
• Short forms. Ask only what you need to follow up. Every extra field is a reason to quit.
• Trust signals. Reviews, real photos, licenses, guarantees and a real address and phone number.
• Page speed. A slow page is a UX problem, not just a tech problem. See how to improve website speed.
• Local details. For local businesses, show your service area, hours and a tap-to-call phone number near the top of mobile pages.

How to measure UX

Useful signals:

• Task success. In a usability test, did people finish the task? How long did it take?
• Conversion rate. The share of visitors who call, book or submit a form. Track these as key events in GA4.
• GA4 engagement. Google defines an engaged session as one that lasts longer than 10 seconds, has a key event or has at least two page views. Engagement rate is the share of sessions that were engaged. Low engagement on a key page is a clue to dig in.
• Heatmaps and recordings. Microsoft Clarity is a free tool with heatmaps and session recordings. Watch for rage clicks, dead clicks and people scrolling past your main button.
• Core Web Vitals. Google's speed and stability metrics. Per web.dev, "good" means Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less and Cumulative Layout Shift at 0.1 or less, measured at the 75th percentile of visits.

Common UX and UI mistakes

Tools for UX and UI work

• Figma. The standard for wireframes, UI design and prototypes. See our Figma guide.
• Penpot. A free, open-source design tool that runs in the browser.
• FigJam. Figma's whiteboard, great for sitemaps, user flows and workshops.
• Maze. A research platform for prototype tests, surveys and usability tests, with a Figma integration.
• Lyssna. A user research platform, formerly called UsabilityHub, for quick tests and surveys.
• Microsoft Clarity and Hotjar. Heatmaps and session recordings to see what real visitors do.

If you want to build these skills yourself, our guide on what to learn to get into web design lays out a path.

The bottom line

UX makes sure your website does the right job for the right people. UI makes that job clear, readable and pleasant to do. Start with research and structure, design the surface with care, then measure and improve. That loop is what turns a nice-looking site into one that brings in business.

Want a site that is planned around your customers and designed to convert? Talk to us about your project.