These Are The 5 Big Differences Between UX And UI Design

Dawn Schlecht, contributor to the CareerFoundry blog

Increasingly, UX designers are finding that many employers expect that they have not only UX expertise but also UI design skills.

There are many reasons for this demand, but one certainty is for sure; having a workable knowledge of both specializations gives designers an undeniable employable edge.

In this article I’ll share with you five differences between UX and UI design. Defining these terms will help us better understand each discipline and discover their congruencies.

Now let’s take a look at the differences between the two. If you’d like to skip ahead to a section, just use the clickable menu:

  1. UX is not UI
  2. UX makes interfaces useful, UI makes interfaces beautiful
  3. UX helps users accomplish goals, UI makes emotional connections
  4. UX design is done first, UI design is done second (sometimes)
  5. UX is employed across products, interfaces and services, UI only interfaces
  6. Key takeaways

If you’d like to watch us contrast UX and UI, allow pro designer Dee to explain in this video:

1. UX is not UI

UX design or user experience design is the process by which a pain point or user need is identified. From there, a rough prototype is drawn which is later validated (or invalidated) through testing. When both the business model and the value proposition have been validated the product is built.

You can think of UI design or user interface design like this:

User Interface Design = Visual Design + Interaction Design.

Visual design is the look and feel of the site, the personality if you will; the brand. Interaction design is the way people interact with your site. When someone clicks a button on your site, does the button change in a noticeable way so they know they’ve been successful?

Although both UX and UI designers design interactions, you can think of UX designers as the architects of macro-interactions while UI designers, as the makers of micro-interactions, attend to the details.

According to designer Nick Babich:

“The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there.”

A UX designer will likely design the user flows, the steps that a user would take to sign up for your newsletter, for example. What are the steps they will follow and how will they know if they’ve been successful?

The design is then passed off to the UI designer. The UI designer will refine those interactions adding color and emphasis to the original design giving users the clues they need to successfully navigate the newsletter sign up process.

2. UX makes interfaces useful, UI makes interfaces beautiful

A useful product meets a need that is not already being met in the market. The research process of a UX designer involves doing a competitive analysis, developing personas, and then developing a minimum viable product or more apropos, minimum valuable product; a product that will be valuable to your targeted customer niche. This is validated through testing throughout the life-cycle of the product.

Once the user flows and wireframes are prototyped and tested, it’s the UI designer’s role to make them aesthetically pleasing. This includes choosing a color scheme and typography that will be both attractive and simple to use.

However, color choices, typography and interactions are not based on the designer’s personal preference but rather on clearly articulated reasons specific to the personas developed by the UX designers.

With these, UI designers implement a visual hierarchy that will serve as a guide to users, letting them know what to do and when to do it, in order to meet their objectives.

A well-designed hierarchy will highlight one main objective per page making it clear to the user where they are on the site and what they can accomplish in any given moment. They will do this by using conventions or patterns that users are already familiar with. These patterns will act as clues to the user as to how to get where they are going.

3. UX helps users accomplish goals, UI makes emotional connections

People come to your site to do stuff. Whether it’s researching the best kind of doggie companion for small apartment living or paying their taxes (ouch!). The former may be more fun, however in either case they come to your site with a goal in mind.

The UX side of things might look at people like dog lovers and try to figure out what’s important to them. What is it that they value or need when looking for assistance in choosing their next furry friend?

So, they get to work to figure it out. They ask questions, they observe people, they interview people, they may make prototypes and do a bit of guerrilla testing to see if they can validate their business and product value propositions.

Once you have the basic usability right, according to Aarron Walter author of Designing for Emotion, it’s really the personality of your interface that will elicit loyalty in your users. People may be drawn to your site because of its striking design, they may stick around for a while if it allows them to do stuff.

However, once they make a personal connection, then they’re hooked. Does your interface make them laugh? Does it “get” them? Is it cheeky? Aaron says, “People will forgive your shortcomings, follow your lead, and sing your praises if your reward them with positive emotion.” That’s where the expertise of the UI designer comes in.

4. UX design is done first, UI design is done second (sometimes)

Within the process of design how do UX and UI designers work together?

Normally, UX design and research is the first step when deciding whether to build a product or application. UX designers handle much of the research that will validate or invalidate initial product ideas and guide the development of the product.

Once the prototype has gone through several iterations and is largely finalized (for now) the UI designer steps in and begins to work on the visual design and micro-interactions.

However, this may not always be a linear path. It depends on many factors. For example:

  • Who handles the UX and UI?
  • Is it the same person or a different person or team?

5. UX is employed across products, interfaces and services, UI only interfaces

User experience design is a broad field and becoming more popular by the day. Now, not only companies with a web presence but many others that develop products or provide services are catching-on to the value of understanding their users and validating their hypotheses before they build.

User Interface design is, well, only for user interfaces. This doesn’t mean it is limited to the graphical user interfaces of computers, tablets and mobile devices. We are also seeing interfaces on many other products these days like watches, washing machines, car dashboards, vending machines, ticket kiosks and many more.

I recently read about an application on the iPhone that unlocks your car door. It turns out that this set of interactions takes many more steps than simply using your key to unlock the car door. Whether designing for interfaces or experiences, we should take care to (once again) keep our users at the heart of our design process.

6. Key takeaways

It’s almost impossible to extricate the UX from UI or the UI from the UX.

However, if we were to try, we might conclude that:

  • UX design helps users accomplish meaningful tasks across platforms and services.
  • UI design makes compelling and aesthetically pleasing interfaces that connect with humans.

You now know a few of the differences between UX and UI. If you’re a UX Designer wanting to know more about UI, discover our UI for UX Designers specialization course.

If you’re an aspiring UI or UX designer, don’t forget to check out CareerFoundry’s UX Design and UI Design Programs.

Want to read more about these worlds? Then check out these articles:

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs
blog-footer-image