Why use illustrations in your web projects

Over the years, websites have become increasingly visual and with more illustrations. We’ve gone from what started as a kind of teletext, in which all the information was provided through huge amounts of text, to a web design that is increasingly visual, cleaner in terms of usability, and with a better hierarchical organization in terms of textual information.

But is this a random change? Is it merely a question of aesthetics? Obviously not. We can observe in children that they are more attracted to images and videos than to text. Visual messages are easier to retain and understand than textual ones. But it’s not just a question of perception – studies show that the brain processes visual messages 60,000 times better than text messages. The data shows that it’s smarter to go for a more visual website, and that is why large media groups invest huge amounts of money in the layout of their digital newspapers.

Having said that, is there evidence to show which kind of visual resources are better? We don’t have a clear answer to this question yet, but there are pros and cons of using different audiovisual materials that can be identified.

Depending on the type of website you are creating, certain resources will be more interesting than others. For example, if you’re building an eCommerce site featuring physical products, we’d recommend using photographs so that the customer can perceive as accurately as possible what they’re planning to buy. A user might reject a product if they can’t really see what they’re going to buy. That’s why online businesses pay so much attention to product photography. The same is true of a travel website – here photography also plays a key role in the user’s intention to buy.

However, a 2010 Nielsen Norman Group study showed that people tend to ignore stock photos and notice the ones that are relevant to the information they are looking for. So, using stock photos that your user may have seen on other websites may generate rejection. That’s why it’s a good idea to use illustrations when you don’t have really powerful photos.

Why should you use illustrations on your website?

When photography is not an option, using an illustration is a smart thing to do as it is a versatile medium to express a message. Used in web design, illustration conveys a clear message and functions as an attractive or aesthetic element on a website.

Illustration helps you tell a story. Some sites use illustrative storyboards to convey a message in a way that is appealing to customers or viewers.

However, you shouldn’t use illustrations in a haphazard way. You need to ensure that the entire website has an overall graphic style and consistency to build an attractive and recognizable brand image. Not all companies will have the budget to hire an illustrator to create original and exclusive illustrations for their brand. Even so, in the case of using stock illustrations, we recommend choosing a collection or images in the same style to maintain this coherence. At Freepik we offer great illustrations for your website, and you can also download collections of illustrations to maintain uniformity of style.

Illustrations work especially well for presenting concepts or services that you want to express in a very specific way, or for communicating somewhat abstract ideas that cannot be explained clearly with a photograph. With an illustration, you can show the user what you’re talking about or help them understand the service you’re offering. They can interpret a drawing of the steps they need to follow, without having to read the accompanying text.

Furthermore, these illustrations can become part of the brand’s communication and image, and can be used not only for the website but also for other elements such as brand manuals, advertisements, posters, corporate stationery, or signage. In this way, you can create a richer brand image and achieve graphic unity across all media.

Other reasons for using illustrations are:

• They are fun and didactic elements in web design.
• The visual education of people means that images are no longer exclusively elements to be used in education or for children.
• They are very versatile elements with a great capacity for customization.

Many brands have already understood the benefits of using illustrations, not only on their websites but also in their advertising campaigns, breaking all the conventions around simplistic and childish use of illustrations.

Among the companies that use illustrations in their interfaces, we can highlight the almighty Google, which uses them to great effect in Doodles.

Other well-known brands such as Mailchimp, Trello, or Salesforce have made the decision to use illustrations for their digital products. It doesn’t take much research to understand that the use of illustrations to explain the digital services of companies and agencies has spread massively. For these companies, photography can do little to explain the service they offer and so they consider illustration to be their best weapon.

But illustrations are not only used in digital products. Retail brands also use the technique in their communication and on their websites. Illustrative cases include Fanta and Nike with their colorful illustrations. These companies use illustrations because they are true to what they represent.

The aim of their use of illustration is to inspire you, to get you on their wavelength. The illustrations speak to you directly, and you understand what they are talking about. They have built their brand in such a way that although they have hired different illustrators with completely different styles throughout their journey, they still convey the same emotions.

What types of illustrations can we find on websites?

At this point, we hope we’ve convinced you that adding illustrations to your communication strategy on your website is both positive and beautiful. Now you need to decide what type of illustration you want to use. The most popular styles include:

• Flat illustration: In graphic design, the flat style focuses on the use of color and two-dimensional illustrations. It is the most popular style and is used on websites because of its clean lines and simplicity. You can find dozens of flat design illustrations on Freepik.

• Isometric illustration: When you put things in perspective, everything looks different and – why not say so – better! You can get a sense of depth in your drawings using these isometric illustrations.

• 3D illustration: With 3D illustrations, it’s possible to represent any kind of content more accurately, whether it’s a product, object, environment, or concept.

What if you want animated illustrations?

No discussion of illustrations designed for web projects would be complete without mentioning one of Freepik Company’s products. This is Storyset, a free platform where you can modify, customize, and animate illustrations. This platform offers a large number of illustrations in different styles that are ideal for any web project, application, landing page, among others.

Just choose one of the 5 animation styles: Rafiqui, Bro, Amico, Pana, and Cuate, then choose the illustration you like the most and customize the design. Among the customization options available, you can change the colors, hide unnecessary layers, choose a background or even remove it. Once you have finished editing, you can download the illustration in png format or even make it scalable without losing quality with the SVG format.

Finally, and going one step further in customization, you can animate the different layers with effects like fade, displacement, or dissolution, among others, and export it in HTML, GIF, or MP4 video formats.

In this post we have taken a look at how some brands use illustrations as a means of communication with their target audience because they have found that it helps consumers and users better understand what their product or service is about, thus differentiating themselves from the competition.

These illustrations can be of many types, simple or complex, whether a 3D render, a flat, or an isometric illustration. Illustrations can be a very effective form of communication that works much better than stock images.