UX vs. UI Explained: What’s the Difference?

UX vs. UI Explained: What’s the Difference?

Are UX and UI design the same thing? In this guide, we’ll help you to better understand UX vs. UI and how these different roles work together toward one goal.

UX and UI are both fundamental elements of design. But, people often confuse the two, sometimes using the terms interchangeably. 

It’s easy to understand why. First, UX and UI designers work closely together throughout the development of a digital product. In some cases, the same person takes on both roles. Also, UX and UI designers share a common goal: to increase user satisfaction.

However, they are indeed two different roles. Though they share a common goal, UX and UI teams focus on different aspects of design to achieve that goal.

This guide will help you to gain an in-depth understanding of each discipline, how they differ, and how they come together to help deliver a successful product.

What Is UI?

UI stands for user interface and concerns the aesthetics of a digital product, along with the interactivity behind those aesthetics. That is the graphical layout of the product and any visual elements, such as typography or color schemes. Here’s an example from the UI design style guide we created for the Celbrea breast health monitoring app:

UX vs UI: Celbrea breast health monitoring app UI

Here you can see the color code and sets of icons we created for the user interface. Every design choice has meaning. In this case, the intention was to produce a relaxed and sympathetic feel as well as an attractive look.

UI design also includes animations, transitions, and interaction design, which is how interactions are represented visually.

The user interface is key as it has an impact on the user. Something as simple as the shape of a button or the appearance of an icon affects whether a user knows how to carry out their intended action. 

Designs must, of course, be aesthetically pleasing to the user. But good UI design also goes beyond that.

UI designers must carefully consider the visuals they use and what they represent, then make sure those visuals are consistent throughout. This affects how easy it is to use or navigate a product. 

Plus, as you can see in the above example, UI design can even express the personality of the brand behind the product or the atmosphere they’re trying to produce. 

What Does a UI Designer Do?

UX vs UI: Graphic designer working on her computer using graphic tablet

A UI designer is responsible for designing the aesthetic elements and layouts of a product, i.e. the product’s interface. To be able to do this effectively, they must carry out extensive research and testing, such as:

  • Conducting user research prior to the design phase
  • Tracking human-computer interaction (HCI), running tests, and collecting data during and after the UI design
  • Using data to recommend improvements and further iterations of a product throughout the design process

Furthermore, UI designers must consider the accepted visual language of digital products.

Say they were designing a fitness app. They’d need to adhere to certain design rules in line with what users would expect from a fitness app. For example, in this category, users require clear graphs and charts so they can view their progress quickly and easily.

That’s why we chose to distil complex user data into easy-to-read graphics when we worked on the Biostrap health-tracking app:

UX vs UI: Biostrap health-tracking app

UI designers perform competitor research to gather information about what appeals to users in a given industry. It’s also useful for gauging what’s worked in the past and what hasn’t. 

The best UI designers find a balance between design that stands out but also makes sense to the user visually.

What Is UX?

UX, or user experience, refers to the overall experience a user has with a product. It encompasses a myriad of disciplines, including but not limited to user interface design, usability, functionality, and engineering.

Don Norman, a cognitive scientist and usability engineer, first coined the term UX. He explained the concept in his 1988 book, “The Design of Everyday Things.” When he worked at Apple in the mid-’90s, the idea of user-centric design really took off.

We can thank Norman for many of the pillars of user experience design. Namely, the idea that we must first understand users and build products for them, rather than building products first and trying to convince users to accept them.

UX Design Objectives

UX vs UI: Colorful sticky notes on bulletin board

An important goal of user experience design is to provide value to target users. Peter Morville, an information architecture and UX expert, mapped out the key qualities of UX design in his UX Honeycomb

UX Honeycomb design

The term “valuable” is at the center of the honeycomb. All the aspects of a well-designed product are surrounding it: useful, desirable, accessible, credible, findable, and usable.

But, you must remember that these aspects are determined by the users of the digital product in question. In other words, the product has to be useful, desirable, etc., to the target audience. It must support that particular user’s journey.

There’s no overarching set of UX design rules. It all depends on the research in each given context. That’s the only way to be truly user-centric.

What Does a UX Designer Do?

UX designers are responsible for the overall experiential design of digital products, such as software or mobile apps. They may carry out the following tasks:

  • Building user personas
  • Conducting usability testing
  • Performing user research and competitor analysis
  • Wireframing and prototyping

Again, extensive research is essential to the UX design process. A UX designer must anticipate the needs and expectations of users. 

To give you an example, for the Celbrea breast health app, we created a number of user personas and mapped them to features they would require along their journey.

User and features mapped out

As you can see, UX designers focus on how users interact with digital products on both a granular level and throughout the entire user journey to create user-centric designs.

UX vs. UI: How Do They Work Together?

Group of people brainstorming on mobile app designs

You can compare creating a digital product to building a house.

In this scenario, the UX designer is similar to an architect. They design the specs based on who will live in the house, along with how they’ll use each room and the building overall. The engineers are the builders, and the product manager is the site manager who makes sure the entire project goes smoothly. 

Finally, the UI designer is like the interior designer, in that they take care of the visual design. They make sure the house looks appealing but also that each element of the design is suitable for its intended purpose. For example, kitchens and bathrooms require tile, whereas carpet would be better in other rooms.

Just as both the architect and interior designer are essential to building a new house, UX and UI designers are both essential to product development.

UX design comes first. They create the bare bones of a product, i.e., the wireframes and functionality. Then, the UI designer polishes it off with the necessary graphics.

Yet, there is indeed a symbiosis between UX and UI designers. They must work together closely on user research as well as further design iterations of a product.

The reason being, if a change is made to the UX, this impacts the UI and vice versa. For instance, if a UX designer finds through user testing that the navigation is off, then both the information architecture and how it looks may need to be reconsidered.

Understanding UX and UI Once and for All

UX and UI designers are like the “Property Brothers” of the design world. They carry out different roles that are closely linked, and people often confuse the two.

UI is all about the visual design elements. UX, on the other hand, is more about the functionality of the design. But both place a strong emphasis on user centricity and usability. Moreover, both require a ton of careful research to achieve their common goal of user satisfaction.

Ready to invest in UX? December Labs specializes in UX/UI design for mobile apps, the web, and other digital products. Get in touch with our design team to discuss your existing products or future projects.

News and things that inspire us

Receive regular(lish) updates about our latest work

Let's work together

Ready to rocket-fuel your product? Get in touch with our growth strategists to vet your idea or product and discuss options for approach and solutions.

Get in touch