Menu Close
Immer grösserer Beliebtheit gilt der Einsatz von Grafiken – ganz egal ob es sich um Digital oder Offline-Lösungen handelt. Im Internet haben sich AniGifs schon in den 80er/90er-Jahren durchgesetzt und haben mit Giphy & Co ein richtiges Revival erlebt.

Illustrationen & Animationen in der digitalen Welt

Digitale Brands setzen schon seit geraumer Zeit Illustrationen ein, welche im Stil und in den Farben der Corporate Identity realisiert werden. Lange waren diese Grafiken statisch, manchmal wurden diese Illustrationen als Vektordateien im SVG-Format umgesetzt und integriert. Auf Smartphones und anderen hochaufgelösten Bildschirmen wurden diese gestochen scharf abgebildet. Zusätzlich konnten diese mit CSS-Code und teils Javascript umgefärbt oder animiert werden – erforderte aber immer Programmierkenntnisse.

 

Es war einmal Adobe Flash

Lange Zeit wurden animierte Animationen mit Adobe Flash realisiert, welches ursprünglich von Macromedia entwickelt wurde. Mit Flash konnte man animierte Animationen auch ohne Programmierung realisieren und in verschiedenen Lösungen einsetzen (lokal, CD-Roms, Internet). Der grosse Nachteil an dieser Lösung war, dass die Nutzer ein Adobe Flash Plugin installieren mussten um solche Animationen überhaupt anzusehen. Dennoch hatte sich die Lösung im Web gut verbreitet. Mit dem Aufkommen von Smartphones ist diese Technologie gestorben. Insbesondere weil Apple auf seinen iPhones die Lösung nicht mehr unterstützte – primär weil diese zu rechenintensiv war und Battery Life massiv reduzierte.

 

Animierte Grafiken mit After Effects

Mit der Steigerung der Bandbreiten im Intenret ist dann die Umsetzung von Animationen über Adobe After Effects aufgekommen. Dies hatte allerdings zur Folge, dass die Implementation als Video oder animiertes Gif erfolgte. Dadurch stieg die Dateigrösse massiv an und es war nicht selten, dass eine Animation mehrere Megabyte gross wurde. Für Smartphone-Nutzer mit einer schlechten Netzverbindung also nicht ganz ideal. Zudem kann die Umsetzung auch nicht interaktiv realisert werden sprich. nicht auf Interaktionen des Nutzers eingehen.

 

Lottie – Neue Lösung für Animierte Illustrationen und Grafiken

Ein Unternehmen das uns allen bekannt, AirBnB, hat mit «Lottie Files» eine neue Lösung entwickelt, welche das Leben vieler Entwickler und Designer erleichtert.  Dadurch kann gewohnt mit After Effects eine Animation erstellt und anschliessend exportiert werden. Die Daten werden dabei mit dem After-Effects-Plugin Bodymovin als JSON-Datei exportiert und lassen sich so im Web einfach und ohne Plugin einsetzen. Ebenso in nativen Apps und React-Entwicklungsumgebungen.

Da dieses relativ neue Format auch in den beliebten Prototyping-Softwarelösungen Figma und Sketch eingesetzt werden kann, steigt die Popularität stetig an. Auch aus meiner Sicht ist das ein massiver Mehrwert.

Ich bin überzeugt, dass sich diese Lösung im Web und auch bei Apps durchsetzen wird. Grosse Unternehmen wie AirBnB, Uber und Co setzen die Lösung bereits gekonnt ein. Wer dem Digital Branding Beachtung schenkt, wird diese Lösung implementieren. Go for it! Let’s animate.

 

Weiterführende Links zum Thema

AirBnB – Lottie
Facebook Gruppe LottieFiles
Lottie Dokumentation
Bodymovin

Contact
Contact
Michael Wegmüller
mw_planet