UX vs. UI Design.

What’s the difference?

At first glance, the only difference between UX design and UI design is a single letter. In reality, the X and the I stand for two completely different professional fields. In this article, we will dive into what UX designers and UI designers do exactly — and, above all, how the two fields differ from each other.

UX UI Design: Similarities

UX and UI designers both design digital products, such as websites or apps. This is why their work is sometimes confused with that of a web designer or a graphic designer. However, there is a lot more to UX UI design. Let’s first look at the letter that unites the two designers: the U.

In both cases, the U stands for the user — meaning the user of the digital product. UX then refers to the User Experience, while UI is short for the User Interface.

What unites the UX designer and the UI designer is the importance of empathy in their work: When designing digital products, both of them always have the needs of their users in mind. This is crucial because the aim of both UX and UI designers is to make websites or apps as user-friendly as possible. Since UX designers and UI designers often join forces to achieve this goal, the two professions are sometimes summed up as UX UI design.

Difference: UX vs. UI Design

But how exactly does the work of UX and UI designers differ? In short: UX design describes the functional aspect, UI design the visual aspect.

• User experience (UX) is about how a digital product feels, how we interact with it or how well it works.
• User Interface (UI), on the other hand, describes how the product looks, how it is visually designed, or how we perceive it aesthetically.

As an analogy, you can imagine a house being built: The first step is always the architecture, the static, and the structure. Floor plans have to be determined, pipes are installed in a way that makes sense and walls need to be constructed. All this obviously happens before we furnish the house or hang pictures. Form follows function.

What does a UX designer do? Examples

Just like the architecture of a house, UX Design can also be seen as the architecture of a digital product. When using a website or an app, our experience can be either positive or negative.

If the UX is poorly designed, we will experience frustrations. This can be due to menu bars arranged in a confusing way, forms not working, OK buttons that are hard to find, or error messages popping up without suggesting solutions.

In contrast, great UX Design is something we usually don’t even notice. We interact with the product so intuitively and smoothly that we don’t have to give it a single thought — a UX designer has already done that for us. Let’s look at some examples.

• Drop-down with suggestions

When we type a word into Google, a drop-down menu opens with search suggestions. This feature seems obvious to us in everyday use, but it is the result of the work of a UX designer.

• List-view vs. Map-view

The fact that we can usually display our accommodation on booking platforms in a list view as well as on the map is also the result of a UX designer’s thought process.

• Buy with one click

The concept of buying with just one click instead of having to go through the whole checkout process was thought up by a UX designer.

• Autofill

Many apps require a confirmation code now and then, which is sent to us via text message. If the autofill function is switched on, it shows us the code from the text message directly in the app. This saves us the annoying switching between different tabs and then copying and pasting the code. Again, a genius UX designer was at work here.

What does a UI Designer do? Example

After the UX Designer has done their magic, it is the UI Designer’s turn: He or she now designs the visual interface. But beware: UI design involves more than just graphic design. Sure, choosing colors or fonts is also part of it. But apart from making an interface look modern and visually appealing, the UI Designer ensures that the visual arrangement contributes to better usability and clarity. Therefore, UI design can in some way be seen as a part of UX design — naturally, the user interface also plays a crucial role in making a product user-friendly.

A good example are the switches in iOS. Their design indicates at one glance whether they are on or off. If you’re not a designer yourself, you’ve probably never analyzed these switches further — their design is again ‚invisible’. The UI Designer’s work allows you to sit back and just enjoy your user experience.

The UX UI ketchup meme

If you’ve spent any time looking into the topic of UX vs. UI, chances are high you may be familiar with the famous ketchup meme. The simplified comparison has frequently been subject to criticism, but it can be helpful for obtaining a first understanding of the difference between the two fields. In the meme, the difference between UX and UI is illustrated using the well-known Heinz ketchup bottle.

The left side shows UI Design without any UX Design: a beautiful-looking, high-quality glass bottle with problems in handling.

(Yup, we all know the frustrating attempts of getting ketchup out of the glass bottle. For some inexplicable reason, the ketchup is always stuck, just to then suddenly burst out in a whole lake and onto our jeans.)

This user-unfriendly concept is contrasted with the not quite as elegant but all the more practical plastic bottle: That one allows us to get exactly the right dose of ketchup on our plate — and it also keeps our clothes free from stains.

UX vs UI Design: Conclusion

Both UX design and UI design are important fields. Contrary to the depiction in the ketchup meme, UX and UI Designers are not competitors but rather complement each other in their work. Only together can they create digital products that users love — both for their usability and their aesthetics. If you want to see what that looks like, check out this link.