Yeah, the usual chicken and egg conundrum, but it’s important to know the answer to the question. In most cases, the UX design part comes first, followed by UI. However, the UI team may be consulted depending on requirement, especially if there are certain doubts about the implementation of specific UX components. Some things seem perfect in theory, but when it comes to actual implementation, they may fail to have the desired effect. So, in such cases, the UX team might take inputs from the UI team.
Point A to Point B
From the user’s perspective, a product or service is simply a means to achieve a desired objective, which we can refer to as the journey from point A to point B. Now, let’s consider an analogy, wherein you are travelling in your RV (recreational vehicle). In this case, the roads, freeways, bridges, and your RV will be the UX whereas the road signs and the scenery outside would be the UI. Without the UX, it would be difficult to reach your destination, whereas in the absence of a good UI, you may get lost and certainly bored. So, it’s obvious that both UX and UI need to work together to ensure the best possible user experience.
How it’s derived?
UX works best when it is based on user testing. Usability testing is something similar to cutting and polishing a rough diamond to bring it to its desired shape and brilliance. On the other hand, UI design would be based on the brand design guidelines or any other specific inputs provided by the client. UX would be time consuming and costly to modify after implementation, whereas changes in UI can be done fairly easily, especially with the help of advanced Content Management Systems (CMS).
UX and UI are two separate fields of knowledge, but they work together to provide the best experience to the users. These need to be designed and implemented in such a way that they are in perfect sync with each other, just like the various parts of an automobile. Or the artistic, captivating and graceful moves of two ballet dancers. In short, UX and UI is a purposeful marriage of two entities, which aims to optimize user experience, thereby improving the marketability of products and services.
What’s the difference between UI and UX?
The difference between User Interface (UI) and User Experience (UX) is that UI refers to the aesthetic elements by which people interact with a product, while UX is about the experience a user has with a product or service. So, UI focuses on visual interface elements such as typography, colors, menu bars, and more, while UX focuses on the user and their journey through the product.
An easy way to explain the difference between UI and UX is with Jonathan’s simple analogy:
The foundation (UX) comes first: establishing how each room connects and relates to the next, choosing functional locations for the doors, finding the most practical place to build the stairs, and so on.
Once the foundation is in place, you can start thinking about the interior design: hanging pictures in an attractive way, picking a style of furniture that suits the color of the wallpaper, organizing the kitchen utensils so they’re easy to reach without making the room look messy.
This example gives you a rough analogy of how design responsibilities are split between UX designers and UI designers working on a product: first, the logical flow of actions and fundamental parts are put in place, then the visual details are defined.
It also gives you a sense of how the collaboration works, with UX designers handing their work and recommendations over to the UI team once core concepts are tried and tested.
But a disclaimer is needed. Should I worry about the exact difference between UX and UI?
He adds that back in the day, people who made online software or products were simply known as web designers. It’s only since the design industry has matured that the more specific terms of UX and UI have become commonly talked about—along with the distinction between them.
But with the app and product design space still rapidly growing, newer, more specialist roles and terms like UX Writer, Content Designer, and Interaction Design are popping up all the time. The way we think about design is always evolving. That’s part of what makes it an exciting field to be a part of.
So while it’s good to have an analogy up your sleeve that explains your view on the UI/UX debate, remember that there’s no definitively correct answer. As Jonathan says: "We shouldn’t talk about UX vs. UI. Instead, it should be UX and UI because they overlap and complement each other.
What is UI design?
"UI design is about using typography, images, and other visual design elements to turn a basic interface into something digestible and usable," explains Jonathan.
UI design is the process of transforming wireframes into a polished graphical user interface. This both enhances a product's usability and creates an emotional connection between the end-user and a product.
A user experience (UX) is therefore made up of many user interfaces (UI), which come together in a (hopefully) seamless flow to form a product.
We can define the limits of UI in a much more tangible way than UX, as its focus is in the name: interfaces. The overall effect of a sequence of interfaces—and all the less tangible parts of a product experience beyond that—make up the user experience, but UI is purely concerned with the design of individual screens or interfaces on a user's journey.
What does a UI designer do?
A UI designer’s job begins where a UX designer’s job ends—at the prototyping stage. They take the wireframes and add visual design to make them more usable, aesthetically appealing, and optimized for different screen sizes.
Now, let's take a closer look at the typical tasks of a UI designer.
The look and feel of the product
Design research: Research provides information about users and competitors and gives insight into the latest design trends. This is crucial to find inspiration and create interfaces that meet user expectations.
Visual design: UI designers are responsible for designing the product layout and all the visual elements of the user interface, including colors, fonts, icons, buttons, and more
Branding and graphic development: UI design is closely informed by the brand positioning of the product overall. Designers have to strike the right balance between usability and consistently showcasing the brand identity established by the marketing or creative team. As a result, UI design is closely related to graphic design.
Design systems: To ensure product and brand consistency, UI designers create style guides, pattern libraries, and components that detail how each element should look (color, font, etc.)
Responsiveness and interactivity:
Responsive design: Interfaces need to adjust smoothly to all devices, platforms, and screen sizes, in terms of both form and function
Interactivity and animation: UI designers can use animations, transitions, or other interactive elements to design the interactivity of the interface
Prototyping: A UI prototype showcases every UI element and design interaction in real-time. UI designers create them to get a feel for how the product will work and for user testing.
What is UX design?
"UX design is about understanding the overall journey of your users and turning it into a product." According to Jonathan, UX design refers to the entire experience someone has with your product from start to finish. It attempts to answer the question: How can I help people achieve their goals in the simplest, most frictionless way possible?
In other words, UX design is concerned with the overall user-friendliness of an entire customer journey. And because UX has such a rich history, there’s some debate over where it starts and ends.
UX as a category is not necessarily tied to websites. Steve Jobs famously included the experience of going to an Apple store as part of UX. Even the location had to be perfect. So how you buy a product, how you first see it—this is all important to UX.
However, Jonathan sees the limits of UX in terms of product development and web design quite clearly: "UX starts with a problem and ends with a wireframe or prototype.
Depending on how much you already know about design, that sentence could either clear things up or make them more confusing. So let’s dig deeper into what UX design means in practice.
What does a UX designer do?
"The role of a user experience designer is to understand the customer journey. That means understanding the target audience, interviewing customers, defining user flows, and conducting user testing," says Jonathan.
Let's take a look at the typical tasks of a UX designer.
Research and strategy:
Plan: At the beginning of the UX design process, designers need to create a strategic plan that ensures stakeholders are aligned and working towards common goals
User research: While we often think of design as something visual, a UX designer’s work is mostly conceptual problem-solving based on research and data
Information architecture: Information architecture (IA) focuses on organizing and labeling the content of a website, app, or product. The goal is to help users find information and accomplish their goals.
Wireframing and prototyping:
Creating the user flow: The UX design process involves speaking to users to pinpoint their needs, then devising the best user flow that will help them complete their tasks. This conceptual focus on the user journey means that a UX designer’s influence on how a final product actually looks is limited.
Wireframing: A wireframe is like the skeleton of an interface—the bare minimum needed to understand how a design will work on a functional level. It can be produced digitally, or even drawn on paper.
Testing: The best way for a UX designer to know if they’re doing their job right or not? Testing with real users. By testing early in the design process with a rough prototype—or even just a paper mockup—UX designers gather data from users to validate their ideas and assumptions.
Analysis: UX designers work closely with product managers and researchers to analyze the test results and define the next steps
How do UX design and UI design work together?
Despite the differences, UX and UI are not entirely separate entities. On the contrary, both elements are crucial and work closely together to determine how a product will look and function, with each one influencing the other.
Imagine you spend weeks creating a beautiful site only to realize that people can't find what they are looking for and struggle to navigate. No matter how attractive the interface is, without UX, users will become frustrated and leave your site.
On the other side, imagine you conduct user research and testing to ensure an optimal user experience, but the text on your site is so light that people can hardly read it. Even with good UX, users might be discouraged from using your product if the UI isn't pleasing or accessible.
Simply put, there is no UX without UI and vice versa. Therefore, when it comes to creating a user-centric product, you will need both aspects to ensure users can interact with your product with ease and pleasure.
This leads to a similar related question for newcomers to the field of design.
Which should I specialize in: UX or UI?
For Jonathan, it’s way more important for designers to have a well-rounded understanding of UX, UI, and other elements of design, such as typography, content or colors, than to over-specialize in one area. A team of good designers will be able to contribute and give feedback throughout the entire process—which is much better than working within UX and UI silos.
How can I learn more about UX and UI?
If you’re a budding designer looking for an inspiring introduction to the design space overall, Jonathan recommends reading The Design of Everyday Things by Don Norman:
Make sure to also learn outside the field, by exploring different professions within the design space, such as graphic design or UX writing, and how they interact with UX and UI.
But he also emphasizes that the best learning you can do is navigate websites yourself. See if you can pick out real-life examples of good UX and UI, then analyze what makes them work.
Because at the end of the day, doing hands-on design is much more valuable than stressing over definitions. As Jonathan puts it:
You must be logged in to post a comment.