Zielsetzung des Kurses
Der Kurs Webanimationen gestalten vermittelt Grundlagen und Anwendungen der Bewegungsgestaltung für digitale Oberflächen. Behandelt werden Konzepte der Interface-Animation, Principles of Animation im Webkontext sowie technische Umsetzung mit HTML, CSS und JavaScript. Ziel ist die strukturierte Heranführung an Planungs-, Entwurfs- und Produktionsprozesse für mikround makrointeraktive Animationen. Der Kurs ist im Bereich Webdesign, Frontend-Entwicklung und UI/UX verortet.
Inhalte
Einführung in Motion-Design im Web: Terminologie, Einsatzfelder in UI/UX, Mikrointeraktionen, Übergänge, Feedback- und Zustandswechsel, Barrierefreiheit und Performance-Grundlagen
Gestaltungsprinzipien und Timing: Easing-Kurven, Hierarchie durch Bewegung, Rhythmus, Dauer, Verzögerung, räumliche Kontinuität, Informationsgewichtung und Lesbarkeit
Technische Umsetzung: CSS-Transitions und -Animations, Keyframes, Transformationsarten, Kompositions- und Stacking-Kontexte, GPU-beschleunigte Properties, JavaScript-Animation mit Web-APIs
Prozess und Prototyping: Briefing-Analyse, Storyboards, Motion Specs, Prototypen mit Design-Tools, Übergabe an Entwicklung, Versionierung und Dokumentation
Integration und Qualitätssicherung: Performance-Messung, Testen in Browsern und auf Geräten, Responsive Verhalten, Reduktion von Bewegungen (prefers-reduced-motion), rechtliche und lizenzrechtliche Aspekte bei Assets
Lernziele
- Analysieren von Interaktionsabläufen und Identifizieren geeigneter Animationspunkte in Benutzeroberflächen
- Erstellen von Keyframe-Animationen mit CSS einschließlich Definition von Timing-Funktionen und Transformationsketten
- Durchführen von JavaScript-gesteuerten Sequenzen unter Nutzung von Web-APIs für Zustandswechsel und Event-Handling
- Entwickeln von Motion-Spezifikationen mit Storyboards, Timing-Tabellen und Übergabeformaten für Teams
- Bewerten der Performance von Animationen anhand von Metriken wie Repaint/Reflow und Implementieren von Optimierungen
- Integrieren von Barrierefreiheitsanforderungen, einschließlich Medienabfragen für Bewegungsreduktion und alternativer Zustandsdarstellung
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UI/UX-Design, mit Fokus auf Mikrointeraktionen, Übergänge und Nutzerfeedback.
Typische Tätigkeitsfelder umfassen Frontend-Entwicklung, insbesondere die Implementierung von Animationen mit CSS und JavaScript.
Der Kurs adressiert Inhalte für Tätigkeiten wie Motion-Designer im digitalen Umfeld mit Schwerpunkt auf webbasierten Interfaces und Komponentenbibliotheken.
Zusammenfassung
Der Kurs Webanimationen gestalten behandelt Konzeption, Gestaltung und technische Umsetzung von Animationen für Weboberflächen. Im Rahmen dieser Weiterbildung werden gestalterische Prinzipien, CSS- und JavaScript-Verfahren sowie Qualitäts- und Integrationsprozesse vermittelt. Die Themen stehen im Bezug zu Tätigkeiten in UI/UX-Design, Frontend-Entwicklung und digitalem Motion-Design.