Les illustrations en kit, ou la carte Joker des designers.
Suivez le guide pour boucher tous les trous de vos compositions graphiques avec des illustrations “component-based”.
Cet article se base notamment sur les illustrations que j’ai réalisé pour Stormz.
S’il est admis qu’une illustration illumine un article et structure une page web, il faut bien comprendre qu’il peut être parfois ardu de trouver la perle rare qui s’intégrera parfaitement dans votre composition. Car les contraintes auxquelles un designer fait face peuvent être multiples, si bien que l’on peut vite se retrouver à chercher “une image de bonne qualité, en format bannière (1546x423) représentant à la fois les objets connectés, le big data et la camaraderie, sans forcément de budget, dans des teintes bleutées, pour un contexte culturel français, etc”. Bref, autant chercher l’éventualité d’une aiguille dans une botte de foin.
Si vous êtes dans une grande structure, vous pouvez bénéficier d’une banque d’images fournie ou d’un graphiste, mais parfois, dans le cas d’une startup early stage ou d’une activité indépendante, vous devrez faire preuve de polyvalence et trouver une solution par vous-même.
Dans cet article, je vais vous partager ma méthode qui me semble assez courante aujourd’hui et surtout accessible pour un UX designer ou un chargé de communication avec des compétences de base en graphisme. Ce n’est qu’une façon de faire qui me correspond, vu que j’ai plus d’affinités avec Illustrator qu’avec Photoshop.
I ) La photo n’est pas flexible, c’est là son moindre défaut
Plusieurs solutions existent bien sûr. La première consiste à se rendre régulièrement auprès de vos usagers ou des fonctions métiers de votre travail pour prendre des photos en espérant couvrir tous vos usages. La deuxième consiste à chercher sur les bases d’images libres de droit comme Pexel ou Pixabay pour trouver la perle rare au petit bonheur la chance.
Malheureusement, la photo choisie ne s’adaptera pas toujours à vos contraintes de format puisqu’elle n’est pas responsive.
Ainsi, lorsque la photo que vous cherchez est la bannière ou la vignette de votre page, elle aura une forte contrainte de format pour s’adapter aux différents contexte. Si vous devez réutiliser l’image pour un format complètement différents, il vous faudra refaire le travail de recherche. Alors bien sûr, il est possible de déformer une photo grâce à Photoshop mais le résultat ne sera pas propre sans une bonne maîtrise.
Enfin, cela peut sembler un détail, mais la photo représentant la réalité, elle est connectée à un événement, à une date, à un contexte, voire des personnes et leurs égos. Elle sera moins flexible qu’une illustration par nature abstraite et beaucoup plus facile à mettre à jour. Certes, on perdra de la vivacité et une chaleur toute humaine, mais l’image se mettra d’autant plus au service du texte.
II ) Composez vos illustrations comme si c’était des Lego
Le vectoriel, et notamment les illustrations en kit, ou component-based, est quant à lui beaucoup plus flexible que les photos puisque vous pouvez aisément ré-agencer les éléments pour étirer votre composition ou modifier les couleurs pour coller à votre charte graphique.
Une illustration component-based, comme son nom l’indique, est composée d’éléments que l’on agence simplement pour faire une composition. Les composants peuvent être vos créations, ou vous pouvez tout bonnement aller les chercher sur internet sur des sites comme Noun Project pour les icônes, ou Freepik pour les illustrations. Vous n’aurez plus qu’à les ouvrir dans votre logiciel vectoriel préféré pour pouvoir les modifier et les agencer à l’envie.
Si Illustrator reste l’outil vectoriel de référence, vous pouvez également utiliser Figma. Toutefois, la majorité des fichiers vectoriels des banques d’images seront sous format .ai ou .eps qui ne sont pas lus par Figma. Vous pouvez contourner cette contrainte en les convertissant en .svg via Convertio.
Il faudra faire un choix de perspective pour des questions de cohérences. Pour mon travail d’illustrations chez Stormz, j’avais besoin de montrer de grandes scènes avec de nombreuses personnes, ce qui m’a poussé à choisir la perspective isométrique qui présente l’avantage de montrer tous les éléments à la même échelle et ce, qu’importe leur éloignement. Il m’a suffit de chercher “isometric” sur Freepik pour trouver un large choix d’éléments gratuits.
Par exemple, si l’on veut faire une illustration d’un petit article convivial, il suffit de récupérer quelques illustrations de bonhommes, quelques bulles, un café et de les agencer dans le bon ordre. Au fond, c’est de la mise en scène puisqu’il s’agit juste de déplacer des éléments comme on jouerait avec des poupées ou des Legos pour composer son illustration.
N’hésitez pas à jouer avec l’absurde et à vous autoriser des raccourcis bien pratiques avec la réalité pour montrer chaque détail à la taille qui vous arrange. Rien ne vous empêche de mettre plusieurs personnages autour d’un café géant pour signifier la convivialité.
Une illustration comme celle-là vous permet d’offrir beaucoup de clefs de compréhension, puisque vous pouvez ajouter des icônes dans les bulles pour signifier des concepts plus abstraits comme le Big Data, le WiFi, le doute ou l’enseignement.
Vous aurez un contrôle beaucoup plus poussé de ce qui apparaît dans votre image pour diriger le regard de votre lecteur, donner une couche de sens additionnelle, apporter des détails ou offrir une respiration au lecteur. Vous pourrez également gérer le format en écartant simplement les personnages voire en ajoutant des éléments de décors en fond.
III ) Des illustrations adaptées au Design System
Ce contrôle sur chaque élément d’une illustration vous permet même d’aller un cran plus loin en appliquant les règles du Design System comme le montre parfaitement Rizki Mardita dans sa série d’articles qui m’a beaucoup inspiré. Des outils comme Sketch ou Figma vous permettent d’avoir une des librairies pour chaque composant ou caractéristique et de les changer à volonté.
C’est vraiment le travail de Pablo Stanley sur Humaaan qui m’a fait prendre conscience de la puissance de cette approche pour réaliser une série d’illustrations pour un site ou un jeu de cartes.
En plus de cela, Pablo Stanley a eu la générosité de mettre le fichier .sketch à disposition ainsi que d’autoriser largement son usage sous la licence 4.0 . Vraiment, jetez un oeil au fichier et à sa structure, c’est une révolution dans la manière de penser la conception d’une illustration et cela pourra vous être très utile pour créer votre propre système illustratif.
Dans le même genre, vous pouvez admirer le travail de Katerina Limpitsouni via son projet UnDraw qui vous offre une multitude d’illustrations toutes faites et modifiables à l’envie puisque c’est également sous une licence permissive. Elle a également créé un plugin pour Adobe XD que je n’ai pas encore eu l’occasion de tester, mais qui va à priori moins loin que Humaaans et se concentre sur l’adaptation des illustrations à la gamme de couleur de vos compositions.
Conclusion
Vous n’êtes pas seul au moment d’illustrer vos travaux et nous avons la chance aujourd’hui de pouvoir nous dresser sur les épaules de géant de nos prédécesseurs. L’illustration component-based vous permet de construire sur ce qui a été déjà fait (en faisant attention aux licences) pour être toujours plus efficace. Lorsque vous maîtriserez un design system d’illustration, vous pourrez créer des illustrations adhoc en une 30 de minutes et chaque illustration fera grandir votre banque d’image et de possibilité de manière organique.
