Posted June 26 by Roman Kalina
Jun 26 by Roman Kalina

6 benefits of using illustrations in UI

6-benefits-of-using-illustrations-in-ui-img 6-benefits-of-using-illustrations-in-ui-img

A majority of information that people process is visual. In fact, 50% of all nerve fibers connected to the brain are linked to the retina, i.e. they are directly or indirectly related to vision. Even the most complex ideas can be easily explained through pictures. In graphic design, pictures are used not only to create an emotion, but they also have to be functional. If we look at the latest design trends, we will see that illustrations are really popular in creating user interfaces. Google, Slack, InVision, Dropbox, MailChimp, Asana, Salesforce, and many more are using illustrations in UI.

We are not going to describe the process of creating an illustration, but rather why use them and how to use them in order to enhance UI design. 

What is an illustration?
Illustration in web and mobile interface differs from pure art. In the digital world, illustration carries a message that clarifies and extends the information on a website or an app. Therefore, it is a visual interpretation of action, process or environment. The meaning of the word illustration is “throwing light on something”, which also reflects its purpose in the digital world. What are the benefits of using illustrations in UI?

Illustration created by PLATFORM

 

Message transfer
Simple fact, people perceive images faster than words. In other words, if you want to deliver a statement or an important message, use image to support it. In this case it will be an illustration, which can easily clarify what words cannot. Keep in mind, that when user lands on a website or opens the app, they don't start reading right away, they scan. If a screen is boring and full of text, user will most probably leave. 

Take onboarding as an example. Purpose of onboarding is to get the user “on board” with an interface. Simple illustrations with supporting text can easily explain the most crucial functionalities and interactions. Illustrations have both explanatory and eye-catching effect.

Onboarding in app for Kids by PLATFORM

 

Visual Hierarchy
Custom illustrations can improve the navigation of the whole interface. Creation of interface is a process, during which designers have to take into consideration a lot of different variables. Fonts, whitespace, CTA's and of course illustrations. They can serve as a visual dividers between sections, making users to have a clear overview of what's going on in front of them.

MailChimp is using illustrations throughout the whole interface.

 

Attention
Illustrations are not only creating visual hierarchy and can support visual division on screen, they also draw attention to the most important parts of the screen. Designers have the power to create a focus of user to certain text or action, just by adding a right illustration directly to the screen. 

Slack is using illustrations throughout the whole interface

 

Aesthetics
Up until now, we have been talking about the functional use of illustrations in designing interface. What cannot be omitted when talking about the design is the overall look of the website. Functional websites can work, but if you combine function with aesthetics, you will push your product to another level. An old marketing term “Packaging sells”, is applicable also in the digital world. People are simple and if you want to sell, you have to create a visually appealing website that represents your product. Illustrations are definitely an option to add style to your interface.

Kids app illustration by PLATFORM

 

Emotions
People are emotional creatures. Even our decisions are determined by our emotions, which are then defended by our logic. Your digital presence represents your product or service that you are offering. In order to sell yourself you have to create an emotion, that will push people to make business with you. “What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed! That would be an experience you’d recommend to a friend; that would be an idea worth spreading,” said Aarron Walter about UI design. Illustrations have the power to create strong emotions. They can even create unpleasant experience, like landing on a 404 page, delightful.

404 Lost in Space by Uran

 

Brand identity
If you really want your brand to stand out, add original and custom-made illustrations to your website. Brands that are using illustrations are really distinguishing themselves from the crowd. Illustrations that follow brand guidelines can build a strong identity of a brand and seeing illustrations can really connect people to your brand. Companies like Google, Slack, MaiChimp, Asana, Salesforce or Dropbox build its brand identity around illustrations.

Dropbox build its identity around illustrations

 

Adding illustrations to the interface can really help your digital presence. But, before you start to add any to your website or an app you have to know more about your target audience, because badly used illustrations can result in a bad user experience.

Roman Kalina
Roman Kalina is a product strategist and copywriter at PLATFORM.
He is a former journalist, editor-in-chief and has over 9 years of writing experience.