You might see the “UX/UI designer” job title and think UX and UI are interchangeable terms. But while there is overlap, they are separate disciplines.
In this video, we break down the differences between UX and UI design and explore why both are essential for a successful user experience.
“UX design” stands for “User Experience design.” UX teams study how users interact with a product or service to understand the users’ needs. These insights allow designers to create an intuitive, efficient product that people will actually want to use.
“UI” is short for “User Interface.” UI focuses on the screens, icons, buttons, visual elements and interfaces in a user experience. We will explore both disciplines and cover the following topics:
What are UX and UI in design?
What are the differences between UX and UI design?
UX and UI design: How do they work together?
UX vs. UI design: Which career path should I take?
How do I specialize in UX or UI?
What is UX design?
UX designers aim to create products with relevant, meaningful, usable and pleasurable experiences. They look at a product holistically and focus on meeting the users’ needs. UX designers use a process called “user-centered design.” The practice of UX design ensures that a product is easy to use and enjoyable. Have you ever been tied up in a bureaucratic process only to become frustrated and discouraged? UX design practices could even make that experience pleasurable—imagine that!
Interior designers and architects create physical spaces that are comfortable and easy to navigate; UX designers do the same for digital spaces. To make the best user experience, designers consider the context in which users will use the product (for instance, do they use it while on the move?). They also design around the device the product appears on or what time of day the product gets the most usage.
Accessibility, information hierarchy and navigation flows are part of UX and require frequent collaboration with the UI designers to ensure the product works for the most users possible. The goal is to reduce “friction”—a term for unnecessary difficulty or stress when using a product.
What is UI design?
UI designers build interfaces for digital products or services centered on aesthetics and utility. UI is more specialized than UX design because it exclusively focuses on the elements that users directly interact with, such as buttons and icons. While UI elements tend to be visual, there are other types of UI, too—for example, voice- and gesture-based interfaces. There’s often a misconception that UI design is virtually the same as graphic design. While there are similarities and they apply some of the same skills, UI designers create interactive visual elements (buttons, screen animations, layouts), and graphic designers make static elements (logos, header images). A user experience contains several user interfaces that create a whole product.
© Interaction Design Foundation, CC BY-SA 3.0
User interfaces are the most tangible aspects of a user’s experience. Get it right, and people can better navigate a product that is appealing and intuitive.
Examples of UX vs UI
User experience is a user’s overarching, all-embracing, holistic experience. It encompasses everything the user sees and feels, including the problem the product is trying to solve and where a product is used.
User interface refers only to the screen, buttons or other things that make up the interface.
UX stalwarts Don Norman and Jakob Nielsen illustrate the distinction between UX and UI with this example:
“It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.”
From the moment you step into a grocery store to the moment you walk out with your groceries, you’re in the store's user experience. Everything you see is designed with purpose, from the aisle size to the organization of the shelves, even the temperature. All of this forms the user experience.
If you’ve gone shopping at your usual store, but instead of paying via a cashier, you opt for self-checkout, the interface you use to ring up your items and pay is part of the user interface.
In summary, UX includes UI, and UI is part of a user experience.
Like an iceberg, visual design is only the surface of a user experience. Underneath, there is much more, including a skeleton, structure, scope and strategy. These layers influence each other, so are by no means independent. Decisions taken on one plane can affect other layers. New issues or opportunities could arise, which might impact the experience. For example, if the team encounters technical challenges or budgetary constraints during development, they might have to revisit some design decisions.
© Interaction Design Foundation, CC BY-SA 3.0
If you have the store’s app on your phone or visit its website, that is part of the user experience. To fully enjoy that experience, the user interacts with the interface.
UX design decides what features are going to be in the app. Will it have a loyalty program where you gain points for each purchase? Will the user be able to track the points on the app? Perhaps the app allows you to shop online or see the current specials on offer—all of that is part of the user experience. However, the typeface, layout, icons, spacing and visual style are all decided by user interface design.
UX is more abstract. It incorporates a user’s environment, mood and context. UI, on the other hand, is more tangible—you directly interact with the UI.
The table below shows the most significant differences between UX and UI design.
UX Design | UI Design |
Focuses on the holistic experience of the user | Focuses on the specific visual touchpoints of the user |
Centers on strategy, structure and interaction design | Centers on surface-level aspects of design, including visuals |
Involves studying the user’s journey and designing information architecture | Involves designing the tangible elements of the experience such as visual style, e.g., color palettes, typography and layout |
Outputs include personas, user journey maps, wireframes, prototypes | Outputs include mockups, high-fidelity layouts, animations and imagery |
These are the main differences between UX and UI:
The goal of UX design is to identify and solve user problems.
The goal of UI is to create attractive, interactive and intuitive interfaces.
Generally, UX designers handle the initial steps in the product development process, followed by UI. The UX designer maps out the skeleton of a user journey. Then the UI designer creates the visual and interactive elements.
UX and UI Design: How Do They Work Together?
As you now know, UX and UI overlap but are distinct disciplines. UX is the umbrella, and UI falls under it. Both are needed for a product to succeed—if you’ve got a website with an attractive interface but it’s hard to use and navigate (a bad user experience), the website won’t succeed. An old-fashioned, unappealing website that’s straightforward and easy to use is not as much of an issue, but it can still affect a user’s enjoyment of the product. They might prefer a competitor’s product, one that’s just as usable but much more aesthetically pleasing.
To illustrate how UX and UI work together, let’s look at Shazam. Shazam identifies music playing around you. This app solves a real-life problem: how often have you heard a great song on the radio, at a shop or bar but couldn’t identify it? This user experience solves this specific problem.
Now you can not only identify the song, but you can also store that song for future reference. Shazam connects to music streaming apps like Apple Music or Spotify and creates a playlist of all the tracks you have ‘Shazamed.’ The UI is simple and clean because that’s what the user requires.
Imagine you’ve just turned on the radio, and the song that’s playing is trailing off, coming to an end—you have just a few seconds to get your phone out. The app caters to this exact issue, as the interface is pared back, with just one large button on the screen. That button is animated to signal to the user to press it, with a line of text saying, “Tap to Shazam.”
The animation, the icon and the text are all part of UI design and add to the positive user experience. It demonstrates how UX and UI can and should work together.
© Shazam, Fair Use
UX vs UI Design: Which Career Path Should I Take?
UX and UI are intertwined. That’s why so many job ads are for a UX/UI designer. If you’re doing UX design, it would be helpful to have some UI skills, especially for projects with low time and resources. In an ideal world, however, the jobs would be separate, and the UX designer and UI designer would collaborate.
Having UX and UI design skills is beneficial, but you don’t have to master both. Decide which path you would like to take and focus on building your skills and experience in that area. You’ll likely pick up something about the other as they're interconnected. UX and UI design are in high demand and are generally well-paid, so this is the opportune moment to investigate a career in either of these disciplines.
Let's look at what you would be responsible for in each role to put yourself in the best position to decide which path you’d like to take. See our responsibility comparison below.
© Workable, Fair Use
The soft skills you need for both roles are virtually the same and would be beneficial in both jobs. The hard skills are more distinct for each role. This list is not exhaustive but highlights some of the key soft and hard skills for UX and UI design.
UX Design
Soft skills | Hard skills |
Communication | User research techniques |
Strategy | Analysis |
Problem-solving | |
Collaboration | Information architecture |
UI Design
Soft skills | Hard skills |
Empathy | Prototyping |
Communication | Animation |
Adaptability | Typography |
Collaboration | Design patterns |
Part of what makes UX and UI design so appealing is there are so many transferable skills. Some of them are:
Graphic design
Research
Customer service
What Does a UX Designer Actually Do?
UX design is varied and multi-disciplinary. You'll conduct user research through interviews, usability tests and card sorting (among other methods) to discover user behavior, needs and pain points (the users’ problems). To develop products, you’ll conduct competitor analyses and craft product strategies. You’ll also develop content, wireframes and prototypes. You can learn more about being a UX designer in this article.
What Does a UI Designer Actually Do?
If you’re more interested in design's visual and creative aspects, then UI design may be for you. In terms of aesthetics, you’ll develop a visual design, including graphics and typography. You’ll focus on the interactivity of a project. You’ll ensure layouts work well, look good on various devices, and create animations and UI prototypes. As a UI designer, you’ll work closely with a developer so that your designs come to life exactly as you envisioned them.
UX vs UI Salary: Who Gets Paid More?
As with any career, various factors influence salaries, such as location, experience level, industry, project type and education, not to mention economic factors. For this reason, you should use Glassdoor and Indeed to know what to expect.
Generally, UX and UI designers get paid almost the same, so it’s a matter of which role you prefer. As we mentioned, you might see a position for “UI/UX designer,” so you may find yourself doing both at some point.
How Do I Start Specializing in UX or UI?
Suitably intrigued? Well, we can help you get started.
The Interaction Design Foundation has the world's most extensive open-access design library. You’ll find an article on pretty much every aspect of UX design. Here are some to get you going:
UX Design:
UI Design:
Now that you have even more knowledge, you can proceed onto something a bit more substantial. An IxDF membership gives you access to over 35 UX and UI design courses. Simply head to the course page, and choose your path.
The Take Away
UX and UI design go hand in hand but are also separate disciplines. UI relates to the surface-level interactive elements. UX encompasses all aspects of a product, service or experience.
While there is overlap between UX and UI designers, there are various distinct skills, tasks and responsibilities for each role. Which tasks and skills you ultimately perform boil down to the specific requirements of the job. So, remember to read the job description carefully. Whether you become a UX or UI designer, you can expect similar remuneration. If you’re serious about pursuing a career in this exciting field, there are many free resources to get you on your way.
References and Where to Learn More
Learn more about UX design and how to become a UX designer.
Looking to switch careers to UX design? Check out these guides.
Discover the soft skills you need to succeed in UX design.
Here are four UI tips that every designer should know.
Learn about the relationship between visual design and user experience design.
UX design should not be form over function or function over form; explore why aesthetics and form should go together.
Hero Image: © Interaction Design Foundation, CC BY-SA 4.0
