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.

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 2
Die besten Scrollytelling Beispiele 3

Maria Callas

Besonderheiten

+ schöne Illustrationen

+ passende musikalische Untermalung

+ responsive Design

– lange Ladezeiten

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

Die besten Scrollytelling Beispiele 4
Die besten Scrollytelling Beispiele 5

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 6
Die besten Scrollytelling Beispiele 7

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 8

Radmesser – Tagesspiegel

Besonderheiten

+ gute Informationsstruktur

+ sinnvolle Illustrationen & Animationen

+ Responsive Design

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

Die besten Scrollytelling Beispiele 9
Die besten Scrollytelling Beispiele 10

Joey Badass – Political MC

Besonderheiten

+ gute Mischung von Videos, Fotos, Effekten

– kein Responsive Design

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

Die besten Scrollytelling Beispiele 11

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.

What Parler Saw During the Attack on the Capitol

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 kuratierten Inhalte

https://projects.propublica.org/parler-capitol-videos

What Parler Saw During the Attack on the Capitol
Scrollytelling-Wealth-shown-to-scale mobil view

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 12
Die besten Scrollytelling Beispiele 13

Les Chariots Fenwick 

Besonderheiten

+ sehr schöne Timeline und Navigation

+ Responsive Design

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

Die besten Scrollytelling Beispiele 14
Die besten Scrollytelling Beispiele 15

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 16

Kalso | The Story Behind The Original Wellness Shoe

Besonderheiten

+ Animation der Typografie

+ Typografie spiegel den Stil der Jahrzehnte wider

+ Aufbau der Animation durch Scrollen

– man kan schnell über Teile hinwegscrollen

https://www.kalso.com/

Scrollytelling Beispiel - kalso.com Laptop
Scrollytelling Beispiel - kalso.com Mobil View - iPhone

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 17

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 18
Die besten Scrollytelling Beispiele 19

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 20
Die besten Scrollytelling Beispiele 21

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 22
Die besten Scrollytelling Beispiele 23

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 24
Die besten Scrollytelling Beispiele 25

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 26
Die besten Scrollytelling Beispiele 27

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 28
Die besten Scrollytelling Beispiele 29

Weitere gelungene Scrollytelling-Beispiele

Bryan James

Besonderheiten

+ Showreel als Navigationselement

+ Responsive Design mit angepasster Navigation

https://brybry.co

Die besten Scrollytelling Beispiele 30
Die besten Scrollytelling Beispiele 31

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 32
Die besten Scrollytelling Beispiele 33

Inequality is expensive

Besonderheiten

+ einfache Interaktivität

+ verständliche Veranschaulichung des Themas

– relativ lieblose Gestaltung der Website

Die besten Scrollytelling Beispiele 34
Die besten Scrollytelling Beispiele 35

Mehr zum Thema Storytelling

  • Bild Die Zeit ist keine gerade Linie

    Die Zeit ist keine gerade Linie

    Warum Erinnerungskultur neue Wege gehen muss

  • Bild Die Digitale Erinnerungskultur – Internationale Beispiele

    Die Digitale Erinnerungskultur – Internationale Beispiele

    Es gibt vieles, was unbedingt in der Erinnerung der Gesellschaft wachgehalten werden muss. Wir haben Beispiele gesammelt, die das digital richtig gut tun.

  • Bild Metaphern im Storytelling

    Metaphern im Storytelling

    Man kann es auch kurz machen: Metaphern sind die Königsdisziplin des Storytellings, Metaphern wirken sofort, reißen alles um und bleiben genau da, wo sie hin sollen. Bäm.

  • Bild Virtuelle Ausstellung

    Virtuelle Ausstellung

    Wir haben zuletzt zwei virtuelle Ausstellung fertiggestellt. Für das Auswärtige Amt haben wir die digitale Ausstellung zu Agenda „Frauen, Frieden und Sicherheit“ gestaltet und für die Arolsen Archives die Online-Ausstellung #StolenMemory.