Dans un monde où les traces numériques qu’on laisse sont tout aussi importantes que l’impression que l’on donne en personne, il est absolument indispensable d’avoir un site web bien conçu. Créer le design d’un site web est extrêmement complexe et constitue une véritable forme d’art. De nombreux aspects entrent en compte, comme la fonctionnalité, l’intuitivité, et l’esthétique. Donner la priorité à l’un de ces aspects peut parfois signifier en limiter certains autres.

Mais quand est-il des designs qui parviennent à rassembler tous ces aspects ? C’est-à-dire un site web réellement unique, fonctionnel, beau, et qui plaît aux utilisateurs ? Ne cherchez pas plus loin, la solution se trouve dans les illustrations web !

Website illustration
Illustration réalisée par OrangeCrush

Les utilisateurs en ont assez des sites web surchargés et pleins de texte. Et les photos provenant des banques d’images ou photoshopées ne sont plus à la hauteur non plus. En comparaison, les illustrations sont une véritable bouffée d’air frais !

Dans cet article, nous passerons en revue tout ce qui concerne les illustrations web, c’est à dire les illustrations destinées aux sites internet : comment trouver les bons designs, mais aussi le style le plus approprié pour son entreprise, le tout illustré de plusieurs (bons) exemples. Nous verrons aussi comment les illustrations peuvent être utilisées comme un moyen créatif de raconter l’histoire de sa marque. N’oubliez pas qu’une excellente image de marque commence par « montrer », et non pas par « dire ». Et c’est justement ce que les illustrations web permettent de faire.

Table des matières

  1. Trouver le bon style d’illustration pour votre site web
  2. Illustrations flat et semi-flat
  3. Textures et dégradés
  4. Illustrations à contours
  5. Illustrations et navigation

Trouver le bon style d’illustration pour votre site web

Tout comme il existe de nombreux styles différents de peinture ou de sculpture, il existe plusieurs styles d’illustrations qui se prêtent bien à une utilisation numérique. Certains sont audacieux, d’autres ludiques, d’autres encore percutants ou même simples et directs. Le meilleur style pour vous dépend de l’essence de votre marque et de ce qui la mettra le plus en valeur.

Commençons donc par ce point. Vous devez d’abord comprendre qui vous êtes en tant que marque, et donc avoir déjà établi votre identité de marque. Une fois que vous êtes au clair sur ce point, vous aurez plus de facilité à définir le style d’illustration qui conviendra le mieux à votre site web.

Les illustrations web dans le style des dessins animés sont un excellent choix pour les marques drôles et décontractées. En revanche, des illustrations nettes et anguleuses donneront à votre marque un look plus moderne. Quel que soit votre choix, ajouter des illustrations à votre site web vous aidera à vous démarquer de vos concurrents, qui utilisent probablement tous les mêmes photos et graphiques.

Et tout comme les polices et les couleurs, les illustrations web permettent de construire la personnalité globale de votre marque. S’en tenir à un seul et même style d’illustrations partout où sa marque apparaît sur le web permet de maintenir une cohérence de marque. Et cela constitue l’un des moyens les plus efficaces de montrer aux internautes qui vous êtes, à l’instant même où ils arrivent sur votre site web.

Frank Body website
Illustration web via Frank Body
Breathing Room website
Design de site web de Breathing Room réalisé par spoon lancer
Spiraladder website
Design de site web de Spiraladder réalisé par Mithum
Umama website
Design de site web de Umama réalisé par DSKY
We Build Spaceships website
Design de site web de We Build Spaceship réalisé par sundayrain
Snow Day Survival Kit website
Design de site web de Snow Day Survival Kit réalisé par gs05
Naturbit website
Design de site web de Naturbit réalisé par lucadia
Surfside Kids Pediatric Dentistry website
Design de site web de Surfside Kids Pediatric Dentistry réalisé par aneley

Exemples d’illustrations flat et semi-flat

Certaines des illustrations web les plus réussies sont aussi les plus simples, et elles ont souvent été réalisées en « flat design ». C’est un style qui fonctionne bien pour représenter le quotidien, les animaux, les personnages et les objets.

Les illustrations réalisées ainsi offrent un moyen classique et accessible d’incorporer des illustrations à son site web, car elles sont extrêmement visuelles. Le « flat design » fait référence à une image en deux dimensions, dénuée de dégradés ou d’ombre. Même les bords et les coins sont généralement de la même teinte que le reste de l’illustration, soulignant l’effet bidimensionnel. Les designs semi-flat incorporent davantage d’éléments (dégradés, reflets et ombres), sans créer un effet tridimensionnel complet.

Les illustrations flat peuvent être ludiques ou sophistiquées, selon la marque qui les utilise. Ce style fonctionne d’autant mieux lorsque l’on utilise la même palette de couleurs sur la page en question (voir les illustrations semi-flat de Guarantee Quote, par exemple). Elles peuvent aussi facilement prendre la forme d’icônes amusantes et reconnaissables. Elles sont donc idéales pour les mascottes, comme l’oiseau charismatique du site Duolingo.

Un autre avantage des illustrations web flat réside dans leur adaptabilité. Dans le cas du site web de Live & Dare, des illustrations fantaisistes sont associées à des photos pour créer un design à plusieurs facettes. En conservant soigneusement la palette de couleurs sur toute la page et en prêtant attention aux proportions, ce mélange de photographie et d’illustration est équilibré.

Illustrations web pour le site de Retail One
Design de site web de Retail One réalisé par Hitron
Co Op Vision website
Design de site web de Co Op Vision réalisé par Googa
Guarantee Quote website
Design de site web de Guarantee Quote réalisé par MercClass
Duolingo website
Design de site web de Duolingo via Niche Academy
Lander website
Design de site web de Lander via Software Findr
Site Leaf website character
Illustration web d’une mascotte via Site Leaf
Live and Dare website
Design de site web de Live and Dare réalisé par Daria V.

Textures and dégradés dans les illustrations web

À moins que vous optiez pour une animation flash, les landing pages sont généralement des espaces statiques très plats. Grâce aux illustrations web, ces pages gagnent désormais en profondeur. Les textures et les dégradés permettent de créer une certaine esthétique et un décor qui peuvent vraiment mettre en valeur le style de votre marque.

Regardez l’emballage et le site web de Magic Spoon Cereal (des céréales sans gluten, à faible teneur en glucides et totalement hipster). Les dégradés présents sur leur page d’informations font écho aux palettes de couleurs vives et aux illustrations funky sur leurs boîtes de céréales. C’est l’un des rares exemples de design réussi contenant des illustrations dans le domaine de l’e-commerce, car dans ce secteur, nous sommes particulièrement habitués à voir des photos de produits plutôt que des illustrations. Mais lorsqu’elles sont bien faites, c’est-à-dire qu’elles représentent le produit en question de manière réaliste, elles fonctionnent très bien. Il est important de montrer les produits de manière réaliste parce que vos clients doivent être sûrs de ce qu’ils achètent. Mais il n’y a aucune raison de ne pas parvenir à faire cela avec des illustrations !

Le site web de Wisecube illustre bien l’utilisation de textures : une superposition galactique transforme le fond bleu banal en un visuel stimulant. Il existe de nombreuses façons de créer de la texture. On peut par exemple utiliser des motifs complexes, des superpositions de couleurs, ou simplement jouer avec l’opacité. La texture aide à donner vie à un espace autrement plat et à souligner davantage le caractère unique de la marque dont il est question.

Illustrations web pour le site de Superhero Studios
Design de site web de Superhero Studios via Web Design Inspiration
Sparq Storytelling website
Design de site web de Sparq Storytelling réalisé par Iconic Graphics
Magic Spoon Cereal website
Design de site web de Magic Spoon Cereal via Philly Voice
IT Heroes website
Design de site web de IT Heroes réalisé par set4net
Heyware website
Design de site web de Heyware réalisé par ABRIR
Wisecube website
Design de site web de Wisecube réalisé par FaTiH
INDOSE website
Design de site web de INDOSE réalisé par DSKY

Illustrations web à contours

Les illustrations réalisées en contours uniquement sont devenues de plus en plus populaires ces dernières années (voir les emballages de White Claw, par exemple). La popularité des livres de coloriage pour adultes pourrait bien être la cause sous-jacente de cette tendance. Et c’est tant mieux. Les dessins tout en contours ont un côté rétro et charmant, et dans le contexte des illustrations web, ce sont les plus séduisants.

Ce type d’illustration repose souvent sur l’utilisation de l’espace blanc. Ainsi, les illustrations réalisées en contours peuvent être très simples, voire minimalistes, ou au contraire très détaillées. Quoi qu’il en soit, ces illustrations-là permettent de personnaliser grandement son site web, tout en restant professionnelles, agréables à regarder, et engageantes. Regardez le site de Rocket pour un exemple minimaliste, et celui de Brand It Guru pour une approche plus détaillée.

Design de site web de Good Things Brewing Co.
Design de site web via Good Things Brewing Co
Rocket website
Design de site web de Rocket réalisé par spoon lancer
Railsware illustration
Design de site web de Railsware via Railsware
Smart Data website illustration
Design de site web de Smart Data réalisé par Googa
Backlink website
Design de site web de Backlink réalisé par Gil Fadilana
Bank of England website
Design de site web de Bank of England via Graphic Mama
Brand It Guru website
Design de site web de Brand It Guru via Graphic Mama

Illustrations et navigation

Le terme « navigation » s’applique à la conception web de deux manières différentes.

Il peut tout d’abord s’agir du menu de navigation lui-même. La navigation est au centre de tout site web digne de ce nom, et les illustrations peuvent rendre cette navigation claire et intéressante. Prenez GiftRocket comme un exemple réussi d’un menu de navigation où chaque catégorie de produits est représentée par une illustration.

On parle aussi de navigation pour décrire la manière dont les utilisateurs explorent et visualisent le contenu d’un site web donné. Les illustrations peuvent là aussi aider à faciliter ce processus grâce à des moyens de navigation traditionnels (le menu) ainsi qu’à de nouvelles formes créatives (l’infographie). Et dans des cas comme celui de Trailhead, l’illustration n’aide pas seulement les utilisateurs à naviguer sur le site, elle permet également de tracer (littéralement) un chemin engageant.

Chrysalis est un très bon exemple d’une utilisation réussie de la visualisation dans les illustrations du site web. La toute première chose que les utilisateurs voient sur la page d’accueil de Chrysalis c’est son illustration inspirée des graphiques, qui leur indique ce que l’entreprise propose.

Pensez aux outils de visualisation classiques comme les organigrammes. Les illustrations web sont d’excellents outils pour cela, en plus d’être un moyen efficace de créer un véritable lien avec son audience. Elles sont également souvent plus adaptées aux mobiles que les photos. Gardez cela à l’esprit lorsque vous concevez la version mobile de votre site.

Basecamp website illustration
Illustrations web via Basecamp
Trailhead website
Design de site web de Trailhead via classy.org
GiftRocket navigation menu
Menu de navigation illustré de GiftRocket via Awwards
Gas Analytical website
Design de site web de Gas Analytical réalisé par FaTiH
Design de site web de Chrysalis
Design de site web de Chrysalis réalisé par Mithum

Racontez l’histoire de votre marque grâce aux illustrations web

Il existe de nombreuses manières dont les illustrations web favorisent l’engagement et guident les utilisateurs à travers les sites web, en combinant fonctionnalité, aspect intuitif et esthétique. Si vous avez déjà créé votre site web, réfléchissez aux façons dont vous pourriez y ajouter des illustrations en vous inspirant des exemples mentionnés dans cet article. Et si vous partez de zéro, pensez à créer un design dynamique basé sur de belles illustrations pour votre nouveau site web.

Vous ne savez pas par où commencer ? Contactez notre communauté internationale de graphistes pour trouver un professionnel spécialisé en design de site web axé sur les illustrations.

Prêt à déclencher une tonne de clics avec vos illustrations web ?
Nos designers vont créer le look parfait pour votre marque.