Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction à la réalisation d'infographies

1,099 views

Published on

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.

Published in: Education
  • Be the first to comment

Introduction à la réalisation d'infographies

  1. 1. LES PRINCIPES DE BASE Jessika Huard, Inf. M.Sc Esther Mc Sween-Cadieux, cand. Ph.D. INFOGRAPHIES
  2. 2. HORAIRE 10H -10H30 INFOGRAPHIES PRINCIPES DE BASE + EXEMPLES PIKTOCHART EXPLORATION DES FONCTIONS 10h30 - 12H EXERCICE PRATIQUE12H - 13H
  3. 3. + = INFOGRAPHIES 2015 INFOGRAPHIES 2016 MEILLEURES
  4. 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. 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. 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. 7. Une infographie doit être autant attirante visuellement que facile à suivre Attirer l'attention! Retenir l'attention!
  8. 8. QU'EST-CE QUI FAIT UNE BONNE INFOGRAPHIE? Daniel Zeevi (DASHBURST)
  9. 9. ComparaisonArticle visualisé Flowchart Ligne du temps Liste Visualisation de données PLUSIEURS TYPES D'INFOGRAPHIES
  10. 10. DATA VISUALISATION SITE WEB
  11. 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. 12. SOYEZ CRÉATIFS !
  13. 13. 1 PRÉPARER L'INFORMATION FAIRE DES CHOIX IDÉES IMPORTANTES MESSAGES CLÉS PENSER AU PUBLIC
  14. 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. 15. QUI EST LE PUBLIC CIBLE?
  16. 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!
  17. 17. 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
  18. 18. METTRE EN VALEUR LES POINTS CLÉS! ON PEUT FACILEMENT JOUER AVEC LA TAILLE DES ÉLÉMENTS POUR CRÉER 3 L'EFFETPERCUTANT RECHERCHÉ!
  19. 19. CHOISIR LES COULEURS 4
  20. 20. 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...
  21. 21. 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!
  22. 22. POUR AVOIR DE L'AIDE: https://coolors.co/browser http://www.color-hex.com/
  23. 23. SITE WEB POUR TROUVER LES NUANCES D'UNE COULEUR
  24. 24. TROUVER LES CODES DE COULEUR À PARTIR D'UNE IMAGE http://html-color- codes.info/colors- from-image/
  25. 25. N'OUBLIEZ PAS LE CONTRASTE À NE PAS FAIRE!! BEAUCOUP MIEUX!!!!
  26. 26. TRÈS DIFFICILE À LIRE... AJOUT D'UN FILTRE!
  27. 27. 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!
  28. 28. 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.
  29. 29. Mauvais choix de policeCar n'exprime pas assez bien le thème...
  30. 30. C'EST IMPORTANT Que la police soit en harmonie avec le design
  31. 31. L'art de combiner les polices...
  32. 32. 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
  33. 33. LAISSER L'INFO RESPIRER! Utiliser intelligemment les espaces vides, utiliser le blanc. 7 Si votre contenu respire, le lecteur aussi! Pensez à lui...
  34. 34. UTILISATION VRAIMENT MAUVAISE DE L'ESPACE BLANC!! ESPACE BLANC - AMÉLIORE LA FACILITÉ DE LECTURE - DIRIGE L'OEIL VERS LES POINTS CLÉS
  35. 35. 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...
  36. 36. 9 SURTOUT, SOYEZ CONSISTANT. POUR PLUS D'ICÔNES: FLAT ICON!
  37. 37. CHOISIR LES ICÔNES EN FONCTION DES COULEURS
  38. 38. 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%
  39. 39. FEUILLET D'INFORMATION DONNÉES DE SANTÉ
  40. 40. 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...!
  41. 41. LOGICIELS Faciles à utiliser, en ligne et version gratuite ou abordable Piktochart Infogr.am Easel.ly Canva Prezi VISME
  42. 42. SURVOL DU LOGICIEL
  43. 43. À VOS ÉCRANS! CONNECTEZ-VOUS WWW.PIKTOCHART.COM
  44. 44. 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
  45. 45. 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
  46. 46. 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

×