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 !
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
—
- Trouver le bon style d’illustration pour votre site web
- Illustrations flat et semi-flat
- Textures et dégradés
- Illustrations à contours
- 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.
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é.
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 à 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.
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.
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.
