Jul 17, 2021 • 14 minutes read

The difference between UX and UI, according to designer and Maze CEO, Jonathan Widawski

Maze CEO, Jonathan Widawski on the difference between UI and UX, and why you shouldn't get too hung up on the UI vs. UX debate.

In the world of design, there are a few well-known debates that are never quite settled. One of the big ones is the difference between user interface design and user experience design.

While countless analogies explain how these two design concepts fit together, pinning down a definitive answer has proved pretty much impossible.

But if you’re new to the world of design—or especially if you’re interviewing for design positions—having a general understanding of how and when to use these terms is very important.

Since everyone interprets this question a bit differently, we asked seasoned designer and Maze CEO, Jonathan Widawski, to give his two cents on the topic. Read on for his simple analogy that’ll help you distinguish between the two—and more importantly, find out why you shouldn’t get too hung up on this old design dispute.

Learn by doing and start testing now

Maze is a rapid testing platform that allows you to run surveys, validate design ideas, and test your prototypes—all in one place.

What’s the difference between UI and UX?

The difference between User Interface (UI) and User Experience (UX) is that UI refers to the aesthetic elements by which people interact with a product, while UX is about the experience a user has with a product or service. So, UI focuses on visual interface elements such as typography, colors, menu bars, and more, while UX focuses on the user and their journey through the product.

An easy way to explain the difference between UI and UX is with Jonathan’s simple analogy:

Imagine you’re designing a house. UX would be the foundation, while UI would be the paint and furniture.

Jonathan Widawski, CEO at Maze

The foundation (UX) comes first: establishing how each room connects and relates to the next, choosing functional locations for the doors, finding the most practical place to build the stairs, and so on.

Once the foundation is in place, you can start thinking about the interior design: hanging pictures in an attractive way, picking a style of furniture that suits the color of the wallpaper, organizing the kitchen utensils so they’re easy to reach without making the room look messy.

This example gives you a rough analogy of how design responsibilities are split between UX designers and UI designers working on a product: first, the logical flow of actions and fundamental parts are put in place, then the visual details are defined.

It also gives you a sense of how the collaboration works, with UX designers handing their work and recommendations over to the UI team once core concepts are tried and tested.

But a disclaimer is needed.

Should I worry about the exact difference between UX and UI?

No. Jonathan is quite clear on this. Here’s why:

The roles of UX and UI are being redefined all the time. In three years, the definitions will have shifted from what they are now. It’s not an exact science.

Jonathan Widawski, CEO at Maze

He adds that back in the day, people who made online software or products were simply known as web designers. It’s only since the design industry has matured that the more specific terms of UX and UI have become commonly talked about—along with the distinction between them.

But with the app and product design space still rapidly growing, newer, more specialist roles and terms like UX Writer, Content Designer, and Interaction Design are popping up all the time. The way we think about design is always evolving. That’s part of what makes it an exciting field to be a part of.

So while it’s good to have an analogy up your sleeve that explains your view on the UI/UX debate, remember that there’s no definitively correct answer. As Jonathan says: "We shouldn’t talk about UX vs. UI. Instead, it should be UX and UI because they overlap and complement each other."

What is UI design?

"UI design is about using typography, images, and other visual design elements to turn a basic interface into something digestible and usable," explains Jonathan.

UI design is the process of transforming wireframes into a polished graphical user interface. This both enhances a product's usability and creates an emotional connection between the end-user and a product.

A user experience (UX) is therefore made up of many user interfaces (UI), which come together in a (hopefully) seamless flow to form a product.

We can define the limits of UI in a much more tangible way than UX, as its focus is in the name: interfaces. The overall effect of a sequence of interfaces—and all the less tangible parts of a product experience beyond that—make up the user experience, but UI is purely concerned with the design of individual screens or interfaces on a user's journey.

What does a UI designer do?

A UI designer’s job begins where a UX designer’s job ends—at the prototyping stage. They take the wireframes and add visual design to make them more usable, aesthetically appealing, and optimized for different screen sizes.

Now, let's take a closer look at the typical tasks of a UI designer.

The look and feel of the product

  • Design research: Research provides information about users and competitors and gives insight into the latest design trends. This is crucial to find inspiration and create interfaces that meet user expectations.
  • Visual design: UI designers are responsible for designing the product layout and all the visual elements of the user interface, including colors, fonts, icons, buttons, and more
  • Branding and graphic development: UI design is closely informed by the brand positioning of the product overall. Designers have to strike the right balance between usability and consistently showcasing the brand identity established by the marketing or creative team. As a result, UI design is closely related to graphic design.
  • Design systems: To ensure product and brand consistency, UI designers create style guides, pattern libraries, and components that detail how each element should look (color, font, etc.)

A UI designer focuses on how the colors, typography, and images of a design connect to the brand of a product.

Jonathan Widawski, CEO at Maze

Responsiveness and interactivity

  • Responsive design: Interfaces need to adjust smoothly to all devices, platforms, and screen sizes, in terms of both form and function
  • Interactivity and animation: UI designers can use animations, transitions, or other interactive elements to design the interactivity of the interface
  • Prototyping: A UI prototype showcases every UI element and design interaction in real-time. UI designers create them to get a feel for how the product will work and for user testing.

What is UX design?

"UX design is about understanding the overall journey of your users and turning it into a product." According to Jonathan, UX design refers to the entire experience someone has with your product from start to finish. It attempts to answer the question: How can I help people achieve their goals in the simplest, most frictionless way possible?

In other words, UX design is concerned with the overall user-friendliness of an entire customer journey. And because UX has such a rich history, there’s some debate over where it starts and ends.

UX as a category is not necessarily tied to websites. Steve Jobs famously included the experience of going to an Apple store as part of UX. Even the location had to be perfect. So how you buy a product, how you first see it—this is all important to UX.

Jonathan Widawski, CEO at Maze

However, Jonathan sees the limits of UX in terms of product development and web design quite clearly: "UX starts with a problem and ends with a wireframe or prototype."

Depending on how much you already know about design, that sentence could either clear things up or make them more confusing. So let’s dig deeper into what UX design means in practice.

What does a UX designer do?

"The role of a user experience designer is to understand the customer journey. That means understanding the target audience, interviewing customers, defining user flows, and conducting user testing," says Jonathan.

Let's take a look at the typical tasks of a UX designer.

Research and strategy

  • Plan: At the beginning of the UX design process, designers need to create a strategic plan that ensures stakeholders are aligned and working towards common goals
  • User research: While we often think of design as something visual, a UX designer’s work is mostly conceptual problem-solving based on research and data
  • Information architecture: Information architecture (IA) focuses on organizing and labeling the content of a website, app, or product. The goal is to help users find information and accomplish their goals.

Wireframing and prototyping

  • Creating the user flow: UX design is the process of speaking to users to pinpoint their needs, then devising the best user flow that will help them complete their tasks. This conceptual focus on the user journey means that a UX designer’s influence on how a final product actually looks is limited. As Jonathan explains:
  • Wireframing: A wireframe is like the skeleton of an interface—the bare minimum needed to understand how a design will work on a functional level. It can be produced digitally, or even drawn on paper.
  • Testing: The best way for a UX designer to know if they’re doing their job right or not? Testing with real users. By testing early in the design process with a rough prototype—or even just a paper mockup—UX designers gather data from users to validate their ideas and assumptions.
  • Analysis: UX designers work closely with product managers and researchers to analyze the test results and define the next steps

Why is UI/UX important?

The combination of UX and UI shapes your entire experience of a product. While two comparable products might get you the same end result, their UX/UI reflects how they provide it. If one of the products has better UX/UI design than the other, people are going to use it more because they prefer the overall experience.

According to Jonathan, these days UX design is the number one differentiator between competing products:

Great UX isn’t just nice to have now—it’s expected. 40% of people who experience bad UX will turn to the competition. Some products succeed because they provide great experiences.

Jonathan Widawski, CEO at Maze

To illustrate the point, Jonathan uses Trainline (thetrainline.com) as an example. Trainline is how pretty much everyone buys train tickets online in the UK. Their tickets aren’t any cheaper than if you buy them directly from individual train service websites or mobile apps.

However, all the ticket options are displayed on one page. And getting from the homepage to checkout is relatively simple. The result? They sold £3.7 billion of tickets last year—up from £3.2 billion the year before.

A study by McKinsey also shows that design-focused companies grow in revenue twice as fast as industry benchmarks. So UX and UI design is both a competitive advantage and a massive differentiator.

How do UX design and UI design work together?

Despite the differences, UX and UI are not entirely separate entities. On the contrary, both elements are crucial and work closely together to determine how a product will look and function, with each one influencing the other.

Imagine you spend weeks creating a beautiful site only to realize that people can't find what they are looking for and struggle to navigate. No matter how attractive the interface is, without UX, users will become frustrated and leave your site.

On the other side, imagine you conduct user research and testing to ensure an optimal user experience, but the text on your site is so light that people can hardly read it. Even with good UX, users might be discouraged from using your product if the UI isn't pleasing or accessible.

Simply put, there is no UX without UI and vice versa. Therefore, when it comes to creating a user-centric product, you will need both aspects to ensure users can interact with your product with ease and pleasure.

This leads to a similar related question for newcomers to the field of design.

Which should I specialize in: UX or UI?

For Jonathan, it’s way more important for designers to have a well-rounded understanding of UX, UI, and other elements of design, such as typography, content or colors, than to over-specialize in one area. A team of good designers will be able to contribute and give feedback throughout the entire process—which is much better than working within UX and UI silos.

Most companies that hire UI and UX designers aren’t looking for specialized people. Designers normally end up working on all aspects of a product. So if you’re new to this, learn about the whole design process.

Jonathan Widawski, CEO at Maze

Of course, once you have experience working on different areas across product design, it’s normal to gravitate toward either the UX or UI side of things.

But just as the exact definitions of UX and UI rapidly change all the time, the tech industry often takes a fast-moving approach to design. In these environments, individual flexibility is key. A person who knows both UX and UI can jump in at any point in the design process to give their input. That makes them a valuable team member.

What's the role of research in the UX/UI design process?

Research is an invaluable step of both the UX and UI design processes. For a product to be successful, both UX and UI designers need to gather as much information as possible about what users want and expect from a product. Research provides insights into user needs and desires, user behavior, design trends, and competitor strategies. This gives UX and UI designers more context, allowing them to make informed decisions and determine whether they’re moving in the right direction.

Research in UX design

Before diving into design, UX designers need to make sure they are tackling real, relevant problems. But what's the best way to do that?

User research is the process of getting insights from real users to understand their needs and pain points. This allows designers to search for common problems and then focus their efforts on developing the right solutions.

Incorporating UX research throughout the design process is vital to make informed, unbiased decisions and validate design ideas early on.

Here are some of the most common UX research methods:

  • User personas: A user persona is a semi-fictional representation of your typical user. The goal is to help UX designers create solutions with a specific target user in mind rather than a generic one.
  • User interviews: User interviews are a quick and easy way to collect user data, discover why users face a particular problem, and see if your design meets their needs
  • Focus groups: A focus group is a moderated discussion with a group of users to gather insights about their attitudes, beliefs, desires, and perceptions of a product.
  • Surveys: A UX research survey is a set of questions that designers send to a targeted group of users to investigate their attitudes and preferences

Research in UI design

Research is usually the first step in the UI design process and ensures that the user interfaces are designed with user needs and expectations in mind.

As the UI design process starts after the user experience has been defined, UI designers work closely with UX designers and product managers to analyze user research results, get to know the target audience, and understand the goal of the design project.

UI designers also need to identify which color palettes, patterns, fonts, and other visual elements would work best. A great way to do that is competitor benchmarking—researching other companies in the same industry to learn what UI components they use, and what works better than others. This allows UI designers to find inspiration and make sure the design elements they choose fit well with users' expectations and preferences.

How can I learn more about UX and UI?

If you’re a budding designer looking for an inspiring introduction to the design space overall, Jonathan recommends reading The Design of Everyday Things by Don Norman:

The book doesn’t even touch on digital design. It’s about usability and discoverability in a universal sense, and how we define these terms. A go-to book for anyone getting into the field.

Jonathan Widawski, CEO at Maze

Make sure to also learn outside the field, by exploring different professions within the design space, such as graphic design or UX writing, and how they interact with UX and UI.

But he also emphasizes that the best learning you can do is navigate websites yourself. See if you can pick out real-life examples of good UX and UI, then analyze what makes them work.

Because at the end of the day, doing hands-on design is much more valuable than stressing over definitions. As Jonathan puts it:

Don’t get too hung up on terms and terminology. What matters is understanding the customer journey and designing with your users in mind.

Jonathan Widawski, CEO at Maze

Frequently asked questions about UX and UI design

What is user interface (UI) design?

User interface design is the process of transforming wireframes into user interfaces that are aesthetically pleasing and easy to use. A user interface is the point of interaction between the user and the product they are using. So, UI design focuses on all the visual and interactive elements of a product interface, such as buttons, menu bars, icons, and more.

What is user experience (UX) design?

User experience design is the process designers use to build products that provide great experiences to their users. UX design refers to feelings and emotions users experience when interacting with a product. It focuses on the user flow and how easy it is for the user to accomplish their desired goals.

What’s the difference between UX and UI design?

User interface (UI) design refers to the aesthetic elements by which people interact with a product, such as buttons, icons, menu bars, typography, colors, and more. User experience (UX) design refers to the experience a user has when interacting with a product. It focuses on the user journey and how efficient and easy to use the product is.

Try rapid testing now, for free.