User Experience (UX) vs. User Interface (UI): The Ultimate Guide

Learning Center / UX design / UX vs UI Design

User experience (UX) and user interface (UI) are perhaps the most popular terms in digital product design. When someone discusses a product, we hear phrases like "This app has great UI but bad UX," but it can be hard to understand what it means, especially when starting product design. In this article, we will discuss what UX and UI really mean, identify the difference between the two fields and discuss what career path, UX design or UI design, you should pursue. 

What is UX design?

As the name suggests, UX design is a field focused on creating products with good user experience. The word "design" might give you the wrong impression that it's possible to actually design user experience. In reality, user experience is a combination of subjective thoughts and emotions that a particular user has about a product. We cannot tell users what they should feel or think, but we can impact how users perceive the product.

Why is UX design important?

In a highly competitive market, it's nearly impossible to find a business niche that will have only one product. Most of the time, when people choose a product they want to use, they compare a few competitive products. The are a few factors that impact user decision, including the value the product offers (what features the product has), product price (how expensive the product is), reliability (does the product work as expected all the time), ease of use (does the product has good usability) and pleasurability (does the product offer a sense of delight when we use it). User experience is a combination of all those factors. An easy-to-use product with all the required features and is fun to use will have more chances to win a competition for the customer. 

What does a UX designer do?

UX designers are professionals who analyze user needs and wants and use this information to design products that offer the best possible experience for the target audience. UX designers also learn business needs (what a business wants to achieve with a product) and try to find a sweet spot between user and business objectives. 


a sweet spot between user needs & business objectives

Finding a sweet spot between user needs & business objectives. Image by Nick Babich. 


How exactly do UX designers achieve this goal? Every product is different, and UX designers' responsibilities can vary drastically depending on the product they work on or the organization they work at. Despite that, it's possible to name a methodology that works equally well in all contexts. This methodology is called design thinking. Design thinking is an iterative process that product designers use to identify a product's target audience, understand their needs, formulate & challenge assumptions on how to satisfy the needs in product design, and prototype a solution and validate it with users. 


A single iteration of the design thinking process

A single iteration of the design thinking process. Image by Nick Babich.


UX designers participate in all phases of the design thinking process—from research to validation. UX designers wear multiple hats, meaning they can do many activities during product design. They can take an active part in user research—for example, a UX designer can participate in user interview sessions as an interviewer or conduct online surveys. The true potential of UX designers is revealed during the ideation phase of the design process. Since UX designers are familiar with many interaction patterns and human psychology, they can use this information to contribute valuable ideas on how to design products.


UX designers also participate in prototyping, but the level of involvement varies depending on role and responsibilities. If a product has a dedicated UI designer, UX designers are often responsible for creating low-fidelity artifacts such as sketches & wireframes using UX design tool and letting UI designers increase the level of fidelity (create mockups and turn them into prototypes). 


During the validation phase, UX designers conduct usability testing of a solution the team created. Before inviting actual users, UX designers test the product prototype with potential users. Doing that will help designers identify usability issues and better understand user behavior. Typically, UX designers create a set of assignments that test participants should complete using a product. Test assignments are tasks that regular users will do in a product. 


It's worth mentioning that design is a team sport. It means that UX designers rarely work solo, and most activities that UX designers do are team exercises. 

Examples of UX design deliverables

Design deliverables are tangible artifacts produced during the product design process. Here are a few popular deliverables that UX designers produce:


  • User flow. A user flow is a series of pages/screens that the user goes through in a product to complete a certain action.

User flow of a mobile medical app

User flow of a mobile medical app. Image by Anup.


  • User journey. A user journey is a series of steps that the user takes to achieve a particular goal.

Example of a provider journey

Example of a provider journey. Image by Effective UI.


  • Wireframe. A wireframe is a low-fidelity visualization of the future design. 

Wireframe visualized on the whiteboard.


Wireframe visualized on the whiteboard. Image by Michael Pons.

What is UI design?

As the name suggests, UI design is the process of creating a user interface. When we talk about UI design, we usually mean Graphical User Interface (GUI) that people use to interact with a product. 

Why is UI design important?

UI design has a direct impact on user experience. The better the user interface is designed, the more comfortable interacting with a product, and the better the user experience. A good user interface design has an opportunity to make the interaction with a product more pleasurable. Aesthetic-usability effect says that people tend to perceive attractive products as more usable. 

What does a UI designer do?

UI designers craft user interfaces using tools. The level of fidelity of the interface varies depending on the stage in the product design process. At the early stages of the design process, UI designers receive wireframes from UX designers and turn them into mid-fidelity mocks that the team uses to evaluate the visual style of the future solution (i.e, how colors, typography, and imagery work together). At the later stages of the design process, UI designers create high-fidelity artifacts that look almost exactly like a finished product. UI designers are often responsible for creating prototypes that the team uses to validate the design solution. 


Motion design skills (the ability to create well-crafted animated effects in a user interface) are often considered an area of expertise in UI design. UI designers should be able to prototype both simple and complex animated transitions that make the product feel more dynamic. 


UI designers also take an active role in design handoff. They prepare a final visual design and design specification that the engineering team will use to create a solution. UI designers work closely with UX designers and developers. UI designers clearly understand how the solution should work from UX designers and communicate this idea to the engineering team during the handoff. 


On large-scale projects, UI designers are often involved in creating a design system—a set of standards that define how a product should be designed. UI designers are responsible for creating components and styles that make the design system. Together with UX designers, they evaluate components and styles to ensure that the product is visually consistent. 

Extract from the Shopify design system Polaris


Extract from the Shopify design system Polaris. Image by Shopify.

Examples of UI design deliverables

Here are a few examples of design artifacts that UI designers create:


  • Mockups. Mockups are mid and high-fidelity designs of the future product. 

Mockup of a mobile medical app

Mockup of a mobile medical app. Image by Ramotion Inc.


  • Prototypes. Prototypes are interactive models of future products. 

A prototype of a mobile yoga app. Image by Dribbble.


So, what is the main difference between UX and UI design?

UX and UI are two sides of the same coin, called product design. It's impossible to imagine a product with a good user experience and a bad UI design. But when it comes to UX and UI designer roles, the difference lies in the areas of responsibilities. 


The primary goal of UX design is to learn about the target audience and their needs and create a product that will satisfy them. That's why UX designers are more focussed on the functionality, reliability, and usability of a product. UX designers evaluate user interfaces on functionality, reliability, and usability. 


On the other hand, UI designers lean towards the user interface's visual aspect. They want to design pages/screens with a nice visual hierarchy that allows users to scan the content and find color combinations and font faces that work well together. When UI designers work with UX designers, they typically receive low-fidelity designs and turn them into pixel-perfect mocks.

UI design or UX design: which career path to choose?

"Should I become a UI designer or UX designer?" is a fairly common question among people who take their first steps in the design field. There is no single right and wrong answer to this question because it ultimately depends on your interests and preferences. You should choose UX design if you're naturally curious about people and want to dive into human psychology, cognitive science, and business development to create the best possible solution to their problems. On the other hand, if you're more interested in diving into visual aesthetics and designing clear user interfaces, you should choose UI design. 


You should also consider your background and the skills you have. Most of the time, it's possible to identify transferable skills that will help you learn UX or UI design much faster. For example, if you have solid skills in graphic design, it will be much easier for you to move into UI design because you know how to choose colors and choose properties of elements in a composition. 


Sometimes companies offer a "UX/UI designer" role that involves working on both UX and UI. Indeed, many seasoned designers react negatively to "UX/UI designer" job advertising saying that it's vital not to mix two disciplines. But if you want to gain practical skills in both fields, you can apply to the role of "UX/UI designer." This job experience will help you compare the tasks and responsibilities of both roles and make it much easier to decide which one works best for you. 

FAQ

Let's answer a few popular questions about UX and UI design. 


1. Which is more important, UX or UI?

UX cannot exist without UI and UI cannot exist without UX. So it's impossible to say which is more important. 

2. What comes first, UX or UI?

UX usually comes first. UX design defines a specific direction that UI design follows. For example, UX designers create low-fidelity wireframes and let UI designers turn them into beautiful mockups.

3. Who makes more money, UX designer or UI designer?

According to Glassdoor, an average annual UX designer salary in the USA is $95,691. For UI designers, the average annual salary is $83,474. It means that UX designers generally earn more than UI designers. However, the yearly pay can vary dramatically depending on the organization that hires designers and the area of expertise that the candidate has. 

4. Can a UX designer do UI design?

Yes, UX designers can do UI design too; however, most of the time, UX designers are responsible for creating low or mid-fidelity designs. UX designers create wireframes and mid-fidelity mockups and share them with UI designers so that they can make them pixel-perfect. The only exception is when a company hires a "UX/UI designer." In this case, a single person will be responsible for both UX and UI design. 

5. Is UI easier than UX?

No, UI and UX design require special skills that take time to master. It's hard to say which is easier to learn, UI or UX design. Generally, it takes 3-5 years to master the discipline and be able to create a decent design. But it's possible to gain the skills much faster— if you have a passion for a particular field, you will learn it much faster than the one you're indifferent to.

Join over 2M users and teams that use Mockplus

Create free account