HomeBlogWhat is UI and UX: the meaning and difference
Sanne - User experience and user interface designer
Sanne Berkhout - DesignerSanne Berkhout
April 13, 2021

What is UI and UX: the meaning and difference

UI and UX design are terms often found in the digital world. But they are also often confused. But what do they really mean? Why is that difference important? And when do you apply UX or UI design?

The abbreviations UI Design and UX Design stand for User Interface Design and User Experience Design respectively. When you talk about the User Interface Design, it is mainly about the appearance, the picture. This concerns, for example, color and font use, photography and overall design.

User Experience Design is much more about experience. Not necessarily: does it look nice, but above all: does this application work well? Can I go through it easily and intuitively? You could say that UI and UX are similar to the Beauty & the Brains.

UX Design: The brains

During the start-up of a new project, we start with the user journey. What do we want to achieve, and who is our audience? When designing the user journey you think of every step the user will take: How will a user - who is not used to working with my application - go through the flow? What is his goal, and how can we ensure that he best achieves it?

The UX designer comes up with a plan to take the user by the hand through the story of the application. He starts with a rough direction and develops it further and further. If during the process it becomes clear what the end-user will need and which functionalities can best support that, the UX designer will develop a wireframe. Simply put, this is actually a kind of coloring page; the outer lines are determined, the UI designer later ensures that everything looks neat.

User Experience Design

In the wireframe is carefully determined what the position of certain elements such as buttons and input fields should be, but also how the flow works. How do you go through a registration procedure or store purchase as pleasant as possible? And how do you ensure that everything works intuitively?

When the wireframe has been made, it is extensively tested in a so-called test group. These are people who hypothetically could be users of the application, and for this reason can test the application best. For example: if we make an application for a baby clothing webshop, we will invite fathers and mothers of small children to the test group. They are experienced experts and can tell us exactly what works and what doesn't.

The test results will be examined and the learnings that come from this will be implemented in the wireframes. The plans for the application are also being fine-tuned to meet the expectations of the end user.

UI Design: The beauty

Not only the functionality of the app is important, but also the appearance weighs in heavily. This is a task for the User interface designer. She works carefully to ensure that the designs match the brand as well as the target group. The designer takes in to account: Use of color, typography, photography, use of white space, etc. It is very important to ensure that the designs match the existing branding as much as possible. This to ensure that the recognisability of the brand is guaranteed.

User Interface Design

The UI design is not just a cosmetic addition. It also ensures that people have a certain feeling about their visit. For example, photography can play a major role in the feeling a visitor has about your application. If you use a lot of standard stock photography - like the top example in this photo - your application will appear less real or genuine. That may be the intention, but when in doubt, sincere photography is always the right choice.

Stock photography vs. real people

Designers also use a certain color scheme in their designs. That also has an effect on the 'mood' of the end user. All elements are carefully weighed to achieve a balanced endresult. The same goes for typography and the use of particular language and punctuation. Just look at this example: You can see that the design has a huge effect on the message you want to convey. The left is subtle, determined, but perhaps a little obedient. The right is garish, but also activating. Depending on the target group elements like fonts, colors and writing styles are chosen to appeal to the target group of this particular application.

User interface design - the differences in color use and typography

UI & UX design go hand in hand

As you can see, UI and UX design always go hand in hand. One cannot do without the other. Does your application have a nice look, but it doesn't work properly? Then you lose your users. Does the application work like a charm, but it doesn't look nice? Again, you have lost your audience. So always make sure that both aspects are considered in your project. A UX and UI designer do not necessarily have to be 2 different people, but they are two perspectives that both need to be properly taken into account.

You might find this interesting:

Don't let a missing strategy ruin your project. Prevent expensive software never to gain adoption and check if your idea is ready for development. With our Digital Readiness Scan you'll know your next step on the road to succes within 5 questions.

Do the scan