UX (user experience) design is how a product works: what people are trying to do and how each step should flow. UI (user interface) design is how it looks: layout, typography, colour and controls. They are usually done by the same team, and both matter: a beautiful interface on a confusing flow frustrates people, and a clear flow in a careless interface looks untrustworthy.
This guide explains the difference, the process and the deliverables, then shows two real decisions from our own website rebuild in September 2026.
UI vs UX: the difference in practice
The quickest way to see the difference is to take one product and list the questions each discipline answers. Here is a food delivery app.
| UX asks | UI asks |
|---|---|
| How does someone find a restaurant: search, categories or a list? | What does the search bar look like, and where does it sit? |
| What does a person need to know before choosing a dish? | How are price, rating and delivery time laid out on each card? |
| How do they change an order without starting again? | What do the quantity controls look like, and how large are the tap targets? |
| What happens if the payment fails? | How does the error message look, and what colour is the retry button? |
| How do they know where the order is? | What does the tracking screen show first? |
UX is the structure and the logic; UI is what you see and touch. A common shorthand: UX is the skeleton, UI is the skin.
The UI UX design process
Most projects follow the same sequence. Small projects compress steps; large ones add more research and testing. The order rarely changes.
- Research: interviews, analytics, support questions and a look at what competitors do.
- Information architecture: what pages or screens exist and how they are grouped.
- User flows: the step-by-step path for each important task.
- Wireframes: plain layouts that settle structure before anyone argues about colour.
- Visual design (UI): finished screens in the brand’s typography, colour and components.
- Prototyping: clickable screens that people can try.
- Testing: watching real people attempt real tasks, and fixing what trips them up.
- Design system: reusable components and rules so the next screen matches the last.
- Developer handoff: specifications, assets, states and notes on behaviour.
The step most often skipped is the one that matters most: deciding what happens in every state, including loading, empty, error and success.
Two decisions from our own website rebuild
When we rebuilt gigmoz.com in September 2026, two decisions show what UX work looks like better than any definition.
The contact form that never pretends to send
A contact form has one job, and the worst failure is not an error. It is a visitor who believes they have contacted you when they have not. Many forms show “Thank you, we’ll be in touch” whether or not the message actually arrived.
We designed ours around that risk:
- Errors say how to fix them. Submitting without a name or a valid email shows “Please enter your name.” or “Enter a valid email address.” next to the field, and moves focus to the first problem.
- The form tries to send directly. If delivery is confirmed, the visitor sees a confirmation.
- If delivery is not confirmed, it says so and hands over the brief. Instead of a false thank-you, the visitor sees the full enquiry they wrote, laid out as a short email brief. They can edit it, copy it, or open it in their own email app already addressed to us.
That is a UX decision: what should happen when the system cannot do its job? The UI work came after: how the brief preview reads, where the edit and copy buttons sit, and what the confirmation message says when copying is not available. In our pre-launch checks, an empty form produced the name and email errors, and valid test details produced a reviewable brief and a working email link.
Motion you can switch off
The new site uses animation: a 3D sculpture on some pages, revealing sections and a short opening sequence on the first visit. Motion can delight some people and make others feel ill. The UX decision was to make every piece of it optional:
- A Pause motion button stops continuous movement, and the choice is remembered as you move between pages.
- If your device is set to reduce motion, the site respects it. Browsers expose that setting to websites as
prefers-reduced-motion. MDN notes that animations such as scaling or panning large objects can trigger discomfort for people with vestibular motion disorders. - The 3D scene pauses when it is off screen, and the opening sequence can be skipped with a key press or tap, never lasts more than 2.6 seconds, and does not play again in the same tab.
This is not only courtesy. The WCAG 2.2 accessibility standard (success criterion 2.2.2, Level A) requires a way to pause, stop or hide moving content that starts automatically, lasts more than five seconds and is shown alongside other content.
What you get from a UI UX project
The deliverables should match the size of the product. Ask for these by name in a proposal.
| Deliverable | What it is for | Needed for a 5–10 page website? |
|---|---|---|
| Research summary | What users need and where the current product fails them | Light version |
| Sitemap and user flows | Agreeing structure and key journeys before design | Yes |
| Wireframes | Settling layout and content order cheaply | Yes, for key templates |
| Visual designs | The finished look of each screen and state | Yes |
| Clickable prototype | Testing flows with real people before building | Usually not |
| Design system | Consistent components as the product grows | Usually not |
| Developer handoff | Specifications, assets, and notes on every state | Yes |
Most of our design work is done in Figma, which lets you comment directly on screens and keeps one shared source for designers and developers.
What good UI UX looks like
You can judge most of this yourself in ten minutes on any website or app.
- You can tell what to do on each screen without reading instructions.
- Forms ask only for what is needed, in a sensible order, and keep what you typed when something goes wrong.
- Error messages say what went wrong and how to fix it.
- Loading and empty states explain what is happening instead of showing a blank screen.
- The mobile version is designed for a phone, not the desktop site shrunk.
- Text has enough contrast to read in daylight, and everything works with a keyboard.
- Pages load quickly. Google’s Core Web Vitals set “good” at a Largest Contentful Paint within 2.5 seconds, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less (web.dev, checked October 2026).
When you need a separate UI UX project
Most small business websites do not need a standalone UI UX project. Software usually does.
If your website is 5–10 pages with familiar patterns (services, about, portfolio, contact), design should be included in the website project rather than sold separately. You do not need a research phase to design a contact page.
A separate UI UX phase earns its cost when people will use the product repeatedly to get work done: a booking system, a customer portal, a SaaS product or internal software. In a custom CRM, for example, a sales team uses the same screens dozens of times a day, and a clumsy follow-up flow means leads quietly go cold. Our guide to custom CRM development cost shows how that design work fits into a software budget.
How to brief a designer
A good brief gets you a better result and a more accurate quote. Bring:
- The three tasks that matter most, in the words your customers use: “book a consultation”, “find the right cable gland”, “reorder last month’s stock”.
- Who does them, on what device, and how often.
- What goes wrong today: the questions your team answers on the phone, and where people give up.
- Two or three sites or apps you find easy to use, and why.
- Brand material you already have: logo, colours, fonts, photographs.
- Constraints: platform, deadline, accessibility needs and who will update the content.
Our UI UX design service starts from exactly this brief, and if the design is part of a new site, our website design services cover design and build together.