Scrollytelling kombiniert Scrollen mit Storytelling, um interaktive und immersive Web-Erlebnisse zu schaffen. Die Beispiele zeigen verschiedene Techniken wie Parallax-Effekte, Textanimationen und horizontales Scrollen, um Inhalte lebendig zu machen.
Illustrationen, Animationen und Videos in Scrollytelling
Illustrationen, Animationen und Videos können ein wesentlicher Bestandteil sein, um Geschichten zu erzählen, zu veranschaulichen und zu verstehen. Die folgenden Beispiele zeigen, wie diese effektiv eingesetzt werden können, um einen Mehrwert zu schaffen.
Besonderheiten:
+ Illustrationen geben den Aussagen mehr Gewicht
+ gute Grafiken, die die Probleme faktisch belegen
+ gelungene Umsetzung für mobile Endgeräte

Besonderheiten:
+ schöne Illustrationen
+ passende musikalische Untermalung
+ responsive Design
– lange Ladezeiten

Besonderheiten:
+ Responsive Design
+ gut platzierte Illustration, Animationen und Videos veranschaulichen den Inhalt und verdeutlichen die angesprochenen Probleme

Besonderheiten:
+ Comic Style
+ sehr schöne Zeichnungen
+ Animationen und Ton geschickt genutzt, um Dramaturgie zu untermalen
– kein Responsive Design

Besonderheiten:
+ gute Informationsstruktur
+ sinnvolle Illustrationen & Animationen
+ Responsive Design

Besonderheiten:
+ gute Mischung von Videos, Fotos und Effekten
– kein Responsive Design

Gelungene gegliederte Stories mit Zeitstrahl oder Skala
Meist werden die Storys anhand eines zeitlichen Verlaufs dargestellt, dadurch entsteht eine klare Struktur für den Leser. Beliebtes Stilmittel sind hierbei Timelines, die auf unterschiedliche Weise umgesetzt werden können.
Besonderheiten:
+ durch die zeitliche Sortierung entsteht das Gefühlt sehr nah dran zu sein
+ große Menge an Content!
+ reduziertes Konzept macht die Nutzung einfach
– keine Highlights oder kuratierte Inhalte

Besonderheiten:
+ Verhältnis werden sehr deutlich
+ 1 Pixel ist die Einheit (1000$)
+ horizontales Scrollen

Besonderheiten:
+ sehr schöne Timeline und Navigation
+ Responsive Design

Besonderheiten:
+ Timeline aller geschichtlichen Wikipedia-Einträge
+ Navigationspunkte mit Links zu den entsprechenden Wikipedia-Artikeln und Videos
+ Zeitliche und thematische Navigationsmöglichkeiten
– keine Unterstützung mobiler Endgeräte

Besonderheiten:
+ interaktive Dokumentation
+ schöne Struktur und Führung durch die Geschichte
– kein Responsive Design
– teilweise sehr lange Ladezeiten

Besonderheiten:
+ prominente Zeitangaben
+ produziert mit dem Storytelling-System readymag.com
+ vereinfachte Funktionalität im Responsive Design

Scrollytelling-Inspirationen zu geografischen Gliederungen
Neben der zeitlichen Gliederung der Geschichten besteht die Möglichkeit, diese auch anhand eines örtlichen Zusammenhangs zu erzählen.
Besonderheiten:
+ Aufzeichnungen der Pendlerrouten anhand interaktiver Karten
+ Responsive Design

Besonderheiten:
+ single Line Zeichnung führt durch die einzelnen Storys
+ Storys nach Städten gegliedert
+ im Responsive Design wird auf die Animationen verzichtet

Besonderheiten:
+ Deutschlandkarte als Navigationselement
– Angepasst an verschiedene Bildschirmgrößen, jedoch keine vollständige Optimierung für Mobile

Gute Nutzung von Infografiken
Grafiken bieten sich an, um spezifische Punkte der Storys faktisch zu belegen und übersichtlich darzustellen.
Besonderheiten:
+ geschickte und Informative Nutzung verschiedenster Formate ( Maps, Charts, Fotos, Illustrationen etc.)
+ kleine Informationspakete sorgen für eine angenehme Interaktion
+ sehr gute Umsetzung für mobile Endgeräte

Besonderheiten:
+ Interaktive Quiz Elemente steigern die Aufmerksamkeit des Nutzers
+ Infografiken stellen Fakten übersichtlich dar
+ Responsive Design

Weitere gelungene Scrollytelling-Beispiele
Besonderheiten:
+ Showreel als Navigationselement
+ Responsive Design mit angepasster Navigation

Besonderheiten:
+ Glücksrad als Zufallsnavigation
+ kreative Idee und gute Umsetzung
+ simples, funktionales Responsive Design
