Embed Size (px)
Citation preview
LES PRINCIPES DE BASELES PRINCIPES DE BASE
Jessika Huard, Inf. M.ScEsther Mc Sween-Cadieux, cand. Ph.D.
INFOGRAPHIESINFOGRAPHIES
HORAIREHORAIRE
10H -10H30 INFOGRAPHIESPRINCIPES DE BASE + EXEMPLES
PIKTOCHARTEXPLORATION DES FONCTIONS
10h30 - 12H
EXERCICE PRATIQUE12H - 13H
+
=
INFOGRAPHIES 2015
INFOGRAPHIES 2016
MEILLEURES
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 voitou fait
Nous sommes exposés à«While the attentionspans of Internet pagevisitors are diminishing,expectations for quickand compelling contentare increasing. Usersnot only want to be ableto parse information atlightning speed...
They demand anenjoyable experiencedoing so!»
5Xplus d'informations qu'en 1986
1986
2014
Selon les chercheurs,l'aspect visuel et les
couleurs augmententla volonté de lire un
document par
80%80%
plus de chances d'êtrepartagée sur les
réseaux sociaux qu'uncontenu textuel...
40XUne infographie a
Une infographie doit être autant
attirante visuellement que facile à suivre
Attirerl'attention!
Retenirl'attention!
QU'EST-CE QUI FAIT UNE BONNE INFOGRAPHIE?
Daniel Zeevi (DASHBURST)
ComparaisonArticle visualisé
Flowchart Ligne du temps
Liste Visualisation de données
PLUSIEURS TYPES D'INFOGRAPHIES
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
SOYEZ CRÉATIFS !
1 PRÉPARER L'INFORMATION
FAIRE DESCHOIX
IDÉESIMPORTANTES
MESSAGESCLÉS
PENSER AUPUBLIC
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 utfringilla. 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 cursusmolestie. 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. Insodales 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. Insodales 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!
QUI EST LE PUBLIC CIBLE?
2RACONTER UNE HISTOIRE!
Guider le lecteur à travers votreraisonnement. Présenter les informationsde façon logique selon un fil continu.
Organiser à l'avance l'emplacement dechaque information pour avoir un portraitglobal.
Il faut que le tout ait un sens, une cohérencepour retenir l'attention du lecteur!
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
METTRE EN VALEUR LES POINTS CLÉS!
ON PEUT FACILEMENT JOUER AVEC LA TAILLEDES ÉLÉMENTS POUR CRÉER
3
L'EFFETPERCUTANT RECHERCHÉ!
CHOISIR LES COULEURS4
LIMITER VOUS À2 COULEURS.
ET JAMAIS PLUSQUE 4...
CHOISIR 1 OU 2COULEURS
PRINCIPALESSEULEMENT!!
TENTEZ D'ENAJOUTER UNE?NON! UTILISERLES TEINTES...
CHOISIR D'ABORD UNE COULEUR «PUNCHÉE»!
CHOISIR UNE COULEUR TRÈS FONCÉE
DÉCLINER LA COULEUR FONCÉE EN UNE TEINTEPLUS PÂLE
CHOISIR UNE COULEUR NEUTRE ET PÂLE POURMETTRE SUR LES FONDS FONCÉS!
POUR AVOIR DE L'AIDE: https://coolors.co/browserhttp://www.color-hex.com/
TROUVER LESCODES DECOULEUR ÀPARTIR D'UNEIMAGE
http://html-color-codes.info/colors-from-image/
N'OUBLIEZ PAS LE CONTRASTEN'OUBLIEZ PAS LE CONTRASTE
À NE PAS FAIRE!!
BEAUCOUP MIEUX!!!!
TRÈS DIFFICILE À LIRE...
AJOUT D'UN FILTRE!
5CHOISIR 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. Insodales lobortis lorem nec varius. Aenean mollis
sagittis ipsum ut fringilla. Nam ligula quam, aliquamvitae dui vel, dapibus cursus leo. Fusce a nibh odio.
Etiam tempor auctor efficitur.
ET L'UTILISER DIFFÉREMMENTMorbi lobortis lorem eget sem
cursus molestie. In sodales lobortislorem nec varius.
essayer même l'italique!
5CHOISIR LES POLICES
Choisir une police plus«imposante» pour les titres
CECI EST UN TITRECECI EST UN TITREFusce purus neque, auctor eget turpis
a, hendrerit tincidunt tortor.
Morbi lobortis lorem eget sem cursusmolestie. In sodales lobortis lorem necvarius. Aenean mollis sagittis ipsum utfringilla. Nam ligula quam, aliquam
vitae dui vel, dapibus cursus leo. Fuscea nibh odio. Etiam tempor auctor
efficitur.
Fusce purus neque, auctor eget turpis a,hendrerit tincidunt tortor.
Morbi lobortis lorem eget sem cursusmolestie. In sodales lobortis lorem necvarius. Aenean mollis sagittis ipsum ut
fringilla. Nam ligula quam, aliquam vitaedui vel, dapibus cursus leo. Fusce a nibh
odio. Etiam tempor auctor efficitur.
Mauvais choix de policeMauvais choix de policeCar n'exprime pas assez bien le thème...Car n'exprime pas assez bien le thème...
C'EST IMPORTANTC'EST IMPORTANTQue la police soit en harmonie avec le designQue la police soit en harmonie avec le design
L'art decombiner lespolices...
6 CHOISIR UN STYLE D'ALIGNEMENT
L'alignement à gauche se lit plus facilement.
Toutefois, les autres styles peuvent êtreintéressants selon la présentation
LAISSER L'INFO RESPIRER!
Utiliser intelligemment les espaces vides, utiliser le blanc.
7
Si votre contenu respire, le lecteur aussi! Pensez à lui...
UTILISATIONVRAIMENT MAUVAISEDE L'ESPACE BLANC!!
ESPACE BLANC- AMÉLIORE LA FACILITÉ DE LECTURE
- DIRIGE L'OEIL VERS LES POINTS CLÉS
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...
CHOISIR LES ICÔNES EN FONCTIONDES COULEURS
10 EXPLOITER LE LOGICIEL ET INNOVER!
Utiliser des PHOTOSdes CARTES
des GRAPHIQUES
des ICÔNES pour parler dedifférents sujets..
Milieu rural
des mères vivant en milieu rural enAfrique n'accouchent pas dans uncentre de santé....
50%
11 PRENDRE UNE PAUSE...
RELISEZ-VOUS!
ET SURTOUT DEMANDERL'AVIS DE VOS PAIRS!Il est important que d'autres personnes approuvent votre conception
Il ne faudrait pas que vous soyez les seuls à comprendre votreinfographie...!
LOGICIELSFaciles à utiliser, en ligne et version gratuite ou abordable
Piktochart
Infogr.amEasel.lyCanva
PreziVISME
SURVOL DU LOGICIELSURVOL DU LOGICIEL
À VOS ÉCRANS!CONNECTEZ-VOUS
WWW.PIKTOCHART.COM
FONCTIONS IMPORTANTESSUR 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, ouformes, il suffit de tenir la touche SHIFT enfoncée enagrandissant le bloc.
Si vous cherchez une couleur qui ne se trouve pas dans la listeproposée dans le menu du haut. Allez sur ce site:https://coolors.co/ et copier/coller le numéro HEX VALUE dansl'espace désigné COLOR.
Sur PikToChart, ça fonctionne par blocs. Vous pouvez ajouterou supprimer des blocs de votre projet en cliquant sur un blocet ensuite, dans la barre qui apparait à la gauche immédiate dubloc, cliquez sur le + ou le X. Chaque bloc peut représenter unediapo, ou vous permettre de séparer vos informations.
BLOCS
ICONS
SIZE
COLORS
Allez dans la barre en haut à l'extrême droite et cliquez surDOWNLOAD pour télécharger le projet en format JPEGou PNG. Si vous faites une présentations, cliquez surSHARE toujours à droite, mettez votre projet en versionPUBLIC 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 defaire (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 detexte et cliquez sur la touche LINK dans la barre du haut etcoller 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 surla touche dans la barre du haut OPACITY (quadrillage)OPACITY
DOWNLOAD
ZOOM
LINKS
NAME
RÉFÉRENCES
HubSpot: The Science Behind Why Our BrainsCrave Infographics (In an Infographic) par Jami
Oetting
PikToChart Blogs: How to Present Complex DataUsing Infographics (with Examples) ; Seeing isBelieving: 5 Studies about Visual Information
Processing ; Making the Most of Your Presentationwith Piktochart ; et encore plus...!
HubSpot & PikToChart: THE ANATOMY OF AWINNING InfographIc
