The Big Difference between UI vs. UX Design

Have you ever wondered why some websites or applications feel smoother to use than others although the base functionality is the same? Creating digital products today requires more than functional code and that’s where UI and UX design come into play. These two terms are often used interchangeably in the field of design, but they are actually distinct concepts. While some definitions define UI as a subset of overall UX, many companies in the industry have separated the two roles into UI Designer and UX Designer. But what is the real difference between these? How are developers connected to all of this?

In this article, I’ll use my 10 years of tech industry experience in frontend and design as well as my university degrees in Computer Science and Human Computer Interaction Design to break down these definitions in detail — not just on theoretical but also on a practical level.

What do UI and UX stand for?

UX stands for “User experience”, which encompasses the entire journey that a user takes with a product, including their emotions, perceptions, and behaviors.

UI then again stands for “User Interface” which is the interface how users interact with a digital product. Most of the user interfaces are visual, such as websites and mobile apps, but user interfaces can also contain interactions with other senses via audio and haptics for example.

What’s the difference between UI and UX?

The definition of user experience is commonly approached from 2 different perspectives:

Definition 1: UX as umbrella term of UI Design

In this approach the word “User experience” is used as a generic term for all aspects of the end-user’s interaction with the company, its services, and its products. This contains areas such as UI design, visual design, product design, information architecture, user research and interaction design. In practice, there are many more areas that also impact on the user experience such as illustrations, graphic design, motion design, sound design, usability etc.

While the lines between these design areas are blurred and often overlap, this definition sees the word “UX” as an umbrella term of all factors within UX space. This definition is commonly used by professionals in the field such as NNGroup.

Definition 2: Separating UI and UX design into different categories

The second approach to define UI and UX is to examine these areas as separate positions for “UI Designer” and “UX Designer”. While it sounds confusing and even conflicting with the first definition, it’s become a common practice in many job posts to ask for “UI Designer”, “UX Designer” or “UI/UX Designer”. Let’s have a closer look at each of these:

UI Designer

UI Designer is specialized in the visual user interface of the application and often has a background in graphic design. UI Designer may also have experience in creating brands, logos, icons, illustrations and custom graphics. The main task of a UI Designer is to create the overall look of the user interface using typography, spacing, colors and other visual elements displayed in the user interface.

UX Designer

UX Designer is specialized in human behavior and the way information is perceived by the human brain. UX Designers ensure that the product is functional and easy to use for the selected target group. Educational background of a UX Designer is usually in Human Computer Interaction Design or Psychology.

A common misconception is that UX Designers must be artistic or good at drawing — most of the time UX Designers work with lo-fi wireframes that have significantly less visual details than what UI designers work on. You can think of UX Designer as an architect that draws the blueprints while UI Designers are more like the interior designers choosing the design details after the base functionality is decided. This is also usually the reason why many graphic designers transitioning to tech start as UI Designers and not as UX designers.

UI/UX Designer

UI/UX Designer is simply a designer who understands psychology behind user interfaces as well as visual design. Similar to full-stack developers who work on backend and frontend, UI/UX designer works as a generalist between UI and UX. It’s common that these generalists have originally specialized in one area and over the years expanded their knowledge into another. Finding a Junior UI/UX Designer who excels in both is usually rare as learning the craft on both sides usually takes several years.

Do UI/UX Designers code?

The short answer is no, majority of the UI and UX Designers do not code.

While finding people who are proficient in UI, UX as well as Frontend development is possible, it is unlikely. It usually takes at least a decade to get comfortable on all 3 skills, hence these people are often referred as “UX Unicorns” in the industry. I myself started my art hobbies more than 20 years ago, coding 13 years ago and have done UX design 8 years now next to my front-end jobs but there are still areas in these domains where I have only scratched the surface. UI, UX and frontend professions require different skill sets and to learn all of these, it is usually required that one’s personal interests and free-time hobbies are also aligned with these to be able to somewhat handle all these skills in 10–20 years.

Luckily, most companies today understand that it is not realistic to rely on finding multidisciplinary career switchers who are proficient in coding as well as in UI and UX design. Therefore the majority of the companies nowadays have separated these roles into 2–3 different positions. This allows designers and developers to specialize in the area that interests them the most, often resulting in deeper expertise rather than trying to be the jack of all trades especially in their early career. A good starting point is to master one skill first and then expand from there over time.

Do developers do UI/UX Design?

The short answer is yes, although it’s usually due to low UX maturity of the company rather than having multidisciplinary developers with in-depth design skills in the team.

“We have always done it this way” is the most dangerous sentence you can hear in technology companies when you are asking why they don’t have any designers in their team. One of the main reasons why companies neglect UX and ignore hiring professional designers is that the whole UX just simply did not exist when they started and many companies are still in the process of learning about it.

When I started my career over 10 years ago, it was commonly expected that developers with zero design background “designed” the user interfaces while coding. I worked at Nokia shortly after Apple had taken over the mobile phone market with its smoother user experience, minimalistic design and way less features than Nokia phones had. Seeing the damage of UX ignorance first-hand, I truly realized user interfaces are much more than just working code. A lot has changed in the industry since then, but unfortunately many engineering teams today still assume designers are needed just to change button colors and fonts, which could not be further from the truth in 2024.

UX design has its roots in the field of human-computer interaction (HCI), which emerged in the 1980s. The term “user experience” was first coined by Don Norman in the 1990s at Apple, who defined it as “encompassing all aspects of the end-user’s interaction with the company, its services, and its products.” This definition laid the foundation for modern UX design, which is now seen as a holistic approach to designing products that meet the needs of users. At the end of the day users are not paying for algorithms that can solve problems, users must also be able to interact with the technology in a user-friendly way to actually use and benefit from these algorithms.

Developers are experts in interacting with technical devices via command lines and complex logical operations. This means that they have a strong internal bias on how they interact with technology compared to non-technical users. Human brains and machines perceive data in vastly different ways and much of the human behavior is happening subconsciously ie. without actively thinking about it. People who are not familiar with Human-Computer Interaction theory are therefore not aware of preattentive processing that human brain performs in the first place. The challenge is that some developers — especially senior developers who started their career before UX — are so attached to their “design process” by now that they can become defensive if it’s suggested that the design would be done by a professional UX designer instead. Focusing only on superficial visual design limits the design impact and product’s success as a whole.

While UI and UX are vastly different than Computer Science, developers can learn visual design and Human Computer Interaction if they are motivated to learn it just like any skill. But it is usually not something that is taught as a part of Computer Science curriculum — or at least it was never part of my own Computer Science studies. According to popular theory of Malcolm Gladwell, it takes usually minimum 10 000 hours or 5 years of full time practice to master a skill. In the industry, I have met several non-designers who watched a Youtube video or read a blog post about UI/UX and then think they are proficient in it. Professional designers have the ability to optimize the product for user needs, which has direct connection to higher ROI, conversion rates, and sales. You probably would not hire a designer whose “coding” skills are based on a YouTube video to be responsible of your codebase, so why would you let a developer who barely knows what UX is to be responsible of the user experience?

What other UX positions are there?

While UI and UX Designer are the most common titles on the job market, you may have seen some other UX related position variations in the wild as well. While many of these have overlap, there are some specific characteristic to each of these. The chart below displays a simplified framework that could be used as one way to explain UX for people from different fields.

• UX Engineer: Also known as “Design Engineer” is usually a Frontend Developer with a technical background who is also familiar with UX. UX Engineers helps bridging the gap between design and development and work often for example creating reusable components in code ensuring the designs will be implemented as envisioned.
• Product Designer: According to Product Designer Nikolas Klein at Figma (affiliate link), product design is about the relationship that the designed product has with the user, but also addresses its competitive context. In addition to UX, product designers work close with product managers, product strategy and go-to-market planning for instance.
• UX Researcher: UX researcher (UXR) seeks to establish a deep understanding of the target users’ goals, behaviours, feelings, needs, and pain-points. UX researchers usually work closely with UX designers sharing them customer insights that then will be turned into actionable, consumer-centric results that resonate with the audience. UX researchers work for example with user surveys, interviews, and personas to conduct the research.

Key takeaway

As seen in this article, there is no single definition for UI and UX but there are specific characteristics that can help you define the meaning of these based on the context. UI and UX are still widely misunderstood in many tech companies and to be able to reach higher UX maturity and more user-friendly products, it is necessary that tech teams are educated about the importance of user experience and not just solely focus on technical functionality. Artificial intelligence is continously making app development more accessible for everyone and relying on working code as your main selling point will soon no longer be enough to stand out from the crowd. NNGroup estimates that UX profession will grow from 1M to 100M people by 2050 and this might be just a taste of a new era where current tech-first development transforms to human-first.

If you’re interested in leveling up your UX and hearing more practical examples from the industry, check out zuzze.tech/blog.