The 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?
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 an image to support it. In this case, it will be an illustration, which can easily clarify what words cannot. Keep in mind, that when the 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, the user will most probably leave.
Take onboarding as an example. The 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.
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.
Attention
Illustrations are not only creating visual hierarchy and can support visual division on screen, but 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 the right illustration directly to the screen.
Aesthetics
Up until now, we have been talking about the functional use of illustrations in designing interfaces. 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.
Do you like what you are reading? Finish the rest of the article on our blog.
