Maria Grilo

22 juillet 2021

Min Read

Une bonne illustration est importante

L'illustration est probablement l'une des plus anciennes formes de communication. D'un point de vue conceptuel, il est antérieur aux alphabets et au texte, et il n'a jamais été remplacé. Au lieu de cela, il est devenu un complément à la complexité et à la longueur du texte écrit, aidant même les gens à apprendre à lire, tout en fournissant des repères visuels et un contexte. Dans différents états cognitifs, l'illustration aura des objectifs différents, car c'est un moyen de communication très riche.

Selon le dictionnaire Merriam-Webster, c'est »pour clarifier en donnant ou en servant d'exemple ou d'exemple«, »fournir des éléments visuels destinés à expliquer ou à décorer« et »pour montrer clairement«. L'église, par exemple, l'a fait pendant de nombreux siècles, par le biais de dessins dans des livres, de peintures, de sculptures et même d'architecture.

Illustrer, c'est clarifier.

Une page de manuscrit enluminé présentant une grande lettre initiale 'B' ornée, qui encadre un personnage couronné assis, jouant de la harpe et tenant un livre ouvert. L'arrière-plan et les bordures sont remplis d'entrelacs médiévaux complexes et d'une écriture latine à l'encre noire avec des touches de rouge.

Les gens ont continué à illustrer dans plusieurs types de médias, mais principalement dans la presse écrite. Puis de nouveaux médias, tels que le cinéma, sont apparus et l'animation est apparue. Finalement, nous en sommes arrivés au point où nous en sommes aujourd'hui et l'illustration revient progressivement en tant que forme de communication de pointe. Il ne s'agit plus uniquement d'imprimés, pas seulement de magazines ou de certains types de livres. Ce sont les sites Web, l'image de marque, la conception de l'interface utilisateur.

Cela étant dit, pourriez-vous concevoir votre produit en utilisant uniquement la typographie, les éléments de navigation, les couleurs et des photos de stock ? Tu pourrais certainement, mais voici pourquoi je pense que tu devrais faire un effort supplémentaire.

blue arrow to the left
Imaginary Cloud logo

Captez l'attention de tous grâce à l'illustration

D'abord et avant tout, l'illustration attire l'attention. Et il y a plusieurs raisons pour lesquelles vous voulez attirer l'attention. Il se peut que vous présentiez votre produit pour la première fois à votre cible via une page de destination, par exemple. Ou il se peut que, dans une mise en page informative, vous deviez diriger le regard de l'utilisateur vers un endroit spécifique.

Une illustration vectorielle colorée et texturée sur une interface de page web. Sur un fond rose, une personne portant un casque de réalité virtuelle est allongée dans une chaise jaune tout en interagissant avec une interface futuriste. Une autre personne se tient à ses côtés en regardant un graphique numérique flottant. Un drone transporte une tasse de café au-dessus d'eux, et un grand texte blanc indique « Drone Delivery » et « Prioritise », accompagné d'un bloc de texte de remplissage en français et d'un lien « Read More ».
Deux exemples de sections principales de pages web modernes affichés côte à côte. Le design de gauche présente une mise en page épurée et minimaliste avec un titre en gras indiquant « Divide payments to anyone », un champ d'inscription par e-mail et une illustration géométrique et vibrante d'une main tenant un smartphone. Le design de droite présente une mise en page organique et ondulée en bleu foncé, crème et blanc, avec le titre « Fruit juice is good for your health. », des motifs abstraits et un bouton jaune « Get in touch ».

Les images sont souvent choisies pour attirer l'attention plutôt que sur le texte. Il existe donc plusieurs façons de les utiliser à votre avantage, ce qui nous amène au point suivant : l'illustration est informative.

blue arrow to the left
Imaginary Cloud logo

Faites valoir un point

Une bonne illustration complétera votre copie. Cela vous aidera à faire valoir les points que vous essayez de faire valoir, tout en améliorant les informations les plus pertinentes. Cela permettra également à l'utilisateur plus enclin à lire votre texte parce qu'ils veulent une explication de ce que l'illustration suggère mais ne dit pas explicitement.

Une illustration d'une interface de site web pour une plateforme d'apprentissage en ligne nommée 'universitet'. La page présente une disposition en grille affichant diverses fiches de cours, notamment 'Content Marketing' sur fond turquoise avec une illustration d'ordinateur, 'Marketing Software' sur fond rose avec un panier de courses, 'Sales Software' avec des graphismes de cartes de crédit, et 'HubSpot Design' avec un graphique de bouclier. Chaque fiche comprend une brève description et un bouton 'Buy for $15'.

En outre, l'illustration parviendra à communiquer des choses qui ne sont guère complètes par le biais de la copie, comme les émotions et les humeurs. Tout le monde en a assez du texte qui tente de faire appel à vos émotions tout en vous expliquant ce qu'elles font, à travers une liste d'adjectifs vagues suivis de phrases d'accroche et d'appels à l'action.

Ne le dites pas (simplement), montrez-le. Montrez ces émotions et ces humeurs à travers des images, des formes et des couleurs.

Trois cartes d'écran d'accueil pour une application de fitness sur un fond abstrait rose et violet. Chaque carte jaune et blanche présente une illustration vectorielle plate d'une femme en haut rose et legging violet pratiquant une activité en plein air. La première carte la montre promenant un chien golden retriever, avec l'en-tête « A new start. Everyday. ». La deuxième carte la montre en train de courir, avec l'en-tête « Activity tracker. ». La troisième carte la montre sur un vélo rouge, avec l'en-tête « Keep moving. ». Chaque carte comprend un court texte descriptif et un bouton « NEXT » en bas à droite.
blue arrow to the left
Imaginary Cloud logo

Jouez à tout cela ensemble

Permettez à votre typographie et à vos couleurs de vraiment briller à travers des images qui transportent le spectateur vers un autre endroit, un autre état d'esprit, un espace heureux où ses problèmes sont résolus par votre produit.

Une illustration sur une page d'accueil pour 'FRIEND.finder'. À gauche, un texte bleu foncé indique : « Share your smile with the world and find friends » (Partagez votre sourire avec le monde et trouvez des amis), au-dessus d'un texte plus petit et d'un bouton « Get started » (Commencer). À droite, un homme aux cheveux blonds fait du vélo bleu clair et regarde derrière lui une femme aux cheveux noirs qui promène un petit chien noir en laisse. Le fond est blanc avec des formes abstraites colorées et minimalistes ainsi que des plantes vertes.

Your Times New Roman ne sera plus une simple police à empattements, elle fera partie d'une plus grande police capable d'apporter le sérieux et la fiabilité d'un serif de journal, tout en véhiculant toutes les idées et l'identité de votre produit.

Une comparaison côte à côte de deux designs de pages web mettant en valeur une typographie et des illustrations marquantes. À gauche, un article du blog d'Adobe intitulé « Introducing Spectrum: How Adobe Is Building a Design System at Scale » présente un texte à empattement épuré au-dessus d'une illustration vectorielle minimaliste de personnages bleus et gris construisant des interfaces numériques. À droite, la page d'accueil d'Everwill affiche « Attorney-Crafted Wills & Trusts from the Comfort of Your Home » dans une police à empattement sombre, sur fond d'une illustration chaleureuse et texturée d'une famille multigénérationnelle réunie.

Les couleurs gagneront en poids et en sens et ne seront plus simplement abstraites et vagues. Ils auront une utilité dans un scénario où l'utilisateur est satisfait.

blue arrow to the left
Imaginary Cloud logo

Racontez une histoire

Un bon travail d'illustration guidera votre spectateur à travers un récit, un processus de réflexion ou même un didacticiel, par exemple, tout en laissant la page respirer afin de ne pas submerger votre utilisateur d'informations.

Ces illustrations peuvent également représenter le produit lui-même. Si vous pensez que l'écran d'impression de votre produit contient trop d'informations pour une page de destination, par exemple, n'ayez pas peur d'afficher une représentation minimaliste qui reflète la fonction du produit. Cela évitera sûrement de surcharger votre utilisateur.

Une illustration vectorielle plate de trois personnes collaborant pour créer ou personnaliser une interface de site web. Une personne est debout sur une échelle et utilise un rouleau à peinture sur une grande fenêtre de navigateur affichant des lignes de code, une autre est debout sur un document géant avec un rouleau, et une troisième ajoute une coche à un menu latéral. La scène utilise une palette de couleurs vives bleu, violet, rose et orange avec des arbres et des montagnes stylisés en arrière-plan.

Il s'agit d'une technique qui peut être utilisée efficacement pour des didacticiels étape par étape et des intégrations, par exemple. Concentrez-vous sur la fonctionnalité que vous souhaitez présenter à votre utilisateur. Ou sur la manière dont la fonctionnalité sera utilisée dans un contexte réel, en d'autres termes, en montrant l'utilisateur interagissant avec le produit. Vous pourriez même aller jusqu'à utiliser l'animation.

HTTPS://DRIBBBLE.COM/SHOTS/2851448-NOOKLYN-ONBOARDING

Bien sûr, vous pouvez avoir juste un chargeur normal avec une animation rotative, mais pourquoi ne pas utiliser ce temps pour transmettre un message ? Cela pourrait être une astuce sur la façon d'utiliser certaines fonctionnalités telles que »Savais-tu que... ?», ou simplement une animation divertissante qui n'ennuiera pas votre utilisateur. Cela peut être la cause ou l'échec de certaines interactions au sein de votre produit, car les gens n'aiment pas attendre.

Un iPhone affichant l'interface d'une application mobile avec un écran d'état vide. L'écran présente une illustration d'une femme tenant une chaussure bleue, sous un bouton "Quick sale". Sous l'illustration, on peut lire le texte "Add your first product" et "Tap the + icon to add a product to your inventory."
blue arrow to the left
Imaginary Cloud logo

Arrêtez simplement d'utiliser des photos de stock

Bien entendu, rien de tout cela ne sera bon marché, car une bonne illustration prend du temps. Une alternative dans le cadre d'une solution illustrative serait d'utiliser du matériel de base, mais c'est là que vous perdrez la spécificité et l'identité. Vos illustrations doivent refléter vos principes et vos valeurs esthétiques.

Une autre alternative serait d'utiliser des peintures comme on utilise des photographies de stock, avec l'avantage supplémentaire de pouvoir les modifier graphiquement et de créer des visuels intéressants qui renforcent l'essence de votre marque. Il existe de nombreuses bibliothèques proposant des peintures gratuites, de la Renaissance à l'art moderne.

Trois panneaux d'œuvres d'art numérique contemporaines mélangeant des sculptures classiques et des graphismes modernes. À gauche, un visage de pierre avec des lignes de distorsion violettes ; au milieu, un portrait sombre avec une superposition de marbre liquide coloré ; à droite, une statue féminine segmentée par des bandes horizontales à motif floral.

On pourrait dire qu'il ne s'agit pas d'un travail d'illustration, mais je considérerais cette solution comme un mélange de photographie et d'utilisation de l'art pour transmettre des idées et des humeurs. Il est possible que la description de vos services ou fonctionnalités ne soit pas aussi précise, mais cela pourrait être une nouvelle alternative.

Une capture d'écran d'un navigateur web sur ordinateur affichant la page d'accueil du site web « The Fine Wine Embassy ». L'arrière-plan présente une nature morte classique et élaborée de style baroque, illustrant un festin somptueux avec un cerf, un homard sur une assiette, un paon, divers fruits tels que des raisins et des pommes, ainsi que d'autres gibiers. Une grande typographie à empattement blanche et stylisée au centre indique « the fine wine embassy », avec des options de langue pour l'allemand, l'anglais et le serbe listées en dessous.

Une alternative aux mêmes vieilles photos d'ordinateurs portables et de smartphones sur des tables en bois de qualité que pratiquement personne ne peut se permettre. Ce n'est plus crédible, c'est exagéré.

Cela ne veut pas dire que l'illustration est quelque chose de nouveau, mais il y a certainement beaucoup plus d'espace pour explorer différentes possibilités d'expression et d'information, tout en renforçant l'identité de votre marque.

Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Maria Grilo
Maria Grilo

Je suis designer d'interface utilisateur et de produits, illustrateur et peintre. Connue pour mon amour des serviettes de plage sales, de la production musicale, de la typographie et de toutes sortes de pizzas.

Read more posts by this author

People who read this post, also found these interesting:

Dropdown caret icon