Interactive Storytelling

Interaktives Geschichtenerzählen mit Webtechniken

Mediale Hamburg, 20.09.2013

Hello

my name is

molily

  • Mathias Schäfer
  • Studium der Germanistik und Philosophie
  • Software-Entwickler bei 9elements
  • Spezialisiert auf JavaScript-Webanwendungen

Worum geht es?

  • Multimediale Webpräsentationen
  • Text, Grafik, Video, Audio
  • v.a. Feature-Artikel im Online-Journalismus,
    Produktpräsentationen
  • Informieren, Unterhalten, Verkaufen
  • Neugier, Spiel, Ästhetik

Beispiele

Was ist das Neue?

  • Gekonnte und stimmige Kombination bekannter Elemente
  • Nahtlose Integration der Medien
  • Teamarbeit vereint Journalismus, Design & Programmierung
  • Verschiedene Ebenen: Geschichte, Fakten, Emotionalität
  • (Not) The Future of Journalism

Typische Elemente

  • Raumgreifendes, minimalistisches Design
  • Die Inhalte sprechen für sich
  • Fortschreiten durch Scrolling und Kapitel
  • Typographie als wichtiges Gestaltungselement
  • Beeindruckende Fotos, Infografiken,
    Datenvisualisierung, Karten
  • Videos: Animationen, Interviews, Stimmung
  • Audio: Interviews, Stimmung

Interaktivität

  • Wieviel Entscheidungsfreiheit hat die Leserin?
  • Fortlaufender Text ist das lineare Gerüst
  • Marginalien mit Anmerkungen und Zusatzinfos
  • »Pseudo-Interaktivität«, »Slideshow 2.0« (Lorenz Matzat)
  • Auch exploratives, nichtlineares Lesen

Hypertext

»Jede Leserin hinterläßt bei der Lektüre ihre eigene Spur im Text. Oder besser: jede Leserin schafft den Gegenstand ihrer Lektüre durch aktive Auswahl der vorgegebenen Links. Der individuelle Blickwinkel bestimmt die Abfolge der Inhalte. Lesen ist nicht länger ein passiver Vorgang der Aufnahme, sondern wird zu einer kreativen Wechselwirkung zwischen Leserin, Autorin und Text.«

Mike Sandbothe, 1996 (sinngemäß zitiert)

Storytelling – klein anfangen

  • Thema und Grundidee
  • Orte, Personen, Ereignisse, Daten…
  • Hauptstrang, Nebenstränge, Ebenen
  • Kapitelstruktur vs. nichtlineare Navigation
  • Erzählperspektive(n)
  • Absicht und Appell?

Storytelling – klein anfangen

  • Sammeln von Texten, Bildern, Videos, Tönen, Gegenständen…
  • Animated GIFs, Vine, Instagram, Google StreetView…
  • Storyboard und Skizzen anfertigen
  • Technische Umsetzung
  • Feinheiten: Stimmung, Spiel, Lebendigkeit
  • LeserInnen einbinden durch Weitererzählen

Technik: HTML

Technik: CSS

Technik: JavaScript

  • JavaScript als Kleber, der alles zusammenfügt
  • Navigation, Animationen anstoßen,
    Medien laden und steuern
  • Starten mit jQuery und Plugins
  • Storyboard-Struktur in JavaScript umsetzen
  • Events: scroll, mousewheel/DOMMouseScroll
  • Scrolling-Animationen mit skrollr
  • Befindet sich ein Element im Viewport? jquery.inview

Empfehlungen

  • Zurückhaltung: Dezent statt aufdringlich
  • Klare Grundstruktur, aber viel zu entdecken
  • Neugier wecken, Entscheidungen ermöglichen
  • Effekte und Bewegung als Erzählmittel einsetzen
  • Der Scrolling-Trend hat sich längst überlebt
  • Im Team arbeiten, MentorInnen suchen

Diskussion

Vielen Dank!