What's the difference between UI and UX?

What's the difference between UI and UX?

To a non-designer, the difference between UX and UI design might seem mystifying. The terms are often used interchangeably, and to confuse things further, sometimes they’re collapsed together under the umbrella of product design or digital design. When you’re looking for design support for your app or website, what skills should you be looking for? Do you need to hire someone for each role? Who does what, when?

Whether you’re a product owner who wants to have better conversations with your designers or you’re a founder running lean and looking to ramp up your DIY design skills, this guide will break down the difference between UX and UI and help you understand why it’s important to know the difference.

Let’s start by taking it down to the studs.

What is UX?

Put simply, it's how things work.

UX stands for user experience — all of the aspects of a user’s interaction with a product, service, or digital platform. UX is fundamentally concerned with understanding a user’s needs, motivations, and pain points throughout their journey to solving a problem or completing a task.

Though we most commonly talk about it in terms of apps and web design, UX is not an explicitly digital discipline. It applies to anything that can be experienced. A good example would be a visit to the Apple store, the gleaming, minimalist temple of commerce that hardly feels like shopping and sets a new precedent for experiential retail. Steve Jobs — who was notoriously obsessive about every detail, down to the minuscule screws inside a Mac’s hard drive — considered the end-to-end UX of an Apple product. Every single touchpoint on the user’s journey was designed with clear intention, starting in-store through the product unboxing and even to getting service at the famous “Genius Bar.”

The field of user experience emerged from the human factor and ergonomic principles in architecture and industrial design, as well as computer engineering. Today, it’s an integral aspect of a user-centered design (UCD) process, one that involves users at every stage of iteration in order to create useful, usable, accessible, and delightful experiences.

What is UI?

Put simply, it's how things look.

UI stands for user interface. An interface is the point of interaction between a user and a device. A screen is an interface, but so is a panel of buttons in an elevator or a remote control. Unlike UX, UI is much easier to describe in tangible terms because it's focused on visual elements. Simply put, UI considers a product’s look, feel, and interactivity.

When it comes to digital interfaces, i.e., anything screen-based, we can break UI into more granular components. There’s the graphical user interface (GUI, which you’ll sometimes hear pronounced as “gooey”), which includes the icons, buttons, logos, and images that represent calls-to-action or navigation.

With the advent of smartphones and touchscreens came the introduction of the gestural user interface: the swipes, taps, two-fingered scrolls, and pinches-to-zoom of interaction design that have become a second language to us. Finally, many devices use haptics like clicks or vibrations that “allow non-responsive surfaces like touchscreens to emulate the feeling of using real objects like buttons and dials.”

It’s not that we’re just obsessed Apple fans, but Steve Jobs did actually write the book on user interface design. Published and revised regularly since the launch of the Apple II desktop in 1977, Apple’s Human Interface Guidelines have been an indispensable resource for UX and UI designers developing apps for Apple’s OS platforms.

The guidelines not only deliver specifications on how screen elements should look and behave but also include a set of design principles that underpin Apple’s core design philosophy. Naturally, Google has a similarly robust set of guidelines (and principles) for its Android platform.

UI and UX: A side-by-side breakdown of the design process

The most practical way of illustrating the breakdown between UX and UI is to look at who’s doing what during each of the phases of a typical design process. Here’s a simple chart we’ve created to make it even easier:

A guide to UX and UI in the design process
A guide to UX and UI in the design process

Now that we have an understanding of individual roles and responsibilities, we can look at how the two overlap and collaborate.

How do UX and UI designers work together?

A user experience essentially comprises many user interfaces that come together in a (hopefully) seamless flow of actions and tasks. UX and UI designers are mutually dependent on one another, with their roles, activities, and outcomes fitting together like puzzle pieces.

The UX designer tends to take the lead in a design process. Working alongside the product owner or key stakeholder(s), UX designers own the overall strategy in terms of determining how to organize the activities and deliverables needed for each phase. They spearhead design research activities and create target user personas. Their user flows and wireframes are the blueprints for the UI designers to work from. UX designers drive customer advocacy throughout the design process, ensuring that decisions about form and function track back to resolving a user problem or meeting a user need.

In parallel, the UI designer will take ownership of the product’s creative direction and work closely with any branding guidelines and assets provided. UI designers are tasked with bringing the brand values to life and expressing them in a way that supports the overall user experience. UI designers turn wireframes into detailed visual design mockups and prototypes that show how a page will look, feel, and behave. Good UI must be as purposeful and accessible as it is visually appealing, which is where it dovetails with UX design in particular. No amount of beautiful UI design can fix poor UX.

UI designers are also a bridge to the development team as they are responsible for the delivery of the final design assets, specifications, and accessibility standards needed for front-end coders. UX also plays a key role here in ensuring the usability of the end-user experience and leading user testing efforts to gather feedback.

With the rise of no-code platforms like Squarespace and more sophisticated design and prototyping tools like Adobe XD or Figma, hybrid UX/UI roles are emerging. For example, the role of “product designer” might imply the ownership of a design process, from strategy through execution. Product designers have flexible “full-stack” skillsets that span across UX, UI, and front-end development. Unsurprisingly, these folks are sometimes referred to as “unicorns.” You’re likely to find this role in the tech industry and startup environments, where a “jack-of-all-trades” approach is often needed to keep things lean. Product designers can also be product managers, informing design decisions with business strategy.

Why understanding the difference between UX and UI matters

For founders and product owners, understanding the difference between UX and UI can put you in a better place to make decisions about where, when, and what kind of help you might need to bring your idea to life. It might also help you identify gaps in your own skillset so you can focus on building it up.

Though UX and UI may focus their attention on different aspects of the design process, what’s far more important is what they have in common: the user. As design skillsets have hybridized and design toolkits have been democratized to be more usable and accessible to a wider audience, what matters is less a division of labor than an ability to connect each design decision to a clear intent that serves a user need. Regardless of roles, understanding your user is the most important design skill of all.

When that's all clear and when you think you're ready to start designing, you can create a Uizard account here (It's free!).