La visualisation des données et les infographies n'ont pas 15, mais 200 ans: «The surprising history of the Infographic»! 
​

Infographies : la mise en image de l'information et de la connaissance

Passées des journaux à l'Internet, les infographies captent de plus en plus l’intérêt du public. En une affiche qui se déroule le long de quelques écrans, elles combinent graphiques, chiffres et textes pour communiquer une multitude d’informations de façon concise et imagée. En voici des exemples professionnels (1, 2, 3, 4, 5, 6, 7, 8, puis 10 autres). À votre tour, amenez vos étudiants vers un mode de communication actuel et efficace. Vous pourriez vous prendre vous-même au jeu! 
Photo
Le premier Canva de Gabrielle St-Germain.
Utile à quoi?   
  • Mettre en image des règles, des faits, des données et des propos
  • Comparer deux choses ou prendre position dans un débat
  • Indiquer une démarche ou une procédure
  • Hyperlier le web à partir d'images actives
  • Démontrer les connaissances qu'on a acquises et partager son savoir 
  • Amincir les murs de la classe pour illustrer dans le web ce qu’on y apprend!  Un exemple par les élèves de Gabrielle St-Germain

Un projet idéal : un colloque virtuel où les affiches remplaceraient les communications.


Des tous les outils, Canva est celui qui se démarque: 
  • Parce que les dimensions de l'infographie sont décidées par l'utilisateur
  • Pour la rotation et la superpositions des éléments, ainsi que les jeux de transparence 
  • Pour les polices et la palette de 16 millions de couleurs
  • Pour l'importation facile des images depuis son ordinateur
  • Comme Thinglink ou HTML-map creator (exemples), Canva a des fonctions d'image active (exemples : 1, 2)
  • Il lui manque par contre une banque d'icônes aussi complète que Piktochart. Exemple: 1, 2.
  • Et sur appareil mobile, on choisira plutôt Pic Collage. Exemple de tâche. 


        Canva reste fort. Thot Cursus sont d'accord : ils recensent et adaptent notre procédure!  



Courbe d'apprentissage : moyenne voire facile. Voici une de mes premières créations et celles d'étudiants du collégial :      
 


Des infographies de toutes sortes! 

Une traduction de l'organigramme décisionnel de Bit Rebels nous guidant vers le bon type d'infographie choisir.


​Autres typologies des infographies: 

Démarche de création de Manon Rollin (Collège Nouvelles Frontières) 

Photo

L'infographie qui en résulte, créée avec l'outil Piktochart. Voir aussi cet autre magnifique Piktochart de Manon Rollin.


Photo
Dans leur article, le blogue de design web, Queness élabore aussi sur la recherche d'informations, suivie d'un processus en entonnoir.  
Démarche de création du Récitus
Un aperçu de l'outil Canva... 


Conseils de conception et outils complémentaires
Photo

Un tutoriel Gimp pour détourer les images que vous utiliserez, donnant à vos infographies une allure professionnelle. Cela dit, l'outil de 2019 pour détourer, c'est remove.bg!
Photo

Un outil pour connaître le code HTML des couleurs de vos images pour y harmoniser vos infographies. Cet autre site peut aussi servir.


Photo
Grâce à sa banque d'icônes plus complète, Piktochart est actuellement supérieur à Canva pour les tâches d'explication. Pour palier, 
on y ajoutera celle de Flaticon, assez géniale.





L'outil de nuages de mots Wordart permet d'habiller de mots 
l'icône qu'on lui donne.

 Photo








Une infographie professionnelle de Socially Sorted. Eux soulignent 7 conseils de conception élémentaires comme de garder la palette de couleur et les polices régulières. Cliquez pour l'agrandir. 
Limites de l'outil Canva :
  • L'interface mal adaptée aux écrans de moins de 13".
  • Canva mise sur la photo. Il lui manque les icônes de Piktochart, dont les résultats peuvent être surprenants. Par exemple: 1, 2.
  • Canva ne pardonne pas l'erreur de dimensions. Vous devrez rogner votre infographie dans un autre programme le cas échéant. Décevant.
  • Il s'avère impossible de justifier du texte aux deux marges. S'il le faut, on doit utiliser l'image d'une capture d'écran d'un traitement de texte. 
  • Il n'est pas possible d'intégrer des vidéos. 
  • En publiant en .jpg, les liens web ne seront pas actifs. Si on ne désire pas un PDF, on misera sur les Thinglink ou HTML map creator mentionnés précédemment.
  • Pas de code d'intégration fonctionnel. Les modifications à un design utilisé dans plusieurs pages sont donc compliquées parce qu'il faut tous les remplacer individuellement (l'intégration en embed ou iframe rendrait le tout automatique). 

Des outils plus adaptés pour la visualisation de données, les cartes, les organigrammes décisionnels

Le service public a également recours à Datawrapper.
Outil de Zoom: 
- http://zoom.it/ 

Autre site dressant une liste d'outils:
- http://www.coolinfographics.com/tools/ 


Toujours sur les cartes, on peut apprendre comment y illustrer des statistiques dans ce billet d'un carnet web francophone. 

  • Si le résultat attendu s'apparente davantage à une page web, recourir plutôt à Tackk. Canva est l'outil le plus graphique d'un continuum d'outils intégrables de plus en plus imagés : 
Nom de l'outil

Epad (pas de mise en page)
Google Documents (mise en page)

Google Présentation (traditionnel)
Slidebean (+ design)


Tackk

Canva
 Photo
Fonction

Traitement de texte


Présentation



Page web

Infographie