Wir arbeiten zurzeit an einigen Scrollytelling Formaten. Deshalb haben wir uns auf die Suche nach den besten Beispielen gemacht. Dabei ging es nicht nur um die Inszenierung der Geschichten, sondern auch um die Übersetzung der Formate auf Smartphones. Gerade bei komplexeren Projekten ist das wirklich eine hohe Kunst.

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

Die besten Scrollytelling Beispiele 3

Besonderheiten:

+ schöne Illustrationen
+ passende musikalische Untermalung
+ responsive Design

– lange Ladezeiten

Die besten Scrollytelling Beispiele 4

Besonderheiten:

+ Responsive Design

+ gut platzierte Illustration, Animationen und Videos veranschaulichen den Inhalt und verdeutlichen die angesprochenen Probleme

Die besten Scrollytelling Beispiele 5

Besonderheiten:

+ Comic Style
+ sehr schöne Zeichnungen
+ Animationen und Ton geschickt genutzt, um Dramaturgie zu untermalen

– kein Responsive Design

Die besten Scrollytelling Beispiele 6

Besonderheiten:

+ gute Informationsstruktur
+ sinnvolle Illustrationen & Animationen
+ Responsive Design

Die besten Scrollytelling Beispiele 7

Besonderheiten:

+ gute Mischung von Videos, Fotos und Effekten

– kein Responsive Design

Die besten Scrollytelling Beispiele 8

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

What Parler Saw During the Attack on the Capitol

Besonderheiten:

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

Scrollytelling-Wealth-shown-to-scale

Besonderheiten:

+ sehr schöne Timeline und Navigation
+ Responsive Design

Die besten Scrollytelling Beispiele 9

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

Die besten Scrollytelling Beispiele 10

Besonderheiten:

+ interaktive Dokumentation
+ schöne Struktur und Führung durch die Geschichte

– kein Responsive Design
– teilweise sehr lange Ladezeiten

Die besten Scrollytelling Beispiele 11

Besonderheiten:

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

Die besten Scrollytelling Beispiele 12

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

Die besten Scrollytelling Beispiele 13

Besonderheiten:

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

Die besten Scrollytelling Beispiele 14

Besonderheiten:

+ Deutschlandkarte als Navigationselement

– Angepasst an verschiedene Bildschirmgrößen, jedoch keine vollständige Optimierung für Mobile

Die besten Scrollytelling Beispiele 15

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

Die besten Scrollytelling Beispiele 16

Besonderheiten:

+ Interaktive Quiz Elemente steigern die Aufmerksamkeit des Nutzers

+ Infografiken stellen Fakten übersichtlich dar

+ Responsive Design

Die besten Scrollytelling Beispiele 17

Weitere gelungene Scrollytelling-Beispiele

Besonderheiten:

+ Showreel als Navigationselement
+ Responsive Design mit angepasster Navigation

Die besten Scrollytelling Beispiele 18

Besonderheiten:

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

Die besten Scrollytelling Beispiele 19

Mehr zum Thema Storytelling

  • Bild Ein handgemachtes Designsystem für Beratungsexpert*innen

    Ein handgemachtes Designsystem für Beratungsexpert*innen

  • Bild Citizen Science Initiative mit virtueller Ausstellung

    Citizen Science Initiative mit virtueller Ausstellung

  • Bild Branding Konzept für eine Studienreihe

    Branding Konzept für eine Studienreihe

  • Bild Virtuelle Ausstellung und digitales Gedenken

    Virtuelle Ausstellung und digitales Gedenken

  • Bild Graphic Novel für die Bildungsarbeit

    Graphic Novel für die Bildungsarbeit

  • Bild Rebranding für Software-Spezialist*innen

    Rebranding für Software-Spezialist*innen