Kategorie Icon Webdesign

LottieFiles: Animierte Grafiken im Web

So bekommen Grafiken und deine Website maximale Aufmerksamkeit.
Mehr erfahren

lofi <3 lottie

So bekommen Grafiken und deine Website maximale Aufmerksamkeit.
Autor
lowfidelity
Datum
08.Juli 2022

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.Milton Glaser

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.

Kontakt

 

 

 

 

 

 

 

Credits
Webdesign
Theresa
Zurück zur Übersicht