UI vs UX: Do you know the difference?


What is UI? And what is UX? You have probably heard those buzzwords if you are an enthusiast of the design world. Sandy Woodruff, a UX designer at Google, once used an interesting example during an interview to explain the difference between UI and UX design. Think of an image of two paths: One is very nicely paved, leading straight ahead and the other one is cutting through the grass, but people are more likely to take the latter path because it is the shortest way to reach the end. Therefore, that nicely paved path that is not often used is kind of like UI and the path that everyone uses is UX.

What is UI design?

UI stands for ‘User Interface’, the graphical/digital medium the user interacts with. It includes buttons, texts, images, sliders, text entry fields, transitions, animations, and many more. The role of a UI designer is to prepare all the visual elements that make up the UI. However, do not confuse this with front end development. The UI designer handles designing and prototyping the screen while a front-end developer takes those designs and uses HTML, CSS, and JavaScript to make them work on devices. The UI should be clear and attractive. More complex UIs may affect the adaptability of target users. Experts believe that UI design should be clear and spontaneous so the users can easily navigate through the website and quickly find the product or service they are looking for.
Some of the popular UI design tools in the industry are,

  • Adobe XD
  • InVision
  • Figma

What is UX design?

UX design is a misunderstood field. UX stands for ‘User Experience’. When we think about a good experience, we might say that the product is useful; helps us to accomplish something that we need to do; easy to figure out how to get things done with; helpful and accessible through devices; may be attractive and fun to interact with. In the end, by considering all these facts, a good UX is what satisfies the customer. We consider a bad UX as one that is stressful, confusing, distracting, or frustrating and leads to disappointment. Frank Guo, writing for UXmatters in 2012 offered a simplified way of looking at UX. He broke down UX into four components. They are value, usability, adaptability, and desirability.

Then why does UX matter a lot? Well, a designer is trying to solve a problem that the user has. Hence, it is important that the UXs are successful so the designer can meet the product. Additionally, users are much more likely to come back and experience it again. It will eventually lead them to recommend the product to others as well.
UX design is more like a process; It is an iterative prototyping process to determine how easy or difficult it is for the user to interact with the UI designed by the UI designer and make the UX better. UX design is not a graphic design or a UI design, but it does make sure that all of those visual components come together to make the product desirable. The foundation of UX design is full of usefulness, usability, and desirability. Framer X, Figma, UX pin, ProtoPie are some of the prototyping tools for UX designers.

How do UI and UX go hand in hand?

Even though UI design and UX design are two separate roles, in the industry these two are very collaborative and co-creative. If UX is a cake, UI is like the icing on the cake. There are various statements made by industry experts about the differences between UI and UX. Ken Norton, a partner at Google Ventures once said that UX is focused on the user’s journey to solve a problem while UI is focused on a product’s surface look and function. According to Andy Bubb, the co-founder of Clearleft, the UX designer considers the conceptual aspects of the design process and the UI designer focuses on tangible elements.

When it comes to product design, the UX team works on testing and research to recognize the right features. Then they map the entire user journey by understanding the user behavior. They create wireframes and prototypes until the final product is ready.

The UI team works on the user’s visual experience. Unlike UX design, it covers all the visual interactive touchpoints that the user moves when navigating from the beginning to the end. They consider the layout of each page and the spacing between each element. They design buttons, scroll bars, sliders, and work with color pallets and typography. Like UX designers, UI designers also create mockups and prototypes to see how the final product will look.
UX design comes first in the product design process, as it takes the blueprint from the UX designer and turns it into something aesthetical and interactive.

How to become a UI/UX designer?

If you want to become a UI designer, first of all, be familiar with UI principles such as color and contrast, white space, visual hierarchy, complexity vs. simplicity, consistency, and scale. Knowing the design principles is not enough, especially when you are a beginner. Train your eye and mind together to identify a good design and a bad design. Always get inspired by design experts’ work. There are thousands of websites like behance.net, dribbble.com, awwwards.com from which you can find good designs. Go and search for them. It is also important to read articles and learn from other people’s experiences. Then choose your weapon of choice and start designing. There is a bunch of design and prototyping tools. Try to build a good design portfolio for yourself by practicing on your own. Practice makes you perfect. If you are passionate about UI or UX, it is always better to learn the creative UX process too. It is a combination of research, thinking, and design. Try to understand a bit about human behavior to make sure that you are designing to avoid failures. You should be able to apply common sense to become a UX designer.


Finally, UX and UI are not the same. Yes, these two go hand in hand but they are very different. There is a huge demand out there for UX designers as well as UI designers. Many companies advertise for UX and UI designers as one single role. There is a possibility to combine. However, each requires a different set of skills and methods. No matter which area you are going to choose, it is always better to have a good understanding of both areas.

Exposition Magazine Issue 16
Oshini Nugapitiya
MIT Level 2
Department of Industrial Management
University of Kelaniya

How useful was this article?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Previous CLOUD TPUs – The Next Level Advancement of Machine Learning
Next Is Flutter, the upcoming future of software development?