Wir arbeiten zur Zeit an einigen Scrollytelling also interaktiven Storytelling Formaten. Deshalb hat sich Gabriel 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.

Guter Einsatz von Illustrationen/Animationen

Gelungene zeitlich gegliederte Storys

Inspirationen zu geografischen Gliederungen

Gute Nutzung von Infografiken

Weitere Scrollytelling Beispiele

Einsatz von Illustrationen, Animationen und Videos

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.

I am Binadam

Besonderheiten

+ Illustrationen geben den Aussagen mehr Gewicht

+ gute Grafiken, die die Probleme faktisch belegen

+ gelungene Umsetzung für mobile Endgeräte

http://www.iambinadam.org/en/

iambinadam - Die besten Scrollytelling Beispiele
iambinadamMobile - Die besten Scrollytelling Beispiele

Maria Callas

Besonderheiten

+ schöne Illustrationen

+ passende musikalische Untermalung

+ responsive Design

– lange Ladezeiten

http://www.maria-callas.com/en/life

Maria Callas - Die besten Scrollytelling Beispiele
mariaCallasMobile - Die besten Scrollytelling Beispiele

Caught

Besonderheiten

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

+ Responsive Design

https://interactives.stuff.co.nz/2018/05/caught/

caught - Die besten Scrollytelling Beispiele
caughtMobile - Die besten Scrollytelling Beispiele

The Boat

Besonderheiten

+ Comic Style

+ sehr schöne Zeichnungen

+ Animationen und Ton geschickt genutzt, um Dramaturgie zu untermalen

– kein Responsive Design

http://www.sbs.com.au/theboat/

Screenshot 2 - Die besten Scrollytelling Beispiele

Radmesser – Tagesspiegel

Besonderheiten

+ gute Informationsstruktur

+ sinnvolle Illustrationen & Animationen

+ Responsive Design

https://interaktiv.tagesspiegel.de/radmesser/index.html

radmesser - Die besten Scrollytelling Beispiele
radmesserMobile - Die besten Scrollytelling Beispiele

Joey Badass – Political MC

Besonderheiten

+ gute Mischung von Videos, Fotos, Effekten

– kein Responsive Design

http://badass.shoes-up.com/

Joey Badass - Die besten Scrollytelling Beispiele

Gelungene zeitlich gegliederte Storys

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.

20 years of Hip-Hop culture

Besonderheiten

+ sehr schöne Timeline

+ spannendes Navigationskonzept

+ sehr gutes Responsive Design

http://bboylilou.redbull.com/en

redBull - Die besten Scrollytelling Beispiele
redBullMobile - Die besten Scrollytelling Beispiele

Les Chariots Fenwick 

Besonderheiten

+ sehr schöne Timeline und Navigation

+ Responsive Design

https://www.histoire-chariots-fenwick.fr/

LesChariotsFenwick - Die besten Scrollytelling Beispiele
LesChariotsFenwickMobile - Die besten Scrollytelling Beispiele

Histography – Timeline of History

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

http://histography.io/

TimelineOfHistory - Die besten Scrollytelling Beispiele

hollow documantary

Besonderheiten

+ interaktive Dokumentation

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

– kein Responsive Design

– teilweise sehr lange Ladezeiten

http://hollowdocumentary.com/

HollowDoc - Die besten Scrollytelling Beispiele

Kazumasa Nagai

Besonderheiten

+ prominente Zeitangaben

+ produziert mit dem Storytelling-System readymag.com

+ vereinfachte Funktionalität im Responsive Design

stories.readymag.com/nagai

readymag - Die besten Scrollytelling Beispiele
readymagMobile - Die besten Scrollytelling Beispiele

Inspirationen zu geografischen Gliederungen

Neben der zeitlichen Gliederung der Geschichten besteht die Möglichkeit, diese auch anhand eines örtlichen Zusammenhangs zu erzählen.

So pendelt Deutschland – Spiegel Online

Besonderheiten

+ Aufzeichnungen der Pendlerrouten anhand interaktiver Karten

+ Responsive Design

http://www.spiegel.de/wirtschaft/verkehr-so-pendelt-deutschland-zu-arbeit-a-1187172.html

Pendler - Die besten Scrollytelling Beispiele
pendlerMobile - Die besten Scrollytelling Beispiele

Listen to America – Huffington Post

Besonderheiten

+ single Line Zeichnung führt durch die einzelnen Storys

+ Storys nach Städten gegliedert

+ im Responsive Design wird auf die Animationen verzichtet

https://m.huffpost.com/us/interactives/listen-to-america?category=inequality

ListenToAmerica - Die besten Scrollytelling Beispiele
listenToAmericaMobile - Die besten Scrollytelling Beispiele

Todesopfer rechter Gewalt – Zeit Online

Besonderheiten

+ Deutschlandkarte als Navigationselement

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

https://www.zeit.de/gesellschaft/zeitgeschehen/2018-09/todesopfer-rechte-gewalt-karte-portraet

TodesopferRechterGewalt - Die besten Scrollytelling Beispiele
rechteGewaltMobile - Die besten Scrollytelling Beispiele

Gute Nutzung von Infografiken

Grafiken bieten sich an, um spezifische Punkte der Storys faktisch zu belegen und übersichtlich darzustellen.

Fussball WM 2018 – Spiegel Online

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

http://www.spiegel.de/sport/fussball/fussball-wm-2018-alles-ueber-das-wichtigste-fussballturnier-des-planeten-a-1212539.html

FußballWMSpiegel - Die besten Scrollytelling Beispiele
FussBallWMMobile - Die besten Scrollytelling Beispiele

Plastikmüll – Spiegel Online

Besonderheiten

+ Interaktive Quiz Elemente steigern die Aufmerksamkeit des Nutzers

+ Infografiken stellen Fakten übersichtlich dar

+ Responsive Design

http://www.spiegel.de/wirtschaft/muell-wieviel-plastik-abfall-erzeugt-jeder-deutsche-und-geht-es-auch-ohne-a-1207303.html

PlastikMüll - Die besten Scrollytelling Beispiele
PlastikMüllMobile - Die besten Scrollytelling Beispiele

Weitere gelungene Beispiele

Bryan James

Besonderheiten

+ Showreel als Navigationselement

+ Responsive Design mit angepasster Navigation

https://brybry.co

ShowReel - Die besten Scrollytelling Beispiele
brybryMobile - Die besten Scrollytelling Beispiele

Trump and The Truth – The New Yorker

Besonderheiten

+ Glücksrad als Zufallsnavigation

+ kreative Idee und gute Umsetzung

+ simples, funktionales Responsive Design

https://www.newyorker.com/news/news-desk/trump-truth-spin-wheel-lies

trumpSpinningWheel - Die besten Scrollytelling Beispiele
trumpAndTheTruthMobile - Die besten Scrollytelling Beispiele

Inequality is expensive

Besonderheiten

+ einfache Interaktivität

+ verständliche Veranschaulichung des Themas

– relativ lieblose Gestaltung der Website

http://inequality.is/expensive

Inequality - Die besten Scrollytelling Beispiele
InequalityMobile - Die besten Scrollytelling Beispiele

👉 Mehr zum Thema Storytelling erfährt man hier oder hier.
Und Beratung bekommen sie hier: