How to use illustration to make UX design emotional

 Illustrations are an indispensable means of human communication. About 45,000 years ago, they originated in the form of rock paintings, and are still used to depict a wide variety of objects and concepts.

Images are not afraid of language barriers and the level of education of a person is not important. Illustrations help people understand and express complex moods and feelings that they cannot convey in words. 

Remember when you were little and couldn't read, illustrations made it possible to learn many interesting stories from children's books.

In the context of modern information technology, an illustration is partly a decoration, and partly an emotional signal that helps, with the help of a metaphor, to make a special impression on the user.

Why use illustrations on the site?

Illustrations are a valuable medium for conveying the mood, tone, or voice of a brand.

But do not confuse icons and illustrations just because they are images. Icons are symbols that most often need to match illustrations stylistically. 

A symbol is a simplified representation of an object, idea, or action. For example, such action as "search" is usually denoted by a magnifying glass.

As for illustrations, they are capable of conveying much more complex concepts. In particular, create an emotional connection with the intended audience. 

The illustrations also do a great job of conveying meaning without the need to add text. When used correctly, illustrations give personality to even the most simple and practical website.

Popular types of illustrations on the web

Illustration styles are many and varied, from simple outlines to detailed, full-color, lifelike images. There are also no restrictions on the number of illustrations used on the site.

Each style evokes certain emotions and responses, so it is very important to consciously choose an illustration style. First of all, you should rely on the purpose of the site and what character you want to give it.

You can study the market and see what type of illustrations best suits your product. Actually, now we will do it. We will look at how designers manage to use illustrations effectively in four categories.

Finance and corporate websites

Financial services, fintech, corporate apps, and large corporate websites most often use illustrations as a way to humanize themselves.

Such organizations adhere to a minimalist style and use simple forms and a small number of illustrations. Acorns' opening screen illustration uses a simple oak leaf motif combined with the Acorns acorn logo. The rest of the illustrations are also made in green corporate colors.

The site's design creates a typical new-company feel (Acorns was founded in 2014). This is what many web-based brands in finance look like.

More mature and traditional organizations use illustrations for the same purpose. At the same time, the areas of use of illustrations may be limited, as is the case with Danske Bank. 

The design highlights the product's accessibility with illustrations in the "About us" and "Sustainability" sections.

Visa also restricts the use of the illustration to a specific area. An example of this is the design of the Visa Direct section. As a result, the new service stands out from everything Visa has to offer.

Another approach that is gaining popularity in this category is abstract graphics. Abstractions are especially useful when it's hard to show what the site has to offer. 

For example, Instabase uses compositions of geometric shapes to attract interest. They are made in the same color palette as the favicon.

One of the keys to using illustrations on these types of sites is to strike a balance between being friendly, human, and approachable, and at the same time serious, reliable, and safe. 

If you overdo it in the direction of playfulness, potential customers will not take you seriously. On the GitHub site in the "Enterprise" section, there are only a few illustrations in rather muted colors. In contrast to the home page, where the first screen has an expressive Octocat and brighter illustrations.

Food and drink

When it comes to food and drink, it gets a little freer. Styles are much more varied, and the image can be more expressive and individual. 

Some still prefer the light spiciness of the illustrations, with aspects such as color and type accentuated. Other sites in this category make illustrations a much more meaningful part of the design.

Palais Kitchen and Caleño are following the first strategy, using brand-appropriate line art.

Animated illustrations of My Drink in vintage style replace the photos and balance the text on the homepage.

The Melopeion Honey site doesn't have that many illustrations, but there are plenty of other visual elements.

Monkey47 can be described as a concept site where illustrations play a key role. Each section of the site is simply charming thanks to the illustrations.

Hospitality and Leisure

In this category, users want to see photos more, but illustrations can also help. A photograph can only show what something looks like, while an illustration can convey the emotions associated with a potential experience.

Protos Car Rental uses some beautiful and simple illustrations to highlight the festive aspect of its brand.

Comptoir Libanais combines photographs with illustrations to create a distinct personality.

Hotel Frida has character too, and the fantastic Victorian animal illustrations make the brand uniquely original.

Highcourt uses simplified and stylized illustrations that give a more complete picture of the building's interior than a photograph would.

Not only illustrations are used on The Neverlands website, but the whole design is also an immersive experience based on illustrations.

Conscious web design

Sites promoting environmentally responsible companies, natural skin care products, natural or organic food, and beverages, vegan products, social responsibility, and more tend to rely on illustrations, especially if they are relatively new.

Wild Souls eschews any rudimentary hints of being eco-friendly and somewhat randomly arranges its illustrations.

Superfood Gin uses a lot of plants in its design, and since it's all about plant-based ingredients, it's a very good concept.

Capsul'in's homepage is unremarkable, but Zero Impact has its own section with illustrations to showcase its uniqueness.

Donate Responsibly uses an illustration to explain to people how good intentions can cause unintended harm. The illustrations are quite informative and neutral.

Many children's brands use illustrations, even if the real target is adults and not children. Little Yawn Collective combines a child-friendly approach with illustrations of sleeping animals and highlights the naturalness of the product.

Using illustrations on websites

Illustration can be a powerful tool in a designer's arsenal, but it can be tricky to get it right. This happens because illustration evokes emotions, and emotions are subjective.

Just like type or color, illustrations require proper and careful handling. Remember that sometimes less is more. And it also happens that a failure can happen from the wrong placement of an excellent illustration.

This is just a sampling of the wide variety of styles and categories of illustration used on the web, but we hope this information will help you make important decisions about how to use illustrations in your next projects.