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/

Maria Callas

Besonderheiten

+ schöne Illustrationen

+ passende musikalische Untermalung

+ responsive Design

– lange Ladezeiten

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

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/

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/

Radmesser – Tagesspiegel

Besonderheiten

+ gute Informationsstruktur

+ sinnvolle Illustrationen & Animationen

+ Responsive Design

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

Joey Badass – Political MC

Besonderheiten

+ gute Mischung von Videos, Fotos, Effekten

– kein Responsive Design

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

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

Les Chariots Fenwick 

Besonderheiten

+ sehr schöne Timeline und Navigation

+ Responsive Design

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

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/

hollow documantary

Besonderheiten

+ interaktive Dokumentation

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

– kein Responsive Design

– teilweise sehr lange Ladezeiten

http://hollowdocumentary.com/

Kazumasa Nagai

Besonderheiten

+ prominente Zeitangaben

+ produziert mit dem Storytelling-System readymag.com

+ vereinfachte Funktionalität im Responsive Design

stories.readymag.com/nagai

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

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

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

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

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

Weitere gelungene Scrollytelling-Beispiele

Bryan James

Besonderheiten

+ Showreel als Navigationselement

+ Responsive Design mit angepasster Navigation

https://brybry.co

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

Inequality is expensive

Besonderheiten

+ einfache Interaktivität

+ verständliche Veranschaulichung des Themas

– relativ lieblose Gestaltung der Website

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.