The Do’s And Don’ts Of Infographic Design

• About The Author
• Plus de lecture sur SmashingMag:
• Envelopper votre esprit autour de Data Viz et de la conception d’infographies
• Show, Don’t Tell
• Si le client voulait un tableau Excel, il n’aurait pas besoin de vous
• La typographie ne doit pas être une béquille
• La typographie a sa place
• Organisation et storyline
• Transformer l’infographie
• Repenser en dehors de la boîte
• Dire une histoire
• Visualisez l’accroche
• Nettoyer les choses avec de la couleur
• La rendre universelle
• Une palette de trois couleurs est facile à regarder
• Utiliser les outils à votre disposition
• Pensées finales

About The Author

Amy Balliett is the co-founder of Killer Infographics, an infographic design agency located in Seattle, WA. Killer Infographics began as Submit Infographics, a …More aboutAmy↬

Note de l’éditeur : Vous pourriez vouloir lire l’article de Nathan Yau intitulé The Do’s And Don’ts Of Infographic Design : Revisited ici sur Smashing Magazine qui est une réponse à cet article.

Depuis l’aube d’Internet, la demande pour un bon design a continué à monter en flèche. Du Web 1.0 au Web 2.0 et au-delà, les designers sont restés sur leurs gardes pour définir les tendances et les attentes de notre univers en ligne. L’internet est un formidable terrain de jeu pour les concepteurs, et les entreprises en ligne apprécient de plus en plus les avantages d’une image bien conçue. Au cours des deux dernières années, ce fait est devenu l’épine dorsale d’une tendance croissante du marketing en ligne : l’infographie.

Les infographies sont des représentations visuelles d’informations, ou « data viz » comme les jeunes cool l’appellent de nos jours. Le terme « data viz » vient de « data visualization », qui implique que des ensembles de données seront affichés d’une manière unique qui peut être vue, plutôt que lue. Cette visualisation ne doit pas être laissée à l’interprétation, elle doit au contraire être conçue de manière à fournir une conclusion universelle à tous les spectateurs. Dans les termes les plus simples, les infographies ne sont pas trop différentes des diagrammes et des graphiques que des programmes comme Excel crachent depuis des années.

Plus de lecture sur SmashingMag:

• Des exemples captivants de conception d’infographies interactives
• Ressources sur la visualisation de données et les infographies
• Imaginez un graphique circulaire piétinant une infographie pour toujours
• S’amuser avec la physique dans la visualisation de données

Bien sûr, tout comme le Web 2.0 a changé le 1.0, les infographies d’aujourd’hui sont bien plus accrocheuses que de simples camemberts et graphiques à barres. Aujourd’hui, les infographies compilent de nombreuses visualisations de données différentes en une seule pièce cohésive de « bonbons pour les yeux ». Elles ont évolué avec les tendances du design, ont reçu quelques liftings créatifs, et l’Internet se remplit désormais d’informations intéressantes délivrées de manière captivante.

Alors que certaines tendances du design vont et viennent, les infographies sont là pour rester. Avec des marques comme USA Today, le New York Times et Google et même le président Obama qui s’y rallient, les infographies deviennent un outil puissant pour diffuser d’énormes quantités d’informations aux masses. Les entreprises, grandes et petites, utilisent les infographies pour développer leurs marques, éduquer leur public et optimiser leur classement dans les moteurs de recherche en créant des liens. C’est pourquoi il est indispensable d’apprendre à concevoir une bonne infographie, et éviter les pièges courants de la conception d’infographies pourrait faire la différence entre décrocher un gros client et le perdre entièrement.

Envelopper votre esprit autour de Data Viz et de la conception d’infographies

Concevoir une infographie n’est pas la même chose que concevoir un site Web, un dépliant, une brochure, etc. Même certains des meilleurs designers, avec des portfolios qui vous feraient saliver, ne peuvent pas exécuter un design d’infographie efficace. La création d’infographies est un défi et requiert un état d’esprit qui n’est pas naturel pour tout le monde. Mais cet état d’esprit peut être acquis par la pratique et en s’en tenant à certaines normes, dont la plus importante est de respecter et de comprendre le viz de données. Voici quelques règles simples à suivre pour envelopper votre esprit d’un viz de données approprié.

Show, Don’t Tell

Une règle du cinéma est de montrer, ne pas dire. Il en va de même pour la conception d’infographies. La base de toute bonne infographie est la viz de données. En tant que concepteur d’infographie, vous pouvez ou non déterminer le concept et compiler toutes les recherches pour le design final, mais dans tous les cas, vous êtes responsable de la transformation de ces informations en un design visuellement stimulant et cohérent qui raconte une histoire et qui ne manque pas une seule occasion de visualiser des données. Prenez par exemple cette partie d’une infographie sur Twitter réalisée par ViralMS :

Qu’est-ce qui ne va pas avec cette infographie ? Elle enfreint d’emblée la première règle. Lorsque vous avez l’occasion de présenter des informations visuellement, saisissez-la. Ici, les tweets par seconde auraient au moins pu être représentés par un graphique à barres. Cela permettrait à quelqu’un de regarder rapidement cette section et de voir ce qui se passe ; en voyant les différentes hauteurs des barres, l’œil aurait pu rapidement jauger les différences de tweets par seconde par événement sans avoir à lire quoi que ce soit.

Si vous avez du mal à respecter cette règle, essayez de garder tout votre texte sur une seule couche de votre fichier AI (à l’exclusion du texte à l’intérieur des diagrammes et des graphiques). De temps en temps, désactivez la couche de texte et voyez si l’infographie a toujours un sens. S’il n’y a pas de viz de données, ou si un tas d’images manquent de contexte, alors vous en faites trop pour raconter et pas assez pour montrer.

Si le client voulait un tableau Excel, il n’aurait pas besoin de vous

Cela peut paraître dur, mais c’est vrai. Si les infographies étaient aussi simples que la disposition d’un tas de tableaux et de graphiques standard sur une page, alors les clients n’auraient pas besoin de rechercher de grands designers. Il existe de nombreux outils en ligne qui permettent de créer des camemberts, des graphiques linéaires et des graphiques à barres colorés, mais vous devez passer au niveau supérieur pour que votre conception se démarque. En prenant les données ci-dessus, lequel des deux graphiques ci-dessous rendrait, selon vous, un client plus heureux ?

Si vous avez répondu le graphique B, vous avez compris. Bien sûr, toutes les données ne se prêtent pas à des graphiques créatifs et uniques. Le graphique A pourrait très bien fonctionner si le reste de l’infographie partageait une esthétique similaire. Parfois, il faut juste serrer les dents et produire un graphique à barres ou un graphique circulaire traditionnel ; néanmoins, il faut toujours envisager des moyens de l’habiller, comme dans les exemples ci-dessous :

La typographie ne doit pas être une béquille

La typographie peut faire ou défaire un design, mais elle ne doit pas être la solution à un problème de data viz. Le plus souvent, les concepteurs commencent une infographie avec beaucoup d’énergie et d’excitation, mais ils s’essoufflent rapidement en poursuivant la page. Cela conduit souvent à des décisions rapides et à de mauvaises solutions, comme l’utilisation de la typographie pour montrer un grand nombre au lieu de le visualiser d’une manière ou d’une autre. Voici un exemple:

À chaque fois que je vois ça, ça me rappelle la campagne publicitaire « Where’s the beef ? », et je me dis « Where’s the data viz ? ». Bien que Sketch Rockwell soit l’une de mes polices de caractères préférées de tous les temps, c’est un exemple parfait de trop compter sur la typographie.

Chaque fois qu’un chiffre de recherche vous est fourni pour une infographie, demandez-vous comment il peut être visualisé. Les pourcentages peuvent toujours être visualisés avec des camemberts créatifs ; les valeurs numériques d’un ensemble peuvent généralement être transformées en un graphique à barres unique ; et lorsque les chiffres ne correspondent pas à une échelle cohérente, vous pourriez être en mesure de les visualiser dans un diagramme. Voici une autre façon dont les données ci-dessus auraient pu être visualisées:

La typographie a sa place

Tout cela étant dit, la typographie a ses usages, qui ne doivent pas être ignorés lors de la création d’une infographie. La plupart du temps, vous voudrez concentrer vos énergies typographiques créatives sur les titres et les en-têtes. Le titre de l’infographie est l’occasion parfaite d’utiliser une police amusante et accrocheuse et de lui donner un traitement qui correspond au thème ou au sujet. Veillez simplement à ce que le titre ne soit pas distrayant au point de nous faire perdre de vue la raison pour laquelle nous regardons l’infographie en premier lieu. La vérité est que certains sujets d’infographie sont ennuyeux, mais le bon design du titre peut engager les gens suffisamment pour qu’ils le fassent défiler.

De même, les titres aident à briser une infographie et à rendre les données plus faciles à assimiler, ce qui vous donne une autre chance de laisser flotter votre drapeau de font-nerd.

Organisation et storyline

Organiser une infographie de manière logique et qui maintient l’intérêt du spectateur n’est pas toujours facile, mais cela fait partie du travail de la plupart des concepteurs d’infographies. Généralement, on vous donnera beaucoup de données et vous devrez créer une histoire visuelle à partir de celles-ci. Cela peut être un défi au début, mais vous pouvez suivre quelques règles générales pour faciliter les choses.

Transformer l’infographie

Transformer une infographie vous permet d’élaborer un storyboard et une mise en page pour le design. Vous pouvez avoir une idée de l’histoire que vous voulez raconter, mais lorsque vous commencez à mettre les choses en page, vous pouvez vous heurter à un mur et devoir recommencer. Il est incroyablement frustrant de devoir réorganiser après avoir déjà fait une grande partie du design. Évitez cela en établissant votre scénario dès le début pour déterminer quelles données montrer et comment. Prévoyez une heure pour faire des croquis et vous assurer que tout a un sens. Cela permettra également de s’assurer que la palette de couleurs que vous choisirez attire l’attention sur les points importants et maintiendra l’œil en mouvement vers le bas de la page.

Repenser en dehors de la boîte

Lorsque vous concevrez l’infographie, vous identifierez les ruptures de section qui aideront à raconter l’histoire. La plupart des infographies en ligne ont un flux vertical, dans lequel chaque section a un titre pour la distinguer de la précédente. Cela devient vite ennuyeux. Organiser les données et sectionner les informations sans s’appuyer entièrement sur les titres et les ruptures de couleur est un bon moyen de rompre la monotonie.

Par exemple, plutôt que d’opter pour une mise en page typique sur une colonne, vous pourriez utiliser deux colonnes dans certaines parties. Vous pourriez également rompre les sections avec des bordures, avec des arrière-plans de formes différentes ou donner à l’ensemble du design un thème de route ou de chemin. Voici quelques mises en page sortant des sentiers battus pour faire jaillir votre créativité :

Dire une histoire

Toutes les bonnes histoires ont un début, un milieu et une fin. Les infographies méritent le même traitement. Au début de l’infographie, introduisez le problème ou la thèse. À partir de là, étayez-la avec des données. Enfin, terminez l’infographie par une conclusion.

Visualisez l’accroche

Toute bonne infographie a une accroche ou une prise primaire qui fait dire au spectateur « A-ha ! » En tant que concepteur, vous devez faire de cette accroche le point central du design si possible. Il est généralement préférable de placer l’accroche au centre ou à la fin de l’infographie, afin qu’elle attire davantage l’attention. Donnez aux informations les plus importantes le plus de poids visuel, afin que les spectateurs sachent ce qu’ils doivent retenir. Voici quelques exemples d’accroches bien visualisées:

Nettoyer les choses avec de la couleur

La différence qu’une palette de couleurs peut faire est étonnante, surtout dans le monde des infographies. La bonne palette peut aider à organiser une infographie, à évangéliser la marque, à renforcer le sujet et plus encore. Une mauvaise palette peut transformer un excellent sujet en une horreur, nuire à l’image de la marque et transmettre le mauvais message. Voici quelques conseils à prendre en compte lors du choix des couleurs de votre infographie.

La rendre universelle

Dans la conception Web, il est toujours important de choisir une palette qui correspond au thème du site Web et qui est suffisamment neutre pour un groupe diversifié de visiteurs. Les infographies étant principalement partagées en ligne, choisir la bonne palette pour un éventail de visiteurs est tout aussi important. Vous devez également tenir compte de ce qui a de l’allure en ligne.

Par exemple, les couleurs sombres dominantes et les néons ne se traduisent généralement pas bien sur les infographies ; le néon sur le noir peut être difficile à lire, et s’il y a beaucoup de données, tout absorber sera un défi. Évitez également le blanc comme arrière-plan dans la mesure du possible. Les infographies sont souvent partagées sur plusieurs sites Web et blogs, dont la plupart ont un fond blanc. Si l’arrière-plan de votre infographie est également blanc, il sera difficile de déchiffrer où elle commence et où elle se termine.

Une palette de trois couleurs est facile à regarder

Avec toutes les données qui entrent dans une infographie, assurez-vous que l’œil du lecteur circule facilement sur la page ; une mauvaise palette de couleurs peut être un grand obstacle à cela. Choisissez une palette qui n’agresse pas les sens. Et pensez à le faire avant de commencer la conception, car cela vous aidera à déterminer comment visualiser les différents éléments.

Si choisir une palette de couleurs est difficile pour vous, tenez-vous-en à la règle des trois. Choisissez trois couleurs primaires. Parmi les trois, l’une devrait être la couleur de fond (généralement la plus claire des trois), et les deux autres devraient briser les sections. Si vous devez ajouter d’autres couleurs, utilisez des nuances des trois couleurs principales. Cela permettra de garder la palette cohésive et apaisante, plutôt que de la heurter.

Utiliser les outils à votre disposition

Lorsque vous choisissez des couleurs, vous n’avez pas besoin de réinventer la roue. Un certain nombre d’excellents sites Web existants vous aideront à choisir la bonne palette pour votre infographie. Kuler d’Adobe propose des thèmes frais et une base de données consultable, ainsi qu’un outil facile pour ajuster la palette qui vous intéresse. Un problème avec Kuler est que toutes les palettes ont cinq couleurs, et les couleurs sont parfois de familles complètement différentes, plutôt que des nuances de quelques couleurs primaires, donc trouver la bonne palette peut être comme chercher une aiguille dans une botte de foin.

Un autre outil de sélection des couleurs est COLOURlovers. Cette base de données est plus facile à consulter : elle répartit les palettes en différents thèmes et peut être triée par favoris. Si la plupart des palettes se composent également de cinq couleurs, celles-ci n’ont pas toujours le même poids ; au contraire, l’outil suggère celles qui devraient être dominantes. Voici quelques bonnes et mauvaises palettes pour les infographies:

Pensées finales

Si ces normes sont importantes à prendre en compte pour la plupart des conceptions d’infographies, il arrive parfois qu’une infographie enfreigne toutes ces règles et réussisse quand même immensément bien. En fin de compte, les clients apprécient les « bonbons pour les yeux » et les conceptions qui « sautent » ! Bien que ces termes soient subjectifs (et ennuyeux pour la plupart des concepteurs), nous savons tous reconnaître une infographie de qualité quand nous en voyons une, et vos clients le savent aussi. Utilisez ces règles pour vous guider dans le royaume de l’infographie, mais créez vos propres techniques et normes après avoir acquis une certaine expérience.

(al)

.