3 façons de concevoir une infographie qui se démarque de la foule
Les infographies ne sont pas nouvelles. Et certainement, les interactifs ne sont pas non plus, mais avec le lancement de nouveaux sites de nouvelles axés sur les données tels que Vox,Cinquante-huitième et Le coup de pouce , ils deviennent plus populaires.
Et comme les utilisateurs voient ces infographies sur des tablettes, des téléphones et des ordinateurs de bureau, la création de ces graphiques en HTML5 est la voie à suivre, ce que vos clients et vos collègues vous demanderont de construire!
UNE carte des fans de baseball par The Upshot
Voici trois façons de vous assurer que vos infographies interactives basées sur HTML5 dépassent les limites.
1) Pensez à la raison pour laquelle vous faites l’infographie en premier lieu en utilisant la méthode FIRED
Avant même de penser à la technologie, il est important de penser au graphique du point de vue d’un spectateur. Bien que HTML5 vous offre un tout nouveau moyen de présenter l’histoire de vos données, il ne donne pas automatiquement un sens ou une explication à la pièce.
Il est évident qu’un projet a été réalisé à la dernière minute, sans égard à la facilité d’utilisation ou à la qualité. Comment évitez-vous de faire ce travail? J'aime utiliser la méthode "FIRED", un moyen facile de penser de façon critique avant de commencer à utiliser les dernières astuces CSS pour créer une carte interactive:
- Fresh - Comment votre design se démarquera-t-il?
- Informatif - Présentez-vous des faits précis et intrigants?
- Pertinent - Vos informations racontent-elles une histoire harmonieuse?
- Divertir - Le spectateur est-il attiré et enthousiaste à l'idée de faire partie de votre histoire?
- Différent - Votre infographie est-elle nouvelle? A-t-il été fait avant?
En posant ces questions, vous pourrez définir les objectifs de votre page et comment vous voulez que votre message touche votre public. En fin de compte, votre produit final devrait encadrer votre idée de manière claire et acceptable. Soyez créatif, oui, mais soyez aussi discipliné. L'art graphique est ce qui devrait attirer le lecteur, mais les données présentées doivent être succinctes. ne laissez pas le support dépasser le message. Une infographie réussie attire votre audience pour plus d’informations et est facile à digérer.
2) Faites le bouger
Adobe Edge Animate est un outil d'animation HTML5 qui vous permet d'ajouter du mouvement aux graphiques Web, ce qui vous permet d'étendre vos conceptions personnalisées avec interactivité et mouvement. Il s'intègre également à d'autres outils de création pour offrir une passerelle transparente entre le design et le HTML au fur et à mesure que vous créez pour le Web. Il y a de très bons modèles et échantillons sur le page vitrine pour commencer. Si vous voulez aller plus loin et ajouter des éléments tels que des récureurs à glissière cliquables, voici une tutoriel avec des actifs pour commencer.
Vous pouvez également intégrer des graphiques interactifs qui exploitent les dernières mises à jour de navigateur pour CSS et HTML5 afin de créer des effets fantaisistes. CSS Shapes est dans ses dernières étapes de spécification; Vérifiez-le (Repo Github ici ).
le évolution du web infographie
3) Données, données, données
Une infographie n'est rien sans des sources de données puissantes et les outils pour les illustrer.
Les sources de données peuvent varier, que ce soit votre propre recherche ou celle de vos clients. Il y a aussi une bonne liste sur Quora of jeux de données accessibles au public cela peut vous donner quelques bonnes données brutes pour jouer avec.
Certains de mes services d'infographie préférés (qui fournissent tous les produits HTML5, bien sûr) pour collecter et évaluer vos données sont les suivants:
- Piktochart - un service gratuit (avec une option payante) offrant un large éventail de thèmes personnalisables avec un utilitaire d'importation de données sophistiqué.
- infogr.am - un service gratuit (avec option payante payante) proposant des modèles, des feuilles de calcul et d'autres utilitaires pour créer des graphiques visuels.
- visuellement - une communauté graphique. Alors que le prix de visual.ly peut sembler un peu élevé (ils vous feront une infographie basée sur un dossier créatif à partir de 999 $), leur communauté est un havre d’inspiration lorsque vous cherchez à lancer votre propre projet d’infographie.
Et si vous êtes particulièrement ambitieux et que vous souhaitez vraiment vous plonger dans le domaine plus vaste de la science des données, il existe une tonne de ressources en ligne sur le sujet. Il y a des MOOCs comme ça cours de science des données de l'Université de Washington.