1-3 Infographic
inleiding
Er zijn verschillende soorten prototypingprogramma’s op de markt. Eén daarvan is Figma. Dit programma wordt veel gebruikt binnen het werkveld van Interaction Design – en jij gaat er nu ook mee leren werken.
Dat doen we door een infographic over jezelf te maken.
Je mag hier natuurlijk creatief in zijn, maar we houden het in het begin bewust simpel. Zo leer je eerst goed hoe Figma werkt voordat we het ingewikkelder maken.
Wat is Figma?
Figma is een vector-based design tool waarmee je websites en apps kunt ontwerpen én interactief kunt maken.
Met Figma kun je:
* Wireframes maken (de opzet van een website of app)
* User Interfaces ontwerpen (UI design)
* Click-through prototypes bouwen
* Samenwerken in real-time
* Je ontwerp direct testen in preview-modus
Figma werkt volledig in de browser, maar je kunt ook de desktop-app gebruiken. Daarnaast kun je via de Figma-app op je telefoon een preview bekijken van je ontwerp.
Wat ga je leren?
Tijdens deze opdracht leer je:
* Werken met frames
* Gebruikmaken van tekst- en vormtools
* Interacties toevoegen
* Een klikbaar prototype maken
Handige tutorials
Figma heeft zelf een uitgebreide helpomgeving met uitleg en video’s. Je kunt hier beginnen:
https://help.figma.com/hc/en-us
https://www.figma.com/resources/learn-design/
opdracht: Infographic
Zoals aangegeven gaan we een infographic maken over jezelf. Het is aan jou wat er in komt te staan. Wat is nu een infographic? Een infographic is meestal een pagina met kleine illustraties en tekst om zo de informatie over te brengen.
Wij gaan een digitale versie maken, eentje waar je op kunt klikken om zo de informatie te krijgen.
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 een Fig-jam board.
– 1 hoofdscherm
– 5 klikbare elementen op het hoofdscherm
– 5 popup schermen
STAP 3: ONTWERPEN
Maak nu je ontwerp digitaal in Figma zelf.
– Bepaal zelf welk formaat je gebruikt (telefoon of tablet formaat)
– Let goed op font gebruik
– Maak zelf illustraties in Illustrator of download vector plaatjes van freepik.com (Let er op dat je een gratis account aan maakt
zodat je 5 downloads per dag hebt.)
Je hebt je infographic ontworpen in Figma. Nu ga je deze interactief maken door er een prototype van te bouwen.
Figma wordt veel gebruikt binnen Interaction Design voor het ontwerpen én testen van websites en apps. Wij gebruiken het nu om jouw infographic klikbaar en interactief te maken.
CONTROLEREN VAN JE FRAMES
In Figma werken we met Frames (dit zijn de “pagina’s” van je ontwerp).
Controleer eerst:
– Heb je voor elke “pagina” een apart frame?
– Hebben je frames duidelijke namen?
– Staan je frames netjes naast elkaar in je werkveld?
Zo niet:
– Selecteer een frame
– Druk op Cmd/Ctrl + D om te dupliceren
– Geef elk frame een duidelijke naam (dubbelklik op de naam in het lagenpaneel links)
Overzicht = sneller werken bij het prototypen.
LAAGVOLGORDE CHECKEN
Controleer of je lagen goed opgebouwd zijn:
– Achtergrond onderaan
– Content daarboven
– Buttons of klikbare elementen bovenop
Moet iets naar voren of achteren? Gebruik:
– Rechtermuisknop → Arrange
of
– Cmd/Ctrl + ] (naar voren)
– Cmd/Ctrl + [ (naar achteren)
NAAR PROTOTYPE MODE
Tot nu toe heb je gewerkt in Design mode.
Klik bovenin op:
> Prototype
Nu kun je interacties gaan toevoegen.
KOPPELINGEN MAKEN
– Selecteer het element waarmee je wilt navigeren (bijvoorbeeld een knop, icoon of tekst).
– Je ziet een blauw rondje aan de zijkant van het element.
– Klik en sleep dit rondje naar het frame waar je naartoe wilt linken.
Je hebt nu een eerste koppeling gemaakt.
INTERACTIES INSTELLEN
Rechts in het Prototype-paneel kun je instellen:
– Trigger → On Click (meestal gebruiken we deze)
– Action → Navigate to
– Animation → Instant, Dissolve, Smart Animate, etc.
– Timing → hoe snel de overgang gaat
Probeer verschillende animaties uit en kies wat het beste bij jouw infographic past.
PROTOTYPE TESTEN
Klik rechtsboven op de Play-knop (Present).
Er opent een preview waarin je jouw interactieve infographic kunt testen.
Klik door je ontwerp heen en controleer:
– Werken alle knoppen?
– Ga je naar de juiste frames?
– Kloppen de animaties?
PROTOTYPE DELEN EN INLEVEREN
Ben je tevreden?
– Klik rechtsboven op Share
– Zet de rechten op bijvoorbeeld: Anyone with the link can view
– Klik op Copy link
– Lever de link in bij de assignment
Belangrijk:
In Figma blijft dezelfde link werken, ook als je later nog iets aanpast.