On le sait, vous le savez, un dessin vaut mieux qu’un long discours. Et bien dans le cadre de cet article ça se prouve aussi, car les illustrations sont comme le nappage de caramel beurre-salé qui complète une crêpe nature ; c’est carrément meilleur ensemble. L’illustration existe depuis toujours, mais elle remplit plusieurs objectifs précis dans le cadre d’un site Internet. On a essayé d’illustrer cet article en l’agrémentant de crêpes en tout genre 1, parce qu’on avait un petit creux au moment de la rédaction. On vous parle donc d’illu dans tous ces états d’Amérique, mais surtout, une introduction à l’illustration dans le webdesign au service de la marque.
Mémoire toute puissante
— Crêpe chignon
Délivrer des contenus de qualité, c’est une des clés d’un site internet réussi, avoir des photographies au top du top et des jolis petits dessins pertinents contribuent au mix de la perception en termes de qualité de votre site web. C’est pourquoi il faut impérativement que la qualité de vos illus soit au rendez-vous. Elles font un pont en ligne droite entre les utilisateurs.trices et votre site web, elles contribuent à créer une expérience visuelle engageante et à vehiculer vos messages efficacement. C’est le moment idéal pour activer la zone du cerveau liée à la mémoire [power : on], on peut actionner plusieurs leviers pour déclencher une émotion qui fera qu’on se souvient de vous parce que “c’est quand même rigolo l’identité de Turbo Polish” ou “vous avez quand même poussé la métaphore du Petit Garage super loin”. Oui, mais au moins vous vous souvenez de nous.
L’objectif principal sera donc de délimiter le terrain de jeu, est-ce que votre marque s’autorise à être originale ou très originale, pour être suffisamment mémorable par votre cœur de cible (oui, c’est un peu ciblé comme point de vue). Le curseur est parfois difficile à positionner, mais on peut vous aiguiller pour éviter la crêpe chignon.
Renforcer l’identité de votre marque avec vos illustrations
— Crêpe Suzette
On vient chatouiller votre charte graphique pour lui soutirer des informations telles que ses codes couleurs, les thématiques visuelles ou encore le traitement des images en général ; les illustrations sont là encore une fois pour renforcer votre identité de marque et venir compléter le tableau dans un tout cohérent et stratégique.
Être reconnaissable au premier regard ?
Le rêve de toutes les crêpes nature.
Narration visuelle
— Pâte à crêpe
On revient sur cette expression qu’on a utilisé un peu tôt en intro :
un dessin vaut mieux qu’un long discours ! Si vous avez un message complexe à transmettre, peut être que vous pouvez le faire passer avec une illustration animée ou statique, ou une série d’illustrations qui racontent une histoire précise. C’est un très bon exercice de mettre en contexte de genre de visuels explicatifs. Ça appuie le discours que vous avez déjà à travers vos contenus textes, et ça vous aide à délivrer un ensemble cohérent, qualitatif et plus accessible. On parle ici d’expliquer plus simplement un processus technique ou industriel, par exemple, à travers une version schématisée et esthétique à la fois.
On imagine bien les ingrédients indispensables à la fabrication d’une bonne pâte à crêpes, facile à comprendre. Mais si on pose les ingrédients dans un joli petit tableau avec une illustration mignonne et cohérente, c’est comme si on avait pas besoin de lire. C’est fin, ça se mange sans fin.
Interaction et engagement
— Crêpe au suc
Les animations peuvent donner vie à votre site en ajoutant du mouvement et de la personnalité. Elles peuvent être utilisées pour présenter des informations de manière dynamique, raconter une histoire ou simplement ajouter une touche ludique à l’expérience de navigation, ce qui fait que l’utilisateur.trice se sentira bien sur votre site et restera forcément plus longtemps.
On peut par exemple réfléchir à intégrer des élements illustratifs interactifs comme avec Lottie qui permet l’animation d’illustrations svg, donc vectoriel et cross device. Donc vous êtes super bien lotis avec Lottie. Vous pouvez découvrir des exemples de Lottie animés sur notre page de liste de projets créatifs au hover sur les éléments de liste.
En résumé, l’utilisation d’éléments illustratifs interactifs dans votre site web est un moyen efficace d’encourager l’engagement des utilisateurs. Que ce soit par le biais d’animations, d’illustrations interactives ou d’éléments de gamification, ces aspects contribuent à maintenir l’intérêt des visiteurs.euses et à les inciter à explorer davantage le contenu proposé.
Équilibre et performance
— I’m a Crêpe, I’m a wierdo
Il est effectivement important de garder l’aspect performance en tête, plus il y a d’illustrations et plus ça pèse lourd !
C’est alors qu’intervient la police de l’équilibre : est-ce que le ratio entre les textes et les illustrations est cohérent ? Trop de textes, ou trop d’images illustratives peuvent rendre la lecture difficile. Veillez à garder l’équilibre parfait pour ne pas tomber dans l’oubli.
Une fois l’équilibre établi, on peut toujours optimiser les images avec des outils de compression comme ImageOptim (non sponsorisé) ou Tinypng (non sponsorisé non plus). Pour allez plus loin, si vous avez une bonne agence web et un site web sur mesure, les images seront recadrés, redimensionnés et optimisées par le CMS, et tout un tas de bonnes pratiques sont prises en compte pour que le chargement de vos illus soit hallu-cinant.
Ps : pardon à Thom Yorke pour ce jeu de mot douteux qui tombe à plat comme une crêpe.
Last, but not least : accessibilité des images d’illustration
— Crêpe-present
Afin de délivrer un contenu inclusif de qualité, il est Turbo important de renseigner les balises alt ou textes alternatifs des images pour qu’elles soient interprétées par les lecteurs d’écrans (synthèses vocales et/ou plages brailles). À noter que le texte alternatif sera rempli différemment en fonction du contexte d’utilisation de l’image. Cela signifie qu’il variera en fonction de savoir si l’image est décorative, informative ou une image-lien. Les illustration dites décoratives n’apportent pas d’informations complémentaire aux contenus textes, inutile de renseigner les textes alternatifs.
Nb : on est certainement pas les meilleurs en accessibilité web, mais on y travaille très fort et ça nous tient à cœur. 🫶
- Aucune crêpe n’a été mal traitée durant la création de cet article, ce ne sont que des créations « faites maison » en 3D sur Blender ❤️ ↑
