Mit LottieFiles Animationen für das Web erstellen

Das nächste große Ding: Das Web 3.0

Websites verzichten seit graumer Zeit auf Schlagschatten, Glanz und Reflektionen. Doch in den letzten 5 Jahren wurde auch das Flat-Design immer mehr weiterentwickelt. Neben dem Einsatz von Technologien wie künstlicher Intelligenz (KI) ist ein wesentliches Ziel, den Nutzern das Web zugänglicher und personalisierter zu gestalten. Im Internet wird dabei häufig von einer neuen Ära des Webdesigns oder auch von einem Web 3.0 gesprochen. Das kann gelingen, wenn vor allem kreative Elemente wie z. B. „Blobs“ richtig eingesetzt und dadurch Inhalte für den Nutzer in den Vordergrund gestellt werden. Einen sehr guten Einblick in die beschriebenen „Blobs“ gibt es hier. Aber auch detailgetreue 3D Modelle von Produkten oder Formen bereichern die Websites, wenn ihre visuellen Inhalte bestimmte Funktionen oder Features besser veranschaulichen. Ein weiterer Schritt in Richtung Web 3.0 ist die Verwendung von schönen Illustrationen, die im besten Fall einem einheitlichen Stil folgen. Die Grafikdatei im SVG-Format lässt sich schnell und verlustfrei im responsiven Web einbauen. Die Typografie begegnet uns nicht nur auf großen Plakaten, auch im Web ist sie ein wichtiger Bestandteil. Ein gutes Webdesign mit einer markanten Schrift hebt die eigene Website vom Mainstream ab. 2D Grafiken und ein neuer Font sind dabei schnell abgeändert bzw. eingefügt, doch wie können Seitenbetreiber mit den Trends mithalten, wenn es um bewegte Inhalte geht? Nur so viel: Minimaler Aufwand, dank einem bestimmten Tool!

Abbildung 1: Vergleich unserer let’s dev Website von 2016 im Web 2.0 und ein aktueller Screenshot im Web 3.0 Stil

Animation mit LottieFiles

LottieFiles ist ein ideales Tool, um nach kleinen Animationen für die eigene Website zu suchen. Die kleinen bewegten Videos lassen sich durch ihre ladefreundliche Größe und ihrer Skalierbarkeit auf die Website oder auch in die eigene App einbinden. Sollte eine Animation mal nicht dem Corporate Design entsprechen, lassen sich alle Dateien auch bearbeiten. Dies kann z. B. direkt im Online-Editor oder per zusätzlichem Plugin in After Effects, Adobe Animate usw. geschehen. Designer und Illustratoren haben die Möglichkeit, ihre Motive (unter Verwendung des Copyrights) kostenfrei oder kostenpflichtig anzubieten. Ein großer Vorteil ist die vielfältige Integration der kleinen Dateien: Die LottieFiles-Animationen werden als JSON-Datei eingebunden. Somit werden sie von einer breiten Palette an Browsern oder auch Betriebssystemen wie iOS, Android, Windows, WordPress und vielen mehr, unterstützt. Erfahrene Designer und Entwickler, die auf komplett eigene Grafiken und bewegten Icons setzen, können ihre Werke direkt aus After Effects exportieren. Wichtig ist hier die Nutzung eines Plugins mit dem Namen Bodymovin. Das Plugin kommt direkt in After Effects zum Einsatz. Mit wenigen Klicks wird aus dem animierten Icon eine JSON-Datei exportiert und ggf. zugehörige SVGs und PNGs in einem separaten Ordner mit abgelegt. JSON-Dateien haben den Vorteil, dass sie im Gegensatz zu GIFs sehr kompakt in ihrer Datengröße sind. So kann eine Animation mit mehreren Ebenen um ganze 600% komprimiert werden, gleichzeitig laden die Animationen bis zu zehnmal schneller. Eine kleine Demo gibt es übrigens hier auf unserer Website.

Abbildung 2: Das Bodymovin Plugin wird über Fenster > Erweiterungen angezeigt;
Nach Festlegen der Exporteinstellungen wird die JSON-Datei exportiert

3D-Modellierung mit Vectary

Die kostenlose Modellierungssoftware Vectary taucht in die 3D- und AR-Welt ab. Immer häufiger gibt es auf modernen 3.0 Websites immersive Inhalte zu entdecken, die bei ihren Besuchern einen besonderen Eindruck hinterlassen. Auch in Zusammenhang mit Augmented Reality werden in Zukunft keine 3D modellierte Formen mehr wegzudenken sein. Vectary hat es sich zum Ziel gesetzt, Anfängern eine Plattform zu geben und frei mit dem Thema zu experimentieren. Beginner können sich direkt im Browser einloggen und haben sofort Zugriff auf eine Vielzahl an Vorlagen. Mit klaren Formen, einer großen Auswahl an Texturen und einer einfachen Handhabung der Belichtungsfunktion, können in wenigen Schritten sehenswerte Inhalte generiert werden. Die Gründer der Plattform haben zudem bekannt gegeben, dass sie mit LottieFiles stärker zusammenarbeiten möchten, d. h. es wird (wie bereits oben beschrieben) eine Plattform entstehen, bei der erstellte Inhalte direkt zur Verwendung angeboten werden können. Auch der Export von 3D-Animationen soll weiter ausgebaut werden: Aktuell werden aufgrund ihrer Komplexität noch recht große Dateien exportiert, welche später auf der Website zu längeren Ladezeiten und Rucklern führen kann.

Abbildung 3: Egal ob Anfänger oder Experte: Mit Vectary lassen sich mit einfachen Formen und vorgegebenen Texturen tolle 3D Inhalte erstellen