Buttons
Mit Lottie lassen sich wunderbar sogenannte Mikrointeraktionen unterstützen und individuelle, attraktive Buttoneffekte realisieren, die weit über einen einfachen Farbwechsel beim Hover hinausgehen.
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:
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?
Lottiefiles.com
Auf der Plattform Lottiefiles werden aktuell über 3.000 kostenlose Lottie-Animationen in den unterschiedlichsten Stilen angeboten. Darüber hinaus gibt es hier auch kostenpflichtige Animationen zu erwerben.
Custom made von der Netzbewegung
Als Agentur, können wir individuelle Grafiken und Animationen erstellen. Unser Designteam ist seit 2018 bestens mit dem Format vertraut. Unser Illustrator Nils zaubert aus seinen wunderbaren Vektorillustrationen im Handumdrehen zauberhafte kleine Animationsloops.
Übrigens:
Unser NB-TYPO3-Modulset ist bereits Lottie-ready und ermöglicht in vielen Modulen den Einsatz von Lottie-Animationen.
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