UX and UI are often used as if they meant the same thing. They do not, and the difference matters when you write a job ad, scope a project or wonder why a beautiful product still loses customers.
In short
UX vs UI comes down to scope. UX design shapes the whole experience of using a product: the problem, the flow and whether people reach their goal. UI design shapes the interface people see and touch: layout, typography, colour, components and states. Most products need both, but the gap you feel most decides who to bring in first.
Few design debates come up as often as UX vs UI, and few are settled so rarely. This comparison from Devies, a Gothenburg-based product and engineering consultancy, is for founders, product owners and engineering leads who need to decide what kind of design help to hire or buy. It defines both disciplines, shows where they overlap and gives a decision table for the most common situations.
What is the difference between UX and UI design?
The difference between UX and UI design is that UX covers the user's entire interaction with a product and the company behind it, while UI covers the visible and interactive surface. Don Norman and Jakob Nielsen's definition of user experience at Nielsen Norman Group says that user experience encompasses all aspects of the end user's interaction with the company, its services and its products, and stresses that the user interface is only one part of it.
- UX design is the work of understanding users and their goals, and designing the structure, flows and content that let them reach those goals with as little effort as possible.
- UI design is the work of designing the screens, controls and visual language through which people operate the product, so that it is clear, consistent, accessible and recognisably on brand.
Their example still works: a film review site can have a flawless search interface and still give a poor experience if its database only contains films from major studios. The UI is fine; the UX fails, because the user's goal is not met. The reverse happens too. A well-researched flow with weak hierarchy, unclear buttons and poor contrast will fail in usability testing even though the underlying structure is right.
UX design
UI design
Core question
UX design
Does this solve the right problem in the right way?
UI design
Is it clear, consistent and pleasant to operate?
Typical work
UX design
Research, journeys, information architecture, flows, wireframes, testing
UI design
Layout, typography, colour, components, states, visual design system
Typical outputs
UX design
Research findings, user flows, prototypes, test reports
UI design
Mockups, component libraries, specifications, design tokens
Measured by
UX design
Task success, time on task, conversion, support contacts
UI design
Consistency, legibility, accessibility, implementation fidelity
Fails as
UX design
A polished product nobody needs or understands
UI design
A sound flow that feels confusing or untrustworthy
Where do UX and UI design overlap?
UX and UI overlap in interaction design: the detailed behaviour of controls, feedback, errors and transitions belongs to both. The UK government's digital capability framework describes the interaction designer role as working out the best way to let users interact with services, covering both the overall flow and individual design elements. That single sentence spans what many companies split into UX and UI.
In practice, three overlap zones cause most of the confusion:
- Interaction design. Which control to use, what happens on click, how errors are shown. Our explainer on interaction design covers this layer in detail.
- Accessibility. UX decides whether a flow works without a mouse or for a screen reader user; UI decides contrast, focus styles and target sizes. Both must be right.
- Design systems. UI designers usually own the components, but UX decides which patterns the product needs. Our article on design systems from Figma to code shows how that hand-over works.
This is why many product companies hire a product designer: one person who covers research, flows and interface, with a stronger leaning towards one side. It works well in small teams, as long as everyone accepts that one person cannot be a specialist in everything.
Which designer does your product need?
The designer you need is the one who closes your biggest current gap: UX if you are unsure whether the product solves the right problem, UI if the product works but looks inconsistent or untrustworthy, and a product designer if you need both in one small team. The table compares the three options.
Criterion
UX designer
UI designer
Product designer (both)
Best first hire when
UX designer
Users drop out, ask support or misunderstand the product
UI designer
The product works but looks dated, inconsistent or off brand
Product designer (both)
A small team needs one designer for everything
Strongest at
UX designer
Research, flows, structure, testing
UI designer
Visual language, components, detail, specification
Product designer (both)
Balancing problem and interface in fast iterations
Weakest at
UX designer
Polished visual detail
UI designer
Discovering what users need
Product designer (both)
Deep specialist work on either side
Works best with
UX designer
Product owner and analytics
UI designer
Developers and brand
Product designer (both)
Whole product team
Typical early output
UX designer
Tested prototype of the critical flow
UI designer
Component library and key screens
Product designer (both)
Shipped improvements in short cycles
Choose a UX designer when you are building something new, entering a new market or seeing users fail at core tasks. The risk is building the wrong thing, and polish will not fix it.
Choose a UI designer when the flows are proven but the interface is inconsistent across screens, slow to build because every screen is custom, or does not meet accessibility requirements such as contrast and target size.
Choose a product designer when you have one product team, limited budget and a need to move from idea to shipped feature without hand-overs between specialists.
Whether you hire, contract or buy this capability from an agency is a separate decision, which we compare in hire a UX designer or work with a UX agency?
How do you avoid gaps between UX, UI and development?
You avoid gaps by keeping UX, UI and development in the same conversation from the first sketch to the shipped feature, rather than passing work along a line. Most quality problems appear at hand-overs, not inside a discipline.
- Share one problem statement. Write down the user goal and the success measure before any design work, and make it visible to everyone.
- Bring a developer to early sketches. Technical constraints found at the wireframe stage cost minutes; found after visual design, they cost days.
- Test before polishing. Validate the flow with a rough prototype, then invest in UI detail.
- Design every state. Empty, loading, error, partial data and permission states are where UX and UI most often both assume the other one handled it.
- Review the built product together. A short design review of each feature in a test environment catches drift between design and code.
Keep reading
From our work
Client Case: Lea BankLea Bank rebuilt its digital platform with Strapi, React, GrowthBook, GA4, and BigQuery to improve SEO, A/B testing, and marketing autonomy.Read the caseDevies
Want a second opinion?
Devies, a Gothenburg-based product and engineering consultancy, works on questions like this with Nordic product and IT teams. Tell us where you are and we will suggest a sensible first step.
Frequently asked questions
Is UX design more important than UI design?
Neither is more important in general; they fail in different ways. A product with strong UX and weak UI works but feels harder and less trustworthy than it should. A product with strong UI and weak UX looks professional but does not help people reach their goals. Early products usually have bigger UX risks, while mature products often gain more from consistent UI and a design system.
Can one person do both UX and UI design?
Yes. Many companies hire product designers who cover research, flows and interface design. It works best in small teams with focused products. Most people are stronger on one side, so check portfolios for both tested flows and finished interfaces. As products and teams grow, it becomes common to add specialists, for example a dedicated researcher or a design system designer.
Does a UI designer need to know how to code?
Not necessarily, but a UI designer who understands how components are built in HTML, CSS and your front-end framework produces designs that are faster and cheaper to implement. They know what is standard and what is expensive. The most useful skill is the ability to discuss states, spacing and responsive behaviour with developers in their own terms.
What is the difference between UX design and usability?
Usability is one quality of a product: how effectively, efficiently and satisfactorily specific users can reach specific goals. UX design is the practice of shaping the whole experience, which includes usability but also usefulness, content, trust and the service around the product. Usability testing is one of the main methods UX designers use to check their work.
