UX / UI Design Breakdown - What’s the Difference?

App Design 2 min read
User Experience and User Interface sketched up
Photographer: UX Store | Source: Unsplash

Whether you realise it or not, you are constantly interacting with digital interfaces every single day. Any experience using these interfaces, good or bad, is determined by UX and UI design. User experience (UX) and User Interface (UI) both play different but important roles in how tech products such as websites, apps, and even VR is designed. Although they are different, both UX and UI work closely with one another to optimise a user’s experience. To understand them more, let's delve deeper into what UX and UI design are.

Wireframes for UX
Photographer: Amélie Mourichon | Source: Unsplash

UX is focused on the user’s journey to solve a problem; UI is focused on how a product’s surfaces look and function


UX focusses on User Experience

Research your Users for better UX
Photographer: Startaê Team | Source: Unsplash

Put simply, User Experience (UX) relates to the overall experience a user has using a product. The effectiveness of a user experience design is determined by how easy it is for a user to interact with each element of a product (website, app, interface) to reach their goal. For instance, if a user finds it difficult to navigate through your website, that presents a negative user experience. Ultimately, the smoother and easier it is for a user to reach their ‘goal’ the better the design.

This is why user research is an important aspect of UX design. By researching users, UX designers can gain a deeper understanding of a user's goals which then allows the designers to improve how their product or service meets their user's needs.

The most effective UX designs improve a user’s experience by meeting a user’s needs and expectations.

UX Deliverables Include:

  • Wireframes
  • Interactive Prototypes
  • Flowcharts
  • Site Maps

UI focusses on User Interfaces

UI style guide
Photographer: Balázs Kétyi | Source: Unsplash

UI refers to User Interface design and is more concerned with the look and layout of a product (app, website, program) compared to UX. This involves considering where and how visual interface elements that a user needs to interact will appear. These include elements such as text, images, checkboxes, buttons and more.

In addition to this, User Interfaces should be attractive and blend a brand’s voice with the user's needs. User interfaces should also be created with a cohesive style guide. This consistent design reduces the cognitive load on a user, improving UX.

The most effective user interfaces are: intuitive, clear, structured, responsive, consistent, and flexible.

UI Deliverables Include:

  • Visual Elements (Palettes, Typography, Buttons)
  • UI style guides
  • Patterns
  • Mood Boards

UX and UI: Complementary & Necessary

Interactive with the Slate Raven 23 Desk interface
Photographer: Obi Onyeador | Source: Unsplash

It’s important to note that UX and UI complement one another. Without UX, a user’s ‘goals’ could not be met, regardless of how beautiful it is. And conversely, without an effective UI, UX would not be usable.

Both UX and UI are equally important to have a successful, functional and delightful product. Next time you are interacting with a service, product or interface, pay some attention to the UX and UI design choices. Careful thought has been placed into each and every interaction you do to optimise your experience!

design Interfaces ui ux user experience user interface ux design ui design