All you need to know about UI design

UI design, UX design, what does it all mean? Everyone is talking about it and it is more and more in the air.

Well yes, these two closely related fields allow us to push the user experience to be as pleasant and intuitive as possible. All this to make the user feel good and confident on the site he is browsing.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphic designer at Snoweb
Published on 14 April 2022 (Updated on 14 April 2022)


1. What is the purpose of UI design?

What if I start by explaining what UI design is?

UI design stands for User Interface. The UI design is all the work done on the interfaces that the user will browse. It concerns the graphic and visual aspect of an application or a website.

In UI design, we are particularly interested in :

  • Buttons
  • Text formatting
  • Choice of fonts
  • Choice of colors
  • Layout of the blocks
  • Placement of images

1.1 How to make a successful interface with UI design?

Haha, quite a question! It's not always easy to recognize an interface that works or not. But first, what does it mean "working"? Well, simply that the user is happy to browse the interface and does so intuitively, without questioning. Here are some tips to help you recognize a working interface:

  1. The interface must be simple, clear and without superfluous
  2. The design must be consistent on all screens and consistent with the brand so that the user is not lost when moving from one page to another
  3. The interface must be responsive. This means that it must adapt properly to all screens. Some UI designers even work on the mobile before working on the computer, we call it "Mobile First". This allows to place all the elements on the smallest screen possible. Then it is easier to place these same elements on a large screen. At least we are sure that everything will fit 😉
  4. The interface must take into account the user's habits. Some of the user's actions are intuitive and don't require any thought on their part. So we must take them into account and keep them! I'm talking about having the logo on the top left and clickable to return to the home page. But also to have a login or shopping cart button at the top right.

1.2 Google goes UI design

Since 2020, there are the Core Web Vitals on Google. These Essential Web Signals (Core Web Vitals in French) allow non-technical and technical people to have information on the loading speed of a site and the user experience. What interests us in UI design is everything that will touch the accessibility of a page. This concerns :

  • The contrast between the colors
  • The readability of the text
  • The appearance of the links
  • The hierarchy of texts and titles

2. UX/UI design, the unbeatable combination

UX and UI design are two very different but extremely complementary axes. While UX design will focus on all the reflection of an interface, UI design will appropriate the graphic charter and UX research to create the appearance of an interface.

As a picture is worth a thousand words, here is a diagram representing UX and UI design.

ux ui design concept

3. What is the style guide?

The style guide is a document that will list all the recurring elements that will be used on an application or a website. That is to say, all the elements that will be used several times, such as the menu, the footer, the colors, the icons or the buttons.

But, before creating a style guide, you have to find the style of the interfaces.

3.1 How to choose a graphic style for interfaces?

A graphic style is the artistic direction that the UI designer will take to create his interfaces. This style will define the appearance of lines, buttons, shadows, rounding and many other things!

To choose the graphic style, it is necessary to study the client's graphic charter beforehand in order to adopt the style already established. And, if it does not have one, it is necessary to find one!

Here are some graphic styles often used:

graphic style interface
To create simple, uncluttered shapes, without shadows. The flat design goes to the essential.

FLAT DESIGN

The isometry allows to show the elements simply and in volume. It is a "false 3D".

ISOMETRY

style graphique interface
Allows a shadow play on the elements. The color of the element and the background are often the same.

NEOMORPHISM

Do everything with one line. It's both simple and minimalist and doesn't overload the screen.

LINE DESIGN

3.2 How to make a style guide?

The style guide is neither more nor less than a web graphic charter. It is presented in the form of a document or a website. Having a style guide allows to keep a perfect coherence in the whole project. Indeed, whether it is the client, the UX or UI designer or developers, everyone has the same basis to work.

Here are the elements that should be included in a style guide:

Typography

In the style guide, you must specify the typography family(ies) used. But also the size of the characters and the spacing between the lines (line spacing) and between the characters (letter spacing). It is also necessary to indicate for each element of title its size.

typography

The color palettes

It is necessary to specify the different color palettes of the project. The main palette, the secondary one but also the color of the light and dark background, if there is a dark mode. For each color, it is interesting to indicate the hexadecimal code but also the RGB data. This is how colors are represented on the web.

The icons

It is interesting to display the style of the icons used with some examples. If an icon library is used, it should also be indicated and a link put.

The buttons

On the style guide, the style of the buttons is displayed: shape, color, rounded. But also their animation at the passage of the mouse or at the click.

The forms

In the form part, you have to present the different fields of the form. Show if there are help texts and show how error messages are represented.

Here is an example of a guide style:

example of a guide style

4. How to improve the UI of a website?

4.1 How do you know when a website's UI is wrong?

There are many signs that the UI design is not optimized. I'm not going to list them all because for me, there are only two important ones:

  • The bounce rate
  • Conversion rate

If visitors to a website arrive on the site but do not click on any links or leave immediately, then this indicates that the site's UI is not intuitive or clear or that the user has encountered navigation problems. This is called the bounce rate. If the bounce rate is low, it means that users have had a bad experience and therefore leave the site.

Then, if on a website users browse the pages but they don't take action, i.e. they don't make a contact request, or they don't subscribe or register, it means that the UI needs to be reworked. We're talking about conversion rate here. The more users get lost on the site and don't understand the offer presented, the more the conversion rate drops.

4.2 The list of UI improvements to make on a website

Know your target user well

The UI design must allow to arouse emotion in the user. But if we don't know the user, we can't know what will bring him emotion.

Create a visual hierarchy

Keep it simple but do it well. The eye must be able to see all the elements. And, to do that, the elements must be arranged and the information strategically laid out. The size of the headings plays an important role in the readability of the information and the hierarchy.

hierarchie-textes

Manage calls to action

Call-to-action buttons should be integrated into the interface in a natural way. They should be visible and identifiable, but they should not intrude on the layout.

Design de bouton d'action

Choose the right colors

If there is a graphic charter, the colors of the interfaces must be in adequacy with those of the graphic charter. We can then use complementary, analogous or even monochromatic colors. The color wheel becomes our best ally.

However, if there is no graphic charter, then the UI designer must find the right color palettes. It is important to know that each color has a specific meaning. If we take the example of purple, it appeals to mystery, magic, and any element not natural but artificial or chemical. This color is perfect for the world of childhood or to talk about science fiction.

The meaning of colors

Use animation sparingly

In limited quantity, the animations will help the user in his journey on the application or website, they will lead him to take action. They also allow to take a break in the reading of a page, especially if it is a long page.

Otherwise, if there are too many animations, the user's eye will be attracted by everything that moves and will quickly get tired. The user will be lost and will want to leave the website or the application.

Animations in the web

Choosing the right typefaces

The choice of the typography must be made according to the final user but also to the graphic charter. It is interesting to choose a sans serif typography for a text, it will be easier to read on small screens. Moreover, if you want to bring chic or authenticity to the interfaces, you can use a serif typeface for the titles.

The size of the typeface is a very important choice. You have to think about the reading on mobile which tires the eye more than the reading on computer.

Tip: start with a typography with a size between 12px or 14px for computer and between 14px and 16px for mobile. Then, for the color of the typography you must stay on the classic and always have a high contrast between the color of the typography and the background color.
typographie serif sans serif How to choose a typeface

Use 404 pages wisely

If the user falls on a 404 page, this one must redirect him elsewhere, he must not remain stuck on this page. We can therefore offer the user to return to the home page, to browse the blog or to access the services. This page must also be fun so that the user is not frustrated by an error page.

page-404-personnalise

Simplify a form

Forms should be simple and filled out with indicative information. Here are some tips:

  • Add a label. This is a text that allows you to title a form field
  • Add a placeholder. It will help the user to know how to fill the field.
  • In case of error in the form, the representation of the error must be visible and descriptive. You can indicate an error message and highlight the erroneous field with a red color.
  • If you want the user to indicate a date, use a calendar. This prevents the user from entering a written date and forgetting the "/" to separate the day from the month of the year. This will give him an error.
  • When the user has to fill in a numerical data, forget the cursor! There is nothing more frustrating than trying to put the cursor on the right number. Instead, we put a simple text field.
Create a simple form

Show a load

When there is an element that takes a long time to load, it is better to add a loading animation, also called "spinner". This animation will allow the user to know that the content is loading and therefore that it will be displayed soon. This avoids the user thinking that the site has crashed and that nothing will be displayed. Thanks to the loading animation, the user is more apt to wait for the content to be displayed.

Similarly, if there are files to download on a site, adding a loading bar helps the user know where the download is at.

Think responsive

It may seem a bit old-fashioned to talk about responsive but today, there are still sites that are not adapted to a tablet or mobile navigation.

Mobile responsive

5. On which software should I do UI design?

5.1 Software to create interfaces

Sketch
This software has been thought and designed for the web and for creating web interfaces. Its strong point is that when you create an element such as a form field, you can then save it in your library and convert it into a symbol. The advantage is that, once converted into a symbol, if you make a modification to this symbol field, such as changing the size of the text or the color of the field, the modifications will be updated on all the fields used in all the interfaces.
Adobe XD
Among the super-powerful software of the Adobe suite, there is XD. This software is the first competitor of Sketch and was created for that purpose! Just like Sketch, XD allows you to create web or mobile interfaces easily. The creation of components, as in Sketch, allows you to easily update an element and this, on all interfaces. Also, we can add links between elements and then test them and film these tests. Last but not least, sharing documents is very easy as well as adding comments.

5.2 Software for inspiration

Monitoring is a very important thing for a UI designer, but also for anyone working in design or development. It's important to be aware of new trends, to test them but also to make an opinion about them. The ones with a ⭐️ are my favorites!
Awwwards ⭐️
This site gathers thousands of web designs. The goal is to judge creations to encourage the best.
Behance ⭐️
Owned by Adobe, Behance allows millions of designers to show their work to the world in a portfolio format.
Dribble
Like Behance, Dribble offers designers around the world to post their work on the web.
UI Garage
Every day, find new design and web inspiration!
Muzli ⭐️
Created by inVision, Muzli has a little bit of everything in terms of design. The idea of using a browser extension is great because you can access it and see what's new at any time.
site-dribble

6. UI designer : training, job, salary

6.1 What training should I take to become a UI designer?

Just like becoming a UX designer, there is no specific training to become a UI designer. The best way is to go to a graphic design school, computer graphics school or computer science and multimedia school.

I would recommend the same schools as for the UX designer training. I leave it to you to read the training to become a UX designer.

6.2 What does it mean to be a good UI designer?

Being a good UI designer involves certain rules:

  • Know and like how to do monitoring
  • Know the different software to work on interfaces
  • Have notions in HTML and CSS
  • Know the meaning of colors
  • Master typography to be able to play with it
  • Follow the advances in web to always be "up to date
  • Know the design constraints for Android and IOS but also for the web for the creators of mobile and web interfaces
  • Know how to soak up the latest trends and use them in interfaces

6.3 And in the world of employment?

Having studied design helps a lot to be a good UI designer. These courses teach us to be rigorous, to develop our creativity, to be versatile and above all to keep an eye on things.

In the job world, the main asset is creativity! It is the only thing that makes a UI designer different from another. This creativity must be highlighted in a portfolio that reflects the character of the UI designer. Just like a client, an employer will first look at your creativity, expertise and know-how. They will make sure that you are knowledgeable, that you know your software and that you are capable of fulfilling your role as a UI designer.


Discover an interview with a UI designer!

7. Example of a UI designtemplate

ui design template

Conclusion

As you could understand in this article, the UI design has a lot of importance for the user because it is what he will see. Unlike UX design, because for UX, the user does not necessarily realize the work because it is intuitive.

I want to workthe UI of my site