2 key components of app design

Phase Design
Photo by Halacious on Unsplash

As you start thinking about the design of your app, there are two key components that you'll need to get familiar with. These are UX and UI. But what are they and what do they have to do with designing apps? Let's start with UX.

User Experience (UX)

User Experience (aka UX), is the experience users have with a product. In this case, that product is a web or mobile app. UX Design is the name given to the process of defining and refining a product's user experience.

The goal of UX Design is to fulfill a user’s needs and enhance their satisfaction with the app by providing a positive experience that keeps them engaged and makes the app more intuitive.

In order to achieve a great user experience, there are few things you can do. You can:

  • Conduct user research
  • Create flow diagrams
  • Create wireframes
  • Develop prototypes

These can all directly help shape the overall experience of your app. For example, creating flow diagrams allow you to flesh out how a user might progress through your app to complete a task such as signing up, and conducting user research allows you to better understand a user and their motivations to create an experience they’ll love.

We’ll dive deeper into a few of these later. For now, think about it this way: UX Design is the reason Instagram is so addictive. The scrolling of the feed that feels endless and the instant gratification that comes from liking photos and getting likes are two things that contribute to your addiction.

User Interface (UI)

User Interface (aka UI) is the series of screens or pages, and visual elements—like text, forms, and buttons—that enable a person to interact with a web or mobile app. UI Design is the name given to the process of defining and refining an app's user interface.

The goal of UI Design is to create an interface that’s easy for users to navigate and interact with in order to accomplish their goals.

In order to define a polished user interface, there are a few things you can do. You can:

  • Define your branding
  • Create prototypes
  • Create mockups

These can all directly help shape the interface of your app. For example, defining your branding allows you to establish the look and feel of your app, and creating mockups allows you define the little details of your interface before it’s time to build it.

Think about it this way: UI Design is the reason ordering on Seamless seems so effortless. Being able to easily search, select, and order from a restaurant through the organization of the list and placement of buttons contribute to it feeling effortless.

What's the difference between UX & UI?

UX and UI might feel similar, but they play two distinct roles. Here's a restaurant analogy I like that I've heard others use: UI is the table, chair, plate, glass, and utensils - the items in a restaurant that allow you to eat there. UX is how the food tastes, the quality of the service, whether or not there’s parking, what the lighting is, and what kind of music is being played - the things related to the experience that makes you want to come back.

In other words, UI Design focuses on the placement of elements on a screen while UX Design focuses on the experience around interacting with those elements.

UX Design and UI Design are key phases of the design process that contribute to the overall usability and experience of a product.