1-3 Infographic

STAP 1: INFORMATIE VERZAMELEN
Bedenk een aantal onderwerpen die je zou willen gaan gebruiken in je infographic. Dit kan van alles zijn natuurlijk. Bijvoorbeeld muziek, tv-shows, familie, huisdieren, hobby’s etc. Zorg ervoor dat je minimaal 5 onderwerpen hebt.

STAP 2: WIREFRAMES MAKEN
Ga nu je infographic schetsen op papier of in Freehand.
– 1 hoofdscherm
– 5 klikbare elementen op het hoofdscherm
– 5 popup schermen

STAP 3: ONTWERPEN
Maak nu je ontwerp digitaal in Illustrator.
– Bepaal zelf welk formaat je gebruikt (telefoon of tablet formaat)
– Let goed op font gebruik
– Maak zelf illustraties of download vector plaatjes van freepik.com (Let er op dat je een gratis account aan maakt
zodat je 5 downloads per dag hebt.)

Als je je ontwerp af hebt in Illustrator kun je nu gaan beginnen met het interactief maken van infographic. Dit gaan we doen in het programma Adobe XD.

Zoals al eerder aangegeven is dit programma heel handig voor het maken van prototypes van verschillende soorten interfaces. Denk hierbij aan websites, apps etc. Wij gaan het programma nu gebruiken om een interactieve infographic te maken.

OPEN ADOBE XD
Als je XD nog niet hebt gedownload vanuit Creative Cloud moet je dat natuurlijk eerst doen.

Maak nu een nieuw bestand aan. Kijk of het formaat dat je bij illustrator hebt gebruikt er tussen staat, zo niet kies dan voor custom size.

ARTBOARDS AANMAKEN
Als het goed is heb je nu één lege pagina in XD, maar je hebt er natuurlijk meerdere gemaakt in Illustrator. Links bij artboards zie je een opsomming van alle pagina’s die je hebt. Op dit moment dus maar 1.

Als je rechts klikt op dat artboard kun je kiezen voor duplicate. Je kunt besluiten nu dat het werkveld nog leeg is om je arboards al aan te maken zodat je een overzicht hebt.

Zorg ervoor dat je arboards ook allemaal een eigennaam hebben. Dit kun je doen door te dubbelklikken op de naam links in het rijtje onder Artboards of op de naam boven de artboard zelf.

ARTBOARDS VULLEN
Nu ga je je ontwerp overzetten naar XD. Je begint van onder naar boven te werken. Hier wordt mee bedoeld dat wat onderop staat, bijvoorbeeld je achtergrond, eerst wordt geplaatst. Nu kun je in XD ook makkelijk met arrange werken dus als je een keer iets moet weghalen dat achteraan moet komen te staan kun je dat hiermee doen. Rechtsklikken en dan kies je voor een van de 4 opties:

Plaats je complete ontwerp in al je artboards. Je kunt heel makkelijk vanuit Illustrator kopiëren en dan plakken in XD. Je kunt in XD ook plaatjes plaatsen dit gaat op 2 manieren. Je kiest bij File -> Import OF je sleept ze erin vanuit de Finder. Zorg ervoor dat je wel goede HQ plaatjes hebt om te gebruiken.

Als je je artboards nu allemaal klaar hebt komt het moment dat je er een prototype van gaat maken. Je hebt nu in design mode gewerkt, dit kun je bovenin zien. Om een prototype te gaan maken moet je hem nu op Prototype zetten.

Als je dit gedaan hebt, kunnen we nu koppelingen gaan maken van artboard naar artboard.

KOPPELINGEN MAKEN
Zorg ervoor dat je de item selecteert die ervoor zorgt dat je naar een andere artboard kunt gaan.

Er komt een kader omheen en een rondje met een pijltje aan de rechterkant. Zorg ervoor dat je uitgezoomt bent en je al je artboards kunt zien. Nu kunnen we op 2 manieren een koppeling maken.

1. klik op het rondje met het pijltje. Je krijgt nu dit te zien, een kronkeltje met weer een rondje met een pijltje. Klik op het pijltje en sleep het naar de juiste artboard.

2. Je kunt meteen het pijltje oppakken en slepen naar de juiste artboard. Je hebt nu een koppeling gemaakt.

Rechts in beeld zie je nu allemaal verschillende opties die je kunt gebruiken om je artboard in beeld te laten komen als je op de koppeling klikt. Probeer zelf uit welke het beste bij jouw ontwerp past. Je kunt tussendoor je prototype ook testen, dit doe je door op het playknopje rechtsbovenin te klikken.

Als je alle koppelingen hebt gemaakt en je bent helemaal tevreden dan kun je hem gaan delen. Dit doe je door linksbovenin op Share te klikken, zodat je rechts de share opties krijgt te zien.

Klik op create link en er wordt een link voor je gemaakt.

LET OP! Elke keer als je iets aanpast in je design of prototype, betekend dat je een nieuwe link moet maken.

– Link naar prototype infographic