Kennst du Lottie?

Warum wir Lottie so toll finden und du dieses Grafik-Format unbedingt kennenlernen solltest.

Denkanstoß #20

Um es gleich zu sagen: Wir lieben Lottie. Lottie ist eine großartige Möglichkeit, auf ziemlich einfache Weise deutlich mehr WOW! in Webprojekte zu packen.

Was ist Lottie?

Lottie ist ein vektorbasiertes Grafikformat, das auf SVG und JSON basiert. Die mit gängigen Grafikprogrammen erstellte Grafik wird in eine Textdatei umgewandelt, die alle Informationen zur Berechnung der Grafik und der Animation als Zahlenwerte enthält. Die endgültige JSON-Datei enthält eine skriptbasierte Beschreibung der Animation.

Das Format wurde um 2015 entwickelt. Seit 2017 wird die Weiterentwicklung des Formats unter anderem von Airbnb unterstützt. Seitdem hat sich die Verbreitung und Akzeptanz stark beschleunigt.

Wir als Agentur für digitale Erlebnisse freuen uns natürlich immer über neue Möglichkeiten und Formate mit denen wir mehr Bewegung ins Web bringen können.

Was sind die Vorteile von Lottie?

  • Die Dateigröße einer Lottie-Animation ist in der Regel deutlich kleiner als vergleichbare Grafikanimationen in pixelbasierten Videoformaten.
  • Sofern die Ausgangsgrafik in einem Vektorformat vorliegt, kann die Animation ohne Qualitätsverlust beliebig skaliert werden.
  • Da das Format auf den Webstandards SVG und JSON basiert, wird es in allen gängigen Browsern ohne zusätzliche Erweiterungen problemlos dargestellt.

Was kann man mit Lottie anfangen?

Die Anwendungsfelder für Lottie-Animationen sind vielseitig. Hier ein paar Beispiele:

Buttons

Mit Lottie lassen sich wunderbar sogenannte Mikrointeraktionen unterstützen und individuelle, attraktive Buttoneffekte realisieren, die weit über einen einfachen Farbwechsel beim Hover hinausgehen.

Animierte Icons und Keyfacts

Icons als visuelle Unterstützung sind aus dem Webdesign nicht mehr wegzudenken. Mit Lottie ist es nun möglich, Icons zu animieren und damit ihre nonverbale Aussage zu verstärken. Auch Zahlen oder Keywords können als Loop animiert werden.

Animiertes Feedback und Step-by-Step Anweisungen

Mit Lottie-Animationen lassen sich potenzielle Frustrationen in der User-Experience abmildern, indem zum Beispiel eine Fehlermeldung mit einer charmanten Animation aufgelockert wird. Auch konkrete Schritt-für-Schritt-Anweisungen können mit Animationen unterstützt werden und so die User-Experience verbessern.

Komplette Animationsclips in Zeichentrickqualität

Für Planet Schule haben wir bereits 2018 komplette Animationssequenzen im Stil kurzer Trickfilme zum Thema Honigbienen umgesetzt. Die Animationen laden unschlagbar schnell.

Wie komme ich an Lottie?

Übrigens:

Unser NB-TYPO3-Modulset ist bereits Lottie-ready und ermöglicht in vielen Modulen den Einsatz von Lottie-Animationen.

Ein bewegender Beitrag von: Dietmar

Über den Autoren

Dietmar ist Creative Director Concept und beschäftigt sich ständig mit neuen Trends und Formaten, die mehr WOW! ins Web bringen.

Sprich uns an

Mehr WOW fürs Web!

Sprich uns an, wenn du dir mehr WOW in deinem Web-Auftritt wünschst. Zum Beispiel mit innovativen Web3D-Lösungen.

Let’s do it. Wir freuen uns von dir zu hören.

Alwin Roppert

Inhaber & Geschäftsführer
Telefon +49 721 667789 20

Kontakt per E-Mail