About Ui and Ux design - Studio Tune Iniyavan

Easy-to-digest primer on the difference between User Interface (UI) vs User Experience (UX) design

UI design and UX design are two of the most often confused and conflated terms in web and app design. And understandably so. They’re usually placed together in a single term, UI/UX design, and viewed from the surface they seem to be describing the same thing. It’s often hard to find solid descriptions of the two that don’t descend too far into jargon. But fear not!

What is UI Design?

The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with. This includes screen layout, transitions, interface animations, and every single micro-interaction. Any sort of visual element, interaction, or animation must all be designed.

This job falls to UI designers. They decide what the application is going to look like. They have to choose color schemes and button shapes — the width of lines and the fonts used for text. UI designers create the look and feel of an application’s user interface.

UI designers are graphic designers. They’re concerned with aesthetics. It’s up to them to make sure the application’s interface is attractive, visually-stimulating, and themed appropriately to match the purpose and/or personality of the app. And they need to make sure every single visual element feels united, both aesthetically, and in purpose.

What is UX Design?

“UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it. Is the experience smooth and intuitive or clunky and confusing? Does navigating the app feel logical or does it feel arbitrary? Does interacting with the app give people the sense that they’re efficiently accomplishing the tasks they set out to achieve or does it feel like a struggle? User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created.

So UX designers are also concerned with an application’s user interface, and this is why people get confused about the difference between the two. But whereas UI designers are tasked with deciding how the user interface will look, UX designers are in charge of determining how the user interface operates.

They determine the structure of the interface and the functionality. How it’s organized and how all the parts relate to one another. In short, they design how the interface works. If it works well and feels seamless, the user will have a good experience. But if navigation is complicated or unintuitive, then lousy user experience is likely. UX designers work to avoid the second scenario.

There’s also a certain amount of iterative analysis involved in UX design. UX designers will create wireframe rendering of their interface interactions and get user feedback. They’ll integrate this into their designs. It’s important for UX designers to have a holistic understanding of how users prefer to interact with their applications.

Difference Between UX And UI Design 

First things first: What do UX and UI actually mean? The people you have eavesdropped on are actually discussing two professions that, despite having been around for decades, and in theory for centuries, have been defined by the tech industry as UX and UI design.

while UI stands for “user interface design”. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different aspects of the product development process and the design discipline. Before we consider the key differences between UX and UI, let’s first define what each term means individually.

The main differences between UX and UI

There is an analogy I like to use to describe the different parts of a (digital) product:

If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body; its presentation, its senses, and reactions.

But don’t worry if you’re still confused! You’re not the only one!

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”

If you’ve got room for one more analogy, Dain Miller sums up the relationship between UX and UI design perfectly:

“UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”

— Dain Miller, Web Developer

It’s important to understand that UX and UI do go hand-in-hand; you can’t have one without the other. However, you don’t need to possess UI design skills to be a UX designer, and vice versa—UX and UI constitute separate roles with separate processes and tasks!

The main difference to bear in mind is this: UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look and function.

A UX designer considers the user’s entire journey to solve a particular problem; what steps do they take? What tasks do they need to complete? How straightforward is the experience? Much of their work focuses on finding out what kinds of problems and pain-points users come up against, and how a certain product might solve them. They’ll conduct extensive user research in order to find out who the target users are and what their needs are in relation to a certain product. They’ll then map out the user’s journey across a product, considering things like information architecture—i.e. How the content is organized and labeled across a product—and what kinds of features the user might need. Eventually, they’ll create wireframes that set out the bare-bones blueprints for the product.

With the skeleton of the product mapped out, the UI designer steps in to bring it to life. The UI designer considers all the visual aspects of the user’s journey, including all the individual screens and touchpoints that the user might encounter; think tapping a button, scrolling down a page, or swiping through an image gallery. While the UX designer maps out the journey, the UI designer focuses on all the details that make this journey possible. That’s not to say that UI design is all about looks; UI designers have a huge impact on whether or not a product is accessible and inclusive. They’ll ask questions like “How can different color combinations be used to create contrast and enhance readability?” or “What color pairings cater to color blindness?”

Hopefully, you’re now starting to see how UX and UI design are indeed two very different things. To summarize:

• UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-pleasing, interactive interfaces.
• UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.
• UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.