Presenteren met infografieken 2/06/2016

Presentatie over: "Presenteren met infografieken 2/06/2016"— Transcript van de presentatie:

1 Presenteren met infografieken 2/06/2016 hilde.vanoverbeke@hogent.be

2 Inspiratie Korte opleiding ‘Infografieken’ bij EduCentrum Gent Tommy Opgenhaffen – leerkracht, studiecoach en auteur van Leren.Hoe?Zo! en Mind the map

3 Deelnemers 3 Welke ervaring heb je? Welke tools gebruik je al? Waarvoor wil je infografieken gebruiken?

4 Overzicht sessie 4 Wat is een infografiek? Waarin schuilt de kracht van een infografiek? Hoe ontwerp je een overtuigende infografiek? Welke digitale tools kun je gebruiken? Aan de slag met Piktochart Aan de slag met infografieken op school

5 1. Wat is een infografiek? 5 http://deredactie.be/cm/vrtnieuws/grafiek/infografiek/1.2250715 een grafische weergave met tekst, afbeeldingen en grafieken om informatie op een heldere manier te communiceren. Bestaan al lang, bv. metronet London Sinds kranten in kleurendruk, bv. weergrafieken Populair sinds sociale media

6 2. Waarin schuilt de kracht? 6  gemakkelijker informatie verwerken en onthouden De aantrekkelijke en kleurrijke design grijpt onze blik. Eyetrack-onderzoek: 87% van de personen die in een krant een infografiek zagen, lazen de bijhorende tekst (anders 41%). Noodzaak om grote hoeveelheden informatie te verwerken + inzicht in verbanden Gemakkelijk online delen en maken

7 2. Waarin schuilt de kracht? (2) 7 Cognitive Load Theory: ons werkgeheugen kan slechts beperkte hoeveelheid info tegelijk verwerken  geheugen min belast. “4 is the magic number” Dual Coding Theory: non-verbaal + verbaal geheugensysteem beide geactiveerd  info-opslag bevorderd. “A picture is worth a thousand words.” Theory of Multimedia Learning: ontwerpprincipes als ‘tekst dicht bij beeld’, ‘geen overbodige informatie’ enz.

8 2. Waarin schuilt de kracht? (3) 8 Een goede infografiek … stuurt de focus van de lezer … de layout creëert flow … is consistent (iconen, titels…) … met goede uitlijning … is makkelijk te scannen

9 3. Hoe ontwerp je een overtuigende infografiek? 9 1.Laat je inspireren www.visual.ly/viewwww.reddit.com/r/Infographics //nl.pinterest.com/binfographics www.coolinfographics.com 2.Maak een lijst met sleutelwoorden over je onderwerp 3.Wat is relevant voor je doelpubliek 4.Zorg voor correcte gegevens, begrijp je gegevens 5.Kies en schets de organisatie van je gegevens: chronologie / proces / geografisch / vergelijking  zie verder

10 3. Hoe ontwerp je een overtuigende infografiek? (2) 10 6. Kies een grafiektype: bv. http://labs.juiceanalytics.com 7. Bedenk aantrekkelijke visuele metaforen: bv. iets dringends  8. Hou rekening met de gestaltprincipes. Objecten worden als samenhangend waargenomen door: nabijheid / zelfde kleur / kader …

11 3. Hoe ontwerp je een overtuigende infografiek? (3) 11 9.Verzamel visueel materiaal en hou rekening met auteursrechten  Google Afbeeldingen – optie Gebruiksrechten  gratis visuals:1000vectors.com iconfinder.com/free_icons gratisfotodownloaden.be freewebelements.com  gratis visuals maken: pixlr.com

12 3. Hoe ontwerp je een overtuigende infografiek? (4) 12 10.Kies een geschikte tool (aantal iconen, video, samen ontwerpen, interactieve grafieken) 11. Ontwerp je infografiek (stijl en kleur) 12. Vermeld je bronnen en eigen naam 13. Beoordeel je eindresultaat 14. Publiceer of deel

13 Samenvatting stappen 13 1.Inspiratie 2.Gegevens verzamelen 3.Schets ontwerp (structuur, metaforen) 4.Ontwerp in tool (o.a. grafisch materiaal)

14 Structuren om je gegevens te organiseren 14

15 15

16 Structuren om je gegevens te organiseren (2) 16 Gevisualiseerd artikel - aantrekkelijke titel, met foto als achtergrond - intro met titel - max. 4 elementen (ev. meer inhoud via QR) - conclusie - quote - bronnen en auteur

17 Stijl 17 Algemeen - belang van witruimte - belang van uitlijning Kleuren - huisstijl organisatie - beperk je tot 2 à 4 kleuren (werk met tinten) - werk met kleurenschema’s: https://coolors.co/ color.adobe.com/nl/create/color-wheel

18 Samenvatting ontwerptips 18 Goede uitlijning Genoeg witruimte Geen overbodige informatie, niet te veel tekst 4 is the magic number Mooi beeldmateriaal Consistentie in iconen, titels, lettertypes Max. 4 kleuren (bijeenpassende, gebruik tinten) Gevoel samenhang in informatie: nabijheid, zelfde kleur, kader Grootte = belangrijkheid

19 4. Welke digitale tools kun je gebruiken? 19 PiktochartInfogr.am Easel.lyCreately CanvaVisual.ly

20 4. Welke digitale tools kun je gebruiken? (2) 20 Mogelijkheden PiktochartBeperkingen Piktochart Eigen afbeeldingen uploadenNiet opslaan als PDF ClipartNiet privé delen VideoNiet samenwerken Embedden Opslaan als afbeelding Interactieve grafieken

21 5. Aan de slag met Piktochart 21 Maak een account aan Log in Pikto Templates – Infographic Kies een ‘free template’ of Create Your Own Verkenning werkvenster Publish Present

22 6. Aan de slag met infografieken op school 22 Om informatie aan te reiken Om nieuwsgierigheid te prikkelen Visuele ondersteuning van de leerstof Voorkennis activeren Studenten aan het denken zetten Studenten zelf hun verhaal laten vertellen met een infografiek

23 6. Aan de slag met infografieken op school (2) 23 Voorbeelden: - introductie nieuw onderwerp - stof voor discussie Door studenten: - conclusies na discussie - een vakgerelateerd onderwerp voorstellen met online gevonden infografiek -tijdlijn met scharniermomenten voor lesinhoud - studenten stellen zichzelf voor

24 Lijst webadressen 24 Voorbeelden infografieken http://deredactie.be/cm/vrtnieuws/grafiek/infografiek/1.2250715 http://ymkes-infographics.blogspot.be/2014/09/28000-studenten-en-150000- lesuren.html https://www.pinterest.com/pin/216665432050692597/ http://www.hva.nl/binaries/content/assets/programmes/fdmci/hbo- ict/infographic-hbo-ict-def-mrt-2015.xps http://tinyurl.com/hezlhln http://www.tilburgstudentenstad.com/studeren https://www.arteveldehogeschool.be/jaarverslag-2014-0 http://ec.europa.eu/education/library/statistics/erasmus-plus- statistics/index.html http://custom-writing.org/blog/wp-content/uploads/custom- writing.org/2016/03/article3-16.jpg http://www.slideshare.net/fullscreen/tommyopgenhaffen/kcoer16infografieken/3 9

25 Lijst webadressen (2) 25 Voorbeelden infografieken - vervolg http://fullyfeline.com/2013/12/pet-nutrition-101-infographic/ https://shithotinfographics.wordpress.com/2016/02/22/london-vs- paris/ http://visible-learning.org/2013/02/infographic-john-hattie-visible- learing/ http://www.mydigitalmotivation.com/how-to-save-money-with-9- simple-steps-infographic/ http://fundersandfounders.com/how-steve-jobs-started/ https://piktochart.com/blog/layout-6-the-perfect-way-to-visualize- articles/ https://piktochart.com/blog/how-to-transform-text-into-compelling- images-that-tell-a-story/

26 Lijst webadressen (3) 26 Nuttige sites http://www.visual.ly/view http://www.reddit.com/r/Infographics http://nl.pinterest.com/binfographics http://www.coolinfographics.com http://labs.juiceanalytics.com http://1000vectors.com http://iconfinder.com/free_icons http://gratisfotodownloaden.be http://freewebelements.com http://pixlr.com https://coolors.co/ http://color.adobe.com/nl/create/color-wheel http://www.collaborativemediacenter.org/text-manual-piktochart/ http://www.slideshare.net/fullscreen/tommyopgenhaffen/kcoer16infografieken/39

27 hilde.vanoverbeke@hogent.be