Zielsetzung des Kurses
Der Kurs UI Animation und Motion Design adressiert die Gestaltung zeitbasierter Interaktionen und animierter Benutzeroberflächen im Kontext digitaler Produkte. Im Mittelpunkt stehen Prinzipien der Bewegungsgestaltung, die Übertragung auf UI-Komponenten sowie der Einsatz geeigneter Tools. Behandelt wird die Verbindung von Interaktionsdesign, visueller Gestaltung und Prototyping zur Erstellung konsistenter Bewegungsmuster. Ziel ist die Vermittlung anwendungsbezogener Methoden für die Planung, Ausarbeitung und Dokumentation von UI-Animationen.
Inhalte
Einführung in Motion-Prinzipien für Benutzeroberflächen, darunter Timing, Easing, Antizipation, Hierarchie und Informationsfluss; Ableitung von Bewegungsregeln aus Marken- und UI-Guidelines sowie Aufbau einer Motion-Sprache für Komponenten und Zustände.
Gestaltung von Microinteractions und Zustandswechseln, einschließlich Hover-, Fokus-, Lade- und Fehlermeldungs-Animationen; Ausarbeitung von Navigationsübergängen, Scroll- und Parallax-Effekten sowie Feedback-Mechanismen.
Prototyping und Tool-Einsatz mit gängigen Anwendungen wie After Effects, Figma/Prototyping-Tools oder Lottie; Erstellung von Keyframes, Curves und Export-Workflows; Übergabe an Entwicklung mittels Spezifikationen.
Technische Umsetzung und Performance-Aspekte, einschließlich Exportformaten (SVG, JSON/Lottie, PNG-Sequenzen), Asset-Management, Framerate, Dateigröße und Laufzeitverhalten auf Web und Mobile.
Barrierefreiheit, Lesbarkeit und Konsistenz in Motion Design; Einsatz von reduzierten Bewegungsmodi (prefers-reduced-motion), Kontrast in Bewegung, Fokusführung und Dokumentation von Richtlinien im Designsystem.
Lernziele
- Analysieren von UI-Interaktionen hinsichtlich Timing, Hierarchie und Informationsfluss
- Identifizieren geeigneter Bewegungsprinzipien für Komponenten, Zustandswechsel und Navigationsübergänge
- Erstellen von Prototypen mit Keyframes, Easing-Kurven und Exporten für Web- und Mobile-Integrationen
- Durchführen von Übergaben an Entwicklung inklusive Spezifikationen zu Dauer, Delay, Kurven und Assets
- Bewerten von Performance- und Barrierefreiheitsaspekten bei der Umsetzung von UI-Animationen
- Integrieren einer konsistenten Motion-Sprache in Styleguides und Designsysteme
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UI/UX-Design, mit Fokus auf Interaktionsgestaltung und animierte Oberflächen. Typische Tätigkeitsfelder umfassen Motion Design für digitale Produkte, etwa die Ausarbeitung von Übergängen, Feedback und Microinteractions. Der Kurs adressiert Inhalte für Tätigkeiten wie Prototyping- und Handoff-Rollen im Produktteam, einschließlich Zusammenarbeit mit Frontend-Entwicklung.
Zusammenfassung
Der Kurs UI Animation und Motion Design behandelt die Konzeption, Ausarbeitung und Dokumentation zeitbasierter Gestaltung für Benutzeroberflächen. Im Rahmen dieser Weiterbildung werden Bewegungsprinzipien, Prototyping, technische Umsetzung und Barrierefreiheit in Motion Design vermittelt. Die vermittelten Inhalte stehen im Bezug zu Tätigkeitsfeldern in UI/UX-Design, Motion Design und produktnaher Zusammenarbeit mit Entwicklung.