A graphic showing the difference between UX and UI design

UX vs UI: What’s the Difference?

by Mads Soegaard • 29 min read

945 Shares

You might see the "UX/UI designer" job title and think UX and UI are interchangeable. There’s overlap, for sure, but in spite of all the things that do carry over between the UX and UI spheres, the two are definitely separate disciplines.

Transcript

This video breaks down the differences between UX and UI design; what’s more, it explores why both are essential things for a successful user experience.

"UX design" stands for "User Experience design," and UX teams study how users interact with a product—or service—to understand the users' needs, and these insights let designers create a product that’s really intuitive and efficient—and one that people will want to use.

"UI" is short for "User Interface." UI focuses on the screens, icons, buttons, visual elements, and interfaces in a user experience—so, all the display-related items. We’re going to get into and explore both disciplines, how they’re different, and how to know which career you should go for.

What is UX design?

UX designers have got an admirable goal to attain, and to boil it down to one that’s common to all of them: They aim to create products—and services—that give their users relevant, meaningful, usable, and pleasurable experiences. They look at a product in a holistic way and focus on meeting the users' needs best, and that’s hence why UX designers can—and do—use a process called "user-centered design." UX design is the discipline behind what—or rather, who—ensures that a product is easy to use and enjoyable for the people who access, use, and are (hopefully) delighted at what brands produce for them.

At this point, let’s step back and think of it in this way: Have you ever been tied up in a bureaucratic process and been left utterly frustrated—and maybe even discouraged—for your trouble? Consider filling out a form, for example, and how a badly designed one can confuse people—and frustrate them as they’re not just slowed down but now also have to worry that they mightn’t get what they want if they complete the form incorrectly. Well, UX design practices could make that process pleasurable (and we can mention here the well-designed forms are one of the objectives in UX design).

We can take UX across many trades and industries; but, for the best comparison here, interior designers and architects create physical spaces that are comfortable and easy to navigate—well, UX designers do the same for digital spaces. As they’re out to make the best user experience, designers have got to consider the context in which users will actually use the product they’re designing for them (for instance, do they use it while on the move?). But there are other factors, too, like how they design around the device the product appears on or what time of day the product gets the most usage from the users themselves.

Accessibility, information hierarchy, responsive design, and navigation flows are part of UX—and they’re big considerations that call for frequent collaboration with the UI designers so they can make sure that the product works for the most users possible. The goal here is to reduce "friction"—and that’s a term for unnecessary difficulty or stress when someone’s using a product, and here we might think back to that trickily-worded, hypothetical form we discussed earlier.

Jesse James Garrett's five elements of user experience design depicted as an iceberg, with all but the surface element submerged underwater.

Much like an iceberg, visual design is only the surface of user experience. Underneath, there is so much more including skeleton, structure, scope and strategy. These layers are by no means standalone, and influence each other. Decisions taken at one plane can cascade up or down the layers. There will likely be other considerations that emerge later, 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

What is UI Design?

UI designers build interfaces—namely, “user interfaces”—for digital products or services that are centered on detailed interaction. UI is more specialized than UX design, and that’s because it focuses—as in, exclusively focuses—on the elements that users know, such as buttons and icons. UI elements do tend to be visual, to be sure; that said, though, there are other types of UI, such as voice- and gesture-based interfaces.

In this video, Vitaly Friedman, Senior UX Consultant, European Parliament, and Creative Lead, Smashing Magazine, explains how effective UI design patterns solve recurring interface problems. This shows how thoughtful interaction choices enhance usability and create smoother, more user-friendly experiences.

Transcript

A point that can often muddy the waters is how UI stands in relation to graphic design—and there's often a misconception that UI design is virtually the same as graphic design. There are similarities and they apply some of the same skills, sure, but despite that, UI designers create interactive visual elements (as in, buttons, screen animations, layouts), and graphic designers make static elements (think logos and header images here). A user experience contains several user interfaces that go into making a whole product, and after the UI designer creates the interactions for a website, a front-end developer steps in to focus on the coding of the website’s visual aspect.

Three common types of user interfaces namely Graphical User Interfaces, Voice-controlled Interfaces, and Gesture-based Interfaces.

© Interaction Design Foundation, CC BY-SA 4.0

Why Is it Important to Know Both UX and UI?

In product design, good UX (user experience) design is what’s behind the effect when the end-user finds value in what the brand has to offer them, while good UI (user interface) design has efficiency, effectiveness, and satisfaction as its focal points in that brand’s product—say, a mobile app. Let’s keep thinking about mobile apps for a moment, because in successful ones there’s a harmonious blend of UX and UI that translates to smooth user flows and an appealing interface for users to enjoy—and hopefully find delightful.

A designer who understands UX can avoid bad UX—and how they keep themselves safe from stumbling into bad UX territory is they create intuitive user paths.

For example, in an e-commerce app, good UX makes navigation easy through product categories; UI knowledge, on the other hand, is what makes sure that you use effective visual elements that are the most appropriate to each task so you give the overall experience a big boost.

Key Difference Between UX and UI With Example

An infographic suggesting significant differences between UX and UI design.

© Interaction Design Foundation, CC BY-SA 4.0

Look deeply into digital design and you’ll see that the roles that UX and UI have are different but they’re things that complement each other. User experience is a “big deal,” and that’s principally since it spans a wide range of things which the user sees and feels along the way—and it’s that overarching holistic experience which is so vital.

What does UX concentrate on—as in, as a discipline or area? Well, we’ve got user psychology, cognitive flow, and task completion, and—as to where we’re going with the goals of it—it aims for an intuitive interaction between the user and the product, and that’s most of the “secret sauce” behind the magic of a seamless experience.

The UI side of things, though, is all about the “screeny stuff,” as in those actual elements that make up the interface, and so it’s about all those wonderful items that go on screens—like buttons, lists, and text fields. The emphasis with UI is on the ease of interaction that a user gets to have so it enhances the user's journey, and that journey gets charted by UX.

Look at the table below and you’ll see what the most important differences between UX and UI design are.

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—e.g., the choice of elements and how they interact.

Outputs here include personas, user journey maps, wireframes, prototypes.

Outputs here include mockups, high-fidelity layouts, and prototypes.

It incorporates a user’s environment, mood, and context.

It’s more tangible as users directly interact with the UI.

These are the main differences that we have between UX and UI, to boil it down a bit more:

  • The goal of UX design is to find out what user problems are and then solve those things.

  • The goal of UI design is to create interfaces that are attractive, interactive, and intuitive.

Example of UX vs UI

UX design is the part of things that decides what features are going to go in the app, let’s say for example a mobile app for users to complete a purchase they want or need to make. For instance, is it going to have a loyalty program where you gain points for each purchase you make? 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’s part of the user experience, the UX.

UI then selects the interactive elements to guide that path, and here’s where that juicy display stuff gets to come into fruition. And here’s how we can see the beauty of the mix—namely, how when you employ both UX and UI design effectively, it leads to better user engagement, retention, and, ultimately, conversion.

In the main, UX designers are the ones who handle the first steps in the product development process—first mapping out the skeleton of the user journey—and then the UI designers come in and make the visual and interactive elements, and both have a product manager overseeing them, to get to a successful product delivery that’s on time.

If you've got the store's app on your phone or visit its website, then that’s part of the user experience. To fully enjoy that experience, the user interacts with the interface and gets the most out of it.

UX and UI Design: How Do They Work Together?

Let's take a look at Shazam—and Shazam is a popular brand that identifies music that’s playing around you—and we’ll see how this user experience solves the specific problem of how to find out what that cool tune on the radio, at a bar, or in a shop is—and the artist who’s behind it. All of this helps many music lovers around the world skip the detective work they’d otherwise have to put into working out what the name of that tune is, who sang it, what album it’s from, and so on.

Now, you can not only identify the song but store that song for future reference, too. Shazam connects to music streaming apps like Apple Music or Spotify, and it creates a playlist of all the tracks you’ve ‘Shazamed.’ The UI is simple and clean because that’s what the user needs it to be.

Now, imagine you’ve just turned on the radio, and the song that’s playing is trailing off—a track you like, but it’s coming to an end and suddenly you’ve got just a few seconds to get your phone out. Well, happily, the app caters to this exact issue—as the interface is pared back—with just one large button on the screen. That animated button signals the user to press it, with a line of text that says, nice and simply, “Tap to Shazam.”

A screen from Shazam.

The animation, the icon, and the text are all part of the visual design, and the UI designer makes sure they all work together and really 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, and that’s why so many job ads are for a UX/UI designer. If you’re doing UX design, it’d be helpful to have some UI skills—and that’s especially the case for projects with low time and resources to hand. Another point is that “UX/UI Designer” doesn’t necessarily mean the individual or organization who penned the ad hasn’t a clue about the fineries involved in the two positions and has just, from being confused, mashed the two together without further thought. In an ideal world, though, the jobs would be separate, and the UX designer and UI designer would collaborate rather than be one and the same.

It’s a real plus to have UX and UI design skills, sure, but you don’t have to master both—really. Better to decide which path you’d like to take and focus on building your skills and experience in that area. You’ll be pretty much likely to pick up something about the other, anyway—as they're interconnected. UX and UI design are in high demand, in any case—and they’re generally well-paid—so you’ve got an opportune moment to look into a career in either one of these disciplines.

Let's take a good look at what you'd be responsible for in each role—in our comparison table below—to put yourself in the best position to decide which path you’d like to take.

An infographic comparing the roles of UI designer, UI/UX designer, and UX designer.

© Interaction Design Foundation, CC BY-SA 4.0

The soft skills you need for both roles are pretty much the same, and they’d be a handy benefit to have in both jobs, although—sure—the hard skills are more distinct for each role. Note that this list isn’t exhaustive, but it does highlight some key soft and hard UX and UI design skills.

UX Design

Soft skills

Hard skills

Empathy

Prototyping

Communication

User research techniques

Strategy

Analysis

Problem-solving

Wireframing

Collaboration

Information Architecture

User Research

UI Design

Soft skills

Hard skills

Empathy

Prototyping

Communication

Animation

Creativity

Color theory

Adaptability

Typography 

Collaboration

Design patterns 


Part of what makes UX and UI design so appealing is the many transferable skills, and here we go with some of them, below:

What Does a UX Designer Actually Do?

UX design is varied and multi-disciplinary—and it’s pretty broad in this regard. 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), and you can learn more about being a UX designer in this article.

What Does a UI Designer Actually Do?

Now, if you’re more into a design’s visual and creative aspects and all the “screen stuff” that turns up in exciting and popular apps, then UI design will be more your thing. As a UI designer, you’ll work with a developer—closely—so your designs get to come to life in the way you pictured them, and you’ll have to prepare a UI style guide, too, with all the documentation, UI components, UX components, and references to make it easer to collaborate with various stakeholders.

Advance Your Career With This Free Template for “UI Checklist”
UI Checklist
We respect your privacy
Get 1 powerful email each week: Design a life you love!

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, to say nothing of economic factors—and that’s why it’s helpful to use brands such as Glassdoor and Indeed so you’ll be able to know what to expect.

In the main, UX and UI designers get paid almost the same, so it’s really a matter of which role you prefer. As we mentioned earlier, you might well see a position for “UI/UX designer” advertised, which means that you may find yourself doing both at some point.

How Do I Start Specializing in UX or UI?

Suitably intrigued? Well, that’s great—and we can help you get started on your journey.

The Interaction Design Foundation—or IxDF—has got the world's most extensive open-access design library, and 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’ve got even more knowledge under your belt, why not proceed to something 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 do pretty much go hand in hand; saying that, though, they’re separate entities, or disciplines, too. UI is concerned with those interactive elements that appear on the surface—the “screen stuff,” as it were. What UX refers to is far broader; really it runs the gamut across all aspects that are in a product, a service, or an experience. A great deal of overlap exists between UX and UI designers, but each role does have its distinct skills and tasks and responsibilities—an important reason to make sure you read the job description carefully, and see if it matches your interests and skill set. Money-wise, there’s similar remuneration in store for “UXers” and “UIers,” and there’s certainly a wealth of free resources to help get you on your way if you’re serious about a career in either area of what’s certainly an exciting field.

Learn More in This Course:

User Experience: The Beginner's Guide

Course Closed
100 % booked
View Course

What You Should Read Next

  • Read full article
    What is Interaction Design? - Article hero image
    Interaction Design Foundation logo

    What is Interaction Design?

    Interaction design is an important component within the giant umbrella of user experience (UX) design. In this article, we’ll explain what interaction design is, some useful models of interaction design, as well as briefly describe what an interaction designer usually does.A simple and useful unders

    Social shares
    1.5k
    Published
    Read Article
  • Read full article
    Apple’s Product Development Process – Inside the World’s Greatest Design Organization - Article hero image
    Interaction Design Foundation logo

    Apple’s Product Development Process – Inside the World’s Greatest Design Organization

    Apple’s Product Development Process may be one of the most successful design processes ever implemented. With a valuation that exceeds $2 trillion, there’s a lot that designers can learn from Apple and introduce into their own design environments.Apple is a notoriously secretive business. In Steve J

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    10 Great Sites for UI Design Patterns - Article hero image
    Interaction Design Foundation logo

    10 Great Sites for UI Design Patterns

    You don’t want to spend your whole life redesigning the wheel, do you? No, neither do we. If you are looking for a design that solves a problem that has been solved with a different application before, then the template for your wheel is probably already out there. This lets you save time and make a

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces - Article hero image
    Interaction Design Foundation logo

    Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

    Follow Ben Shneiderman’s 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman’s rules. The characteristics

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    User Interface Design Guidelines: 10 Rules of Thumb - Article hero image
    Interaction Design Foundation logo

    User Interface Design Guidelines: 10 Rules of Thumb

    Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Fur

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    How to Change Your Career from Graphic Design to UX Design - Article hero image
    Interaction Design Foundation logo

    How to Change Your Career from Graphic Design to UX Design

    If there’s an occupation that is 100% linked with the public’s idea of what design is all about, it’s graphic design. From the familiar golden arches of the McDonald’s brand to the typography and colors of movie posters, graphic designers create some of the most iconic and ubiquitous designs around

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    Repetition, Pattern, and Rhythm - Article hero image
    Interaction Design Foundation logo

    Repetition, Pattern, and Rhythm

    Let’s look at three subjects that, at first glance, may strike you as being incredibly basic and self-explanatory. However, although they may seem like they should need no introduction, we should study them. By understanding these concepts, you’ll be able to apply them more effectively to captivate

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    The Grid System: Building a Solid Design Layout - Article hero image
    Interaction Design Foundation logo

    The Grid System: Building a Solid Design Layout

    Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to creat

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    The Principles of Service Design Thinking - Building Better Services - Article hero image
    Interaction Design Foundation logo

    The Principles of Service Design Thinking - Building Better Services

    Service design is all about taking a service and making it meet the user’s and customer’s needs for that service. It can be used to improve an existing service or to create a new service from scratch. In order to adapt to service design, a UX designer will need to understand the basic principles of

    Social shares
    1.4k
    Published
    Read Article
  • Read full article
    The Golden Ratio - Principles of form and layout - Article hero image
    Interaction Design Foundation logo

    The Golden Ratio - Principles of form and layout

    Now, we’re going to look at a subject that comes directly from mathematics and that we can also find all around us – the golden ratio. Don’t worry; we’re not going back into the classroom for long. We will examine what this concept is and exactly how much it is a fundamental part of making designs p

    Social shares
    1.3k
    Published
    Read Article

Top Articles

Top Topic Definitions

Feel Stuck?
Want Better Job Options?

AI is replacing jobs everywhere, yet design jobs are booming with a projected 45% job growth. With design skills, you can create products and services people love. More love means more impact and greater salary potential.

At IxDF, we help you from your first course to your next job, all in one place.

See How Design Skills Turn Into Job Options
Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.
Customize
Accept all

Be the One Who Inspires

People remember who shares great ideas.

Share on:

Academic Credibility — On Autopilot

Don't waste time googling citation formats. Just copy, paste and look legit in seconds.

Feel Stuck? Want Freedom?

Join 326,035+ designers who get one powerful email each week. Learn to design a life you love.

Next email in
1
day
10
hrs
5
mins
44
secs

Free forever. No spam. Unsubscribe anytime.