If you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX?

At their most simple forms, UX design is what makes an interface useful, and UI design is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from a good interface, one must understand the UI design is merely just one layer of the entire design process. Perhaps this is why people often confuse UX and UI. In the following few paragraphs, however, we hope to help you understand where the differences lie in the context of the design process.

According to Garrett in The Elements of the User Experience, UX can be understood in five primary planes. Let’s start with the most abstract plane:

Strategy

At a high level, the first plane is really the starting block of product design. Here, you’re applying different research methods, including user interviews, competitive analyses, user personas, and other research techniques to understand:

1. What is the problem you are trying to solve?
2. What are your user needs?
3. How does your product fit within a business context (product objectives)?

Scope

The second plane:

In this stage, you should be defining functional specifications and content requirements of your platform. In other words:

1. How might you solve the problems through your platform?
2. What are the features, and
3. How might you prioritize them?

The challenge here for designers is prioritizing features while minimizing tradeoffs. Sure, you might have hundreds of ideas to solve a problem, but you can’t implement all of them.

Structure

The third plane:

In this stage, your ideas should begin to form a structure. Information architecture is concerned with how the information within an app is organized, and how users cognitively process the information. User flows map out the specific journeys users embark on through the app to help solve their specific need. It’s concerned with the most logical steps for your users to gratify their needs.

Skeleton

The next plane is where things become less abstract and more concrete:

The skeleton plane seeks to achieve the structure of an interface design and information design. Interface design is concerned with the arrangement of specific interface elements to enable users to interact with the functionality of a system, while information design is concerned with the presentation of information in a way that facilitates understanding.

In this stage, you’ll probably find UX or Product Designers designing, testing, and iterating on wireframes. Wireframes are very low fidelity, often greyscale mockups that demonstrate the intent of each interface element for users.

Surface

And finally, the most concrete plane:

The surface plane, as the name suggests, strives for great sensory experience and visual design. The goal here for designers is to form a visceral connection with users by successfully communicating the brand, product, value and functionality in one cohesive image.

This is the plane where you’ll find UI Designers and Visual Designers doing the bulk of their work using tools such as Sketch, Photoshop, Adobe Experience Design, Illustrator, or Figma.