Figma

Wat ga je doen? 

Je hebt een werkend wireframe – super! Maar laten we eerlijk zijn, geen enkele gebruiker denkt: “Wat een fantastische grijze rechthoek, hier blijf ik lekker scrollen.” Het oog wil ook wat, en dat betekent dat je aan de slag gaat met de looks én de logica. Je wilt een ontwerp dat niet alleen mooi is, maar gebruikers ook blijft boeien. Hier komt een gouden combi van vormgeving, UI (gebruikersinterface), en UX (gebruikerservaring) in beeld. Als dat lekker op elkaar aansluit, krijg je niet zomaar een app, maar een app waar gebruikers niet meer vanaf kunnen blijven. 

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

• 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. 

Je hebt je ideeën en wireframes staan, en nu is het tijd om die om te zetten in een strak design. Maar hoe zorg je ervoor dat je app of website niet alleen mooi, maar ook logisch en gebruiksvriendelijk wordt? In Figma draait alles om balans: clean visuals, duidelijke navigatie en een beetje slim testen. Hier is een korte handleiding om je design uit te werken, zodat je gebruikers straks denken: “Dit werkt echt top!”

1.  Maak een visuele stijl:

1. • Gebruik de huisstijl van je project (kleuren, lettertypen, logo's).

   • Voeg knoppen, iconen en tekststijlen toe.

   • Kies een consistent UI-kit (bijvoorbeeld Material Design of Apple Human Interface Guidelines).

2.  Invulbare elementen ontwerpen:

1. • Ontwerp interactieve elementen zoals knoppen, dropdowns, invoervelden en schuifregelaars.

   • Zorg dat deze elementen een duidelijke hiërarchie hebben.

3.  Afbeeldingen en pictogrammen toevoegen:

1. • Gebruik Unsplash of Iconify (gratis Figma-plugins) om assets te vinden.

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

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

• Online tutorials en blogs over Figma