Design mockup

What Is UI/UX Design?

All digital products that you interact with daily have gone through a long process called UI/UX design to make them usable to you. The UI stands for "User Interface," and UX stands for "User Experience." As a whole, UI/UX design is about creating digital products that are easy to use, practical for their purpose, and visually pleasing.

UI vs. UX Design

UI design and UX design are often referred to in tandem with each other, shortened to UI/UX design, and tend to be used (incorrectly) as interchangeable. Most people don't need to know the difference. After all, UX and UI are primarily concerned with the average user being able to do whatever he needs to do in a given program with maximum satisfaction and minimal frustration. UI and UX are crucial to the product design process and are closely related, sometimes the job of just one person if they are freelancers. However, they are pretty different when you get down to the details.

What Is The User Interface

The user interface (UI) is the point of human-computer interaction. For example, when you click "Add to Cart" on Amazon, you interact with the user interface. UI design is about making the program look aesthetically pleasing and intuitive for the user. You may only notice good UI design if you know all the work to make the apps and websites you use to look good and work efficiently. 

For the average user, UI design is most noticeable when poorly implemented. When things work the way they should, you hardly notice, but when the design of a site needs to be more intuitive, it can act like a thorn in your side. Everyone has used a site at some point that didn't feel "right," where the style or tone didn't match the service or elements such as buttons would switch places arbitrarily. Poor UI sticks out like a sore thumb.

The UI design process creates an interface with graphics that match the product or service, uses space and color contrast to draw the user's eye to certain parts of the page, and has a workflow that is not frustrating to the user. The UI designer must consider spacing, imagery, color schemes, typography, icons, buttons, and interactive responses. All of this is to create an intuitive experience for the user, so they can quickly figure out the program's basic features.

What Is User Experience

User experience (UX) encompasses everything that affects a user's interaction with a digital product. UX design is a much larger process than UI design, as UI design is just one part of UX design. This more extensive process accounts for everything, from researching why a consumer might use a particular product to reviewing useability analytics after the product has been released. UX designers come from various backgrounds, including programming, visual design, interactive design, marketing, and psychology. An individual UX designer's responsibilities may vary between companies or the requirements of different projects. UX designers usually work in one of these areas of interest: UX research, wireframing, information architecture, front-end design, interactive design, information design, visual design, and usability testing. Let's do a brief run-through of each of these areas of interest:

UX Research

Researching the target audience is the first step of the process. To design a good product, UX designers must understand the role it will play in users' lives; they need to know the context that the product will be used, and they need to understand what users' requirements are. The designers need to know their intended user's wants and needs early on to make a valuable product. 

Research is done in a couple of different ways, depending on what kind of information is needed to create the program and how much funding is available to the researchers. For example, if researchers need to know end-users opinions, thoughts, feelings, or motivations, they will employ a form of qualitative research such as interviews. Qualitative research results in non-numerical data. On the other hand, if a large pool of users is available to study, researchers can use surveys or analytic data to conduct quantitative studies. This results in numerical, statistical data but will not answer more profound questions. However, regardless of the data gathered, this research informs the rest of the UX design process.

Wireframing

A wireframe is essentially the skeleton of a program. It is a 2D rendering of the graphic and content placement and the template for site navigation. There are two types of wireframes: low- and high-fidelity. Low-fidelity wireframes are rough, quick to develop, and are primarily for project team communication; high-fidelity wireframes are more detailed and document information such as item dimensions, responses, and interactive behavior.

Information Architecture

Information Architecture is the program's organizational structure where the designer lays out how the pieces of the program fit together and how each item relates to one another. 

Front-End Design 

Front-end design is the coding that underlays the graphic design. This is a specialty position done by a graphic designer who knows how to code.

Interactive Design

Interactive design is about deciding what a user can do in a system. For example, what elements can they interact with, and what commands do they have to use to make something happen (i.e., does it take a single or double click to open something in the interface)?

Information Design

This is the practice of presenting information in such a way that it is easily understandable. 

Visual Design

Visual design is the practice of implementing the UI design. 

Usability Testing

Throughout the entire UX design process, users who represent the target audience are brought in to test how easy a design is to use. The target audience interacting with the product provides designers with valuable information about where issues in the design might be and how steep of a learning curve the program has before it is easily usable. UX designers make changes throughout the design process as they receive feedback.

What Software Do UI/UX Designers Use?

Since UX/UI design is a multifaceted discipline, there is no one-size-fits-all option for software. This is especially true for more advanced designers working in a team who might specialize in one area over another. For example, one program might be better for wireframing, while another might be better for creating dynamic interface designs. Some programs primarily function as prototyping tools, and others are meant for developing vector-based graphics. A google search of "best UX UI design software" returns list after list of top 20 programs to choose from (with strengths and weaknesses helpfully added to help you pick something that would be useful to you and your specific project). If you need a program that can do the basics in everything, Adobe, Figma, Sketch, and Origami Studio are names that pop up often on such lists, having high- and low-fidelity wireframing capabilities and prototyping, usability testing, and vector-based visual design tools. If you enroll in a bootcamp or similar program, you will be told which tools you should use.

Are you interested in getting into UI/UX design in a reasonable amount of time? Apply now for USF's UI/UX Design Bootcamp, which will teach you all the skills you need to kick-start your career in 9 months.