F7 Redesign - Der Blog im Fokus

Unser neuer Blog sollte sich nicht nur visuell vom Agenturbereich abheben, sondern auch durch unterstützende Funktionen und Navigationshilfen eine optimierte Nutzererfahrung beim konsumieren der Bloginhalte bieten. In diesem Artikel gehen wir tiefer auf die einzelnen Funktionen und deren Zweck ein und zeigen, wie wir Lottie Animationen verwenden, um unsere Blogteaser abwechslungsreicher zu gestalten.

Das optimale Le­se­er­leb­nis

Optimale Textlänge und Zeichenanzahl

Die optimale Zeichenanzahl pro Zeile unserer Artikel ist auf eine angenehme Lesbarkeit ausgerichtet. Zu lange Zeilen (mehr als 80 Zeichen) ermüden die Augen, während zu kurze Zeilen (weniger als 40 Zeichen) den Lesefluss stören können. Daher haben wir eine ausgewogene Zeilenlänge von etwa 60 bis 70 Zeichen gewählt, die ein flüssiges Lesen ermöglicht und gleichzeitig die Augen schont.

Lesezeit

Die geschätzte Lesezeit, die neben dem Erscheinungsdatum in den Teasern unserer Blogartikel zu finden ist, gibt einen schnellen Überblick über die Länge des jeweiligen Beitrags. So können unsere Leser:innen auf einen Blick einschätzen, ob Sie gerade Zeit für einen kurzen Überblick oder einen ausführlichen Artikel haben.

Wir berechnen die Lesezeit anhand der Wortanzahl des Artikels und einer durchschnittlichen Lesegeschwindigkeit von 150 Wörtern pro Minute. Diese Schätzung ist bewusst etwas konservativer gewählt, da die tatsächliche Lesegeschwindigkeit von verschiedenen Faktoren abhängt, wie zum Beispiel:

• Komplexität des Themas: Fachartikel erfordern oft eine langsamere und konzentriertere Leseweise als leichte Unterhaltungsthemen.
• Individuelle Lesegewohnheiten: Manche Menschen lesen generell schneller als andere.

Inhaltsnavigation und Scrollspy

Die Inhaltsnavigation am rechten Bildschirmrand dient als praktischer Wegweiser durch die Artikel. Sie zeigt stets an, in welchem Abschnitt man sich gerade befindet, und ermöglicht durch einfaches Klicken das Springen zu anderen Abschnitten. Die aktuell sichtbare Überschrift ist dabei hervorgehoben, sodass auch bei längeren Artikeln der Überblick bewahrt und gezielt zu relevanten Inhalten navigiert werden kann.

Vor­schau­bil­der und Teaser

Im Zuge des Redesigns diskutierten wir, ob die neuen Teaser ein komplett eigenständiges Design erhalten sollten. Wir entschieden uns jedoch für eine Weiterentwicklung der bestehenden Ästhetik, da ohnehin eine Anpassung an die neue Farbpalette geplant war. Das bot die Chance, die Bildsprache kohärent zu gestalten.

Ein weiterer wichtiger Aspekt war die Entscheidung, ausschließlich Vektorelemente für die neuen Teaserbilder zu verwenden. Dies gewährleistet nicht nur eine scharfe Darstellung auf allen Geräten, sondern ermöglicht auch die vollständige Gestaltung der Teaser in Figma.

Dadurch entfällt die Notwendigkeit, mehrere Photoshop-Dateien zu verwalten. Stattdessen sind alle Teaser in einer zentralen Figma-Datei zusammengefasst, was nicht nur den Zugriff auf einheitliche Schriften und Farben erleichtert, sondern auch den Vorteil bietet, Vektor-Animationen direkt in Figma erstellen zu können. Diese Vektor Animationen nutzen wir, um einzelne Teaser zu animieren und die Blogübersicht nicht mehr wie eine statische Wand aus Bildern und Texten wirken zu lassen.

Lottie Animationen

Was ist Lottie?

Wenn man heutzutage etwas von Microinteractions und Webanimationen hört, ist relativ häufig von Lottie Animationen die Rede. Dieses Format wurde ursprünglich dazu entwickelt, Vektoranimationen mittels des Plugins “Bodymovin” aus Adobe After Effects zu exportieren und als HTML oder SVG im Web einzubinden.

Das Projekt wurde später von einem Team von Airbnb unterstützt, um LottieFiles/ Lottie effizienter zu machen und den Export und Import von JSON zu ermöglichen.

Warum Lottie?

• Performance: Lottie-Animationen sind im Vergleich zu GIFs oder Videos deutlich kleiner und ressourcenschonender, was zu schnelleren Ladezeiten und einer besseren Benutzererfahrung führt.
• Skalierbarkeit: Da Lottie-Animationen vektorbasiert sind, können sie ohne Qualitätsverlust auf jede Größe skaliert werden. Sie sehen auf hochauflösenden Bildschirmen genauso gut aus wie auf kleinen mobilen Geräten.
• Interaktivität: Lottie-Animationen können interaktiv gestaltet werden, sodass Benutzer:innen mit ihnen interagieren können. Dies ermöglicht eine dynamischere und ansprechendere Benutzererfahrung.
• Flexibilität: Lottie-Animationen können einfach in verschiedene Plattformen und Frameworks integriert werden, einschließlich Websites, mobile Apps und sogar Smartwatches.

Mittlerweile sorgen sogenannte Microanimationen und Microinteractions für mehr Freude bei der Nutzung von Software. Prominente Beispiele hierfür sind die "Gefällt mir"-Animationen von YouTube und Spotify, die durch ihre spielerische Gestaltung positive Emotionen hervorrufen und das Nutzerengagement fördern. Hierbei wird nahezu immer auf Lottie Files zurückgegriffen, um diese Animationen darzustellen.

Wie werden Lottie Animationen angelegt?

Es gibt verschiedene Wege, SVG-Elemente mithilfe von Lottie zu animieren und zu exportieren. Neben dem webbasierten Lottie Creator steht auch ein praktisches Figma-Plugin zur Verfügung, mit dem sich bestehende Figma-Flows exportieren und bearbeiten lassen.

Unser Workflow in Figma gestaltet sich dabei folgendermaßen:

1. Startframe & Endframe anlegen
2. Neuen Flow & Verbindungen zwischen den Frames anlegen
3. Vorschau der Animation in Figma
4. Export über das LottieFiles Figma Plugin

Wie werden die Animationen in die Website eingebunden?

Um eine Lottie-Animation auf Websites oder in Apps einzubinden, wird der Lottie Player benötigt. Hierbei handelt es sich um ein JavaScript-Bibliothek, die einfach über folgendes Codesnippet eingebunden wird:

import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({ autoplay: true, loop: true, canvas: document.querySelector('#dotlottie-canvas'), src: "https://lottie.host/teaser-animation.json", });

Wie es weitergeht

Im nächsten Artikel verschieben wir unseren Fokus vom Blog hin zu den Referenzen. Dabei gehen wir darauf ein, wie wir es geschafft haben unsere Projekte in Case Studies und einfache Referenzen zu unterteilen und wie die einzelnen Case Studies aufgebaut sind.