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 gegliederte Stories #zeitstrahl #skala

Inspirationen zu geografischen Gliederungen

Gute Nutzung von Infografiken

Weitere Scrollytelling Beispiele

Einsatz on 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.

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/

Die besten Scrollytelling Beispiele 1
Die besten Scrollytelling Beispiele 2

Maria Callas

Besonderheiten

+ schöne Illustrationen

+ passende musikalische Untermalung

+ responsive Design

– lange Ladezeiten

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

Die besten Scrollytelling Beispiele 3
Die besten Scrollytelling Beispiele 4

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/

Die besten Scrollytelling Beispiele 5
Die besten Scrollytelling Beispiele 6

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/

Die besten Scrollytelling Beispiele 7

Radmesser – Tagesspiegel

Besonderheiten

+ gute Informationsstruktur

+ sinnvolle Illustrationen & Animationen

+ Responsive Design

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

Die besten Scrollytelling Beispiele 8
Die besten Scrollytelling Beispiele 9

Joey Badass – Political MC

Besonderheiten

+ gute Mischung von Videos, Fotos, Effekten

– kein Responsive Design

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

Die besten Scrollytelling Beispiele 10

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.

Wealth, shown to scale

Besonderheiten

+ Verhältnis werden sehr deutlich

+ 1 Pixel ist die Einheit (1000$)

+ horizontales Scrollen

https://mkorostoff.github.io/1-pixel-wealth

Scrollytelling-Wealth-shown-to-scale
Scrollytelling-Wealth-shown-to-scale mobil view

20 years of Hip-Hop culture

Besonderheiten

+ sehr schöne Timeline

+ spannendes Navigationskonzept

+ sehr gutes Responsive Design

http://bboylilou.redbull.com/en

Die besten Scrollytelling Beispiele 11
Die besten Scrollytelling Beispiele 12

Les Chariots Fenwick 

Besonderheiten

+ sehr schöne Timeline und Navigation

+ Responsive Design

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

Die besten Scrollytelling Beispiele 13
Die besten Scrollytelling Beispiele 14

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/

Die besten Scrollytelling Beispiele 15

hollow documantary

Besonderheiten

+ interaktive Dokumentation

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

– kein Responsive Design

– teilweise sehr lange Ladezeiten

http://hollowdocumentary.com/

Die besten Scrollytelling Beispiele 16

Kazumasa Nagai

Besonderheiten

+ prominente Zeitangaben

+ produziert mit dem Storytelling-System readymag.com

+ vereinfachte Funktionalität im Responsive Design

stories.readymag.com/nagai

Die besten Scrollytelling Beispiele 17
Die besten Scrollytelling Beispiele 18

Scrollytelling-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

Die besten Scrollytelling Beispiele 19
Die besten Scrollytelling Beispiele 20

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

Die besten Scrollytelling Beispiele 21
Die besten Scrollytelling Beispiele 22

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

Die besten Scrollytelling Beispiele 23
Die besten Scrollytelling Beispiele 24

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

Die besten Scrollytelling Beispiele 25
Die besten Scrollytelling Beispiele 26

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

Die besten Scrollytelling Beispiele 27
Die besten Scrollytelling Beispiele 28

Weitere gelungene Scrollytelling-Beispiele

Bryan James

Besonderheiten

+ Showreel als Navigationselement

+ Responsive Design mit angepasster Navigation

https://brybry.co

Die besten Scrollytelling Beispiele 29
Die besten Scrollytelling Beispiele 30

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

Die besten Scrollytelling Beispiele 31
Die besten Scrollytelling Beispiele 32

Inequality is expensive

Besonderheiten

+ einfache Interaktivität

+ verständliche Veranschaulichung des Themas

– relativ lieblose Gestaltung der Website

Die besten Scrollytelling Beispiele 33
Die besten Scrollytelling Beispiele 34

Mehr zum Thema Storytelling

Marke aufbauen mit Storytelling

Wir haben einen Guide geschrieben, der zeigt, wie man mit Storytelling eine Marke aufbaut und nachhaltige Kunden-Bildung herstellt.

Mehr zum Thema Interaktive Animationen

Marke aufbauen mit Storytelling

Was sich bewegt, bewegt und erregt die Aufmerksamkeit viel, viel stärker – wenn man es auch noch steuern kann und es interagiert, dann ist es das perfekte Markting Tool.