UX and UI: What’s the Difference?

When talking about website design, a lot of acronyms get thrown around. HTML, CTA, CMS, AJAX. Two of the most common are UX (user experience) and UI (user interface) – often used interchangeably. However, while these terms do have a few commonalities, they actually represent two distinct phases of the web design process. In the following post, we’ll dig a little deeper into the differences between UX and UI and how the implementation of both affects a  digital product.

What is UX or User Experience?

Before we compare the two terms, it’s helpful to have a definition of each.

The term “user experience” was coined by Don Norman in the early 1990s. He invented the phrase during his time working for Apple, when he realized that the most important factor in design was not how the product appeared but rather how a person thinks or feels about it. 

In broad strokes, UX or user experience refers to how people interact with a digital product or platform. User experience should take into account an entire digital product and how that product works as a whole; everything from plotting out user journeys to optimizing a site’s content management system is technically “user experience”.

When thinking about user experience, UX designers often focus on four major pillars: functionality, value, usability, and general appeal. 

• Functionality – does this product work? 
• Value – will this product give value to those interacting with it? 
• Usability – is the product easy and intuitive to use? 
• General appeal – how does the product look? 

Building from these foundational four principles, user experience takes into account several other factors. One is context. How is this product being used? In what circumstances? Credibility also comes into play. Does this platform appear credible? Safe to use? And, of course, user experience should always prioritize findability. Is the site easy to locate through a Google search? 

It’s a UX designer’s job to consider all these elements when designing a digital product in order to address a user’s needs. Great user experience will have anticipated potential challenges within a digital platform and remedied those challenges through the design itself. 

What, then, is UI or User Interface? 

User interface is defined as the “surface” of any website or application. UI focuses on the visual touchpoints between an application and the user – it’s all about how a digital product looks, rather than how it works. In this way, UI acts as a subset of UX – you can think of it as falling under the “general appeal” category of user experience. 

UI is made up of three main categories: layout, elements, and graphics. 

• Layout – what is the structure and spacing on the screen? 
• Elements – what dynamic elements – such as buttons, sliders, and dropdown menus – are to be included? 
• Graphics – what type of visuals will be used? Photography, animation, videos? 

A UI designer is therefore in charge of creating the appearance of a website or application –  they are also responsible for ensuring that the client’s brand is reflected in the overall design. While a good UI designer will take time to make sure the visual elements function well together and are intuitive to use, they are ultimately not responsible for the functionality of each element. 

What are the Key Differences Between UX and UI? 

The major differences between UX and UI can be illustrated by an analogy. Say there’s a new hotel that’s being developed. Before any physical work can begin, the developer (the client) would need to hire an architect to create the structural plans and blueprints for the building. These plans have to address a few fundamental questions. For example, what is the purpose of the building? Who is using it? How are they using it? Applying the findings of this preliminary research, the architect would begin to map out the structure and layout of the building, paying particular attention to how people (the users) move within it. 

Only once the detailed plans have been drawn up would the developer then hire an interior designer. It’s the interior designer’s job to furnish the inside of the building, pulling various items, fabrics, and materials to produce an atmosphere or mood. While the overall structure has already been dictated by the architect, the interior designer is the one who decides where certain fixtures – like doors handles, taps, and tables – will be situated to maximize the experience of the guests. 

In case you haven’t already worked it out, in this scenario the UX designer is the architect and the UI designer is the interior designer. Both perform different but interrelated tasks with the ultimate goal of enhancing the user’s experience. 

When it Comes to UX and UI, Who Performs What Job? 

Another way to differentiate between UX and UI is to delineate the roles for a UX designer versus a UI designer. 

A UX designer begins their work as soon as a project has been kicked off. As noted in the hotel example, their first order of business is research. Prior to designing any interface, analyses must be undertaken to understand the user. What are the customers’ needs? In what frame of mind are they approaching the product? What is the ultimate end goal for any user? What restrictions, if any, does the user have? Once these questions have been answered in depth, the UX designer will move on to creating user journeys – essentially navigational paths the user travels on through the site depending on their interests. These user journeys form the foundation of the structure of the site, and dictate where certain pages live within it. With the sitemap complete, a UX designer can begin to create grayscale wireframes, which outline where particular content is housed on each page. Typically at this point, the UX designer will gather feedback from the client, other team members, and/or external stakeholders. They will iterate the wireframes until all parties are satisfied and best UX principles have been met. 

Only once wireframing is complete does the project move into the realm of the UI designer. Using the wireframes as a template, the UI designer will start to design the prototypes for each page. It’s within this prototyping phase that the UI designer will select the color, typography, and dynamic elements for each page, based off of the UX designer’s market research. The UI designer’s job is to ensure all the visual elements work together harmoniously, that they maintain the user’s attention, and that they are in keeping with the client’s brand. These prototypes will then be handed off to the client to give input. After all the input has been gathered and incorporated, the prototypes can start to be developed by the development team (which is a blog post for another day!). 

As a generalization, UX designers tend to excel at problem solving while UI designers lean more towards artistic inclinations. That said, there absolutely can be overlap between the two. A strong UX designer will be well versed in design theory and a capable UI designer will always keep best UX principles in mind while designing. To complicate matters further, some designers are both UX and UI designers, possessing the skills to both create a functional platform and ensure that that platform is captivating to look at. 

How Do UX and UI Work Together?

Regardless of who performs what task, it’s essential that any digital product considers both UX and UI – a digital platform is only successful when both work in tandem. Think about it: a product that functions well but lacks aesthetic appeal will almost certainly make users lose interest. And the reverse is true too: a website or web application that’s beautiful to look at but doesn’t actually work is hardly going to keep users clicking. As such, it’s essential that UX and UI designers communicate often during a project, particularly in the final phases. 

In Summary

To summarize: 

-UX (user experience) is defined as how a user interacts with a digital product from start to finish 

-UI (user interface) is defined as the graphical or visual layout or appearance of a digital product 

-A UX designer is involved in the project from the jump, while a UI designer tags in towards the end 

-A digital platform should always be mindful of both UX and UI best practices; without one, the other is rendered useless 

At Design in DC, we’re lucky to have incredible UX and UI designers – as well as a couple that are so skilled they perform both roles. If you’re interested in collaborating with one of our talented UX and/or UI designers, please contact us here. 

What do you think about UX and UI? Leave a comment below!