Webdesign
LottieFiles: Animierte Grafiken im Web
lofi <3 lottie
Durch animierte Vektorgrafiken können Elemente im Web gezielt hervorgehoben werden. Komplizierte Inhalte können so veranschaulicht werden und bleiben besser in Erinnerung. Ob bei Websites, Mobile Apps, Smart Watches, Games oder E-Books – animierte Grafiken lenken den Fokus sofort in die gewünschte Richtung. Auf einer Website können das Icons, Logos, Buttons, Hintergrundelemente, Infografiken oder Datenvisualisierungen sein. Sparsam eingesetzt wird das Erlebnis der Website positiv beeinflusst. Durch die uneingeschränkte & pixelfreie Skalierbarkeit auf jede Bildschirmgröße sind einmal erstellte Dateien auch in Zukunft nachhaltig und wiederholt einsetzbar.
Ein Design ruft drei Reaktionen hervor – ja, nein und WOW!
Wow ist das Ziel.
Logo
Wofür kann man ein animiertes Logo verwenden?
- Loading-Element auf Website
- Link zur Startseite: Animation on hover
- Opener für Social Media Videos
- Animierte Firmen-Profilbilder
Rocket science?
Eigentlich nicht. Die Erstellung und Implementierung von animierten Vektorgrafiken (Lottiefiles) passiert in wenigen Arbeitsschritten und verursacht keinen großen Mehraufwand für ein eindrucksvolles Ergebnis.
Im Vergleich zu SVG oder CSS Animationen können Lottiefiles durch Plugins direkt in Code umgewandelt werden. Es benötigt keinen zusätzlichen technisches Aufwand zur Realisierung. Das spart Zeit und Kosten.
Icons
Zur Unterstützung wichtiger Bereiche werden Texte mit bezeichnenden Icons hervorgehoben.
Klassische Bereiche für diesen Einsatz wären:
- Kontakt
- News
- Blog
- Social Media
Logo, Icons & Grafiken bereits vorhanden?
Bestehende Vektorgrafiken können einfach animiert, erweitert oder angepasst werden. In wenigen Schritte kann so eine neue User Experience geschaffen werden.
LOTTIE vs. GIF
- Lottiefiles sind pixelfrei skalierbar (basiert auf SVG und JSON, also ein vektorbasiertes Grafikformat)
- Farben können ohne großen Aufwand geändert werden
- Nachhaltige Lösung, da sich Größe und Auflösung von Bildschirmen stetig weiterentwickeln und verändern
- da eine Lottie Animation nur aus Code besteht, benötigt die Implementierung viel weniger Datenvolumen
- Durch geringeres Datenvolumen des Lottifiles sind die Ladezeiten auch dementsprechend kürzer
Lottiefiles sind vielseitig
Sie können für viele Elemente der Website genutzt werden:
- Logoanimationen
- Icons
- Headergrafiken
- Hintergrundverläufe
- On-Hover animierte Elemente
- Buttons
- Präsentationen
- uvm.
Next Level: Animierte Screendesigns via interaktivem Vorschaulink
Lottiefiles können via Adobe XD-Plugin direkt im Screendesign integriert werden. Logoanimationen, spezielle Hover-Effekte, Hintergrund Animationen und vieles mehr kann so veranschaulicht werden.
Noch Fragen?
Kontaktiere uns um mehr über LottieFiles zu erfahren und wie du sie für dein Projekt einsetzen kannst.