Motion Design Fundamentals

Wat staat er op het programma?

1. Waarom motion?
2. Timing
3. Easing
4. Disney Principles voor UI
5. Continuity & Spatial Design
6. Trends & Best Practices
7. Mini oefeningen in Figma / Figma Motion

Een interface?

— Motion Design

Een interface?

Waaruit bestaat een interface?

• Typografie
• Kleur
• Layout
• Afbeeldingen
• Motion

• Typografie
• Kleur
• Layout
• Afbeeldingen
• Motion

Why use motion?

— Motion Design

• Contextverlies
• Verwarring
• Cognitive load
• Gebrek aan feedback

Motion ≠ Decoratie

Motion is communicatie.

Motion helpt gebruikers:

• Begrijpen
• Oriënteren
• Focussen
• Vertrouwen opbouwen

Voorbeelden?

Motion is communicatie.

• Begrijpen

  Wat gebeurde er?

• Oriënteren

  Waar komt het vandaan? Waar gaat het naartoe?

• Focussen

  Wat is belangrijk?

When to use motion?

— Motion Design

Wanneer voeg Motion waarde toe?

1. ✅  Feedback

2. ✅  Continuity

3. ✅  Focus

4. ✅  Oriëntatie

5. ✅  Hiërarchie

Slechte Motion?

• Willekeurig
• Te traag
• Te veel beweging
• Puur decoratief

Helpt dit de gebruiker?

1. UX Verbetering: Feedback

Gebruiker voert actie uit.

Interface antwoordt.

Voorbeelden:

• Like
• Toggle
• Form submit
• Refresh

2. UX Verbetering: Continuity

Gebruiker bouwt een mentale kaart op.

Motion helpt relaties tonen tussen schermen.

3. UX Verbetering: Focus

Motion stuurt aandacht.

• Error
• Alert
• Snackbar
• CTA

Timing

— Motion Design

Een van de belangrijkste motion concepten.

Timing bepaalt:

• Gewicht
• Snelheid
• Persoonlijkheid

Wat is Goede Timing?

Te snel:

❌ Niet zichtbaar + Stress?

Te traag:

❌ Frustrerend

Doel:

✅ Natuurlijk

Denk aan de fysieke wereld.

Timing Guidelines

Micro-interactions

100–200ms

Voorbeeld: buttons, checkbox, hover

UI Transitions

200–400ms

Voorbeeld: Panel openen, dropdowns, cards

Navigatie

300–600ms

Voorbeeld: page transitions, modals (dialog panels)

Gewicht & Timing

Klein object (weegt minder)

→ sneller

Groot paneel (weegt meer)

→ trager

Klasdemo Figma Motion

Menu openen:

• 100ms
• 300ms
• 800ms

Observeer:

• Leesbaarheid
• Reactiviteit
• Kwaliteit

Easing

— Motion Design

Easing

Niet alleen:

Hoe lang?

Maar ook:

Hoe beweegt het?

Waarom Easing?

In de echte wereld:

Objecten starten en stoppen niet abrupt.

Interfaces ook niet.

Linear

Constante snelheid

Gebruik:

• Progress bars
• Loaders
• Kleur

Zelden voor UI-transities

Ease Out

Snel starten,

Langzaam stoppen

✅ Meest gebruikt in UI

Ease In

Langzaam starten,

Snel eindigen

Wanneer gebruiken:

• Vertrekkende objecten

Ease In Out

Rustige start

Snelle middenfase

Rustige stop

Perfect voor grotere bewegingen

Waarom Ease Out Populair Is

Voelt:

• Responsief
• Natuurlijk
• Premium

Gebruiker krijgt onmiddellijk feedback

Mini Oefening

Pas op dezelfde animatie van je menu verschillende easings toe:

• Linear
• Ease Out
• Ease In-Out

Welke voelt het best?

Waarom?

Motion & Disney?

— Motion Design

Disney Principles

Twelve basic principles of animation

Niet alle 12 zijn relevant.

Belangrijk voor interfaces:

• Anticipation
• Staging
• Follow Through
• Secondary Action
• Timing
• Slow In / Slow Out

Anticipation

Kleine voorbereiding vóór actie.

Voorbeeld:

Button:

98% → 102% → 100%

Waarom Anticipation Werkt

Menselijke hersenen:

➡️ voorspellen beweging

Resultaat:

• Meer duidelijkheid
• Meer feedback

Staging

Focus creëren: Waar moet de gebruiker kijken?

Its purpose is to direct the audience's attention, and make it clear what is of greatest importance in a scene;

Technieken:

• Blur
• Fade
• Scale
• Contrast

Follow Through

Niet alles stopt tegelijk.

Voorbeeld:

• Panel stopt
• Schaduw verdwijnt later

Voelt organisch

Secondary Action

Hoofdactie

Text

Subtiele ondersteunende beweging

Voorbeeld:

Card + icon

Oefening

Animeer een CTA Button in Figma Motion en maak twee versies, gebruik volgende concepten:

Versie A: Simpel

• Scale

Versie B

• Anticipation
• Secondary Action

Vergelijk gevoel

Spacial Relationships

— Motion Design

Spatial Relationships

Belangrijk UX Motion Concept:

Motion toont relaties.

Everything Comes From Somewhere

Elementen:

❌  verschijnen niet zomaar

❌  verdwijnen niet zomaar

✅  hebben oorsprong

✅  hebben bestemming

Shared Element Transition

Denk aan "Continuity", dit sluit hier bij aan.

Card

↓

Detailpagina

Gebruiker begrijpt:

Dit is hetzelfde object.

Oefening in Figma

Product Card

↓

Product Detail

Maak een Shared Element Transition.

Recap

— Motion Design

Wat Werkt Vandaag?

Populaire patronen:

• Microinteractions
• Shared Elements
• Skeleton Loading
• Scroll Motion

Maaaaar accessibility?

Niet iedereen ervaart motion hetzelfde.

Denk aan:

• Motion sensitivity
• Vestibulaire stoornissen

Gebruik motion bewust.

Wanneer Geen Motion?

Geen duidelijk doel?

➡️ Verwijderen.

Goede motion:

• Informeert
• Oriënteert
• Begeleidt