UX vs UI

UI, or "User Interface", encompasses all the elements laid out in a website that are used to communicate. Everything a user can see and interact with, all the colors, conventions, icons, imagery, buttons, text, all the design decisions are part of the UI.

Think of UI like a tool.

It’s a medium of communication, a platform that not only will transmit your brand’s values and behaviors but also help users achieve their goals. By presenting your product in a beautiful and well constructed layout, you are allowing your users to interact with the information and potentially convert into customers.

It’s easy to confuse UX with UI if you’re not too familiar with the terms. If you want to learn more about UX check out my previous post which lays down some basic goals to help achieve a great user experience.

However, perhaps this example demonstrates more clearly the difference between these 2 terms:


Photo credit via this Tweet

The bottle on the left has a clear and concise label, and it’s crowned by a collar label that gives more information about the product. The bottle is made out of glass which allows you to see the contents inside creating a direct connection with the consumer: this is the product you’ll be buying, we believe so much in it that here it is, no tricks added. The fact that the bottle is made out of a noble element such as glass and the nostalgic feel the labels evoke make this product something merely aesthetic. Its experience is terrible, and maybe it wasn’t even considered when the product was created.

The bottle on the right changes that, it was built to improve upon the consumer’s experience. It’s modern, the lid faces down to maximize its effectiveness and diminish the mess created when using the previous bottle. It’s made out of plastic which makes it even more practical to be squeezed to get those last stubborn drops of product. The label is a bit more modern but the biggest change happens in the overall experience.

While the bottle on the left was conceived to showcase the product, the one on the right was made thinking in terms of experience.

Neither is better than the other. To create a superior product Heinz should take into consideration both the interface of the product and its experience. One without the other won’t get them there.

Not only is UI a powerful component of UX, but UX is a powerful component of UI.

UX without UI is like a door with no handle. UI without UX is a doorknob without a use.

A UI Designer takes care of translating the research done by the UX Designer into a functional and visually consistent experience for users. For example: the UX Designer decides that there needs to be a form in the Contact Page. The UI Designer makes the form grey and chooses Helvetica as the font. The UX Designer decides there should be a Thank You page after submitting a form, so the UI Designer makes sure that when the buttons are clicked they are consistent with the rest of the buttons already present in the website, that they stand out more than the elements surrounding it, and that it’s located in a place where a user will know where to find it.

Those decisions are all part of building a great interface responsible of enhancing the relationship between the user and your brand. More advice on how to build it in my next post!

Download our Incubator Resources



We’re known for sharing everything!


Save more time, get more done!


Innovate from the inside

Written by
Vicky Jaime 18 May 2015

Creative Director, ocassional artist & space nut


comments powered by Disqus