“Ein Bild sagt mehr als 1000 Worte” heißt es. Was können dann 30 Bilder in der Sekunde leisten? Tatsächlich eine ganze Menge! Mit Videos und Animationen lässt sich Kompliziertes leichter darstellen. Zusammenhänge werden sofort sichtbar und einzelne Prozesse auf das Wichtigste zugespitzt. Kurz: Mit den richtigen Bewegtbildern werden Dinge effektiv und ansprechend kommuniziert.
Vereinfacht gesagt gibt es im Web bisher zwei Wege, um Videos und Animationen darzustellen:
- Längere Videos mit gefilmten Sequenzen und Ton, die als herkömmliche Videoformate von einem Server gestreamt und in eine Seite eingebunden werden.
- GIF-Animationen, eingesetzt für dekorative Zwecke oder schematische Inhalte. Dieses Verfahren weist jedoch eine Reihe von Nachteilen auf: Geringe Bildrate, eher schwache Bildqualität und Interaktionsmöglichkeiten für den Nutzer nur über technische Umwege.
Animierte SVGs beseitigen diese Nachteile weitgehend. Sie bleiben stets gestochen scharf und haben eine geringe Dateigröße. Die Animationen sind butterweich und lassen sich präzise steuern. Ideale Voraussetzungen also, um schematische Schritt-für-Schritt-Anleitungen und andere interaktive Inhalte in Spitzenqualität darzustellen. Davon kann man sich am besten anhand konkreter Beispiele überzeugen.
Der Qualitätsaspekt
Einfache GIF-Animationen haben ein Problem: ihre mittelmäßige Bildqualität. Für Katzen-Memes im Gruppenchat reicht das, für professionelle Websites eher nicht. SVG-Animationen schneiden da im direkten Vergleich wesentlich besser ab:
SVG-Animation
GIF-Animation
Die SVG-Animation läuft flüssiger, an den Farbkanten bilden sich keine störenden Artefakte wie beim GIF. Ein weiterer Vorteil: SVG-Grafiken bleiben auch auf hochauflösenden Displays oder bei Vergrößerung gestochen scharf:
Angesichts neuester Smartphones und Tablets ist es wichtig, an Bildschirme zu denken, auf denen einzelne Pixel praktisch nicht mehr wahrnehmbar sind.
Produkte mit Hilfe smarter Animationen erklären
Möchte man Produkte im Web darstellen, kann man jeden einzelnen Aspekt linear abhandeln – oder man lässt den User selber entscheiden! SVG-Animationen werden präzise mit Hilfe von JavaScript gesteuert, sodass sich interaktive Grafiken erstellen lassen. Ein einfaches Beispiel – diese Animation wird über die beiden Schaltflächen gesteuert:
Dieses Beispiel zeigt, wie man einzelne Aspekte eines Produktes mit Hilfe von Animationen in den Fokus rücken kann.
Die Möglichkeiten werden hier nur angeschnitten. Auch deutlich komplexere Elemente sind denkbar. Machen Sie Ihre Produktvorstellungen zu einem interaktiven Erlebnis, das im Kopf bleibt und den Produktseiten großer Tech-Hersteller in nichts nachsteht!
Die Technologie dahinter
SVG-Bilder sind letztendlich Code. Diesen kann man theoretisch auch händisch schreiben, was allerdings sehr unpraktisch ist. Wirklich sinnvoll erstellen lassen sich komplexe SVG-Animationen nur mit einer Animationssoftware. AirBnB hat mit Lottie eine Javascript-Bibliothek veröffentlicht, mit der aus After Effects exportierte Animationsdaten im Browser abspielbar sind. Die Animationen lassen sich außerdem mit Hilfe von Javascript steuern.
Fazit
Perfekte Animationen im Web haben lange auf sich warten lassen. Bisherige Lösungen waren oft mit Einschränkungen verbunden. Zwar haben auch die Animationen mit SVGs noch nicht ihr volles technisches Potenzial entfaltet, aber stetige Weiterentwicklungen der vorhandenen Tools geben uns Designern immer bessere Möglichkeiten an die Hand.