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 sind animiert und werden vom Scrollen ausgelöst
+ Starke Farben und Typografie
+ gelungene Umsetzung auf dem Smartphone
+ Sound macht das ganze noch runder
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
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:
+ 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
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
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
