Introductie

— Web Animations

Wat gaan we leren?

• Interactive Media
• Motion Design
• Interaction Design
• Figma
• Figma Motion
• Webflow
• GSAP
• AI Workflows
• Digitale ervaringen ontwerpen (Experience Design)

Waar denk je aan bij "Web Animaties" en "Interactieve Media"?

WooClap - FBHX0AZ

Waar focussen we op?

Niet:

• Statisch webpagina's
• Knoppen
• Schermen

Maar wel:

• Ervaringen
• Verhalen
• Interacties
• Emoties
• Gedrag

?

Waarom onthoud je sommige websites wel en andere niet?

Interactieve media

— Web Animations

Wat is Interactieve Media?

Media die reageert op de gebruiker.

Voorbeelden?

Voorbeelden

• Websites
• Apps
• Games
• Installaties
• VR / AR
• Digitale displays

Kernwoorden

👊 Gebruiker 👊 Actie 👊 Reactie 👊 Feedback 👊 Betrokkenheid

Evolutie van het web

— Web Animations

Evolutie van het web

Web 1.0

• Lezen
• Statische pagina's
• Informatie

Web 2.0

• Sociale media
• Interactie
• User Generated Content

Vandaag

• Experiences
• Motion
• AI
• Personalisatie

Evolutie van het web

• Static → Dynamic
• Information → Experience
• User → Participant

Motion design

— Web Animations

Waarom animatie?

Zonder animatie

• Abrupt
• Onduidelijk
• Hard

Met animatie

• Richt aandacht
• Geeft feedback
• Creëert flow
• Versterkt merkbeleving

Is alle animatie gelijk?

Goede animatie

• Functioneel
• Subtiel
• Doelgericht

Slechte animatie

• Afleidend
• Overdreven
• Vertraagt

Wat is Motion Design?

Definitie

Vormgeving in beweging.

Toepassingen

• Overgangen
• Navigatie
• Storytelling
• Branding
• Feedback

Motion design bestaat uit:

• Timing
• Ritme
• Beweging
• Focus
• Overgangen

?

Welke animaties helpen de gebruiker echt?

Motion is geen decoratie

Veelgemaakte fout

"We voegen animatie toe omdat het cool is."

Wat dan wel?

We gebruiken animatie om iets te communiceren.

Motion helpt bij:

• Oriëntatie
• Focus
• Feedback
• Storytelling

Interaction design

— Web Animations

Interaction Design

Wat is het?

• Het ontwerpen van interacties tussen mens en systeem.
• != Motion Design

Voorbeelden

• Klikken
• Scrollen
• Hoveren
• Swipen
• Typen

Basis Interactie

Gebruiker

↓

Actie

↓

Reactie

Interactie Basisprincipes

• Feedback
• Consistency
• Visibility
• Affordance

Feedback

Het systeem reageert.

Voorbeeld:

• Hover effect
• Loading indicator

Consistency

Voorspelbaar gedrag.

Visibility

Gebruiker begrijpt wat mogelijk is.

Affordance

Elementen nodigen uit tot actie.

Wat maakt een goede interactie?

Goede interacties

• Duidelijk
• Snel
• Relevant
• Voorspelbaar

Slechte interacties

• Verwarrend
• Traag
• Inconsistent

Doel

Zo weinig mogelijk nadenken.

Samenvatting

• Feedback
• Consistency
• Visibility
• Affordance

Web AI-nimations

— Web Animations

AI verandert design

Vroeger

Designer → maakt alles zelf

Vandaag

Designer + AI

AI helpt bij:

• Wireframes
• Onderzoek
• Content
• Code
• Animaties
• Feedback

Belangrijk

AI neemt geen ontwerpbeslissingen.

Nieuwe skill

Art Direction

Wat blijft belangrijk?

Niet:

• Elke knop in een tool kennen

Wel:

• Kritisch denken
• Problemen oplossen
• Motion begrijpen
• Gebruikers begrijpen
• Kwaliteit beoordelen

Kern

• 👊 Denken
• 👊 Ontwerpen
• 👊 Evalueren
• 👊 Itereren

Tools

— Web Animations

Toolstack van dit vak

• Figma
• Figma Motion
• Jitter
• Webflow
• GSAP
• AI

Figma

• UX
• Wireframes
• UI Design

Figma Motion

• Motion prototypes

Jitter

• Motion design
• Storytelling

Webflow

• Websites bouwen

GSAP

• Geavanceerde animaties

AI

• Claude
• MCP
• Figma AI

Getting better?

— Web Animations

Inspiratiebronnen

Websites

• Apple
• Stripe
• Linear
• Framer
• Awwwards
• Site Inspire

Let op

• Typografie
• Motion
• Scrollgedrag
• Storytelling
• Navigatie

Hoe analyseren?

UX

Is dit duidelijk?

UI

Ziet dit er goed uit?

Motion

Waarom beweegt dit?

Interaction

Wat gebeurt er wanneer ik iets doe?

Doel

Wat probeert deze website te bereiken?

Oefening

Analyseer een website

Kies een website die je goed vindt.

Bespreek

• Eerste indruk
• Navigatie
• Interacties
• Animaties
• Sterke punten
• Verbeterpunten

Presentatie

2 minuten per groep.

Recap

What's next?

— Web Animations

Volgende Les

Experience Design met Figma

Onderwerpen

• User Flows
• Wireframes
• Structuur
• UX-beslissingen
• AI-assisted ideation

Opdracht - Volgende week

Analyseer 3 interactieve websites.

Beschrijf per website:

• Doelgroep
• Sterke interacties
• Opvallende animaties
• Wat je zou verbeteren

Inleveren

PDF met screenshots en uitgeschreven uitleg (mag in bulletpoints).