Ever since I started immersing myself in everything UX, I heard and saw the terms “UX-design” and “UI-design” being used on the same things or talked about in the same sentence. Or so it seemed to me. I found this a bit confusing when I read case studies or searched the web for UX-related content, so I decided to dive a bit deeper to find the similarities and differences between the two.

What’s what?

UX design stands for “User Experience Design” while UI stands for “User Interface Design”. Both are important and work closely toghether – but the roles they play are very different.

User experience design, or UX, is a human-first way of designing products and encompasses all interactions and “aspects of the end-users interaction with the company, it’s services and products” (Don Norman).  In UX, a pain point, a user need or problem is identified and researched, then a rough prototype/wireframe is created and validated/invalidated through testing. Most often the Design Thinking Process is followed, and the steps are: Empathize, Define, Ideate, Prototype and Test. The Design Thinking process is iterative and it is common to go back and forth through the steps until the goals are reached.

User Interface Design, or UI, is a human-first approach to designing an aesthetically pleasing product. It can be the visual design of a website for instance and how the users interact with the site. “Visual” is the look and feel of the product and “interaction design” is the way the user interact with the product. Unlike UX, User Interface Design is a strictly digital term, and is the point of interaction between the user and a digital device or product. UI considers the look, feel and interactivity of a product and will think about things like icons, buttons, typograhy, colors, spacing imagry and responsive design (Careerfoundry).

UX makes interfaces useful. UI makes interfaces beautiful.

In terms of a digital product like a website, people go there with a goal in mind and to do stuff. A UX designer might look at the target audience and figure out what’s important to them and what they value. To figure this out, they ask questions, observe users, interview and make prototypes and test to see if they can validate their assumptions about the users and their goals.

Next, a UI designer might look at the personality of the website. The design, use of colors and other interactions. What kind of personality does the website have? Does it allow people to do stuff? How is the content presented and does it draw people in? It’s about positive emotions and making those personal connections and getting people hooked.

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success” – Rahul Varshney.

Wrap-Up

While being two very different things, UX and UI also have many things in common. I’ve seen that many take on both roles, or companies advertise UX and UI as a single role. While it is possible (and fun) to work with both UX and UI, I think it is important to keep clear boundaries between the two since they require different skills and methods. Even if you have the skills and knowledge, it can make the design process less focused and switching back and forth between the conceptual phase and implementation can cause us to miss important parts of a design.

UI Designer

✔️ Compose layouts
✔️ Create visuals
✔️ Build mockups
✔️ Focus on creating visual touchpoints
      that allows the user’s to interact with
      a product

Resources:

Adobe XD
– UI vs UX Design: the similarities & differences

Careerfoundry
– These are the 5 big differences between UX and UI design
– The differences between UX & UI design – a guide for 2021