ui vs ux

UX vs UI Design — What’s the Difference?

Have you heard the terms UX and UI being thrown around when researching your products or your website? Many times, the lines are blurred and those terms get used interchangeably, but there really are some big differences between the two.

Although UX and UI design work closely together in creating a successful product, they are very different pieces to the process.

Let’s break it down ...

What is UX?

UX stands for user experience. This is the overall experience a user has with a given product or environment. Having a well-designed product as opposed to a poorly designed product can mean the difference between a wonderful experience and pure frustration.

Cognitive scientist Don Norman is credited with describing “user experience” as something that, “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

So, UX design doesn't just mean apps and websites. UX can be used to improve the experience of an app on your cell phone or something as simple as the use of a fork or a visit to your favorite store.

UX design is not about how something looks, it is about the overall feeling and experience you get while using the product or service.

Sample UX Process:

  1. User Research
  2. Information Architecture
  3. Create a mock user persona
  4. Create a users’ path to the goal of the project
  5. Content Creation
  6. Wireframing & Prototyping
  7. Usability Testing
  8. Works with UI designers & developers to create product

What Is UI?

User interface design (UI) deals more with the design of the visual elements that users need to interact with a product, often coinciding with graphic design and front-end development. User interface designers aim to create a visual language that is consistently applied across a product while working closely with the UX designer to maintain what was set in place to provide the best overall experience.

Think of UI as the actual icons and elements on your devices that you interact with on the screen. What does that icon or button do when a user clicks, taps, swipes, or interacts with it in any way?

Unlike UX, UI design is mostly about creating an intuitive visual roadmap for a user, so that they do not have to think too much about how to use a product in an aesthetically pleasing way.

Generally speaking, UI elements are:

  1. Input Elements
  2. Information & Navigational Elements
  3. Icons
  4. Typography
  5. Color schemes
  6. Imagery
  7. Animations
  8. Brand

ux-ui-content

UX & UI Complement Each Other as One

So as you can see, UX and UI design are different and yet need to work together to create the perfect product and experience. They go together like peanut butter and jelly playing off each other — one without the other is just not as good!

You could have a wonderful idea for your next website or app and have all the research in place, but without the visual guide for your users to know how to use it, it would go nowhere. On the other hand, you could have a beautifully designed product, but if it is hard to figure out what the product is or the strategy behind it and its user, that would also go nowhere.

UI is how we get there, and UX is how we feel once we are there. This is why UX and UI are quite different yet complement each other as a whole for a usable product.