UX vs. UI

It is very common to mix UI Design with UX Design, and even though the names are similar, their approaches are quite different.

UX is related to the user experience and its feelings, since UI is the way the user has achieved this experience. In this post I will explain about the difference of the two and how can we say that they have a symbiotic relationship.

Difference between UX and UI Design

First, what you need to know is that the two terms have different meanings, but that they complement each other and are fundamental to good design. We can say that they have a symbiotic relationship, since they benefit each other to achieve a satisfactory end result.

Jakob Nielsen and Donald Norman summarize User Experience as a way to encompass all aspects of end-user interaction with the company, its services and products, that is, it is responsible for studying the best ways to meet users’ needs and leave them satisfied with the whole process.

In a simplified way, we can say that in a design of a car, for example, the interface (also called User Interface, or UI only) is the whole “physical” part of the vehicle; that is, the form. Experience (or User Experience, UX) is the pleasure that the vehicle gives you when driving it; ie your experience of using the vehicle.

Switching to our reality as web designers, in creating a website, UI Design is the “site design” or the well-known mockup of the site, while UX Design is all part of the interaction and behavior of the site.

Still about UX Design, according to author Ross Unger in his book “A Project Guide to UX Design”, user experience design is the creation and synchronization of elements that affect users’ experience with a product. With this you can influence your perceptions and behaviors.

To conclude everything that has been said so far, UI Design is the interaction between the interface and the user, since UX is how these interactions will work the user’s emotional side, their experience with the system.

But what does each one do?

UX or User Experience is the behavioral study of the users, aiming to deliver a better experience of use in the products being they digital or not. But UX also comes in business terms, always looking at the goals and checking if they are being delivered according to the company’s goals

UX’s work is broad and there are several approaches, we can be more focused on metrics or more context oriented, but among the most common deliverables are:

  1. Interviews with stakeholders, to understand the company’s objectives,
  2. Interviews with users to understand the needs of users,
  3. Heuristic analysis that is a structure of product analysis to find difficulties of use and replace them with easier solutions following a basic parameter.
  4. Personas that can help better understand who we are building the product for,
  5. Consumer’s journey planning showing where and at what points of contact they may be good at implementing marketing strategies.

UI or UI is the design work of interfaces, referring to the design, visual design with which we interact in applications, websites and systems and softwares. It is when we start working with design taking the wireframes proposed by the Information Architect and the interaction flows created by the Interaction Designer and designing the visual design and assembling navigable prototypes that will serve as material for user testing. Finally, drawing up Style Guides as a guide for software engineers to program the final product we use.

Top UX Tools


Persona is the fictional representation of your ideal client. It is based on actual data on the behavior and demographic characteristics of your customers, as well as creating your personal stories, motivations, goals, challenges and concerns.

Qualitative and Quantitative Research

Some search methods consist of talking to a large number of users and collecting numerical data from their opinion on a given subject (quantitative search), while others focus on a much smaller number of users, but go deeper and they are able to collect insights of higher quality and level of detail (qualitative research).

A/B Tests

Half of the audience see the A version of a page, and the other half version B. The version that can achieve your business goal more effectively, wins. This type of test is ideal for optimizing the performance of a page that you have already redesigned recently, and is often focused on testing small variations in layout, text, or positioning elements on the screen.

Focus Group

The researcher and users come together in a room to discuss a particular product or service, or simply to talk about consumer habits or consumer perception of a particular brand.

Usability Tests

One of the most classic test types: you sit down with a user and learn how he really uses your website or your product. You pre-determine some tasks that he needs to perform and watch to see if he has difficulties at some point.

Card Sorting

A method that can be both quantitative and qualitative, where users are invited to organize items into groups and create a name for each group. It is a great way to define the information architecture of that interface you are designing, the organization of items in a menu, or the organization of modules on a homepage.


Show where users are clicking on each page. This type of visualization helps you understand the most prominent areas in your layout and draws more attention to users. It can be based on data analysis (example: Google Analytics), or it can be based on tools that monitor the movement of the mouse or user’s eye.

The uxdesign.cc created a “UX Tools for every step in your design process” that is really interesting, they show which software and tool we should use in each stage of the UX.

Top UI Prototyping Tools


It is a very complete tool already well known in the area of Design UX. It is well used by web and UX designers to create clickable wireframes, user flows and sitemaps, as well as interactive prototypes. It’s pretty powerful, but it’s a collaborative part and a prototype for mobile.



Balsamiq is simple software for creating mockups. It has several ready-made interface elements that you drag and add to your project. It’s perfect for organizing the entire UI quickly and testing positions and sizes without wasting time on production. Webpage

Adobe XD

Adobe Experience Design, although the name indicates a vocation more for UX, is very useful for the UI Designer. The program has several simple tools to not only create the visual elements but also test them in prototype form.



Made exclusively for Mac OS X, it is one of the best known tools in the international market for creating interfaces, websites and icons. It’s very similar to Illustrator, but easier to use. You can see a preview of the interface on your mobile or tablet using the Sketch Mirror app.


Allows rapid prototyping for UX testing or to present new ideas to your team.


To work with UX/UI, there is a very large range of very interesting programs. Of course it is important that you always be aware of new releases, especially to know of news that can improve your work. However, the most important thing is always your development as a designer. So when you realize that you are focusing too much on a tool, stop and think about developing as a designer.