A graphic showing the difference between UX and UI design

UX vs UI: What’s the Difference?

by Mads Soegaard | | 43 min read

You might see the "UX/UI designer" job title and think UX and UI are interchangeable. But while there is overlap, they are separate disciplines.

Show Hide video transcript
  1. Transcript loading...

This video breaks down the differences between UX and UI design. It also explores why both are essential for a successful user experience.

"UX design" stands for "User Experience design." UX teams study how users interact with a product or service to understand the users' needs. These insights allow designers to create an intuitive, efficient product that people will want to use. 

"UI" is short for "User Interface." UI focuses on the screens, icons, buttons, visual elements, and interfaces in a user experience. We will explore both disciplines, how they differ, and how to know which career you should pursue.

What is UX design?

UX designers aim to create products with relevant, meaningful, usable, and pleasurable experiences. They look at a product holistically and focus on meeting the users' needs. UX designers use a process called "user-centered design." UX design ensures that a product is easy to use and enjoyable. 

Show Hide video transcript
  1. Transcript loading...

Have you ever been tied up in a bureaucratic process only to become frustrated and discouraged? UX design practices could make that process pleasurable.

Show Hide video transcript
  1. Transcript loading...

Interior designers and architects create physical spaces that are comfortable and easy to navigate; UX designers do the same for digital spaces. To make the best user experience, designers consider the context in which users will use the product (for instance, do they use it while on the move?). They also design around the device the product appears on or what time of day the product gets the most usage.

Accessibility, information hierarchy, responsive design, and navigation flows are part of UX and require frequent collaboration with the UI designers to ensure the product works for the most users possible. The goal is to reduce "friction"—a term for unnecessary difficulty or stress when using a product.

Jesse James Garrett's five elements of user experience design depicted as an iceberg, with all but the surface element submerged underwater.

Much like an iceberg, visual design is only the surface of user experience. Underneath, there is so much more including skeleton, structure, scope and strategy. These layers are by no means standalone, and influence each other. Decisions taken at one plane can cascade up or down the layers. There will likely be other considerations that emerge later, which might impact the experience. For example, if the team encounters technical challenges or budgetary constraints during development, they might have to revisit some design decisions.

© Interaction Design Foundation, CC BY-SA 3.0

What is UI Design?

UI designers build interfaces for digital products or services centered on detailed interaction. UI is more specialized than UX design because it exclusively focuses on the elements that users know, such as buttons and icons. While UI elements tend to be visual, there are other types of UI, such as voice- and gesture-based interfaces. 

Show Hide video transcript
  1. Transcript loading...

There's often a misconception that UI design is virtually the same as graphic design. While there are similarities and they apply some of the same skills, UI designers create interactive visual elements (buttons, screen animations, layouts), and graphic designers make static elements (logos, header images). A user experience contains several user interfaces that create a whole product. After UI design creates the interactions for a website, a front-end developer focuses on coding the visual aspect of the website. 

Three common types of user interfaces namely Graphical User Interfaces, Voice-controlled Interfaces, and Gesture-based Interfaces.

© Interaction Design Foundation, CC BY-SA 4.0

User interfaces are the most tangible aspects of a user's experience. Get it right, and people can better navigate an appealing and intuitive product. 

Why Is it Important to Know Both UX and UI?

Knowing UX (User Experience) and UI (User Interface) is integral to the user design process. In product design, UX ensures the end-user finds value, while UI focuses on effectiveness, efficiency, and satisfaction. For instance, consider mobile apps. A harmonious blend of UX and UI ensures smooth user flows and an appealing interface.

A designer who understands UX can avoid bad UX by creating intuitive user paths. 

For example, in an e-commerce app, good UX makes navigation easy through product categories. On the other hand, UI knowledge ensures that you use effective visual elements most appropriate to each task to enhance the overall experience.

Key Difference Between UX and UI With Example

An infographic suggesting significant differences between UX and UI design.

© Interaction Design Foundation, CC BY-SA 4.0

As we closely examine digital design, UX and UI serve distinct yet complementary roles. User experience is a user's overarching, all-embracing, holistic experience. It encompasses everything the user sees and feels, including the problem the product is trying to solve and where a product is used.

UX concentrates on user psychology, cognitive flow, and task completion. It aims for an intuitive interaction between the user and the product. 

UI, in contrast, refers to the elements that make up the interface, such as buttons, lists, and text fields. It emphasizes the ease of interaction to enhance the user's journey charted by UX.

The table below shows the most significant differences between UX and UI design.

UX Design

UI Design

Focuses on the holistic experience of the user.

Focuses on the specific visual touchpoints of the user.

Centers on strategy, structure, and interaction design.

Centers on surface-level aspects of design, including visuals.

Involves studying the user’s journey, and designing information architecture.

Involves designing the tangible elements of the experience, such as the choice of elements and how they interact.

Outputs include personas, user journey maps, wireframes, prototypes.

Outputs include mockups, high-fidelity layouts, and prototypes.

Incorporates a user’s environment, mood, and context.

It is more tangible as users directly interact with the UI

These are the main differences between UX and UI:

  • The goal of UX design is to identify and solve user problems. 

  • The purpose of UI is to create attractive, interactive, and intuitive interfaces.

Example of UX vs UI

Consider a mobile app where UX design outlines the path to complete a purchase. UX design decides what features are going to be in the app. Will it have a loyalty program where you gain points for each purchase? Will the user be able to track the points on the app? Perhaps the app allows you to shop online or see the current specials on offer—all of that is part of the user experience. 

UI then selects the interactive elements to guide that path. Employing both UX and UI design effectively leads to better user engagement, retention, and, ultimately, conversion.

Generally, UX designers handle the initial steps in the product development process, followed by UI. The UX designer maps out the skeleton of a user journey. Then, the UI designer creates the visual and interactive elements. Both work under a product manager focusing on final and timely product delivery. 

If you have the store's app on your phone or visit its website, that is part of the user experience. To fully enjoy that experience, the user interacts with the interface.

UX and UI Design: How Do They Work Together?

As you now know, UX and UI overlap but are distinct disciplines. UX is the umbrella, and UI falls under it. Both are essential for a product to succeed—if you've got a website with an attractive interface, but it’s hard to use and navigate (a bad user experience), the website won't succeed. An old-fashioned, unappealing web design that's straightforward to use is not as much of an issue, but it can still affect a user's enjoyment of the product. They might prefer a competitor's product, one that's just as usable but much more aesthetically pleasing.

To illustrate how UX and UI work together, let's look at Shazam. Shazam identifies music playing around you. This app solves a real-life problem: how often have you heard a great song on the radio, at a shop or bar but couldn't identify it? This user experience solves this specific problem. 

Now, you can not only identify the song, but you can also store that song for future reference. Shazam connects to music streaming apps like Apple Music or Spotify and creates a playlist of all the tracks you have ‘Shazamed.’ The UI is simple and clean because that’s what the user requires.

Imagine you’ve just turned on the radio, and the song that’s playing is trailing off, coming to an end—you have just a few seconds to get your phone out. The app caters to this exact issue, as the interface is pared back, with just one large button on the screen. That animated button signals the user to press it, with a line of text saying, “Tap to Shazam.”

© Shazam, Fair Use

The animation, the icon, and the text are all part of the visual design. The UI designer ensures they all work together and add to the positive user experience. It demonstrates how UX and UI can and should work together.

UX vs UI Design: Which Career Path Should I Take?

UX and UI are intertwined. That’s why so many job ads are for a UX/UI designer. If you’re doing UX design, it would be helpful to have some UI skills, especially for projects with low time and resources. In an ideal world, however, the jobs would be separate, and the UX designer and UI designer would collaborate.

Having UX and UI design skills is beneficial, but you don’t have to master both. Decide which path you would like to take and focus on building your skills and experience in that area. You’ll likely pick up something about the other as they're interconnected. UX and UI design are in high demand and are generally well-paid, so this is the opportune moment to investigate a career in either of these disciplines.

Let's look at what you would be responsible for in each role to put yourself in the best position to decide which path you’d like to take. See our responsibility comparison below.

An infographic comparing the roles of UI designer, UI/UX designer, and UX designer.

© Interaction Design Foundation, CC BY-SA 4.0

The soft skills you need for both roles are virtually the same and would be beneficial in both jobs. The hard skills are more distinct for each role. This list is not exhaustive but highlights some key soft and hard UX and UI design skills.

UX Design

Soft skills

Hard skills

Empathy

Prototyping

Communication

User research techniques

Strategy

Analysis

Problem-solving

Wireframing

Collaboration

Information Architecture

User Research

UI Design

Soft skills

Hard skills

Empathy

Prototyping

Communication

Animation

Creativity

Color theory

Adaptability

Typography 

Collaboration

Design patterns 


Part of what makes UX and UI design so appealing is the many transferable skills. Some of them are:

What Does a UX Designer Actually Do?

UX design is varied and multi-disciplinary. You'll conduct user research through interviews, usability tests, and card sorting (among other methods) to discover user behavior, needs, and pain points (the users’ problems). To develop products, you’ll conduct competitor analyses and craft product strategies. You’ll also create content, wireframes, and prototypes. You can learn more about being a UX designer in this article.

What Does a UI Designer Actually Do?

If you’re more interested in design's visual and creative aspects, then UI design may be for you. You’ll focus on the interactivity of a project. You’ll ensure layouts work well, look good on various devices, and create animations and UI prototypes. As a UI designer, you’ll work closely with a developer so that your designs come to life exactly as you envisioned them. You must also prepare a UI style guide with all the documentation, UI components, UX components, and references for better collaboration with multiple stakeholders

Get your free template for “UI Checklist”
UI Checklist UI Checklist
Secure form
Please provide your name.
We respect your privacy
Please provide a valid email address.
309,987 designers enjoy our newsletter—sure you don’t want to receive it?

UX vs UI Salary: Who Gets Paid More?

As with any career, various factors influence salaries, such as location, experience level, industry, project type, and education, not to mention economic factors. For this reason, you should use Glassdoor and Indeed to know what to expect.

Generally, UX and UI designers get paid almost the same, so it’s a matter of which role you prefer. As we mentioned, you might see a position for “UI/UX designer,” so you may find yourself doing both at some point.

How Do I Know if UI or UX Is a Better Fit for Me?

Choosing between a career in UX or UI largely hinges on your interests and skill sets. If you're drawn to understanding human behavior, enjoy problem-solving, and have a knack for analytical thinking, a path in UX might suit you well. On the other hand, if your passion lies in creating interactive elements and optimizing how they work together to benefit users, UI could be your calling.

For a real-world test, consider shadowing professionals in both fields or taking introductory courses. Pay attention to which tasks energize you and align with your skills. Since both roles often collaborate, having an affinity for one doesn't mean completely neglecting the other. Making an informed choice will set you on a fulfilling and lucrative career.

How Do I Start Specializing in UX or UI?

Suitably intrigued? Well, we can help you get started.

The Interaction Design Foundation has the world's most extensive open-access design library. You’ll find an article on pretty much every aspect of UX design. Here are some to get you going:

UX Design: 

UI Design:

Now that you have even more knowledge, you can proceed to something more substantial. An IxDF membership gives you access to over 35 UX and UI design courses. Simply head to the course page and choose your path.

The Take Away

UX and UI design go hand in hand but are also separate disciplines. UI relates to the surface-level interactive elements. UX encompasses all aspects of a product, service, or experience.

While there is overlap between UX and UI designers, there are various distinct skills, tasks, and responsibilities for each role. Which tasks and skills you ultimately perform boil down to the job's specific requirements. So, remember to read the job description carefully. Whether you become a UX or UI designer, you can expect similar remuneration. If you’re serious about pursuing a career in this exciting field, there are many free resources to get you on your way.

Open Access - Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!