Zielsetzung des Kurses
Der Kurs UI-Animationen behandelt Gestaltung und Implementierung von Bewegungen in Benutzeroberflächen innerhalb des Feldes Interface- und Interaktionsdesign. Ziel ist die Vermittlung von Methoden zur Strukturierung, Planung und Produktion von Mikrointeraktionen, Übergängen und Zustandswechseln. Behandelt werden Prinzipien der zeitlichen Gestaltung, visuelle Hierarchie durch Bewegung sowie technische Umsetzungsmöglichkeiten in gängigen Design- und Entwicklungsumgebungen. Der Kurs ordnet UI-Animationen in Workflows von Design, Prototyping und Frontend-Integration ein.
Inhalte
Grundlagen der Bewegungsprinzipien in UI-Kontexten: Timing, Easing, Antizipation, Hierarchie durch Bewegung, visuelle Kontinuität, Zustandskommunikation und Erkennbarkeit von Interaktionen
Konzeption und Dokumentation von Mikrointeraktionen: Trigger, Feedback, Regeln, Loops, Edge Cases sowie Erstellung von Animations-Spezifikationen, Motion-Guidelines und Design-Tokens
Prototyping und Werkzeuge: Einsatz von Design-Tools mit Timeline- oder Keyframe-Funktion, Erstellung klickbarer Prototypen, Export von Animationswerten und Übergabe an Entwicklung
Technische Umsetzung: Implementierungsmöglichkeiten mit CSS-Transitions/-Animations, Web-Animations-API, Lottie/Bodymovin, SVG-Animationen und Performance-Aspekten wie Repaint/Reflow
Zugänglichkeit und Qualitätssicherung: Berücksichtigung von Bewegungsreduktion (prefers-reduced-motion), Lesbarkeit, Tastaturfokus, Testverfahren, Hand-off-Prozesse und Versionsstände
Evaluierung und Messung: Definition von Metriken für Interaktionsdauer, Fehlerraten, Abbruchpunkte, Nutzungsbeobachtung sowie Iteration anhand von Feedback und Telemetrie
Lernziele
- Identifikation von Bewegungsprinzipien und Ableitung ihrer Funktion für Zustandswechsel und Interaktionsfeedback
- Analyse bestehender Interfaces hinsichtlich Timing, Easing und Informationshierarchie durch Bewegung
- Erstellung von Spezifikationen für Mikrointeraktionen inklusive Trigger, Feedback und Edge Cases
- Durchführung von Prototyping-Schritten mit geeigneten Tools und Export von Animationsparametern
- Implementierung von UI-Animationen mit CSS, Web-Animations-API oder Lottie unter Berücksichtigung der Performance
- Bewertung von Zugänglichkeit, inklusive Umsetzung von prefers-reduced-motion und Test von Fokus- und Leseflüssen
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UX/UI-Design, in denen Konzeption und Dokumentation von Bewegungsabläufen Bestandteil der Interface-Gestaltung sind. Typische Tätigkeitsfelder umfassen Motion Design im digitalen Produktkontext mit Fokus auf Mikrointeraktionen und Übergänge. Der Kurs adressiert Inhalte für Tätigkeiten wie Frontend-Entwicklung, bei denen die Implementierung von Animationen in Web- oder App-Umgebungen erfolgt. Auch Product Design kann die Inhalte zur Abstimmung von Design, Prototyping und Hand-off nutzen.
Zusammenfassung
Der Kurs UI-Animationen behandelt die Gestaltung, Spezifikation und Umsetzung von Bewegung in Benutzeroberflächen. Im Rahmen dieser Weiterbildung werden konzeptionelle, gestalterische und technische Aspekte von Mikrointeraktionen, Prototyping und Implementierung vermittelt. Die Themen finden Anwendung in Tätigkeitsfeldern wie UX/UI-Design, Motion Design und Frontend-Entwicklung.