Zielsetzung des Kurses
Der Kurs zum Thema Animierte Icons vermittelt Verfahren zur Konzeption und Umsetzung kleiner Bewegungssequenzen für Icons im Kontext von Grafikdesign, Motion Design und User Interface Design. Behandelt werden die Ableitung von Bewegungsprinzipien aus Markenrichtlinien sowie die technische Umsetzung für digitale Produkte und Kommunikationsmedien. Ziel ist die strukturierte Erarbeitung von Workflows von der Idee bis zur Exportdatei unter Berücksichtigung gängiger Formate. Im Fokus stehen die Verbindung von Formreduktion, Timing und Interaktionsbezug sowie die Vorbereitung für verschiedene Ausspielkanäle.
Inhalte
Einführung in Motion-Design-Grundlagen für Icons: Reduktion von Formen, Timing, Easing, Antizipation und Lesbarkeit in kleinen Größen; Ableitung von Bewegungsregeln aus Corporate-Design-Vorgaben.
Konzeption und Storyboarding: Erstellung von Mikro-Storyboard und Animatic, Definition von Zuständen (Idle, Hover, Tap, Loading), Übergängen und Loop-Logiken.
Produktion in Design- und Animationssoftware: Aufbau sauberer Vektorstrukturen, Layer-Organisation, Keyframing, Pfad-Animation, Maskierung, Expressions und Bibliotheksnutzung.
Export- und Formatvorbereitung: Vergleich von Exportformaten (GIF, MP4, Lottie/JSON, SVG-Animation), Komprimierung, Farbräume, Transparenz, Auflösung und Framerates.
Integration in digitale Umgebungen: Einbindung in Web, App und Präsentationsmedien, Übergabe an Entwicklung, Barriereaspekte, Performance- und Dateigrößenmanagement.
Qualitätssicherung und Dokumentation: Prüfprozesse, visuelle Regression bei Pixelgrößen, Konsistenz innerhalb Icon-Sets, Benennungskonventionen und Styleguides.
Lernziele
- Analysieren von Bewegungsprinzipien für Icons hinsichtlich Timing, Easing und Lesbarkeit
- Identifizieren und Unterscheiden von Zuständen und Übergängen in UI-Szenarien (Idle, Hover, Tap, Loading)
- Erstellen von Mikro-Storyboards und Animatics für animierte Icons
- Anwenden von Keyframing- und Pfad-Animation zur Umsetzung vektorbasierten Motion Designs
- Integrieren von animierten Icons in Web- und App-Workflows einschließlich Übergabeformaten wie Lottie
- Bewerten von Exportformaten nach Kriterien wie Dateigröße, Transparenz, Farbraum und Performance
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie Motion Designer mit Schwerpunkt Interface-Elemente und Mikrointeraktionen. Typische Tätigkeitsfelder umfassen UI/UX-Design mit Fokus auf visuelle Zustände, Übergänge und Icon-Bewegungen. Der Kurs adressiert Inhalte für Tätigkeiten wie Grafikdesigner in digitalen Produktteams mit Verantwortung für Icon-Sets und deren Animation. Ergänzend können Frontend-nahe Rollen mit Verantwortung für die Integration von Lottie- oder SVG-Animationen angesprochen werden.
Zusammenfassung
Der Kurs Animierte Icons behandelt die Konzeption, Produktion und Integration bewegter Icons für digitale Anwendungen und Kommunikationsmedien. Im Rahmen dieser Weiterbildung werden technische Workflows, Exportformate und Qualitätskriterien für den Einsatz in Design- und Entwicklungsprozessen vermittelt. Die vermittelten Themen stehen in Bezug zu Tätigkeitsfeldern wie Motion Design, UI/UX-Design und frontendnaher Integration.