Web designers working on user experience plans on a whiteboard.
MIND AND I/Shutterstock.com

In the web and app design professions, you’ll hear two terms used very often: UI and UX. Sometimes they’re used interchangeably, sometimes not, and they often appear to refer to very similar aspects of a product’s design.

So what are they, exactly? Is there even a difference between UI and UX, or are they basically the same? That debate’s been going on for quite a while in the design space, but most people agree that they are two distinct aspects of design. Let’s take a look at what those distinctions are.

What Are UI and UX, Really?

Think about the technology you use every single day. Your smartphone, laptop, desktop, even appliances like a smart thermostat. There are two main elements to each one: the user interface (UI) and the user experience (UX).

Adobe describes the user interface, or UI, as the place where people interact with machines. That encompasses everything from your smartphone screen to the keyboard on your laptop. It’s what you use to operate that machine to achieve your goal — whether that’s changing the temperature in your house or doomscrolling. UI includes every aspect of how we as people interface with products.

The user experience, or UX, is a little harder to pin down. UX deals more with the intangibles of a product, like how you feel and what you’re thinking during the process of using it. The idea was coined by Don Norman during his time at Apple in the 90s, and he’s since described it as “everything that touches upon your experience with a product.” All aspects of someone’s interaction with a company, from its services to the end product, can be categorized under UX.

Design coaching website CareerFoundry defines the difference between UI and UX this way: UI is about how a product’s interfaces look and function, while UX is about the overall feel of the experience.

How UI and UX Work Together

Both these elements are necessary to every product’s design. For example, when a web designer uses responsive design so their site fits whatever screen it’s being viewed on, it affects both UI and UX. The interface works more smoothly, which gives the user a better experience using that website.

UI and UX also affect a website’s accessibility. If someone with a disability can’t use a website, that’s a bad user experience caused by a bad user interface. Luckily, more designers than ever are understanding that and approaching both UI and UX design with accessibility in mind.

Designing UI and UX

When building a new app, website, or product, a UI and UX designer will have to ask certain questions during development. Looking at what each designer does can provide insight into the differences between UI and UX.

Typical Job Tasks of a UI Designer

A UI designer will be concerned with the look, feel, responsiveness, and interactivity of a product. Some of the tasks they might do on the job include:

  • Doing design research to get insight into the latest design trends and gauge people’s expectations for good design.
  • Developing visual design including graphical elements, colors, fonts, icons, and more.
  • Designing systems like style guides and pattern libraries to make sure the design of the product remains consistent with its brand.
  • Looking at interactivity as a design element to improve responsiveness. That can include animations and transitions that make a page or app flow more smoothly.

The work doesn’t stop there. Once the product is far enough along, a UI designer can also prototype and test it to see how it functions in the real world.

Typical Job Tasks of a UX Designer

Jonathan Widawski, CEO of user testing company Maze, says that “UX starts with a problem and ends with a wireframe or prototype.” Some things a UX designer might do include:

  • User research to determine what problems people face when using similar products, and how to solve them.
  • Information architecture (IA), the practice of organizing the elements of an app or website in ways that are easy and intuitive to find. Good organization helps create a frictionless experience for the person using a product.
  • Project planning to ensure that everyone on the product design team is on the same page.

UX designers will also construct wireframes — barebones versions of a product’s interface — to see how they would work in the real world and anticipate the user experience.

Hand holding a paper with colorful UX designs
Example of a wireframe design Chaosamran_Studio/Shutterstock.com

Why Are UI and UX Important?

From a competitive standpoint, the product with the best UX is often the one people choose when offered several similar options. According to McKinsey and Company, design-focused companies see revenue growth twice as fast as those that aren’t.

On a wider scale, UI and UX go into the products each of us uses every day. Imagine if the act of driving a car in a car-dependent area were so difficult you couldn’t do it. Or if traffic signals didn’t work in an efficient manner, or if it took ten steps to log into your email. The reason all of those things work the way they do is years of research and testing into user experience and user design.

Hopefully, you’ve got a grasp of the basics of UI and UX after reading this. If you don’t grasp the finer points yet, don’t worry—the definitions of UI and UX are constantly being updated, and the field continues to evolve.

RELATED: What Is "Responsive Design," And How Do You Use It?

Profile Photo for John Bogna John Bogna
John is a freelance writer and photographer based in Houston, Texas. His ten-year background spans topics from tech to culture and includes work for the Seattle Times, the Houston Press, Medium's OneZero, WebMD, and MailChimp. Before moving to The Bayou City, John earned a B.A. in Journalism from CSU Long Beach.
Read Full Bio »