The difference between UI and UX 👥

UX and UI design are often misinterpreted or confused for the other, especially in web and app design - and understandably so! But here we break down exactly what each is, and how you can use them to build your products.

User Interface or UI focuses on the aesthetic elements of your products and their interactions. The second element, User Experience or UX focuses on the overall experience of your product. These two topics approach design from two different views, UI focuses on the visual elements of your interface, the colors, the typography, the menu bars, and more. UX will focus on how a certain page is built and the big picture.

Here’s a quick analogy to get you more familiar: Imagine your product as a house. The foundation would be UX, such as where the doors and windows are, the furniture and the paint would be UI.

UX does come first, it establishes how the different parts are pieced together, how functional the whole thing is, what’s most practical, and so on.

Once everything is settled, you can start thinking about the visuals, what color would fit best, how you could fill your house without making it too crowded.

This comparison helps understand how UI and UX designers work alongside a product: first up they figure out the fundamentals, the global architecture of the product and its fundamentals, second comes the aesthetics, what style and color.

UX designers carry out tests to understand what works best, they have to collaborate with the UI team to recommend a solution. They work alongside, depending on what the UX team chooses and thinks the best solution is.

Just to make sure, let’s do a recap:

What a UI designer does: 

• Visual design: Product layout, the visual aspect of the user interface
• Design research: Insight into the latest trends.
• Design systems: Ensuring brand consistency
• Branding: Establishing a brand identity, getting the right mix of usability and consistency
• Responsive design: Making sure everything is smooth
• Prototyping: Showing how the overall product is going to be
• Animations and interactivity: Creating animations, transitions
  

What a UX designer does : 

• Plan: Organising goals for the team
• User research: Conceptual problem solving 
• Information architecture: Organizing and labeling content/Making sure users find what they’re looking for
• User flow: Aligning the user’s needs and the architecture of the product
• Testing: Making sure tests are early enough in production so as to adapt the prototype
  

In the early days of design, these two notions didn’t exist, everyone was simply a web developer. UI and UX only appeared because the world of design got more structured. 

Fundamentally, you shouldn’t get too hung up on the differences between the two. They only exist because of specialization, it’s not so much UI VS UX but UI AND UX, they go hand in hand to create a simple, useful, and intuitive design.

UI and UX create the entire product experience, it’s the reason why users are going to favor your website even if a competitor gives the same results. It creates an overall experience that brings your product forward.

Having a great UX is now more than ever becoming a mandatory requirement. Your users expect such features, without it, they will likely turn to the competition. A product’s success sometimes relies heavily on its design.

Take Trainline for example, the most common website to buy train tickets in the UK. The website doesn’t offer any discounts or special services. Their success relies on the UX, all ticket options are directly shown, ready to be selected. What does that lead to ? Last year, the company sold $3.7 billion worth of tickets, up from $3.2 the previous year.

To further prove our point, here’s a study by McKinsey that shows how design-focused companies grow in revenue twice as fast. UX and UI are both a massive competitive advantage and a market differentiator.

The design space offers great professional diversity and many opportunities to create. If you’d like to learn more about the space, the best practice is to visit websites, look at the different interactions they offer, how it’s built and what it allows.

Ultimately, hands-on design will teach you a lot more than a theoretical framework. The terms and the way they’re used matter far less than your understanding of the customer experience. When designing, always keep your users at the forefront of your project, how are they going to interact with it? What do they need? What do they want?