FUNDAMENTALS OF UX  |  FEB 10, 2018

What's the difference between UX and UI?

In the world of design and marketing, it’s easy to get caught up in fancy terms and abbreviations that get thrown around in meetings. You’ll hear things like “Where are the Microinteractions?” or “We need to leverage Big Data”.

Among these terms are UX and UI. At first glance it seems simple: UX stands for User Experience and UI stands for User Interface. Easy, right? You’d think so, but I’ve found that there's a lot of confusion around these two terms.

Both disciplines are closely related, but at the end of the day very different from one and other. Let’s explore these differences so that the next time you talk about UX or UI, you can do it with confidence.


UX vs. UI

User Experience Design, or UX Design is the process behind the creation of a product like a website or app. The backbone of this process is User Research, and the output is a product that takes into account all the learnings gathered from the research. In other words, a product that puts the users’ needs first.

If we use an online store as an example, the UX Design would be understanding the user’s objectives, preferences, behaviours and then making sure that the product reflects these insights. This makes for a smooth experience that users keep coming back to.

User Interface Design, or UI Design, is the visual aspect that the users see when they interact with the product. UI design—when done right—takes all the insights gathered from UX Design and transforms them into a beautiful interface.

If we compare to architecture, the UX Design is the blueprint and all the thinking that goes into the building. The UI Design would be the actual building, once it’s completed.

To boil it down even further, you could say that the UX is the brains and UI is the beauty.

UX & UI Deliverables

The deliverables are the output of the UX and UI Design process. It’s what gets delivered to your client or stakeholders when the product is completed. Let’s look at the different deliverables for UX and UI Design.

UX deliverables include:

  • Personas
  • Task Models
  • User Journeys
  • Information Architecture
  • Sketches
  • Wireframes
     

UI deliverables usually include:

  • Designs
  • Style guidelines
  • Interaction guidelines
  • Prototypes
     

Should I specialize in both UX and UI?

It really depends on your interests and career goals. The design industry is becoming increasingly specialized and there are now roles where you can exclusively do UX or UI Design. There are also roles where you can take on the entire process from start to finish.

Because the two are so interconnected, it’s always helpful to have knowledge of both. In other words, if you exclusively want to focus on UX, knowledge of UI will help you when it comes to getting ideas on paper through sketches and wireframes. On the other hand, if you’re focused on UI, understanding the UX Design process will add a lot of value to your designs.

Ready to learn UX?

Join the Butter Academy 6-week online course.

[unex_ce_button id="content_ot8kht11r,column_content_7xdn3529o" button_text_color="#222222" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="#ffffff" button_padding="15px 40px 15px 40px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="66px" button_text_hover_color="#ffffff" button_text_spacing_hover="3px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link=" http://butteracademy.com/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]LEARN MORE[/ce_button]

NEXT SESSION: MARCH 12 - APRIL 23