GRAPHIC DESIGN, UI DESIGN, VISUAL DESIGN, AND WEB DESIGN (UI, UX) —WHAT’S THE DIFFERENCE?

If you’re someone who has a background (or even an interest) in graphic design or digital design, some of tech’s key job perks probably speak directly to you. Flexible scheduling, the opportunity to work from home or remotely anywhere in the world, starting salaries that will let you say goodbye to Cup Noodles once and for all—I bet you’re wondering where to sign up, right?

So where’s the catch? For most people, it’s in the perception that tech is all about computer programming (not necessarily a field that jumps off the page for designers). However, design is actually a HUGE part of tech! To help our creative friends understand just how right a tech career can be for them, we’ve put together this guide defining three major design fields (Graphic Design, UI Design, and Visual/Web Design) and detailing how each one pertains to tech.

Table of Contents 

  • What does a graphic designer do? 
  • What does a UI designer do?
  • What does a visual designer/web designer do?

What Does a Graphic Designer Do?

Graphic designers probably have one of the best-known job titles in the world of design and tech. But can you define what they actually do on a day-to-day basis?

  • Traditionally, graphic designers work more directly with print design and deliverables (things like posters, brochures, invitations, and business cards).
  • That said—as printed media continues to transition into the digital realm—the graphic design field has had to adapt, which means today’s graphic designers are often qualified to create digital assets (logos, icons, etc.) for websites and applications.
  • The line between graphic designer and web designer has blurred in recent years, so that graphic design often serves as an umbrella term for other design roles. Think of it like this: web designers know and use graphic design, but graphic designers may not always be web designers.
  • Graphic designers have a deep understanding of the fundamentals of design. This includes things like color theory and typography. They also need to know how to build brand assets (like logos) and make sure those assets are consistent across all designs for a brand.
  • Graphic designers do most of their work in software programs like Photoshop and CorelDRAW – products you’ll learn to use in JoWeb Graphic Design course. Mac users may also use the Mac-only program Sketch as a design software alternative to Photoshop.
  • One skill graphic designers don’t necessarily need is coding. The coding work for digital projects typically gets assigned to a front end web developer. That said, as the fields of graphic design and web development increasingly intersect, it doesn’t hurt for graphic designers (and especially web designers—more on that in second) to add HTML & CSS to their arsenal.

If you have experience with print graphic design but feel intimidated by the prospect of transitioning to digital design work, don’t be! Yes, you’ll have to familiarize yourself with some new tools and terminology, but core design skills remain the same, regardless of the medium. If you’re looking for help in making this transition, our Web Design course is a perfect way to ease yourself into the new skills you’ll need,

What does a UI designer do?

  • User interface (UI) designers are design professionals responsible for the “look and feel” of websites, apps, or other digital products. They perform design tasks like selecting colors, pairing typefaces, and setting web page or app menu layouts. This is all in service of creating a design experience that is both aesthetically pleasing and easily navigable for users.
  • UI designers work exclusively on digital projects (rather than primarily in print like a graphic designer). Because of their digital focus, they need to have a very deep understanding of user experience
  • Since UI designers design website and web app layouts, it’s important to include strong wireframing skills in a UI design toolkit. UI designers should also be proficient with HTML and CSS so they can understand how their designs will work on actual websites and apps. For that same reason, it also helps to have a basic understanding of JavaScript (or better yet—be comfortable writing JavaScript code).
  • Like graphic designers, UI designers need a strong grasp of general design fundamentals like color theory and typography.
  • Also like graphic designers, UI designers spend a lot of time working with PhotoshopIllustrator, and InDesign.

What does a visual designer (and/or web designer) do?

FIRST UP, THE DIFFERENCE BETWEEN A WEB DESIGNER AND VISUAL DESIGNER

Visual designers are the problem solvers of the design world. Rather than just bringing brands to life, they play a key role in defining what goes into a brand’s unique style and voice. In addition to creating beautiful designs, they know how to explain design concepts and the decisions behind their work.

Web designers are a subset of visual designers, focused exclusively on website design work.

  • Visual designers do a ton of different things in their day-to-day work. It’s a bit of a hybrid between graphic designer and UI designer, but with an extra layer of skills thrown into the mix. Visual designers have to understand user experience, user interface, and web design. At the same time—while they don’t have to know how to code—web designers in particular get bonus points if they have at least basic coding skills.
  • Visual designers rarely work on print products, but they do need a strong understanding of graphic design, identity design, and branding. They need to have exceptional visual messaging and communications skills, too.
  • Web designers work primarily with web layouts and deliverables, including things like icons, infographics, logos, and presentations. They also have to be familiar with industry-standard software (hello again, Adobe and Sketch), plus they need wireframing skills like a UI designer.
  • Finally, web designers need to be aware of how front-end developers work, and the languages they use. While a web designer doesn’t need to know how to code (even if they are working exclusively in web design), they at least need to know how to communicate with those who do, and how to create designs that take into account what’s possible via coding.

So which one is right for you?

Traditional graphic design jobs, while still out there, are dwindling. The fact of the matter is, If you don’t have web skills in 2020 (and beyond), it will be increasingly difficult for you to find high-paying work. Practically every brand out there now has a web presence, and many have a stronger presence online than they do in print. To that end, knowing how to design for the web gives you a much stronger position in the job market.

If you’re interested in coding (and the more technical end of design), UI design can be a great option. Some UI designers code on a regular basis as part of their job (though not all of them do).

Meanwhile, web design is great for those who want a more well-rounded design career (with little or no coding required). However, even if you do zero coding as a web designer, you’ll still be qualified to immerse yourself fully in digital design, working on websites and web apps.

As you can see, design is a wide-open entry point into the world of tech, so creative types take heart! High pay, great work/life balance, and ultimate flexibility can be yours, all without sacrificing a creative career.

So what’s the Difference Between UX and UI?

Before getting into the specifics of each field, it’s important to clarify that—while you may hear both terms used interchangeably—UX and UI are two distinct job categories (granted, with a lot of overlap). So, what are we talking about when we look at UX versus UI?

USER EXPERIENCE (UX)

UX (a tech acronym for “User Experience”) is a tech field that researches the user base of digital products (like websites and apps), tests these products with representative users, and applies those test findings to improve the experience people have with finished versions of the products.

This “experience” includes the way a digital product “feels” to a user while they navigate it, the way the product makes them feel as they use its different features, the ease of product use, and how appealing the user finds the product overall.

Far from coding-heavy tech jobs like web development, UX jobs are more centered on being a good listener and having the creativity and critical thinking skills to incorporate what you learn from user interviews into the overall product experience.

It’s also important to note that—while UX is sometimes referred to as UX design—the “design” part of the name can be a misnomer. In user experience work, “design” is only one part of the job (more on this below). Also important to stress: you don’t need a traditional design background to work in UX.

USER INTERFACE (UI)

While UX deals with the overall aspects of a brand and product experience, UI (tech speak for “User Interface”) can be understood as a subset of, or compliment to, the bigger UX picture.

As its name suggests, UI design takes the principles of UX and applies them specifically to a product’s interface (a website’s or app’s menu, layout on the screen, sitemap, form placement, etc). Because of this focus, UI design is more similar to traditional web or graphic design jobs (but with a few added twists that we’ll cover below).

What Do UX and UI Designers Do?

Since the definitions of UX and UI alone can feel nebulous, it’s helpful to take a look at what UX and UI designers actually DO (and the skills they need to do it.

UX RESEARCH

Research is at the heart of all UX work. Without spending time researching the customer experience with a product (and using that research to inform product changes and improvements after the fact), there IS no UX. UX researchers typically collect and analyze user data through core skills and techniques like the following:

  • Personas are fictional user profiles used to model user groups a product is being built for. These profiles are created through research data like demographic information, interviews with test users, and customer experience metrics (search terms used to locate a website or app online, links frequently clicked on by specific customer types, time spent viewing site pages, etc).UX designers use these personas to dictate product features and UX design choices based on what would appeal most to theoretical users.
  • Journey mapping is a technique that involves creating a visual representation of user’s “journey” with a product. The user journey model is based on same kind of data and metrics used to creature personas. The typical user journey begins with a first product engagement (e.g. a user’s first visit to a website after finding it through a Google search or a Facebook post) and (best case scenario) leads to a long-term customer relationship with a product.This visual chart of the customer’s experience trajectory (based on UX research) allows UX designers to identify how users engage with a product, what user needs emerge at different parts of the customer journey, and how deep of a gulf exists between intended and actual user experiences.
  • Design Ideation is a fancy term for “brainstorming,” which is what UX designers do with the results of their research. After analyzing a product’s current user experience and defining the ideal experience based on user feedback (using tools like personas and journey maps), UX designers put themselves in the user’s shoes and begin brainstorming ways to implement necessary product changes.This brainstorming can be done alongside clients and product stakeholders, and is the first real “design” step of UX. UI designers will execute a similar ideation process for interface designs, also based on data from UX research.

INFORMATION ARCHITECTURE

After using UX research to develop an overall strategy for improving a product’s user experience, UX and UI designers need to start crafting and implementing their design—overall experience design in the case of UX, and specialized interface design in the case of UI.

This is the information architecture stage of UX and UI design—how is a product’s information (or content) going to be arranged in a way that makes for the most satisfactory user experience? UX and UI designers develop a product’s information architecture through methods like the following:

  • Navigation and Layout Best Practices are essential to both UX and UI design, but really take center stage when it comes to UI (everything about a user interface is based on and informed by its navigation and layout, which in turn reflects the overall experience of the product as a whole). Just like traditional design elements like color and typography are a combination of personal preference and design science, UX and UI have some objective best practices based on design theory.This UX Planet article, for instance, gives a look at five basic UI patterns that are considered fundamentally sound building blocks for UX UI design. Understanding these best practices and incorporating them into your own UX UI design is a crucial part of being a UX or UI designer.
  • Wireframing is the process of creating visual models (wireframes) that map out the basic structure of a website or application. These models gives UX and UI designers the opportunity to plot out key site elements—things like big picture brand experience strategies for UX designers (logos, color palettes, and content choices), and page layouts for UI designers (sitemaps, positioning of on screen menus, inclusion of interactive forms, etc).In the early stages of designing a product experience or interface, wireframes are a low stakes way of sharing design plans with clients, users, and stakeholders (as opposed to creating a full product iteration).
  • Prototyping is the next step up from wireframing. Prototypes are a more fleshed out website or app model, building on basic wireframe concepts and giving users a sample version of a product that they can interact with. Like wireframes, prototypes are lower stakes than a full product release (in terms of the time and cost), but closer to an actual release for testing purposes.Depending on how close a product is to release, prototypes can be as simple as a paper sketch or as realized as a fully functional online model. Similar to wireframes, UX designers will focus on prototypes as a model for a product’s general user experience, while UI designers will use them to model and test the efficiency and attractiveness of their interface design.

PRODUCT ITERATION TESTING

All of a product’s UX research and UX UI design modelling eventually culminates with the release of a finished product. However, UX design is a dynamic, ongoing process, so it’s important to keep in mind that a “finished” product doesn’t mean a “final” product.

A finished version of a website or app simply means an officially released version that’s accessible to the public. But UX and UI designers continue to test their products even after a release. The user data they collect from a finished product can then be used to improve on that product and create an even more refined experience and interface in the next release version. Product iteration testing usually takes two forms.

  • Usability testing is a method where users are asked to try using a product version. UX designers then observe and analyze how easy and enjoyable it is for users to complete specific tasks with this particular iteration. This gives UX designers a chance to witness firsthand how a user experiences a finished version of a product and what can be changed for future iterations.
  • A/B Testing involves exposing test users to a product iteration (version A) alongside a version with slight design variations (version B) and observing which version the user base prefers. User preference can be measured through a metric called a “conversion rate.”Conversion rates reflect the number of website or app visitors who take a desired action during their visit (e.g. purchasing a product or service, signing up for an email list, or subscribing for a paid membership). By comparing iteration A with variant B, UX and UI designers can understand which parts of their current product version resonate with users and which parts can be improved upon.

UX or UI—Which Job is Right for You?

Now that you know the difference between UX and UI design (as well as how both jobs can overlap), you might be wondering how to figure out which role is right for you. One way to look at it is to consider how much the “design” aspect of UX UI appeals to you.

If you come from a traditional design background or have a particular interest in design-specific work, specializing in the UI might be a perfect fit. Meanwhile, if the more theoretical research and problem solving of UX appeals to you, then you’ll probably want to gravitate toward UX design.

But here’s the thing—you don’t HAVE to anchor yourself to one option or the other. This will you in position to work anywhere on the spectrum of UX UI. What’s more, many employers mix and match these two fields.

In the wild, the definition of UX and UI is rarely as clear cut as presented in this article, and an employer asking for UX design might actually be looking for UI design, and vice versa. If you’re a UX UI generalist, you can fit in anywhere and find the job that’s perfect for you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Copyrighted Image