Une présentation d'Esther Mc Sween-Cadieux donnée lors d'un atelier de formation sur le transfert de connaissances, organisé le 30 mai 2017 par l'Equipe RENARD.

1. LES PRINCIPES DE BASE
Jessika Huard, Inf. M.Sc
Esther Mc Sween-Cadieux, cand. Ph.D.
INFOGRAPHIES

2. HORAIRE
10H -10H30 INFOGRAPHIES
PRINCIPES DE BASE + EXEMPLES
PIKTOCHART
EXPLORATION DES FONCTIONS
10h30 - 12H
EXERCICE PRATIQUE12H - 13H

3. +
=
INFOGRAPHIES 2015
INFOGRAPHIES 2016
MEILLEURES

4. 10% 80%20%
LES ÉTUDES MONTRENT QU'ON SE SOUVIENT DE:
De ce qu'on entend De ce qu'on lit De ce qu'on voit
ou fait

5. Nous sommes exposés à«While the attention
spans of Internet page
visitors are diminishing,
expectations for quick
and compelling content
are increasing. Users
not only want to be able
to parse information at
lightning speed...
They demand an
enjoyable experience
doing so!»
5X
plus d'informations qu'en 1986
1986
2014

6. Selon les chercheurs,
l'aspect visuel et les
couleurs augmentent
la volonté de lire un
document par
80%
plus de chances d'être
partagée sur les
réseaux sociaux qu'un
contenu textuel...
40X
Une infographie a

7. Une infographie
doit être autant
attirante visuellement
que facile à suivre
Attirer
l'attention!
Retenir
l'attention!

8. QU'EST-CE QUI FAIT UNE BONNE INFOGRAPHIE?
Daniel Zeevi (DASHBURST)

9. ComparaisonArticle visualisé
Flowchart Ligne du temps
Liste Visualisation de données
PLUSIEURS TYPES D'INFOGRAPHIES

10. DATA
VISUALISATION
SITE WEB

11. UTILISER PIKTOCHART
Pour vos présentations orales et attirer l'attention!
Pour réaliser vos affiches et impressionner!
Pour diffuser vos résultats sous forme d'infographie!
Exemple
1
Exemple
2
Exemple
1
Exemple
2
Exemple
1
Exemple
2

12. SOYEZ CRÉATIFS !

13. 1 PRÉPARER L'INFORMATION
FAIRE DES
CHOIX
IDÉES
IMPORTANTES
MESSAGES
CLÉS
PENSER AU
PUBLIC

14. Fusce purus neque, auctor eget turpis a, hendrerit tincidunt tortor.
Morbi lobortis lorem eget sem cursus molestie. In sodales lobortis lorem nec varius. Aenean mollis sagittis ipsum ut
fringilla. Nam ligula quam, aliquam vitae dui vel, dapibus cursus leo. Fusce a nibh odio. Etiam tempor auctor
efficitur.Fusce purus neque, auctor eget turpis a, hendrerit tincidunt tortor. Morbi lobortis lorem eget sem cursus
molestie. In sodales lobortis lorem nec varius. Aenean mollis sagittis ipsum ut fringilla. Nam ligula quam, aliquam vitae
dui vel, dapibus cursus leo. Fusce a nibh odio. Etiam tempor auctor efficitur.
Ibh odio. s neque, auctor eget turpis a, hendrerit tincidunt tortor. Morbi lobortis lorem eget sem cursus molestie. In
sodales lobortis lorem nec varius. Aenean mollis sagittis ipsum ut fringilla. Nam ligula quam, aliquam vitae dui vel,
dapibus cursus leo. Fusce a nibh odio. Etiam tempor auctor efficitur.
Morbi lobortis lorem eget sem cursus molestie. In
sodales lobortis lorem nec varius. Aenean mollis sagittis
ipsum ut fringilla. Nam ligula quam, aliquam vitae dui vel,
dapibus cursus leo. Fusce a nibh odio.
50-60 CARACTÈRES PAR LIGNE!
LES LONGUES LIGNES.....
LIMITER LE TEXTE!

15. QUI EST LE PUBLIC CIBLE?

16. 2RACONTER UNE HISTOIRE!
Guider le lecteur à travers votre
raisonnement. Présenter les informations
de façon logique selon un fil continu.
Organiser à l'avance l'emplacement de
chaque information pour avoir un portrait
global.
Il faut que le tout ait un sens, une cohérence
pour retenir l'attention du lecteur!

22. METTRE EN VALEUR LES POINTS CLÉS!
Selon le plus récent recensement du Canada, 1 famille sur 4 gagnerait annuellement moins de
12 000$
Les familles recrutées dans l'étude étaient constituées de 2 adultes et 3 enfants
3

23. METTRE EN VALEUR LES POINTS CLÉS!
ON PEUT FACILEMENT JOUER AVEC LA TAILLE
DES ÉLÉMENTS POUR CRÉER
3
L'EFFETPERCUTANT RECHERCHÉ!

24. CHOISIR LES COULEURS
4

25. LIMITER VOUS À
2 COULEURS.
ET JAMAIS PLUS
QUE 4...
CHOISIR 1 OU 2
COULEURS
PRINCIPALES
SEULEMENT!!
TENTEZ D'EN
AJOUTER UNE?
NON! UTILISER
LES TEINTES...

26. CHOISIR D'ABORD UNE COULEUR «PUNCHÉE»!
CHOISIR UNE COULEUR TRÈS FONCÉE
DÉCLINER LA COULEUR FONCÉE EN UNE TEINTE
PLUS PÂLE
CHOISIR UNE COULEUR NEUTRE ET PÂLE POUR
METTRE SUR LES FONDS FONCÉS!

27. POUR AVOIR DE L'AIDE: https://coolors.co/browser
http://www.color-hex.com/

28. SITE WEB POUR TROUVER LES NUANCES D'UNE COULEUR

29. TROUVER LES
CODES DE
COULEUR À
PARTIR D'UNE
IMAGE
http://html-color-
codes.info/colors-
from-image/

30. N'OUBLIEZ PAS LE CONTRASTE
À NE PAS FAIRE!!
BEAUCOUP MIEUX!!!!

31. TRÈS DIFFICILE À LIRE...
AJOUT D'UN FILTRE!

32. 5
CHOISIR LES POLICES
Limite de 2 (ou 3) polices de caractères
J'AIME CETTE POLICE! EN CHOISIR UNE
Morbi lobortis lorem eget sem cursus molestie. In
sodales lobortis lorem nec varius. Aenean mollis
sagittis ipsum ut fringilla. Nam ligula quam, aliquam
vitae dui vel, dapibus cursus leo. Fusce a nibh odio.
Etiam tempor auctor efficitur.
ET L'UTILISER DIFFÉREMMENT
Morbi lobortis lorem eget sem
cursus molestie. In sodales lobortis
lorem nec varius.
essayer même l'italique!

33. 5
CHOISIR LES POLICES
Choisir une police plus
«imposante» pour les titres
CECI EST UN TITRECECI EST UN TITRE
Fusce purus neque, auctor eget turpis
a, hendrerit tincidunt tortor.
Morbi lobortis lorem eget sem cursus
molestie. In sodales lobortis lorem nec
varius. Aenean mollis sagittis ipsum ut
fringilla. Nam ligula quam, aliquam
vitae dui vel, dapibus cursus leo. Fusce
a nibh odio. Etiam tempor auctor
efficitur.
Fusce purus neque, auctor eget turpis a,
hendrerit tincidunt tortor.
Morbi lobortis lorem eget sem cursus
molestie. In sodales lobortis lorem nec
varius. Aenean mollis sagittis ipsum ut
fringilla. Nam ligula quam, aliquam vitae
dui vel, dapibus cursus leo. Fusce a nibh
odio. Etiam tempor auctor efficitur.

34. Mauvais choix de policeCar n'exprime pas assez bien le thème...

35. C'EST IMPORTANT
Que la police soit en harmonie avec le design

37. L'art de
combiner les
polices...

38. 6 CHOISIR UN STYLE D'ALIGNEMENT
L'alignement à gauche se lit plus facilement.
Toutefois, les autres styles peuvent être
intéressants selon la présentation

40. LAISSER L'INFO RESPIRER!
Utiliser intelligemment les espaces vides, utiliser le blanc.
7
Si votre contenu respire, le lecteur aussi! Pensez à lui...

43. UTILISATION
VRAIMENT MAUVAISE
DE L'ESPACE BLANC!!
ESPACE BLANC
- AMÉLIORE LA FACILITÉ DE LECTURE
- DIRIGE L'OEIL VERS LES POINTS CLÉS

44. 8 SOYEZ OBSESSIF AVEC L'ALIGNEMENT!
Un contenu désorganisé semble chaotique et n'est pas agréable à
l'oeil. Le lecteur risque d'abandonner rapidement...

45. 9
SURTOUT,
SOYEZ
CONSISTANT.
POUR PLUS
D'ICÔNES:
FLAT ICON!

46. CHOISIR LES ICÔNES EN FONCTION
DES COULEURS

47. 10 EXPLOITER LE LOGICIEL ET INNOVER!
Utiliser des PHOTOS
des CARTES
des GRAPHIQUES
des ICÔNES pour parler de
différents sujets..
Milieu rural
des mères vivant en milieu rural en
Afrique n'accouchent pas dans un
centre de santé....
50%

52. FEUILLET D'INFORMATION
DONNÉES DE SANTÉ

53. 11 PRENDRE UNE PAUSE...
RELISEZ-VOUS!
ET SURTOUT DEMANDER
L'AVIS DE VOS PAIRS!
Il est important que d'autres personnes approuvent votre conception
Il ne faudrait pas que vous soyez les seuls à comprendre votre
infographie...!

54. LOGICIELS
Faciles à utiliser, en ligne et version gratuite ou abordable
Piktochart
Infogr.am
Easel.ly
Canva
Prezi
VISME

55. SURVOL DU LOGICIEL

56. À VOS ÉCRANS!
CONNECTEZ-VOUS
WWW.PIKTOCHART.COM

57. FONCTIONS IMPORTANTES
SUR PIKTOCHART
Vous pouvez chercher des icônes par mots-clés (ex: hospital,
medical, women...) dans la case SEARCH.
Seulement les icônes en NOIR peuvent changer de couleur.
Pour agrandir proportionnellement des icônes, ou images, ou
formes, il suffit de tenir la touche SHIFT enfoncée en
agrandissant le bloc.
Si vous cherchez une couleur qui ne se trouve pas dans la liste
proposée dans le menu du haut. Allez sur ce site:
https://coolors.co/ et copier/coller le numéro HEX VALUE dans
l'espace désigné COLOR.
Sur PikToChart, ça fonctionne par blocs. Vous pouvez ajouter
ou supprimer des blocs de votre projet en cliquant sur un bloc
et ensuite, dans la barre qui apparait à la gauche immédiate du
bloc, cliquez sur le + ou le X. Chaque bloc peut représenter une
diapo, ou vous permettre de séparer vos informations.
BLOCS
ICONS
SIZE
COLORS

58. Allez dans la barre en haut à l'extrême droite et cliquez sur
DOWNLOAD pour télécharger le projet en format JPEG
ou PNG. Si vous faites une présentations, cliquez sur
SHARE toujours à droite, mettez votre projet en version
PUBLIC et ouvrez le lien qui apparait sur l'internet.
Ensuite, cliquez sur PRESENT en haut à droite!
Pour avoir une idée générale de ce que vous êtes entrain de
faire (ZOOM OUT), cliquez sur CMD/- (MAC) ou CTRL/- (PC).
Même chose en cliquANT sur le + pour revenir à 100%.
Pour ajouter un hyperlien, sélectionner un icône ou un bloc de
texte et cliquez sur la touche LINK dans la barre du haut et
coller le lien internet.
Vous pouvez nommer votre projet dans la barre du haut, à
côté de la cloche.
Pour réduire l'opacité, il faut diminuer le 100% en cliquant sur
la touche dans la barre du haut OPACITY (quadrillage)
OPACITY
DOWNLOAD
ZOOM
LINKS
NAME

59. RÉFÉRENCES
HubSpot: The Science Behind Why Our Brains
Crave Infographics (In an Infographic) par Jami
Oetting
PikToChart Blogs: How to Present Complex Data
Using Infographics (with Examples) ; Seeing is
Believing: 5 Studies about Visual Information
Processing ; Making the Most of Your Presentation
with Piktochart ; et encore plus...!
HubSpot & PikToChart: THE ANATOMY OF A
WINNING InfographIc