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
