TL;DR
Motion Design bzw. animierter Content ist heutzutage elementar, um Aufmerksamkeit zu generieren und Information nachhaltig zu vermitteln. Doch meist leidet die Performance einer Website, wenn sie mit visuellen und animierten Elementen vollgepackt wird. Das muss aber nicht so sein, dank dem JSON-basierten Fileformat Lottie.
Who the f*** is Lottie?
Lottie ist ein OpenSource Animationsformat, das 2017 von Airbnb als Lösung für die Herausforderungen bei der Integration ansprechender Animationen in Mobil- und Webanwendungen entwickelt wurde. Das Kernkonzept hinter Lottie ist es, Designern die Möglichkeit zu geben, Animationen mit Software wie Adobe After Effects zu erstellen und sie als JSON-Dateien zu exportieren, die nativ in Anwendungen gerendert werden können.
Aufgrund der vielen Vorteile gegenüber klassischen Bild & Videoformaten und der einfachen Handhabung fand das Format schnell grosse Verbreitung und wird von vielen führenden Marken, wie Microsoft, Uber, TikTok, Netflix und Google, aber auch Spotify und Disney rege genutzt.
Namensgeberin der Dateiformats ist übrigens Charlotte «Lotte» Reiniger, eine Pionierin im Bereich des Animationsfilms.
Lottie vs GIF
Lange waren GIFs das bevorzugte Dateiformat um animierte Inhalte im Web darzustellen und auch noch heute ist das Format – auch dank Plattformen wie Giphy & Co. – stark verbreitet. Allerdings haben GIFs auch verschiedene Nachteile, wie die Beschränkung auf 256 Farben, die relativ grossen Dateigrössen und das Fehlen von Interaktionsmöglichkeiten.
Lottie Animationen setzen an diesen Punkten an und bieten eine zeitgemässe Alternative. Das Format ist vektorbasiert, was es erlaubt die Files ohne Qualitätsverlust zu skalieren und massiv geringere Dateigrössen ermöglicht. Darüber hinaus sind sogenannte «Front-End Modifications» realisierbar. D.h. Entwickler können die Animationen in Echtzeit per Code beeinflussen und so zum Beispiel steuern, wann eine Animation abgespielt werden soll, welche Hintergrundfarbe verwendet werden soll oder in welcher Geschwindigkeit die Animation abgespielt werden soll.
Der herausragende Vorteil gegenüber GIFs liegt aber sicherlich in der höheren Darstellungsqualität und der gleichzeitig deutlich geringeren Dateigrösse. Wobei sich letzteres auch auf den PageRank und damit auf die Suchmaschinenoptimierung auswirkt.
Einsatzmöglichkeiten
Die Einsatzgebiete für Lottie-Animationen sind vielfältig. Im UI-Design kommen sie als sogenannte Micro-Animations oder -Interactions zum Einsatz und verkürzen als animierte Preloader die Wartezeit der Nutzer:innen oder zeigen nach dem Klick auf einen Button direkt den entsprechenden Status an.
Aber natürlich sind die Anwendungsfälle nicht auf den Einsatz in User-Interfaces beschränkt. Neben eher dekorativen, meist nur leicht animierten Illustrationen und Grafiken lassen sich auch animierte Infografiken und kurze Erklärvideos als Lottie-Animationen umsetzen.
Dank verschiedener Plugins lassen sich Lottie-Animationen mittlerweile spielend leicht auf Websites integrieren. Aber auch in iOS und Android Apps, im Social Marketing sowie in Newslettern und Präsentationen sind sie oft das Animationsformat der Wahl.
Wie erstelle ich eine Lottie-Animation?
- Am Anfang steht wie so oft die zündende Idee. Sobald diese besteht und klar ist, welche Elemente animiert werden sollen, werden diese in einem vektorbasierten Grafikprogramm wie Adobe Illustrator gelayoutet.
- Danach werden die Elemente in Adobe AfterEffects importiert und wie gewohnt animiert.
- Sobald die Animation wie gewünscht aussieht, kann sie per Lottie-Plugin direkt aus AfterEffects in ein JSON-File exportiert werden.
- Das JSON-File kann anschliessend über entsprechende Plugins wie z. Bsp. dem Elementor-Lottie Plugin in die entsprechende Website eingebunden und konfiguriert werden.
Fazit
Lottie-Animationen sind das ideale Format um Websiten, Newsletter, Präsentationen usw. mit animierten Inhalten etwas Leben einzuhauchen. Dabei vereint das Format die Einfachheit und Vielseitigkeit von GIF’s mit der Performance und den Interaktionsmöglichkeiten von SVG-Animationen und ist perfekt geeignet, um zeitgemässes visual Storytelling in Ihre Kommunikation zu bringen, ohne sich negativ auf den Pagespeed auszuwirken.
Bring Bewegung in dein Content-Marketing.
Wir helfen dir dabei — just drop a note.
