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

The difference between User Interface (UI) and User Experience (UX) is that UI refers to the aesthetic user elements within a product, while UX is about the more functional elements a user interacts with in a product or service. UI is all about the visual parts of a product, like color schemes, navigational elements, button styles. UX on the other hand, focuses on how a user moves through the product and what guides them. UX is more structural, where UI is more visual.

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.

The key differentiator between UI and UX is what they focus on, and how the user interacts with them. 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:

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.

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

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."

"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.

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.

"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.

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.

"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.

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:

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.

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.

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.

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.

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.

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:

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.

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:

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: