Motion Design Prinzipien für Web

Motion Design Prinzipien für Web sind ein Regelwerk, das klassische Animations-Gesetze aus Filmgeschichte und Animationsstudio-Praxis auf die Anforderungen digitaler Interfaces überträgt – mit dem Ziel, Animationen bedeutungsvoll, verständlich und ästhetisch stimmig zu machen.

Was sind Motion Design Prinzipien?

Die Grundlagen des Motion Designs wurden 1981 von den Disney-Animatoren Ollie Johnston und Frank Thomas in ihrem Buch „The Illusion of Life" als „12 Principles of Animation" formalisiert. Sie beschreiben, wie Bewegung natürlich und überzeugend wirkt.

Im Web-Kontext haben Designer diese Prinzipien adaptiert. Val Head, Sarah Drasner, Google Material Design und IBM Carbon adaptieren und erweitern sie für Interface-Animationen. Die Kernfrage bleibt dieselbe: Wie macht Bewegung etwas verständlicher, glaubwürdiger und lebendiger?

Die klassischen 12 Prinzipien (nach Johnston & Thomas, 1981)

1. Squash and Stretch

Objekte komprimieren und strecken sich, um Gewicht, Elastizität und Energie auszudrücken:

``css @keyframes ballHüpfen { 0%, 100% { transform: scaleX(1) scaleY(1) translateY(0); } 40% { transform: scaleX(1) scaleY(1.2) translateY(-60px); /* gestreckt in Luft */ } 50% { transform: scaleX(1.3) scaleY(0.7) translateY(0); /* gequetscht beim Aufprall */ } } ``

Im Interface-Design: Buttons, die beim Klick leicht „einfedern", oder Karten, die beim Hover minimal wachsen.

2. Anticipation (Vorausdeutung)

Kurze Gegenbewegung vor der Hauptaktion bereitet das Auge vor:

``css @keyframes sprung { 0% { transform: scaleY(1) translateY(0); } 20% { transform: scaleY(0.85) translateY(5px); } /* Vorbereitung: leicht eindrücken */ 50% { transform: scaleY(1.2) translateY(-80px); } /* Sprung */ 100% { transform: scaleY(1) translateY(0); } } ``

Im Interface-Design: ease-back Timing-Funktionen, die kurz über den Zielwert hinausgehen.

3. Staging (Inszenierung)

Welche Information ist am wichtigsten? Sie bekommt die Aufmerksamkeit durch Bewegung, Größe oder Timing:

``javascript // Primäre Aktion zuerst, sekundäre gestaffelt danach gsap.timeline() .from('.haupt-cta', { scale: 0, duration: 0.5, ease: 'back.out(2)' }) .from('.neben-content', { opacity: 0, y: 20, stagger: 0.1 }, '-=0.2'); ``

4. Straight Ahead vs. Pose to Pose

Für Interface-Animationen: Definiere Schlüsselzustände (Pose to Pose) und lass den Browser oder die Library interpolieren. Straight-Ahead-Animation (Frame für Frame) ist eher für komplexe Charakter-Animationen.

5. Follow Through & Overlapping Action

Nicht alle Teile eines Objekts stoppen gleichzeitig:

``javascript // Jedes Element bleibt etwas nach, dann überholt es leicht gsap.to('.element', { x: 200, ease: 'power3.out', stagger: { amount: 0.3 } // Verzögerung: natürlichere Bewegung }); ``

6. Slow In / Slow Out (Easing)

Die wichtigste technische Übersetzung: Natürliche Bewegungen haben Beschleunigungsphasen:

```css / Für eintretende Elemente: ease-out (kommt sanft zum Stehen) / .eintreten { transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1); }

/ Für austretende Elemente: ease-in (nimmt Schwung auf) / .austreten { transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1); }

/ Standard-Übergänge: ease-in-out / .umschalten { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } ```

7. Arcs (Bögen)

Natürliche Objekte bewegen sich auf Bögen, nicht geradlinig:

``javascript // Custom Bézier-Pfad für bogenförmige Bewegung gsap.to('.element', { motionPath: { path: 'M 0 0 Q 200 -100 400 0', // Quadratische Kurve align: 'self' }, duration: 1.5, ease: 'power2.inOut' }); ``

8. Secondary Action

Begleitende Animationen, die die Hauptaktion unterstützen:

``css /* Hauptaktion: Modal öffnet sich */ /* Secondary: Hintergrund dimmt */ .modal-overlay { transition: opacity 0.3s ease; } ``

9. Timing

Schnelle Animationen wirken mechanisch und dringend, langsame wirken wichtig und dramatisch:

10. Exaggeration (Übertreibung)

Leichte Übertreibung macht Charakteristika deutlicher:

```javascript // Statt gerade Skalierung: leichter Back-Overshoot ease: 'back.out(1.7)' // Federt 1.7× über Ziel hinaus

// Statt einfacher Rotation: deutlichere Kurve ease: 'elastic.out(1, 0.4)' // Elastisches Schwingen ```

11. Solid Drawing

Im Interface-Design: Konsequente visuelle Hierarchie und räumliche Konsistenz in Animationen.

12. Appeal

Animationen müssen zur Marke passen. Ein Finanz-Tool animiert anders als ein Spiel-Interface.

Web-spezifische Motion Design Konzepte

Bedeutungstragende Bewegung (Val Head, 2019)

Motion muss Bedeutung kommunizieren, nicht nur verzieren:

Choreografie

Mehrere Animationen sollen koordiniert sein, nicht zufällig:

```javascript // Staggering (Staffelung): Elemente sind verwandt gsap.from('.liste-item', { y: 30, opacity: 0, stagger: 0.06 });

// Sequenz: Schritte in logischer Reihenfolge const tl = gsap.timeline(); tl.from('.kopfzeile', { y: -20, opacity: 0 }) .from('.inhalt', { y: 20, opacity: 0 }, '-=0.2') .from('.fusszeile', { y: 20, opacity: 0 }, '-=0.1'); ```

Google Material Motion System (2021)

Google Material Design 3 definiert vier Übergangsarten:

• Container Transform: Element expandiert zu neuer Ansicht
• Shared Axis: Navigation auf gemeinsamer X/Y/Z-Achse
• Fade Through: Ausblenden, dann Einblenden (für unzusammengehörige Inhalte)
• Fade: Einfaches Einblenden in-place

IBM Motion Design Language (2022)

IBM Carbon differenziert zwischen:

• Productive motion: Subtil, effizient, für Arbeits-Tools
• Expressive motion: Lebhafter, für Marketing und Onboarding

In der Praxis

prefers-reduced-motion als Design-Entscheidung

```css @media (prefers-reduced-motion: no-preference) { .animiert { transition: transform 0.4s ease, opacity 0.3s ease; } }

/ Reduzierte Variante: nur Opacity, kein Transform / @media (prefers-reduced-motion: reduce) { .animiert { transition: opacity 0.2s ease; } } ```

Accessibility-Designerin Val Head (2022): „Reduced Motion bedeutet nicht No Motion. Es bedeutet weniger, langsamere oder anders getimte Motion."

Motion Audit

Bevor man Animationen entwickelt, empfiehlt sich ein Motion Audit:

1. Alle Animationen im Interface auflisten
2. Zweck jeder Animation definieren (Feedback, Orientation, Branding...)
3. Inkonsistenzen identifizieren (unterschiedliche Durations für ähnliche Aktionen)
4. Motion Language Tokens definieren (ähnlich Design Tokens)

```css / Motion Tokens als CSS Custom Properties / :root { --duration-sofort: 100ms; --duration-kurz: 200ms; --duration-normal: 300ms; --duration-lang: 500ms;

--ease-eintreten: cubic-bezier(0, 0, 0.2, 1); / ease-out / --ease-verlassen: cubic-bezier(0.4, 0, 1, 1); / ease-in / --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); / ease-in-out / --ease-ausdrucksvoll: cubic-bezier(0.34, 1.56, 0.64, 1); / back / }

.btn { transition: transform var(--duration-kurz) var(--ease-eintreten); } ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sind keine Animationen die beste Wahl? Wenn sie keine Information liefern, wenn der Nutzer schon weiß was passiert (experienced user), oder wenn sie den Workflow verlangsamen. Das Fehlen von Animation ist eine Design-Entscheidung.

Wie konsistent soll die Motion Language sein? Sehr konsistent für Feedback-Animationen (gleiche Geste = gleiche Animation). Varianz ist erlaubt bei dekorativen Animationen und Hero-Bereichen.

Wie halte ich Motion Design dokumentiert? Als Teil des Design Systems: Motion Tokens (Duration, Easing), Storybook-Stories für UI-Animationen, Style Guide-Sektion für Motion.

Verwandte Einträge

• CSS Transitions – Technische Umsetzung von Timing und Easing
• Micro-Interactions im UI Design – Prinzipien in kleinen UI-Momenten
• GSAP (GreenSock) – Grundlagen – Timeline als Werkzeug für Choreografie
• Performance-Optimierung bei Web-Animationen – Technische Voraussetzung für gutes Motion Design
• Scrollytelling – Animation beim Scrollen – Motion Design für narrative Scroll-Erlebnisse

Weiterführend

• Frank Thomas & Ollie Johnston: The Illusion of Life (1981) – Disney Press
• Val Head: Designing Interface Animation (2nd Ed., 2019) – Rosenfeld Media
• Sarah Drasner: SVG Animations (2017) – O'Reilly (Kapitel zu Motion Design)
• Google Material Design: Material Motion (2021) – m3.material.io/styles/motion
• IBM Carbon: Motion Design (2022) – carbondesignsystem.com/guidelines/motion
• Issara Willenskomer: Creating Usability with Motion – uxinmotion.net (2017)