Inhoud
1. Inleiding User Experience Design
2. Andere interactieve prototype experience design tools
3. Wat is Figma (Experience Design)?
4. Waarom prototype met Figma?
5. Waarom maak je een klikbaar prototype?
6. Hoe werkt Figma?
7. Figma basis kennis
8. Figma Handige links.
9. Figma interactie tutorials zoek woorden.
10. Oefening kop
11. Oefening
13. Opdracht Opdracht Figma prototype De groene meter app
Richard Slakhorst
1. Inleiding User Experience Design
0 Inleiding User Experience Design
User Experience Design (ook wel afgekort tot UX of UXD)
Het uxd-vak houdt zich bezig met het ontwerpen van een prettige/bevredigende gebruikerservaring het gaat om zoals de term al doet vermoeden om de gehele ‘ervaring’ van het gebruik van een product, website of app. Het houdt zich daarbij sterk bezig met het gevoel of de emotie die het oproept bij een gebruiker..
User = De gebruiker.
Experience = Ervaring van de eindgebruiker.
Design = Vormgeving & Het concept
In het vak User Experience design leer je hoe je rekening moet houden met de gebruiker wanneer je een ontwerp maakt voor een website of applicatie. Natuurlijk geeft ook een tijdschrift of poster een “beleving”. Maar het vak uxd gaat vooral om de beleving van de gebruiker met een interactief apparaat. Interactieve apparaten reageren op handelingen van mensen: je klikt of swipet en er gebeurt wat.
De experience is het gevoel dat een bezoeker meekrijgt bij het bezoeken van bijvoorbeeld een website of app. Een goed ontworpen gebruikerservaring geeft de bezoeker een positief gevoel en vaak een wow gevoel.
Dit vak gaat over:
- Welk doel heeft de gebruiker?
- Hoe vindt de bezoeker zijn weg en hoe wordt de inhoud gepresenteerd?
- Hoe ervaart de gebruiker de website of app? ( Gebruikerservaring )
- Interaction design
- User interface design
- Usability
Een goed ontworpen gebruikerservaring geeft de bezoeker ook een wow-gevoel
____________________________________
2 Boeken die belangrijk zijn binnen het van UXD
1 The Elements of User Experience
2 Don’t Make Me Think, Revisited
____________________________________
2. Andere interactieve prototype experience design tools
• Abobe XD Deze gebruiken we niet meer op school
• Axure
• Sketsch
• Figma (Deze gebruiken we op school)
3. Wat is Figma (Experience Design)?
Met Figma kun je snel prototypes ontwerpen van websites en webapplicaties. Met Figma kan je interaction en navigatie design en de user interface (UI) ontwerpen, door een prototype te maken met alle mogelijke grafische onderdelen. Het is makkelijk om een user interface (UI) te importeren uit Photoshop, Sketch, Illustrator en zelfs Adobe after effects.
Het programma stelt je eenvoudig in staat om snel digitale interactieve producties te ontwerpen, waarbij je direct interactiviteit en de user experience kunt testen op een smartphone of tablet. Daarnaast biedt Figma met dit programma de mogelijkheid om online te publiceren, zodat je de productie kunt delen en laten testen door wie je maar wilt.Zo kan de productie daardoor sneller en efficiënter gerealiseerd worden.
Workflow >>
4. Waarom prototype met Figma?
Het resultaat van je werk kan je op elk moment live testen, met je doelgroep op je computerscherm of een mobiel toestel (Download de Figma app). Ten slotte kan je in de module SHARE de ontwerpen op verschillende manieren delen met je opdrachtgevers en docenten en zo live feedback ontvangen, verbeteringen aanbrengen, een project laten valideren en het dan uiteindelijk doorsturen naar ontwikkelaars en je docent.
A. Innovatieve ideeën maken
Je maakt een innovatief idee waardoor je ideeën tot leven komen zoals User experience of gebruikerservaring met maar één doel: de bezoeker van je website-app de beste beleving laten ervaren op je website of app, en déze doelgroep specifiek.
B. Interaction en navigatie design ontwerp
Je kunt je interaction en navigatie ontwerpen en testen.
C. Overtuig anderen
Met een prototype heb je een tastbaar, werkend product. Hiermee overtuig je anderen veel sterker dan met een idee. Met enkel een powerpoint kom je er niet meer.
D. Verklein de risico’s
Verklein de risico’s van fouten in de productontwikkeling: krijg sneller feedback over mogelijke fouten en verkeerde aannames.
E. De gebruikerservaring testen
Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren.
5. Waarom maak je een klikbaar prototype?
Waarom is klikbaar prototyping zo belangrijk in het ontwerpproces? Jouw ontworpen interface, website of app kan nog zo mooi zijn en zelfs bovenaan in Google staan: dat maakt je website nog niet automatisch een succes. Stel je voor: duizenden bezoekers van wie er niet één in actie komt door te bellen, mailen of bestellen.
Dit kan je voorkomen door je website eerst te ontwikkelen als een paper prototype.
Je test op een snelle manier
– De Usability en gebruikerservaring van gebruikers van jou ontwerp.
– Interaction design ideeën
– Navigation design ideeën
– Interface design ideeën
• Je kan snel direct verbeteringen aanbrengen zonder tijd en geld te verspillen.
• Je leert wat echt belangrijk is voor de gebruiker/ klanten.
• Klanten en opdrachtgevers worden heel laagdrempelig betrokken (Co-create).
• Werk samen met andere designers tegelijkertijd in hetzelfde bestand. Perfect voor designs
teams op afstand.
• Het is snel, effectief en goedkoop.
• Het is extreem praktisch en voegt direct waarde toe.
De gebruikerservaring testen
De gebruikerservaring zorgt ervoor dat je conversies verhogen. Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren. Onthoud dat een ervaring steeds verandert. Mensen bevinden zich in een andere fase van het aankoopproces of zijn gewoon op zoek naar iets helemaal anders. Ook de trends veranderen soms zodanig dat we een heuse ommekeer moeten realiseren. Al deze zaken hebben invloed op je User Experience Design. Blijf niet stilstaan en evolueer samen met je doelgroep en klanten mee. Zorg in iedergeval dat je bezoekers een positief gevoel en ervaring overhouden aan hun website-app bezoek. Vaak resulteert dit in terugkerende bezoekers en uiteindelijk… in een klant die vaak en graag terug komt naar jouw website-app en dat kun je uit testen met een prototype met Figma.
Je kunt op elk onderdeel van het schema “Fundamentals User Experience Design” een klikbare prototype-test maken, daar waar het geïntrigeerd kan in relatie met alle onderdelen van het schema. Dit heeft de voorkeur, maar je kunt ook altijd losse onderdelen testen.
Studenten aan het werk
6. Hoe werkt Figma?
Je weet meer dan je denkt. Als je al een beetje kennis hebt van de andere programma’s, is het vrij gemakkelijk om met dit programma overweg te kunnen. Het plaatsen van teksten werkt bijvoorbeeld hetzelfde als bij Photoshop en Illustrator, maar ook zonder enige kennis kun je aan de slag. Figma is simpel vormgegeven en dus overzichtelijk, in tegenstelling tot de andere Adobe-programma’s.
De meeste interactie kun je maken met deze onderdelen:
– Components
– interactions triggers
– animation
7. Figma basiskennis
Figma basiskennis
Je kunt ook onderdelen terug zoeken, loop hier even door heen.
Aan de slag met Figma stap voor stap leren. Alles wat je moet weten om te kunnen werken met Figma
8.Figma Handige links.
User interface kits kunnen handig zijn
Ui kit figma
9. Figma interacties tutorials zoekwoorden.
Verschillende Figma interactie tutorials zoek woorden
De kunst is om het juiste zoekwoord te vinden om een interactie te maken in Figma Als je eenmaal het juiste zoekwoord hebt, dan is het makkelijke om de juiste tutorial online te vinden. Hier heb je een aantal basis zoek namen om tutorials, te vinden
Dropdown menu figma
Button hover state figma
Pop up/overlay figma
Search bar
Tab bar figma
Anchor Links figma
keyboard overlay figma
10 Oefening: Button maken ( Deze 2 zijn verplicht en heb je nodig in de groen meter)
1 Klik>> Button met voorbereiden van gemaakten vormen in een gemaakt Ceate component set
2 Klik >>Auto layout button make met geen voorbereiden van gemaakte vormen ( meest gebruikte manier)
11 Oefening: Boards frames verbinden excellente opdracht ( Deze is verplicht en heb je nodig in de groen meter)
1 Klik >>Boards (frames) met elkaar verbinden in Prototype
Excellente opdrachten
12 Oefening: excellente opdrachten
1 Create Splash screen animation in Figma
klik 1
Klik 2
Klik 3
Download Splash screen .svg
2 Interactive Animated Hamburger Menu in Figma
Klik 1
Klik 2
3 Animated Navigation Bar
Klik 1
Klik 2
Klik 2
13. Opdracht Figma klikbaar prototype De groen meter app
13 Opdracht Figma prototype De groene meter app
Opdracht — Prototype App de Groenmeter
Je gebruikt hierbij de aangeleverde UI-kit (User Interface).
Fase 1 — App nabouwen (basis)
Button Interaction
voor elke fase van de knop is de feedback voor de gebruiker de verandering van de knop visible in ander status.
1 begin button> staandaard
2 mouse over ›kleur verandering > hover
3 mouse on click kleur verandering > onclick
4 on stage = go to >
Hovering =zwevend = mouse over
While pressing = terwijl u drukt
After delay= Na vertraging
dissolve = opgelost worden
Fase 2 — Huisstijl integreren (week 5)
Stap 4
Stap 5
Tip:! 1> Hoe voeg ik een plaatje toe in Figma? Klik hier voor Tutorial
Tip:! 2> Hoe maak een frame voor iPhone 16 pro ? Klik hier voor Tutorial
De werk bestanden
Download UI de groen meter prototype bestand
Zie voorbeeld Hier onder >>
_______________________________
Als je tijd over hebt
Fase 3 — 12 Oefening: excellente opdrachten vrije keuze
Gevorderd excellent opdrachten (differentiatie) vrije keuze
Heb je tijd over?
kies uit excellente opdrachten 1 2 of 3 een van de oefeningen die je toe toevoegt aan je app Bijvoorbeeld opdracht 1 kan je op je de beginpagina een subtiele animatie toevoegen
(bijvoorbeeld een overgang, micro-animatie).
! Let op ! Beoordelingscriteria
Beoordelingscriteria
Ontwerp & Opbouw
Sluit het ontwerp aan op de High-Fidelity wireframes?
Kloppen uitlijning, verhoudingen en hiërarchie?
Is het geheel visueel consistent?
Gebruik van de UI-kit
Zijn alle interface-elementen afkomstig uit de aangeleverde UI-kit?
Worden componenten consequent hergebruikt?
Is de structuur logisch opgebouwd?
Interactie & Knoppen
Zijn alle 4 knoppen zelf gebouwd?
Heeft elke knop een duidelijke:
standaardstatus
hover-status
klik / active-status
Voelt de interactie logisch en voorspelbaar?
Bedrijf & Beeld
Is één duurzaam bedrijf duidelijk gekozen?
Is het juiste beeld uit de UI-kit gebruikt?
Ondersteunt het beeld het verhaal van de app?
Prototype & Flow
Is het prototype klikbaar en navigeerbaar?
Begrijpt een gebruiker wat er gebeurt zonder uitleg?
Is de flow logisch opgebouwd?
Huisstijl & Logo (week 5)
Is het eigen logo correct geplaatst?
Zijn kleuren aangepast aan de huisstijl?
Is het logo toegepast in positief en diapositief?
INLEVERWIJZE
1. Je levert een sharing linkje van je bestand ( klik hier voor tutorial).
2. Je maakt een filmpje van het klikbare prototype met alle interacties.
Dit kun je maken met App Schermafbeelding of Quick Time Player op je Mac aanwezig.
RESULTAAT
Een goed werkend klikbaar prototype in een Figma -bestand en een filmpje.
De groet meter prototype app filmpje
Prototype artboards
High fidelity wireframes
Low-fidelity wireframes
Snelle schets wireframe schets
Getting started with Figma for Education (September 2025)
link