Module 1 | Oneworld | Jouw blik op interaction design
Briefing Tablet magazine cover interaction design voor Oneworld (Figma)
De opdracht
De eigenaren van OneWorld willen meer jonge lezers van jouw leeftijd bereiken. Daarom vragen ze jou om voor hun interactieve Native magazine-app voor tablet één interactieve magazine cover te ontwerpen, OneWorld publiceert dagelijks nieuws, achtergronden en interviews over actuele maatschappelijke thema’s zoals klimaat, mensenrechten en identiteit. Het platform trekt jaarlijks ruim 2 miljoen unieke bezoekers, maar onder jongeren is het bereik nog beperkt. Met dit project wil OneWorld jongeren sterker aanspreken en hen als vaste lezers binden.
Omdat jongeren voornamelijk lezen via hun online devices, ligt de focus in dit vak User Experience Design (UXD) op een digitale oplossing. Daarom krijg jij de opdracht om een interactieve magazinecover te ontwerpen die de lezer direct prikkelt en nieuwsgierig maakt. Het doel is dat jouw cover zó spannend en aantrekkelijk wordt dat de lezer op het puntje van zijn stoel zit en niets liever wil dan het achterliggende artikel – dat je in het vak Vormgeven gaat ontwerpen – openen en verder lezen.
👉 Denk goed na over:
Interactiviteit – wat gebeurt er als de lezer iets aanraakt of aanklikt?
Spanning – hoe wek je nieuwsgierigheid? ( naast het grafisch ontwerp)
A. Wat ga je doen?
1. Drie schetsideeën
– Ontwerp 3 verschillende schetsen van een interactieve magazinecover.
– Laat in de schetsen zien welk element interactief wordt (bijv. animatie, tap-effect, swipe-beweging, geluid).
2. Uitgewerkte wireframe
– Kies het beste idee uit je schetsen.
– Werk dit uit in een wireframe (in Figma) waarin je de layout en interactie duidelijk laat zien.
– Voeg een korte legenda toe waarin je uitlegt hoe de interactie werkt.
3. Werkend prototype
Maak een klikbaar prototype van je interactieve cover.
Het prototype moet minimaal 1 interactieve actie bevatten
Test het prototype (Figma).
B. Eindproducten
– 3 schetsideeën (A3 of digitaal)
– 1 uitgewerkt wireframe (digitaal)
– 1 werkend prototype (klikbaar in Figma)
4, Interactie trainen in Figma
Voordat we de interactieve cover gaan ontwerpen, ga je in Figma oefenen met verschillende vormen van interactie. Zo leer je de basis kennen en kun je straks creatiever en realistischer je eigen cover-idee uitwerken
B.Vereisten prototype interactieve Native magazine-app ( user interface van de app)
1. Startscherm / Cover-scherm
– Toont de interactieve cover..
– Hamburger menu voor toegang tot artikel of navigatie.
2. Navigatiebalk of menu
– Eenvoudige manier om terug te gaan naar de cover of het artikel of het begin
– Bereikbaar via het hamburger menu.
3. Interactieve knoppen
– Knoppen of iconen voor interacties, zoals:
– Video afspelen. Audio / muziek starten
– Extra gelaagde content openen (bijv. pop-up, slider, gallery)
Interactiviteit – wat gebeurt er als de lezer iets aanraakt of aanklikt?
Voorbeeld magazine-app
Les presentatie
De opdrachten
Week 2 Les 1 Start figma training oefening 1 en 2 (training cursus)
Week 3 Les 2 Opdracht klikbare prototype (training cursus)
Week 4 Les 3 Opdracht klikbare prototype (training cursus)
Week 5 Les 4 3 Interaction design/schets ideeën magazine cover
Week 6 Les 5 3 Interaction design/schets ideeën magazine cover
Week 7 Les 6 1 uitwerken High-fidelity wireframes magazine cover
Week 8 Les 7 Uitwerpen magazinecover werkend in Figma
Week 9 Les 8 Uitwerpen magazinecover werkend in Figma
Week 2 Les 1 Start figma training oefening 1 en 2
Start Figma training
Doel van deze week:
Het opfrissen en verder inoefenen van de basisvaardigheden in Figma. Je hebt al eerder met Figma gewerkt; deze week gebruik je die kennis om de fundamenten van interactief prototypen te versterken.
Oefening 1 – Frame to Frame
Je leert hoe je verschillende frames in Figma maakt en hoe je deze aan elkaar koppelt om de eerste navigatie te simuleren. Zo zie je hoe een gebruiker van scherm naar scherm kan bewegen.
Oefening 2 – Creating Components
Je leert hoe je componenten maakt (bijvoorbeeld knoppen of menu’s) en hoe je deze kunt hergebruiken binnen je ontwerp. Dit zorgt voor consistentie én bespaart tijd.
>>>>>Klik Hier voor de les en opdracht
Week 3 Les 2 Opdracht klikbare prototype (training cursus)
Week 3 & 4 – Opdracht klikbaar prototype
Doel van deze weken:
Na het opfrissen van de basisvaardigheden in Week 2 (Oefening 1: Frame to Frame en Oefening 2: Creating Components), ga je nu een klikbaar interactief prototype maken in Figma.
Opdracht
– Bouw een klikbaar prototype van de Pizza App in Figma.
– Gebruik hiervoor de schets en wireframe die je kunt vinden bij de bestanden.
– Bestudeer eerst de schets en wireframe en de video van de Pizza App en vervang
daarna de wireframe-elementen door de meegeleverde afbeeldingen om een
realistische versie te maken.
Eisen aan het prototype
Je prototype moet minimaal 4 interacties bevatten:
– Gebruik de 3 aangeleverde tutorials en bouw die na
– 1 Animatie interactie die je zelf online uitzoekt met bezorg scooter die van links naar rechts uit het beeld rijd.
– Navigeren tussen frames (frame-to-frame)
– Gebruik van componenten (zoals knoppen of menu’s)
Tijd
– Je krijgt 2 lessen (4 uur) de tijd om dit prototype uit te werken.
Eindresultaat
– Een klikbare Pizza App die de gebruiker door verschillende schermen en functies laat navigeren, opgebouwd uit frames, componenten en interactieve elementen.
>>>>>>Klik Hier voor de les en opdracht
Week 4 Les 3 Opdracht klikbare prototype (training cursus)
Week 3 & 4 – Opdracht klikbaar prototype
Doel van deze weken:
Na het opfrissen van de basisvaardigheden in Week 2 (Oefening 1: Frame to Frame en Oefening 2: Creating Components), ga je nu een klikbaar interactief prototype maken in Figma.
Opdracht
– Bouw een klikbaar prototype van de Pizza App in Figma.
– Gebruik hiervoor de schets en wireframe die je kunt vinden bij de bestanden.
– Bestudeer eerst de schets en wireframe en de video van de Pizza App en vervang
daarna de wireframe-elementen door de meegeleverde afbeeldingen om een
realistische versie te maken.
Eisen aan het prototype
Je prototype moet minimaal 4 interacties bevatten:
– Gebruik de 3 aangeleverde tutorials en bouw die na
– 1 Animatie interactie die je zelf online uitzoekt met bezorg scooter die van links naar rechts uit het beeld rijd.
– Navigeren tussen frames (frame-to-frame)
– Gebruik van componenten (zoals knoppen of menu’s)
Tijd
– Je krijgt 2 lessen (4 uur) de tijd om dit prototype uit te werken.
Eindresultaat
– Een klikbare Pizza App die de gebruiker door verschillende schermen en functies laat navigeren, opgebouwd uit frames, componenten en interactieve elementen.
>>>>>>>Klik Hier voor de les en opdracht
Kijk hier voor >>> Voor de verschilde voorbeelden voor interactions
kijk hier voor >> leuke ideeën
Kijk hier voor >>> Voor de les hoe maak ik Micro-interacties
Week 5 Les 4 Opdracht klikbare prototype
Week 3 & 4 – Opdracht klikbaar prototype
Doel van deze weken:
Na het opfrissen van de basisvaardigheden in Week 2 (Oefening 1: Frame to Frame en Oefening 2: Creating Components), ga je nu een klikbaar interactief prototype maken in Figma.
Opdracht
– Bouw een klikbaar prototype van de Pizza App in Figma.
– Gebruik hiervoor de schets en wireframe die je kunt vinden bij de bestanden.
– Bestudeer eerst de schets en wireframe en de video van de Pizza App en vervang
daarna de wireframe-elementen door de meegeleverde afbeeldingen om een
realistische versie te maken.
Eisen aan het prototype
Je prototype moet minimaal 4 interacties bevatten:
– Gebruik de 3 aangeleverde tutorials en bouw die na
– 1 Animatie interactie die je zelf online uitzoekt met bezorg scooter die van links naar rechts uit het beeld rijd.
– Navigeren tussen frames (frame-to-frame)
– Gebruik van componenten (zoals knoppen of menu’s)
Tijd
– Je krijgt 2 lessen (4 uur) de tijd om dit prototype uit te werken.
Eindresultaat
– Een klikbare Pizza App die de gebruiker door verschillende schermen en functies laat navigeren, opgebouwd uit frames, componenten en interactieve elementen.
>>>>>>Klik Hier voor de opdracht en les
Kijk hier voor >>> Voor de verschilde voorbeelden voor interactions
kijk hier voor >> leuke ideeën
Kijk hier voor >>> Voor de les hoe maak ik Micro-interacties
Week 6 Les 5 Drie Interaction design/schets ideeën magazine cover
UXD Opdracht – Interactieve Magazine cover
Context
Omdat jongeren vooral lezen via hun online devices, ligt de focus in dit vak (User Experience Design, UXD) op een digitale oplossing. Jij gaat een interactieve magazine cover ontwerpen voor een magazine-app op tablet.Het doel van de cover is om je lezer op het puntje van zijn stoel te krijgen: de cover moet zo prikkelend en nieuwsgierig makend zijn, dat je publiek het achterliggende artikel absoluut wil gaan lezen.
Deze opdracht sluit deels aan op het vak Vormgeven (VRMG/BO), waar je een printcover maakt. De basisprincipes zijn hetzelfde, maar bij de digitale cover moet je extra letten op interactiviteit en beleving.
Let op: alle eisen die gelden voor een printcover gelden óók voor de digitale magazine cover.
Wat ga je doen?
1 Drie schetsideeën maken
Ontwerp 3 verschillende schetsen voor een interactieve magazinecover.
Laat in elke schets duidelijk zien welk element interactief wordt. en leg het uit met een legenda.
Denk hierbij aan:
– Geluid of audio-trigger
– Animatie
– Tap- of klik-effect
– Swipe-beweging
Let op: alle eisen die gelden voor een printcover gelden óók voor de digitale magazine cover.
Voorbeeld cover schets
Kijk hier voor >>> Voor de verschilde voorbeelden voor interactions
kijk hier voor >> leuke ideeën
Kijk hier voor >>> Voor de les hoe maak ik Micro-interacties
Download hier >>> Grid voor tablets
Week 7 Les 6 1 uitwerken High-fidelity wireframes magazine cover
Opdracht: High-Fidelity Wireframe in Figma
Doel:
Je gaat je beste interaction design-schets uitwerken tot een high-fidelity wireframe in Figma. Dit wireframe vormt de bouwtekening van jouw interactieve magazinecover.
Wat ga je doen?
1. Wireframe in grijsschaal maken In Figma
– Werk je cover uit in Figma met alle onderdelen/stappen in grijstinten.
– Het wireframe is nog niet interactief, maar wel compleet in opbouw en structuur.
2. Legenda met toelichting
– Voeg een duidelijke legenda toe waarin je uitlegt:
– Welke onderdelen interactief worden.
– Hoe de interacties gaan werken.
– Waarom je die keuzes maakt.
– Dit beschrijf je zoals je hebt geleerd in het eerste jaar UXD. (Kijk hier voor >>> Hoe maak ik een wireframes ook alweer )
3. Wireframe als bouwtekening
– Zie het wireframe als een bouwtekening: een visuele weergave van de structuur, functionaliteit en interactieve ideeën.
– Let op: alle eisen die gelden voor een printcover gelden óók voor de digitale magazine cover.
INLEVERWIJZE
Een figma link Via teams
Voorbeeld Cover High-fidelity wireframe in Figma
Download hier >>> Grid voor tablets
Week 8 Les 7 Uitwerpen van je Interactieve magazine cover en werkend in Figma
Opdracht: Interactieve Magazine cover in Figma
Doel van de opdracht
Je gaat een interactieve magazinecover ontwerpen in Figma. De cover moet de lezer direct prikkelen en nieuwsgierig maken. Het doel is dat jouw ontwerp zo spannend en aantrekkelijk is dat de lezer niets liever wil dan het achterliggende artikel openen en verder lezen.
Wat ga je doen?
1 Ontwerp je magazinecover
– Werk je concept uit in Figma.
– Zorg dat de cover visueel sterk en doelgroepgericht is.
2 Maak een klikbaar prototype
– Bouw een klikbaar prototype van je cover in Figma.
– Het prototype moet minimaal 1 interactieve actie bevatten (bijv. animatie, tap, swipe of hover-effect).
3 Test het prototype
– Test je ontwerp in Figma.
– Laat een klasgenoot je prototype uitproberen en noteer feedback.
Vereisten voor de user interface (Native magazine-app)
1 Startscherm / Cover-scherm
– Toont de interactieve cover.
– Bevat een hamburger menu voor toegang tot het artikel of andere navigatie.
2 Navigatiebalk of menu
– Geeft de gebruiker een eenvoudige manier om terug te gaan naar de cover of het artikel.
– Is altijd bereikbaar via het hamburger menu.
3 Interactieve knoppen
– De gebruiker kan via knoppen of iconen:
– Een video afspelen.
– Audio of muziek starten.
– Extra gelaagde content openen (bijvoorbeeld een pop-up, slider of gallery).
– Let op: alle eisen die gelden voor een printcover gelden óók voor de digitale magazine cover.
| ✅ Onderdeel | ✔ Voldoende | ✔✔ Goed | ✔✔✔ Uitstekend |
|---|---|---|---|
| Startscherm / Cover-scherm | Cover uitgewerkt in Figma, toont hoofdelementen | Cover bevat 1 interactieve actie (bijv. tap of swipe) | Cover bevat meerdere interactieve acties en trekt direct de aandacht van de doelgroep |
| Hamburger menu / Navigatie | Basisnavigatie aanwezig (naar artikel of terug naar cover) | Navigatie duidelijk en gebruiksvriendelijk | Navigatie intuïtief, creatief vormgegeven en getest met klasgenoot |
| Interactieve knoppen (video, audio, content) | 1 knop of actie werkt (bijv. video óf audio) | Minimaal 2 interactieve knoppen werken (video + audio, of pop-up) | Meerdere interactieve elementen geïntegreerd (video, audio, slider/gallery) en visueel consistent |
| Prototype test | Prototype werkt in Figma, zelf getest | Prototype getest door klasgenoot en feedback verwerkt | Prototype getest met meerdere gebruikers, feedback geïntegreerd, en professioneel gepresenteerd |
| Visuele uitwerking | Basisgrijstinten wireframe | Consistente vormgeving en duidelijke typografie | Sterke visuele hiërarchie, professioneel design en doelgroepgericht |
Visuele Checklist
Week 9 Les 8 Uitwerpen van je Interactieve magazine cover en werkend in Figma
Opdracht: Interactieve Magazine cover in Figma
Doel van de opdracht
Je gaat een interactieve magazinecover ontwerpen in Figma. De cover moet de lezer direct prikkelen en nieuwsgierig maken. Het doel is dat jouw ontwerp zo spannend en aantrekkelijk is dat de lezer niets liever wil dan het achterliggende artikel openen en verder lezen.
Wat ga je doen?
1 Ontwerp je magazinecover
– Werk je concept uit in Figma.
– Zorg dat de cover visueel sterk en doelgroepgericht is.
2 Maak een klikbaar prototype
– Bouw een klikbaar prototype van je cover in Figma.
– Het prototype moet minimaal 1 interactieve actie bevatten (bijv. animatie, tap, swipe of hover-effect).
3 Test het prototype
– Test je ontwerp in Figma.
– Laat een klasgenoot je prototype uitproberen en noteer feedback.
Vereisten voor de user interface (Native magazine-app)
1 Startscherm / Cover-scherm
– Toont de interactieve cover.
– Bevat een hamburger menu voor toegang tot het artikel of andere navigatie.
2 Navigatiebalk of menu
– Geeft de gebruiker een eenvoudige manier om terug te gaan naar de cover of het artikel.
– Is altijd bereikbaar via het hamburger menu.
3 Interactieve knoppen
– De gebruiker kan via knoppen of iconen:
– Een video afspelen.
– Audio of muziek starten.
– Extra gelaagde content openen (bijvoorbeeld een pop-up, slider of gallery).
– Let op: alle eisen die gelden voor een printcover gelden óók voor de digitale magazine cover.
| ✅ Onderdeel | ✔ Voldoende | ✔✔ Goed | ✔✔✔ Uitstekend |
|---|---|---|---|
| Startscherm / Cover-scherm | Cover uitgewerkt in Figma, toont hoofdelementen | Cover bevat 1 interactieve actie (bijv. tap of swipe) | Cover bevat meerdere interactieve acties en trekt direct de aandacht van de doelgroep |
| Hamburger menu / Navigatie | Basisnavigatie aanwezig (naar artikel of terug naar cover) | Navigatie duidelijk en gebruiksvriendelijk | Navigatie intuïtief, creatief vormgegeven en getest met klasgenoot |
| Interactieve knoppen (video, audio, content) | 1 knop of actie werkt (bijv. video óf audio) | Minimaal 2 interactieve knoppen werken (video + audio, of pop-up) | Meerdere interactieve elementen geïntegreerd (video, audio, slider/gallery) en visueel consistent |
| Prototype test | Prototype werkt in Figma, zelf getest | Prototype getest door klasgenoot en feedback verwerkt | Prototype getest met meerdere gebruikers, feedback geïntegreerd, en professioneel gepresenteerd |
| Visuele uitwerking | Basisgrijstinten wireframe | Consistente vormgeving en duidelijke typografie | Sterke visuele hiërarchie, professioneel design en doelgroepgericht |
Visuele Checklist