Figma

Wat ga je doen? 

Je hebt met jouw team op papier al flink zitten "paper-prototypen". Hierdoor weet je heel goed hoe jouw app in elkaar gaat zitten. Het wordt nog toffer als je jouw Paper Prototype weet om te zetten in een Wireframe. Dan worden nog meer zaken rondom de usability van de app duidelijk.

Deze opdracht doe je in de tweede week van "Toffe Peer" en je hebt hier twee lesuren de tijd voor.

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

• Je weet in Figma een 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. 

Na het maken van een papieren prototype is de volgende stap het uitwerken tot een wireframe in Figma. Maar wat is nu precies een wireframe? 

Een wireframe is een eenvoudige, schematische weergave van de structuur van een app of website. Het doel van een wireframe is om de basisstructuur van de gebruikersinterface te visualiseren zonder visuele afleidingen zoals kleuren, afbeeldingen of gedetailleerde styling. 

Door in Figma een wireframe te maken, kun je je concentreren op de wat echt belangrijk is in je ontwerp, zoals de navigatie, de plaatsing van elementen, en de interactie tussen verschillende onderdelen van jouw app.

Het helpt je ook om vroegtijdig feedback te verzamelen en eventuele problemen in het ontwerp op te sporen voordat je te veel tijd besteedt aan de visuele details. 

Dit maakt het eenvoudiger om wijzigingen aan te brengen en zorgt ervoor dat je een solide basis hebt voordat je doorgaat naar de volgende fase van het ontwerpproces. 

Wireframes zijn essentieel voor het plannen en testen van de gebruikerservaring en functionaliteit van je app, en vormen de blauwdruk voor het uiteindelijke ontwerp.

Jouw paper prototype ziet er natuurlijk helemaal anders uit dan dit voorbeeld. Wel zal je ongetwijfeld tekst elementen, afbeeldingen en interactieve componenten hebben. Dat kan haast niet anders. Maak met behulp van de volgende technieken jouw geschetste paper prototype na in Figma.

Het mooie van het werken met een wireframe in Figma is dat je de Frames aan elkaar kan koppelen. Zo werkt je app al heel snel, zonder dat het er mooi uit ziet. Ideaal! Dat mooie komt later wel.

Let op! Ga hierbij niet te ver door in details. Het echte uitwerken komt later pas!

Place holder voor afbeeldingen

In het menu met de shapes vind je vele verschillende vormen. Selecteer een rectangle. 

Teken op de Frame de rechthoeken waar jij een afbeelding wilt hebben.

Is de rechthoek geselecterd, dan heb je aan de rechterkant van het venster alle instellingen. Pixel nauwkeurig kan je de locatie en de grootte ingeven. Maar ook de kleur en lijn eigenschappen kan je allemaal ingeven.

Lijnen

Een hamburger-menu-knop kan je mooi weergeven met een drietal lijntjes. Om het te laten werken is het fijn om die lijnen te groeperen. 

• Teken een lijntje.

• Kopieer het lijntje twee keer.

• Selecteer ze allemaal en klik met de rechtermuisknop. Kies voor Group Selection.

Teksten

Met teksten kan je aangeven waar je je in de app bevindt dat is bij het user testen wel heel erg prettig. Anders klik je maar wat. Door de tekst tool te selecteren en te klikken in het Frame kan je beginnen met typen.

Aan de rechterkant van de interface zie je de instellingen terug. Qua typografie hoef je je nog niet al te druk te maken. Misschien wel al om de grootte van het font. 

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

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

• Online tutorials en blogs over Figma