• Scrollytelling-Illustration

Die besten Scrollytelling Beispiele

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 1100x570 - Die besten Scrollytelling Beispiele
iambinadamMobile 139x300 - 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 1100x564 - Die besten Scrollytelling Beispiele
mariaCallasMobile 138x300 - 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 1100x572 - Die besten Scrollytelling Beispiele
caughtMobile 139x300 - 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 1100x619 - Die besten Scrollytelling Beispiele

Radmesser – Tagesspiegel

Besonderheiten

+ gute Informationsstruktur

+ sinnvolle Illustrationen & Animationen

+ Responsive Design

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

radmesser 1100x567 - Die besten Scrollytelling Beispiele
radmesserMobile 139x300 - 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 1100x567 - 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 1100x571 - Die besten Scrollytelling Beispiele
redBullMobile 139x300 - Die besten Scrollytelling Beispiele

Les Chariots Fenwick 

Besonderheiten

+ sehr schöne Timeline und Navigation

+ Responsive Design

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

LesChariotsFenwick 1100x567 - Die besten Scrollytelling Beispiele
LesChariotsFenwickMobile 163x300 - 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 1100x574 - 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 1100x575 - 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 1100x574 - Die besten Scrollytelling Beispiele
readymagMobile 138x300 - 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 1100x555 - Die besten Scrollytelling Beispiele
pendlerMobile 139x300 - 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 1100x575 - Die besten Scrollytelling Beispiele
listenToAmericaMobile 139x300 - 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 1100x562 - Die besten Scrollytelling Beispiele
rechteGewaltMobile 139x300 - 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 1100x575 - Die besten Scrollytelling Beispiele
FussBallWMMobile 140x300 - 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 1100x574 - Die besten Scrollytelling Beispiele
PlastikMüllMobile 139x300 - Die besten Scrollytelling Beispiele

Weitere gelungene Beispiele

Bryan James

Besonderheiten

+ Showreel als Navigationselement

+ Responsive Design mit angepasster Navigation

https://brybry.co

ShowReel 1100x570 - Die besten Scrollytelling Beispiele
brybryMobile 138x300 - 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 1100x542 - Die besten Scrollytelling Beispiele
trumpAndTheTruthMobile 138x300 - 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 1100x569 - Die besten Scrollytelling Beispiele
InequalityMobile 138x300 - Die besten Scrollytelling Beispiele
2018-10-18T15:12:34+00:00

☝️ Wir verwenden Cookies. Mit der Nutzung dieser Seite erklären Sie sich damit einverstanden.

Datenschutzerklärung

Okay