Illustrations in Web Design – Best Use Cases

If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you – illustrations are in fashion now. They have become so widespread that we simply have to talk about this phenomenon in detail! To write the article, inspiration was drawn from the note The use of illustration in web design, I hope you will be interested in reading.

There should be no useless or meaningless elements in the interface. Even a decorative element, if it is in its place, must fulfill a specific function. In general terms, an illustration can play the role of both a decorative element (the task of which is to decorate and diversify the design), and informative (presents some information in a convenient and easy-to-understand form). Ideally, it performs both functions at the same time.

Illustrator portfolio sites are full of great quality graphics, but what s the best way to use them in web design? – today we will just talk about this, having considered typical examples.

Thematic images

Themed illustrations create or enhance a particular atmosphere. The plot of such a picture is usually closely related to the theme of the site. Let s look at a few examples:

Get my boss to North Cape

The illustration develops the main idea and Get my boss to North Cape. It not only decorates, but also carries a functional and semantic load, emphasizing what this project is actually about – the boss argued with his subordinate that if they get 5000 likes, he will have to go on a long journey.

Launch Kit

In the case of the Launch Kit site, the background illustration is just decoration, but the decoration is appropriate and organically fits into the overall concept of the site. It is not necessary to draw a large, specific illustration that fully and completely reflects the concept of the site, you can only slightly enhance the general message with it, as done here.

Atelier Anonyme Design

When designing the home page, the designers of the Atelier Anonyme Design website decided to rely entirely on the illustration, which, in fact, is the background at the same time a strong expressive means. This site was created for a web studio, so we can say that illustration plays not only the role of decoration, but also, in a sense, reflects the spirit, the spirit of this agency, filtering out “unsuitable” clients.

Illustration with character

Another phenomenon that has become widespread today is character illustration. To implement this idea, the designer needs to come up with a special illustrated character (or characters). Often this is a fictional character, with whom the visitor should subsequently associate the site. Let s consider some examples.

inkFinder

It is obvious that inkFinder uses the octopus character to play a prominent role, making the site design more memorable and generally more recognizable. The beauty of the character approach is that you can come up with anyone and implement the same image in your own way, making it unique.

The evnt

The Evnt meets us with yet another “octopus-like character”. In this case, its implementation is very far from reality – it is a kind of brain imprisoned in a “spacesuit” on three legs. Undoubtedly, it is also a memorable element of the project, which creates a wonderful association with a particular event that the web page is about. Look, this example is generally a pretty good design for the site, but how much will it change if you remove the character!

Big eye creative

In this case, the character is not as aggressive as in the previous design. Its role is secondary, in fact the one-eyed creature is part of the logo, nevertheless, it creates a mood and allows you to make a visual overview of the project memorable.

Illustrated decorations

This type of illustration in web design is decorative. It s just decoration, decoration, nothing more. Basically. and this option has the right to exist – beautiful sites are also remembered as projects with “ideological” illustrations. A few examples:

1000 WP Themes

The illustrated elements of the 1000 WP Themes interface (in the header and navigation) do not carry any semantic or functional load, but help create a stylish design. In part, the beauty and style of the design gives some idea of ​​the possibilities and features of the WordPress templates and designs developed by this company.

Coca-Cola History

The illustrations on one of the Coca-Cola projects were created solely to decorate, diversify and make the design more modern and fashionable. The picture shows real things, but they are played in this way in order to fit into the overall appearance of the site.

Metaphiziks

The illustration is used to create a pleasant background. The case when this technique is applied extremely correctly and competently – all elements from the background to fonts, texts and even icons are very harmoniously selected and complement each other remarkably.

Illustrated text (font)

A hand-drawn typeface can never be compared to a “machine” type. Handwritten phrases and sentences are always unique in their own way, which is skillfully used by many modern designers. In many cases, the solution is quite beneficial and useful for the overall impression of the site design, in addition, it is the ability to create unique (original) elements. (Taking this opportunity, I want to note that Design Mania has a separate section about fonts – there you will find a couple of interesting options)

Rangus

In my opinion, it is a very vivid and successful example of using illustrated text. Pay attention also to the interesting animation (move the mouse over different elements). By the way, Rangus can also be cited as an example as a design containing a character illustration.

Joey lomanto

The first impression is that the illustrated caption is in perfect harmony with the rest of the design elements. You may not even notice right away that the text is in handwritten style or here, for example, some standard font is already used – nevertheless, all this goes well with the overall design of the site.

Informative illustration

This type of illustration has the main purpose of definition and explanation. This, in principle, is the whole essence of the approach, there is nothing special to add, so let s go straight to the examples:

Bookish

On the home page of this site, the illustration defines the essence of each of the design elements. Separate “blocks” are complemented by an illustration not just for beauty, but the image (more importantly) explains the purpose of the element. With this approach, you can not even really read the description in order to understand what is where – the picture in the lower left corner, where mobile phones and tablets are located, is the most striking confirmation of this.

Vitality city

Turn the “globe” on Vitality City and you will understand that this illustration is not a fashionable “accessory”, but an element with a semantic load – an original illustrated navigation is obtained.

Uklizenodoma

A very striking example when an informational illustration is taken as the basis for the design – this or that element of the room design (in this case) has its own signature and a link to a detailed explanation.

Antidote illustration

This is the last but very interesting kind of illustration that I want to talk about today. Let me explain what this strange name means. Sometimes it is necessary that the illustration distracts, first of all, from the technological essence of the interface and allows you to think more intuitively. This is precisely the purpose of the “illustration-antidote”.

Shipment App

An illustration in this case is akin to a piece of art – it creates an unforgettable image that definitely makes you forget that you even visited a web page.

Egopop

Not as vivid an example as the previous one, but in my opinion it also illustrates the approach well. Looking at the main page of Egopop you forget that you are dealing with a website – it is rather an interactive little piece of art, which, however, gives some understanding of what exactly this site is about (which is also important).

That, in principle, is all for today. As a result, we can safely say that illustration in web design is one of the most striking and irreplaceable techniques. It has tremendous potential that can be realized in hundreds of different occasions and variations, creating designs that are not alike. In a sense, this is the most creative and artistic approach at the same time, in fact, the imagination and capabilities of designers are not limited by anything. Successful illustrations in your work!

PS Choosing a name for your unborn child? – this is not an easy process, of course, I think the meaning of the name and the description of different names should help you a little with the solution.
Buying a book on the Internet is simpler, we go to an online bookstore, choose a product, place an order, pay and wait for a courier with delivery.