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: 

1. Welk doel heeft de gebruiker?
2. Hoe vindt de bezoeker zijn weg en hoe wordt de inhoud gepresenteerd? 
3. Hoe ervaart de gebruiker de website of app? ( Gebruikerservaring )
4. Interaction design
5. User interface design
6. 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

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