Justinmind-logo

UI vs UX design: what’s the difference?

June 29, 2021
UI vs UX design: what is the difference?

What is the real difference between UX and UI design? Why is there confusion over the two? Let’s go over the basics of the world of UX.

UX design is all around us, from traffic lights to our smartphones. It’s made a huge difference in the lives of people around the globe, with more and more people flocking over to this growing industry. But what exactly is UX design? What is the industry about, anyway? What UX design tools are most commonly used?

Try our free UI & UX design tool for web and mobile apps
Download Free

UX design can seem like a broad topic of conversation. It’s greatly misunderstood by those outside of the industry, with even more confusion surrounding UI design. Non-design people want to know: what is the difference between UI and UX design? Where is the line that separates the two? Does that line even exist? Let’s go over the basics.

What is the difference between UI and UX design?

It can be tough for many people to see the line that divides the two or to understand how they relate to one another. Let’s first start with UI design.

Since computers successfully obtained a graphical user interface, users all over the globe could interact with computers and software. Starting way back in the 1980’s, the interface has changed everything about the way we use technology – where long lines of code were needed, now anyone can simply click a button.

This essential change in the technology opened a huge margin of opportunity for designers to operate in. Suddenly, designers needed to create entire interfaces that would interact with the user and let go of the code language entirely. That is where UI designers come in.

Their goal is to create a concrete and tangible interface that not only gets the main job of the product done, but that helps users to potentialize their experience. Technically speaking, everything we can see in the interface is thanks to UI designers.

list of differences between ux and ui design

Now let’s take a step back and consider UX design. UX design covers everything regarding the user experience, from basic functionality to interactions. While UI design concerns only the interface, UX design regards the entire experience that users take away from the product. That means that while the UI is a crucial aspect of UX, it is only a limited part of the whole.

Let’s take Google as a silly example. It’s no secret that Google’s interface design is minimalist and sticks to crucial elements like the input and the search button. In UI design terms, Google offers a basic interface, with results being listed in a way that makes sense and helps users understand each search result. There’s little sophistication, there’s no visual fuss about any of it.

With that said, the user experience that Google offers is far from basic. People know that they can always turn to Google for quick information, this being the result of a complex code that Google keeps under a locked key. The web app goes the distance in offering an experience that gets people what they want, fast. While the UI is fairly simple, it simply adds to a user experience that focuses on what users want.

1. UX is about a user journey in solving a problem

This is a major difference between UI and UX. While the interface design is all about what happens at the surface, UX design covers the deep function of the entire product. UX designers must consider not only the main goal that users will have when using the product, but also how they can ensure that can happen smoothly and easily.

Considering and mapping a user journey is a major pillar in UX design. That’s because UX is about making sure that people can indeed accomplish their goals and solve their problems. This also means considering any factor that can affect the user journey, be it inside the product or outside in real life.

showing a user journey map to show how ux solves problems

The UX of it all goes much further than making sure all the buttons are there – it’s about ensuring that the very reason the product exists is solid. Can the main features do their job? Can users truly solve the problem with the product?

2. UX focuses on the big and conceptual, while UI focuses on the tangible

Connected to our previous point, we also find that UX tends to deal with the bigger issues of the entire project.

UX designers will worry about things like the information architecture, strategy and main goals of the product. All of these represent high-impact areas of the product, dealing with issues like the competition and secondary features that could be added. These can drastically change the product, shaping the very nature of the product. UX designers will deal with questions like:

  • What circumstances lead to users needing this product?
  • Why would they choose this over a competitor?
  • How can we make the product experience more efficient?
  • Are all the product requirements aligned?
list of focuses of ux design as broad project management

In exchange, UI designers tend to deal with more specific and concrete aspects of the product. Instead of worrying about why users would even want the product, UI designers will focus on creating a layout that potentializes the product’s primary feature (like our Google example from above).

They’ll worry about creating a navigation system that reflects and respects the information architecture. They’ll compare several element combinations until the best one can be selected. It’s immediate and specific, creating things that can be put to the literal test very quickly.

3. UI design deals with snapshots in time

It’s true that UX design can be considered a more complex road when compared to UI design. However, that is not to say that UI design is easy or simple by any means.

Even if UX designers are concerned with things like user journeys, user personas and general strategy – UI designers have their own factors to deal with. The difference, perhaps, is that UI designers worry about issues that can be captured in a snapshot, a single point within the product that can be isolated.

list of tangible factors that UI design focuses on

Consider the interface. UI designers need to consider things like the UI layout, visual hierarchy and balance, creating labels and establishing a consistent visual style. There’s other factors that come into play here, like creating guidelines for a possible product expansion or establishing a series of element structures that can be reused all around the product.

When it comes to these isolated screens and structures, UX plays a part of course. That part can be in explaining and justifying which elements were used and why they were chosen. Perhaps even more importantly, UX will challenge the interface and aim to justify the elements that were left out.

4. UX design includes project management

This is yet another key difference between UI and UX design. At heart, UI design is about human and computer interaction with an artistic factor. While UX will include everything related to UI, it goes much further than the visual or functional design.

In the world of UX design, project management can be a crucial skill. This is about not only understanding the big elements of the product, like the general strategy and the context that surrounds the use cases. UX also deals with more logistical and administrative issues, all of which are vital in any UX project.

project management with ui and ux design

A major example is the gathering and management of requirements. This involves going further than the conceptual and visual, dealing with huge amounts of research, delegating tasks and keeping an impeccable record of it all as the project unfolds. There’s a lot of variants in requirements management, with the serious need for an iron first when it comes to control of each little requirement.

Sloppy management of requirements tends to result in loose ends and bug-ridden products that never live up to expectations. The design team needs to not only gather the list of requirements, align them all and implement them with a tangible design. There’s the need for meticulous testing and validating of each of them, resulting in a complex side to UX design that is often overlooked.

5. Our idea of UI design is changing rapidly

UX design has always dealt beyond the simple digital screen-focused products. It’s no secret that user experiences can be had with all sorts of tangible, real-world things like coffee makers and microwaves or doorknobs. UX is the type of broad concept that touches pretty much everything in our lives.

UI design, on the other hand, has had its very nature defined and restricted to digital products. It can be easy to write UI design off as something narrow and specific that has no place in the real world. That, however, may not be an entirely correct way to define UI design – at least, it won’t be in the near future. Key examples of new types of UI design that push boundaries and our very understanding of interfaces include Voice Interface Design and virtual reality.

different shapes of UI design and user interfaces

Let’s take voice interface design as an example. In this case, there won’t be a tangible interface that users can refer back to. There are no buttons and no visual elements. There’s only the voice commands that users can use to control the product. Where is the line between UI and UX then? How can we define the work of UI designers in this light?

It will be interesting, without a doubt, to see what kind of things UI designers will deal with in the future. The very nature of digital products is changing and there’s no knowing where it will lead. In part, that’s why UI and UX design is so engaging and interesting as an industry.

Should you have the same person for UI and UX design?

That’s a question that many companies struggle with. It’s clear that when it comes to budget-tight startups, sometimes having two separate roles for designers simply isn’t an option. But should people stress this out, anyway?

Let’s start off by saying that UI and UX designers will often share the same skills, even sharing some of the same tasks. It’s no secret that depending on the company, the line between the two designers can move a bit or even be erased entirely.

As usual in the world of UX design, there are different opinions on what works best. Some people say that having one single person to oversee all aspects of the product can lead to a more comprehensive product that offers a consistent experience for users – making it a win. Others, however, will admit that making one person wear two hats can result in blindspots and important details to be overlooked.

For more: Find the UX designer skills that all UXers are likely to need in their day-to-day.

With all of that said, those who argue that the two roles shouldn’t mix have a series of good points. One, for example, regards the general background that these designers tend to have.

Because of the very nature of UI design, we find that most UI designers come from a graphic design background. These are people who have acute visual skills and master the art of creating elements that are clearly interactive. They understand how the eye works and seek to create an interface that requires little interpretation.

different people for the roles of ui and ux designer

In contrast, UX designers will often come from a varied background. In fact, many of us find that the best UX designers out there come from backgrounds that deal with people and not design. Job roles that require a great deal of empathy, like nurses, are a great find. In fact, the most sought after background for UX designers is psychology.

These are people that can put themselves in the minds of users and can understand their goals and pains. It’s not so much about the visual skill but the ability to create products that are tailor-made for users. Knowing what people want, how they live and what they feel are key skills that don’t come naturally to all of us. UX designers, however, live and breathe for it.

The argument here is that UI and UX designers tend to be fundamentally different types of people, both of which are important to have in your team.

One of the main issues that people in the industry have is that UI design is but a part of the UX as a whole. And so, by having a single designer role you’ll be forcing the person who is overlooking everything to focus on a very specific area of the project.

From a business administration point-of-view, it’d make no sense to cut back on the time and effort needed to manage a whole project. The UX designer already has so much to manage, so many factors and elements to deal with – adding UI design seems unwise at best. Ideally, you want two different types of specialists who work together and don’t take away from each other.

UI and UX designers working together: the workflow

Despite the fact that the theory seems to be clear on where UI ends and UX begins, the practice can be a bit of a mist. Part of the difficulty in having a clear line between the two is that many companies do things in their own way, placing that line wherever it better suits them. They’re not necessarily guided by what theory dictates, but rather what is practical in their current situation.

That means that it can be tough to speak of a common workflow, where the UXer does A, B and C and the UI designer does C, D and E. In some places, interaction design falls in the UX field, others place it in the UI zone. With that said, some key tasks within the product design process tend to be handed over to specific people in the team – let’s go over some of them now.

UX research

Research is absolutely crucial for any new product. It will expose who the product is for, what it needs to do and what factors are at play. It’s no secret that UX research can be the job of an actual researcher, but it often falls to UX designers especially when it comes to small teams and companies.

ux research as task of ux design for workflow

Things like conducting interviews, creating user personas and mapping user journeys – they all tend to fall to the UXer in the team. These are, after all, tools that are meant to show us who we’re designing for and drawing conclusions from this research requires a huge amount of empathy.

The findings from this extensive research will help the entire team to carry on with the design, including both UI and UX designers. These will lay the groundwork for the ideation of the solution, helping to guide everyone’s work.

Design research and branding

There’s also a bit of research involved in UI design. Mostly, this research is about understanding the right visual tone to aim for as well as understanding what the competition has done until now. Generally, this is a way that UI designers have of getting situated in the product’s industry and understanding what the right style could look like.

visual research and branding as task of ui design and designers

On a similar note, UI designers are also in charge of creating the brand’s visual identity. In some projects, particularly those that already have an established brand, this may not be the case. Sometimes, UI designers simply have to create a visual style that connects and represents a brand that already exists. Other times, it falls to the UI designer to create the very brand visuals for that product.

All of these tasks point to the same central job of a UI Designer. In every digital solution project, there’s the need to create a usable and consistent visual style and that is where these designers shine the brightest.

Information architecture (IA) and navigation design

Both of these represent crucial aspects of the solution, with the information architecture usually falling to the UX designer. The IA creates the structure of all the information contained in the product, including things like the items on offer and everything needed for the product to run properly. This is what makes it possible for anyone to use any digital product, categorizing and labeling things in a logical way.

The navigation design is equally important and will often be a close representation of the IA. This is the highway system that makes sure that users can navigate, explore and discover the entire product. This aspect of the product can fall to either the UX or the UI designer, depending on how the company organizes itself.

Wireframing

It’s well known now that wireframing has humble beginnings. It all starts with creating several potential layouts that both make an efficient use of the space and allow for the implementation of the IA. This is prime UI-design-territory, because it requires a certain skill in order to look at an empty space and see the potential.

wireframing and layout as part of UI design

UI designers usually create several possible layouts at first, taking into account several factors like which elements must be included and the visual hierarchy of it all. This tends to be done with close proximity with the UX designer, so that the wireframe captures the key features and functionalities of the product.

Over time, the UI designer will work with the UX designer in order to develop on this wireframe. More functionality, interaction and more practical aspects are added by the UXer. More visual elements, branding and details are added by the UI designer. This creates a cycle that leads to wave after wave of testing and validating the work of both designers until the end of the product development.

Prototyping and testing

Prototyping, in theory, tends to fall on the UX side of the fence. This is because even though prototypes tend to include more visual details, they behave more like the finished product should. This means that they include key things like all interactions, the inner workings of the solution (including data-focused ones) and the general functionality of the entire product.

This isn’t about the prototype looking more sophisticated than the wireframe. While the wireframe lays down the foundation and deals carefully with allocating space, the prototype captures the product’s essence as a whole. And, perhaps most important of all, a prototype can be thoroughly tested, usually with joint action of testing tools and a professional prototyping tool.

prototyping and interactions as part of ux design

Now, it’s worth noting that in large companies we can find a specific team of people who aren’t necessarily designing or creating – they test. They test everything. It is true, however, that this kind of muscle isn’t possible for most of us, humble mortals. In most cases, UX designers will also be in charge of testing and validating the product design.

User testing is a major part of the entire project. It’s how designers know which way is up, how they find mistakes and discover ways to improve. A UI designer might participate in the testing of the interface, but they’re not the ones in charge of testing as a whole. A UX designer must test everything related to both the interface and the functionality of the solution – it’s about making sure the entire project is sound.

The wrap up: UI vs UX design

UI vs UX design can be a tough conversation to have. Over time, people have started to use the terms interchangeably and the lines that should separate the playing field can be quite blurry. Today, each design team has their own approach to who does what and what their job title is.

At the end of the day, the theory of UI vs UX can only get us so far. The practice of the design can change drastically from project to project according to budget and time restraints. And yet, each area calls for a unique set of skills. Can a single person be a true UI/UX designer? Only time will tell!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeka Costa
In-house SEO manager, usability enthusiast and patron of all sleep-deprived designers