UX vs. UI vs. Graphic Design: Three Different Kinds of Design

Once upon a time, if you said the word “design”, the odds were overwhelmingly likely you were talking about graphic design. But in the digital world we now live in, filled as it is with glowing, interactive screens, that definition has greatly evolved, and the distinction between the different kinds of design can often be confusing for people outside or new to the design industry.

Here are the three different primary forms of visual design, what they mean, and how they relate to one another:

Graphic Design

In a certain sense, all visual design starts with graphic design. Simply put, it’s the art of deciding how things should look. Graphic Designers choose colors and fonts, as well as arrange elements (such as images and blocks of text) in layouts.

This can happen both online (website and mobile apps) as well as in printed materials (magazine ads, book covers, in-store displays). As such, it’s not so much about the medium a piece appears in so much as the fact that it’s ultimately a static, non-interactive layout.

The demand for a Graphic Designer continues to grow (Up by 7% from the previous year), and salaries are competitive in this field.

In this way, we can simply define graphic design as being about the way things look.

Static images, even when created on and for digital media, are considered graphic design.

UI (User Interface)

Keep in mind:

• A UI is a digital space where users see and perceive information.
• UI design specifically focuses on the visual design of interactive elements and, as a field, it lives almost exclusively in digital media. Interactive elements such as drop-down menus, form fields, clickable elements, animations, button styling, and more are all critical tools in UI design.
• The UI designer takes the framework and wireframes created by the UX designer and translates them into high-fidelity, final visual deliverables before handing them off to a development or engineering team for production.

User Interface (UI) design, in contrast, specifically pertains to the design of interactive elements, and as such lives almost exclusively in digital media, such as on a computer, tablet, or smartphone. Interactive elements such as drop-down menus, form fields, clickable elements, animations, button styling, and more are all critical tools for UI designers around the world.

So, we can understand the meaning of UI design as building upon and expanding the Graphic Design definition, inasmuch as it relates to the way the things we use and interact with look.

Images with some kind of interactivity are UI, even when they incorporate static images.

UX (User Experience)

Keep in mind:

• UX is the all-encompassing experience of a user as they interact with a product or service to achieve a goal.
• User experience design is the process of applying a user-centered design approach to understanding and meeting the needs of users with an experience that’s both usable and delightful.
• UX designers are problem-solvers for products, business, content, behaviors, and especially for—you guessed it—people.

And then there’s UX. UX design is different from both UI and graphic design in that it focuses on the logic and structure of the elements you actually see and interact with. UX designers typically deliver wireframes, prototypes, site maps, flows, and other UX artifacts to the UI team.

UX primarily takes place in two distinct phases: research and validation. During the research phase, the UX designers use a variety of tools and methods to better understand their intended users. Competitive analysis, user interviews, persona creation, wireframing, heuristic analysis, and journey flows may all be involved.

And then after the product has launched, then comes validation. Here, UX designers perform usability/pain point analysis to determine if the product is producing the desired result. If not, refinements and revisions are made based on user data to make the end result better and more efficient. Catching problems with usability early on prevents more costly redesigns/reiteration later.

The UX design process serves as a framework that enables a designer to define a problem, ideate potential solutions for that problem, and validate the solutions they create. There are many process frameworks in the world, but we’ve found the Stanford d.school model is ideal for introducing UX to our designers.

The 5 steps of the Stanford d.school design model:

1. Empathize

The designer looks at the landscape surrounding the problem by understanding it from as many perspectives as possible.

2. ​Define

The designer pulls insights from research to define the specific problem and challenge to solve for, and who to design for.

3. Ideate

Once the problem is identified, the designer’s goal is to “go wide” with concepts and outcomes, generating many ideas—good, bad, silly, or impossible—that can be prioritized and explored further.

4. Prototype

This stage sees the narrowing down from many solutions to one; the goal isn’t to get it perfect but to be graspable by others. The prototype allows the designer to identify potential pain points, considerations, and areas of improvement.

5. ​Test

The designer gathers observations and feedback to design something truly thoughtful on every front, and purposeful for their audience.

Lastly, wireframing is an extremely important skill for UX designers.

Which kind of design is right for you?

While there are many kinds of designers, there’s no doubt that UX/UI designers are in the greatest demand at the moment. Bridging the gap between the way things look and the way they function, these designers are at the forefront of creating fantastic new digital products for people.

And as the demand for these products increases so does the need for good UX/UI designers who, in turn, can command far higher salaries. Graphic design, in comparison, is stagnant and not reflective of technological progress. The job market is also shrinking for this type of design over more technology-focused design jobs.

It’s an amazing time to be a designer. And bootcamp programs like Flatiron School offer a fast, efficient way to learn or improve skills and break into an exciting and growing field for a rewarding career and future.

Disclaimer: The information in this blog is current as of February 26, 2020. Current policies, offerings, procedures, and programs may differ.