What’s the Difference Between UI and UX? What to Tell Your Client if They Ask You This

What’s the Difference Between UI and UX? What to Tell Your Client if They Ask You This

What’s the Difference Between UI and UX? What to Tell Your Client if They Ask You This

 

 

 

Whether we like it or not, “what’s the difference between UI and UX” is a very common question. I would even risk saying that it’s among the very first questions people ask when they are introduced to the terms “UX” and “UI.”
“Both start with the letter U, right? So how different can they be?”
Well, very.
But let’s dig deeper:
Read on to find out what the fundamental difference between UI and UX is, and how to talk with your client if they ask you that ever-popular question.

Defining UX and UI

Even though you most likely already know the official meanings of these terms, we should still cover them even if just for the sake of keeping the argument complete.
UX design stands for user experience design. In its current form, the term was introduced by Don Norman of Nielsen Norman Group in 1990. His original main takeaway was this:
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.
UI design, on the other hand, stands for user interface design. There is no such handy and clear definition of it, I’m afraid. Basically, the only consensus we’ve reached here is the definition at Wikipedia:
User interface design (UI) is the design of user interfaces for machines and software, such as computers […] The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals.
Okay, “in English, please!” right? The above definitions, even though they are quite accurate, don’t do much in terms of helping us understand what the difference between UX and UI truly is. And they surely won’t help your client understand either. I mean, sure, you can quote that to your client, but don’t expect them to not give you weird looks if you do so.

The problem with UX and UI

We really shouldn’t be surprised that UX and UI seem very similar in principle. They both come up in basically the same places and conversations. Both are crucial for every web project, app design, product design, web service, and loads of other related projects.
Add to that, people tend to use these terms interchangeably, not even trying to distinguish them in any way (and especially in job listings).
Kind of like peanut butter and jelly. What you want is both, right? Just like UX and UI.
There’s clearly some overlap between the two, but the key question is where that overlap happens?
Unfortunately, not a black-and-white thing this. Most people have their own definitions of UX vs UI, and it’s impossible to tell anyone that theirs is wrong. Mainly because it isn’t. And, personally, I’m kind of annoyed by some designers being offended by the very nature of the question itself. “Those two are impossible to compare!” – they say – “They are two completely different things!”
Well, sorry, but the sole existence and popularity of the question – “what’s the difference between UX and UI?” – proves that it’s something that’s really on people’s minds. Even worse, it’s us – the designers – who have brought this question onto ourselves. We’ve done so by constantly using “UX” and “UI” in the same sentences next to each other. How can we expect our clients not to be confused?
But okay, I’m getting perhaps a bit too worked up. Let’s clear things out:

The difference between UI and UX in plain English

Quoting Wikipedia when talking with a client? Not great. We can do better.
The simplest definition I am able to come up with is this (you be the judge if it’s good enough):
  • UX design deals with the entire interaction that a user has with a company, its products, services, website, app, and so on. UX touches upon the entire journey a user embarks on when they decide to give “something” a chance. It covers the complete overall experience that a user has with that “something.”
  • UI design, on the other hand, deals with the specific things that the user will actually interact with while on that journey.
Or, in other words, UX deals with purpose, while UI deals with appearance and functionality.

Where UI starts, and UX ends

To say it simply, and also in a way that your client might appreciate, UX is a much bigger pie than UI.
Somewhat like this:
Whereas UI deals mostly with the appearance of what’s already been thought through during the UX design phase.
Let me give you a perhaps corny example, a metaphor, if you will, but also something that you can use when talking with a client:
Picture yourself in a cafe. Think of the cup, the table, the chair, the coffee beans as the UI of the place. Now, think of the way the coffee is made, the ambience, the service, the music as the UX aspect. UX is literally everything that has impact on your overall experience as a user of “something.”
Setting coffee shops aside, you can find your own way of understanding the core differences and explaining them to your clients. Here’s another perspective, shared by Sabina Ionescu of Revive.Social. Here’s what she said when asked, “What is the difference between UI and UX for you? Also, what to tell your client if they ask you this?”
I am more on the user side of the story here, as I am not a designer myself. But I have worked closely with both brand designers and web designers, and I think this makes a good analogy to what UX and UI stand for.
Brand designers are involved with the overall user experience, as they follow every aspect of the brand, from the identity to employee branding, and from packaging design to brand voice. The user experience manifests in every aspect of a brand and contributes to the overall perception of a company.
Web designers, if such a parallel is allowed, are closer to the user interface side of the story. They need to polish the elements users interact with, what they click and touch. Their focus here is on the bits and pieces that need to make sense in the overall picture.
But they are closely connected. Brand designers need to oversee the online expression of a brand in the same way web designers need to follow brand guidelines when they are building a website or a mobile app.
UX and UI go hand in hand.
In this light, UX starts with a problem – the problem that the user wants to have solved and everything they have to do on their way to achieving that goal.
UX is high-level thinking about how I can get the user to where they need to be. I’m doing so by understanding what’s the challenge that the user is really facing, and not necessarily what I – as the product owner – would prefer them to do.
UI design only steps in once the UX part has been ~80% done. And the term itself is often used interchangeably for web design, graphic design, interaction design, and front-end design, even.
Under the hood, UX is a much more data-driven field than UI. Making a UX decision is something that can’t (or at least shouldn’t) be done based on a hunch. UX involves research, testing, and experimenting over a longer period of time to figure out some of the more challenging aspects of the design process. It requires knowledge and skill in other areas outside of design – psychology, marketing, strategic business planning, product design.
Overall, UX is meant to figure out what is likely to work (or not work) based on the project’s goals and what we want the users to achieve/do. It’s only then when you can start wondering exactly how (through the UI) you’re going to convince users to start doing thatspecific thing.
Looking at all this from the client’s perspective, we have to admit that the client doesn’t necessarily care about each individual piece of the puzzle. What they do care the most about is the puzzle itself – having their goals met.

Examples of UX vs UI thinking

In case your client has a lot of follow up questions in relation to UX vs UI, here are three examples of how UX and UI design intertwine and how we can think about the differences based on actual applications:
First, a real world example.
Next time you’re in a car, pay closer attention to the button/switch that controls the hazard lights. Traditionally, in most cars, it’s the most central, best visible switch on the dashboard.
I argue that the placement of that switch is a result of a UX decision. While the look itself is a UI decision.
Here’s what I mean; the moment when you actually need this switch, you’re probably in a high stress situation and the last thing you want is to wonder where that cursed switch is. It has to be visible immediately, and for that, it needs to be in the most central location possible. Quite interestingly, that switch is there despite the fact that people hardly ever use it. It stands to reason that it could be placed in a less prominent spot, so that a more commonly used switch could take its place. However, this would be catastrophic.
That switch is good UX.
The next example comes from an app – it’s called Adobe Spark Post. And yes, as you would imagine, it’s our own app. I’m biased, perhaps, but I wanted to guide your attention to one specific feature in that app that I consider great UX.
First things first, the app is meant to help you create custom images and graphics that are optimized for social media sharing, blog posts and other web-based purposes. As part of the app, you can add text on top of images. This is where the feature I want to highlight comes into play.
There are four main text alignment options: the classic left, center, right, plus something called “smart align” (I believe).
Smart align is the response to a struggle that many users face when working with text on images. Let me just show you the final effect:
As you can see, the text is evenly spaced across the entire available canvas, yet without being artificially justified or stretched. The effect is achieved by font size and spacing manipulation.
This sort of alignment solution is not a classic formatting option that we know from traditional text processing software. Placing it there – alongside left, right, and center – was a conscious UX decision. The problem that this feature solves is letting users create professional looking images without the need to experiment with typography and pixel-perfect text alignment manually.
The third example comes from a website, or rather two websites. So I’ve been in the market for a VPN lately (Wikipedia def). I kept researching the options but couldn’t find the info that was truly important to me. You can try this yourself, just google “best VPN.” The first result is this page:
Surely a reputable source – PCMag – however, the initial table fails to point out any parameters that are actually important when choosing a VPN.
The main, everyday problem with VPNs, as I’ve found, is that they slow down your internet connection. So to some extent, the VPN that you will actually end up using every day is the one that operates fast.
That PCMag page fails to show me reliable data. It doesn’t understand what I – the user – am really looking for. The table is nice visually, it’s good UI. But it’s been built without truly understanding the UX aspect of the problem.
So I needed to continue digging to find a better resource. Here’s the comparison I found:
Much less fancy when it comes to design, but also much more factual, and gives me the exact data I need. Since I’m in the EU, I can compare the download and upload speeds of different networks, examine the price tags, and make my decision based on that.
This is good UX. This kind of a solution understands the main challenge of a real user, and only then builds the UI around it. A UI that turns out to be really simple, but it’s all warranted by the UX goals.

In summary

Back in the day, there wasn’t much to do in terms of UI- and UX-thinking when it came to software-related products. When personal computers first got popularized back in whatever year it was, all we had was a command line interface. There was very little wiggle room. Nowadays, however, the possibilities are endless. And every project goes through multiple stages of design before we can lay our hands on the final thing. UX and UI are naturally part of that.
Our clients want to be in the know of all that too. Even if not by understanding the concepts of UX and UI in detail, they still want to at least know what’s going on and what they can expect when their designer says they’re “working on the UI.”
This is where we need to step in and explain all the whys and hows.
But what do you think? What do you do when a client asks you about the difference between UX and UI?

 

Moving From Graphic Design to UX Design

Moving From Graphic Design to UX Design

Moving From Graphic Design to UX Design: The Complete Guide to Career Change

 

Just a few short years ago, the word “designer” usually meant one thing: graphic design. As demand for digital products has increased, the design market has shifted heavily toward interactivity. Today’s most in-demand designers don’t just create products that look good — they design products that exhibit exceptional design and superior usability. Companies are increasingly more invested in making sure their customers have a positive digital experience, and there’s no sign that trend will change anytime soon. As a result, hiring skilled UX designers is a top priority among businesses. In fact, UX designers are being recruited as heavily as software engineers.
A career in UX design can also be lucrative. The median U.S. salary is $70,000 per year for entry-level, and $100,00 per year for a seasoned UX designer. Given the demand and average salary, transitioning from graphic design to UX could be a career move worth pursuing.
To help you make an informed decision, we’ll explore the following topics in this article:

What Exactly is User Experience?

User experience is a field that’s essential to product development, but remains a mystery to many people because it’s relatively new. Don Norman, co-founder of the Nielsen Norman Group Design Consultancy, is credited with coining the term in the late 90s, and defined user experience as encompassing all aspects of the end-user’s interaction with the company, its services, and its products. It’s important to know and understand the elements of user experience when exploring a career in UX design, as it’s the foundation to being successful in the field. You can find additional information regarding user experience in the following article: What You Should Know About User Experience.

What Exactly is UX Design?

In general, UX design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. While UX design as a process can be applied for every product, in this article we’ll describe UX process in the context of web design, creating mobile apps, and other digital products.
Essentially, UX design is a human-first way of designing products — it’s all about creating experiences that people can use with ease and delight. A key UX design skill is learning how to make that experience the best it can be. UX designers tend to be concerned with three primary factors — usability, look, and feel.
  • Usability is the cornerstone of user experience. If a product isn’t usable, the user is guaranteed to have a negative experience.
  • The look of a product is the visual appeal. It should satisfy or exceed user’s expectations.
  • The feel is about designing products that are a joy to use. Products should provide a functional and pleasurable experience.
However, UX design isn’t solely about the user. Meeting the business goals of the product and aligning the business goals with those of the user is equally as important. Ultimately, the goal of a UX designer is to connect business goals to user’s needs through a process of research, testing and refinement.

UX Process

UX design requires a process like any other design field. But, unlike graphic design, the UX design process starts well before pen hits paper. The following examples illustrate two ways the graphic design and UX design processes differ:
  • Analysis: In the context of graphic design, this is what we call an ideation phase. There’s a major difference for this phase between graphic design and UX design. For UX design this phase isn’t limited to a single step in the design process. It can happen before, during, and after the design solution is implemented.
  • Design: If you have a graphic design background, then you might enjoy this part of the process the most. However, there is a difference in this phase between graphic designers and UX designers. While graphic designers try to create a visually pleasing pixel-perfect design, UX designers try to create the best possible experience—which includes graphic design, information architecture, interaction design, and more. Another key difference is that graphic design is linear and the process finishes once the product has launched. For a UX designer, product launch is a single step in the design process. Additionally, there is a loop between design and user testing that does not exist in graphic design.
In actuality, the UX design process can be applied to any product, not just digital products. For example, you can apply UX process to design a car, book shelf and more. For a deeper dive into design process, read the following article: UX Process: What It Is, What It Looks Like and Why It’s Important.

How Graphic Design Skills Translate into UX Skills

Graphic design and UX design have many overlapping skills. The career shift may come naturally to those who already have strong design capabilities. Therefore, it’s important to take a nuanced look at how the two disciplines are similar and where they differ.

What Does Graphic Design and UX Design Have in Common?

Having a background in graphic design offers transferable and relevant skills for UX design. The following skills can serve as a springboard into UX:

Emotional Design

Both graphic designers and UX designers try to create an emotional connection to the users:
  • Graphic design is about evoking user’s emotions through color, imagery, and typography.
  • UX designers are also concerned with evoking emotion, but they aren’t limited to the visual part of the design. They focus on information architecture, interaction design, and accessibility of design. This makes it possible to create a broader, big picture view of the entire user experience with the product.

Attention to Detail

The old saying “the devil is in the detail” is relevant to design. Design can certainly be in the details, and graphic designers’ skills are often oriented toward thoughtful consideration of details, such as text kerning and alignment of the elements.

Creative Thinking

Designers are problem-solvers. Graphic designers and UX designers are equally skilled at creative thinking and solving problems through design.
To understand how creative thinking helps UX design process, it’s essential to define design thinking first, because the UX design process is often based on design thinking methodology. Design thinking is a continuous and evolving process that flows through the following stages: empathize, define, ideate, prototype, and test. Within each stage, problems are framed, and questions and ideas emerge until the best solutions become evident. Design thinking draws upon logic, creativity and intuition to explore possible solutions and to create desired outcomes that benefit the end user.
Creative thinking makes design thinking easier because it requires our brains to continuously try to solve the problem using different approaches—which leads to innovative solutions.

Design Conventions

Conventions are the selection of good solutions that users have found convenient or likeable over the years. In terms of user interface, conventions can be shapes, colors, icons, placements, or any pattern that is quickly identifiable. To demonstrate, let’s consider conventions about color and shape usage in the example below. The first sign uses two strong conventions to convey danger: the color red and the rhombus shape. Although the word “warning” is visible on both signs, the first image can convey the message without the text. The second image requires the text in order to instantly identify it. Many graphic designers are familiar with the conventions in web or app designs, which means they are likely to adapt quickly to a UX design role.

Aesthetics

One of the benefits for graphic designers moving to UX design is that they can make things attractive. Graphic designers have a natural ability to make things aesthetically strong by using alignment principles and visual hierarchies. Aesthetics can have a very real effect on the experience and even usability of a product. Good aesthetics can improve the overall user experience of a product by making users feel better about it. Graphic design skills are an asset while working on a UX project.

Prototyping

As previously mentioned, the prototyping phase is familiar to both graphic designers and UX designers. Graphic designers often create mock-ups of their designs prior to delivering a final design. This makes it possible to demonstrate the work for clients, receive a feedback on it, and to refine designs based on the feedback. UX designers also create prototypes, but these tend to be less focused on the look of the product and more focused on the usability and feel part of the user experience. When using prototypes, UX designers seek to answer the following questions:
  • Is it useful?
  • Is it usable?
  • Is it desirable?

What Graphic Designers Should Know Before Moving to UX

While graphic designers and UX designers have several skills in common, it’s important to note that UX designers have different end-goals and responsibilities than graphic designers.

From Pixel-Perfect Design To The Right Fidelity For the Task

Since graphic designers are focused on creating beautiful, polished designs, they often use high fidelity prototypes as deliverables to fully communicate design concepts. A graphic design background can result in graphic designers developing visual layouts too early in a project.
UX designers, on the other hand, select fidelity according to the project needs. They often try to find the most appropriate level of fidelity in order to make the design process efficient. Sometimes a rough sketch on a piece of paper is everything you need to deliver the main idea at the beginning of the project when you have a dozen different ideas. Understanding when it’s time to produce highly polished work is a key mindset integral to UX design.

User-Focused Design

“The user comes first” is perhaps the most fundamental rule for UX design. This is because UX design is designing for use rather than communication or aesthetics. Unlike graphic designers whose main focus is aesthetics, UX designers are focused on users and how they interact with the product. UX designers want to make life better for people and put the needs of the user in front of their personal preferences when they design. Designers who enter the field of UX should fight the natural tendency to “design for yourself” and instead design for the target users.

Collaborative Design Process

UX is much more about interacting with and understanding people, that’s why strong communication skills are essential for any UX designer. It’s critical that UX designers get along well with others for a number of reasons. Here are the most important ones:
  • UX designers should be able to understand people’s needs and motivations, so the designer can capture the inspiration and purpose driving the product.
  • UX designers work closely with other designers, developers, and stakeholders in order to ensure that the end designs match everyone’s expectations. UX designers should have clarity of expression and possess the ability to express complicated concepts clearly to those with little or no prior knowledge in the field.

Product Research and Testing

A key part of the UX design process is research. UX designers focus on both generative research (product research focused on understanding user’s needs and contexts), and evaluative research (user testing focused on understanding whether or not designers achieved goals). Product research isn’t limited to a single step in the design process. It can happen before, during, and after the design solution is implemented. Graphic designers looking to switch careers will need to spend a significant amount of time learning how to conduct product research and user testing.

Iterative problem solving

UX design is very much an iterative problem-solving process, and this approach can be different from the traditional linear process of graphic design. In the case of UX design, you don’t have a final solution for the problem, only the constant search for the better solution. The design process never ends. In fact, the design will be continually adjusted according to user feedback. That’s quite different from what graphic designers do and may require some mindset shifts for graphic designers who would like to make the transition.

Specialized vs. Multidisciplinary

Graphic design is a specialized discipline, and there is a certain set of skills, such as typography and color theory required to produce great visuals. UX design, on the other hand, is much more multidisciplinary and involves many schools of knowledge. Part designer, part researcher, part project manager; the UX designer role is complex and challenging.

Never-Ending Learning

Since the field of UX is always changing, good UX designers know that they continuously have to learn in order to create the best product. Every time a new market is approached, it brings new challenges for designers.

Roadmap for Graphic Designers Becoming User Experience Designers

Learning about any new discipline can be daunting. There’s so much to learn and you might not know where to start. Fortunately, we’ve prepared a step-by-step process for getting started:

Education

One way to make sure that you’re ready to transition into a career in UX design is by investing time and effort into learning UX skills. Keep in mind that the transition from graphic designer to UX designer doesn’t need to be instantaneous, so take your time and learn each part of the UX job thoroughly. There has been an explosion in the options available to people wanting to dive into UX, which includes information available online for free, and structured courses. If you aren’t limited in time, I suggest applying for a structured course. A big benefit of a structured course is the possibility to see your progress. Here are two options:
  • University education: The top universities, such as Carnegie Mellon and York University, provide specialized courses on human computer education (HCI Programs, MSc). The programs are not cheap, but they offer a solid UX education.
  • If you live in a major metropolitan area, you may apply for a class-style program, such as General Assembly.
  • If you don’t have access to class-style programs, don’t worry. A lot of great education programs are available online. Platforms like com, udemy , CareerFoundry are perhaps the best introduction to the field. Courses range from self-taught to structured sessions with assignments, interactions with mentors, and other students.

Start Practicing UX Design

Self-studying or having someone teach you is wonderful, but it’s equally important to apply your design thinking. You learn a skill by practicing it and nothing beats experience, so start working on a side project. Here are a few ways you can practice UX design:
  • If you don’t have actual projects where you can apply UX knowledge, you can participate in the Daily UI Challenge and include your favorites in your portfolio. DailyUI is especially good for beginners because it helps you boost your skillset while creating a social presence. Be sure to make it clear in your portfolio that it’s academic work.
  • Design your own ideas and passion projects. For example, you can reimagine existing websites or mobile apps. Take an app you use every day and find things that annoy you. Think about how you’d make it better. From there, write down the solution, sketch it, mock it up, and try putting together a prototype to show your idea.
  • Don’t overlook the value of volunteer projects. Many companies bring creative people together, so you can learn from others while building a portfolio. It’s also a great way to get involved in your community.
  • Last but not least, you can gain more practical skills by taking an active part in UI and UX design on your current project. Push beyond your job description and do UI and UX design on digital design projects. Get into the habit of asking for feedback on your work.

Mastering an Efficient Prototyping Tool

Mastering an efficient prototyping tool is essential to any UX designer. When asked what skills they look for in UX designers, 42 percent of managers said ‘knowledge of UX tools’ is the most important factor in hiring. While graphic designers may already be familiar with creating web and app designs, creating interactive designs without a prototyping tool has one major problem—such designs are static. When designing an interactive experience, it’s essential to use the tools that make creating interactive prototypes possible. While there are many specialized UX tools, an overlap exists between the two disciplines’ toolsets—which is good new for graphics designers looking to make the switch to UX.
If a picture’s worth a thousand words than an interactive prototype is worth a thousand pictures. Interactive prototype makes it possible to truly experience the product.

Mentoring and Feedback

Another great way to develop your career is to work with a mentor in the UX field. A mentor is a friend — an expert in UX design and your friend at the same time— to whom you can ask advice. These people can guide you toward the appropriate UX speciality and introduce you to valuable contacts.

Focus on Building a Design Portfolio

Employers consider relevant professional experience and the applicant’s design portfoliowhen hiring a UX designer. Basically, you become a UX designer by showing you can do UX design. The most important section in your portfolio is the one that has information about your projects.
Here are a few tips for what to list in this section:
  • Showcase your graphic design work and use it to your advantage. Visual designs, brand identities, logos, and infographics are all important for your portfolio. People are visual creatures and enjoy viewing a beautifully crafted design. In fact, Behance is a perfect place to showcase your work.
  • It’s best to embed videos that explain the product you designed, and to include working prototypes that users can interact with while evaluating your product.

Networking

Once you’ve developed practical UX design skills and created your UX portfolio, you’ll need to focus on networking. As was correctly mentioned by Beth Koloski, it’s hard to break in if you don’t know folks. Networking is essential for UX designers since the best opportunities are often found when someone already in the field recommends you for a position. Start filling the gap by making new connections as soon as possible. Here are a few tips on how to start networking:
  • Get involved with your local UX community. Look for local “hackathons.” These events are great for both practicing UX design skills and working on an idea with real people in a team-setting. Join local UX-related groups and start engaging in conversations. You’ll eventually build an amazing peer network.
  • Attending design conferences is a great way to get your foot in the door.
  • Be active on Twitter by following designers you admire or want to learn more about. Here are just a few names: Don Norman, Luke Wroblewski, Steve Krug. Not only will you learn a lot from them, you can also interact with their followers who are mostly designers like you.

Conclusion

Many people believe that UX is an exclusive club and only those with the right talent and extensive training can join, which is not true. If you want to change from graphic design to UX design as a career, it’s not going to be as difficult as you might think. While there is a gap between graphic design skills and UX design skills, it’s not an insurmountable one. Graphic designers already speak the language of design; they just need to brush up their skills to include those that are unique to UX design.
Last but not least, don’t forget about tools. Adobe XD tool is the fastest way to turn your ideas into beautiful experiences. Design, prototype and share — all in one app.

Related Articles:

If you are a graphic designer who is contemplating a career in UX, we’ve compiled additional reference material to round out this guide.