Figma

Wat ga je doen? 

Je hebt alle schermen van je app uitgewerkt als digitaal wireframe. Nu is het tijd om functionaliteit toe te voegen! Maak de app interactief door knoppen en navigatie klikbaar – of beter gezegd "tap-baar" – te maken, aangezien je een mobiele app aan het ontwikkelen bent. Dit is het moment waarop je app tot leven komt. Maar werkt alles ook zoals je had bedacht? Dat ontdek je pas echt door je prototype te testen en te zien hoe gebruikers ermee omgaan.

Deze opdracht doe je in de derde fase van "Toffe Peer" en je hebt hier twee lesuren de tijd voor met ondersteuning.

• Je hebt weet wat een digitaal wireframe is en waar je deze voor gebruikt.

• Je weet in een online tool een digitaal wireframe te maken en te onderbouwen.

• Apple/Windows computer  

• Browser

• Figma

• One Drive + Externe harde schijf  

De theorie wordt door je docent klassikaal uitgelegd.  

Je gaat deze opdracht individueel uitvoeren. Uiteraard kun je wel met je groepsgenoten overleggen. 

Prototype

Wanneer je jouw Wireframes hebt gemaakt, dan kan je natuurlijk een stukje verder. Je wilt graag de flow van de app leren kennen. Dit doe je door de wireframes aan elkaar te koppelen. Als je aan de rechterkant in het panel kies voor Prototype. Dan kan je vanuit een element waarop je wilt klikken als gebruiker, een lijntje trekken naar een ander artboard. 

Testen

Rechtsbovenin de interface zie je ook een play knop. Als je daarop klikt, dan opent een nieuw tabblad en kan je echt testen of de app goed werkt.

Hierbij is het belangrijk om te kijken of al jouw linkjes goed werken. Loop je niet ergens tegenaan wat raar werkt? Een dood eind, je kan niet meer terug naar het vorige scherm? Dan is er reden genoeg om jouw prototype aan te passen tot de meest fijne user experience!

1. Switch naar Prototype-modus
   Klik bovenaan je scherm op "Prototype" (je verlaat nu de Design-zone). Dit is waar de magie gebeurt... Where the magic happens klinkt eigenlijk toffer.

2. Schermen linken

   • Klik op een knop, afbeelding of wat je ook klikbaar wilt maken.

   • Sleep het blauwe pijltje naar het scherm waar je naartoe wilt.

   • Kies wat er moet gebeuren, zoals On Click > Navigate To.

3. Animaties toevoegen voor een vloeiend geheel

   • Maak het interactief door een overgang te kiezen, bijvoorbeeld Slide In of Smart Animate.

   • Experimenteer met de snelheid, bijvoorbeeld 300ms, voor een natuurlijke overgang.

1. Start de preview
   Klik rechtsboven op de Play-knop en bekijk je prototype in actie.

2. Alles controleren

   • Klik door alle schermen en check of de navigatie logisch werkt.

   • Spot eventuele fouten, zoals een niet-werkende knop of een verkeerde link, en pas deze aan.

3.  Feedback verzamelen

1. • Deel je prototype-link met je docenten of testgebruikers.

   • Vraag om feedback en gebruik de commentaarfunctie in Figma om opmerkingen direct op het ontwerp te zien.

Resultaat: Een werkend prototype dat klaar is om getest en verbeterd te worden. Perfect voor een presentatie of usability-test.

• Figma officiële website https://www.figma.com/

• Figma YouTube-kanaal https://www.youtube.com/c/Figma

• Online tutorials en blogs over Figma