So setzen Kreative Scrollytelling in Branding und Infotainment ein

»Nutzer:innen im Web zu überraschen wird im­mer schwieriger«, sagt Creative Technologist Romano Casellini von Rocani Studio Berlin. Kein Wunder: Die Aufmerksamkeitsspanne der Sur­fen­den wird immer kürzer (im Schnitt verbringen wir weniger als eine Minute auf einer Website); und die Neuheit von Webtrends nutzt sich ebenso schnell ab. Genau darin sieht Malte Gruhl, Gründer des Brandingstudios Gruhl in Berlin, aber auch eine Chance: »Was wirklich begeistert, sind visuell gut aufbereitete Geschichten im Web.« Er rät seinen Kunden bei ihrem Webauftritt deshalb zu einer Kombination aus Storytelling, raf­fi­­niert ineinander verwobenen Webtechniken und Interaktionsmöglichkeiten, um das User Engage­ment zu steigern.

Scrollytelling-Websites müssen fast immer in­dividuell programmiert werden. Deshalb sollten De­signer:innen und Developer:innen möglichst früh im Prozess zusammenkommen, um das erzählerische Gestaltungskonzept und die techni­sche Um­setzung gemeinsam zu entwickeln. Stu­dio Gruhl und Rocani Studio, die sich in Berlin ein Büro teilen, testeten diese kollaborative Herangehensweise an einem Selfmarketing-Projekt: outreach.space.

Bei diesem »Mystery from Beyond« begleitet man zwei Forscher bei der Entdeckung eines neuartigen interstellaren Objekts. Studio Gruhl entwickelte das narrative und ge­stal­terische Konzept, auf dessen Grundlage Romano Casellinis Team mit der Programmierung eines interaktiven Prototyps begann, den Studio Gruhl Stück für Stück mit Leben füllte. Dabei ­testete das Team die immersive Wirkung unterschiedlicher Webtechniken – großflächige Animationen im Hintergrund, sorgsam ausgewählten Sound, typografische Effekte und 3D-Objek­te, die man per Scrollen rotieren lassen und näher untersuchen kann.

Scrollytelling kann aber auch subtiler eingesetzt werden. So schuf UX Designer Jimmy Elias für das Pharmaunternehmen Eticur eine Website, die durch eine sehr persönliche Ansprache Vertrauen in die Marke schafft und es Nutzer:in­nen erlaubt, selbst zu steuern, wie tief sie in das An­ge­­bot eintauchen möchten. Obys Agency wiederum stellt mit »Abetka« Be­zü­ge zwi­schen der ukrainischen Geschichte und zeit­ge­nös­­sischem Typedesign her. Und Tubik Studio wob um eine Studie zum Zusammenhang von Armut und Kriminalität in Tennessee eine emotionale Geschichte, die man mit scrollbaren Collagen selbst erleben kann. Unsere Beispiele zeigen, wie vielfältig sich Scrollytelling in der Kommunikation für Marken, Unternehmen und Organisationen einsetzen lässt.

Auf www.outreach.space können Nutzer:innen sich durch eine spannende Entdeckungsmission scrollen und den Chat zwischen zwei Forschern mitlesen. Mit Details wie den wabernden Hinter­gründen, animierten Schriften und rotierbaren 3D-Objekten erzeugten Studio Gruhl und Rocani Studio ein immersives Erlebnis – fast, als könne man die unbekannten Materialien selbst berühren

Projekt https://abetkaua.com
Auftraggeber Projector Creative & Tech Foundation
Design und Development Obys Agency, Charkiw, https://obys.agency
Webtechniken Hover-Animationen, Animate-on-Scroll; individuelle Programmierung, gehostet auf dem Headless CMS Strapi

Sag’s mit Typo

Durch den andauernden Krieg in der Ukraine, der die Medien beherrscht, haben es soziale Initiativen schwer, für ihr Anliegen zu werben. Die Projector Creative & Tech Foundation setzt sich für die Ausbil­dung von Frauen in kreativen und technischen Be­ru­fen ein und initiierte 2022 ein Projekt, um ihre Arbeit sichtbar zu machen – und zwar mit ei­nem als Webexperience umgesetzten »Abetka« der ukraini­schen Geschichte. Jeder der 33 Buchstaben des ukrai­­ni­schen Alphabets (Abetka) sollte für ein histori­sches Ereignis oder eine Persönlichkeit stehen. Für jedes Zeichen steuerten 33 ukrainische Type­designe­r:in­nen eine eigene Schrift bei. Das Design und die Umsetzung übernahm die international für ihr interaktives Storytelling bekannte Digitalagentur Obys.

Die Herausforderung lag darin, die typografi­sche Ebene mit den geschichtlichen Fakten und Informa­tionen zu verknüpfen, ohne die User:innen zu über­lasten. Obys entwickelte ein Konzept, in dem jede Kombination durch eine dreidimensionale Spiel­kar­te visualisiert werden sollte. Beim Hovern mit der Maus rotieren die Karten, sodass auf ihrer Rückseite die Headline des dazugehörigen Ereignisses und das Porträt einer historischen ukrainischen Persönlichkeit sichtbar werden. Auf der Startseite finden sich die Buchstaben in alphabetischer Reihenfolge angeord­net – immer wieder durch große Headlines, grafische Patterns und Aufrufe zum Teilen und Erkunden aufgelockert.

Erst beim Klick auf eine der Karten werden die Nut­zer:innen auf die jeweilige »Story-Page« weitergeleitet, wo sie dann Informationen zu dem Ereignis oder über die ausgewählte Person finden. Darüber hinaus können sie dort mehr über die jeweilige Typedesignerin oder den Typedesigner erfahren und ihre Schriften ausprobieren.

Die Website entstand innerhalb kürzester Zeit: Nur etwa zwei Monate hatte Obys für Konzept und Umsetzung. Trotzdem ist das »Abetka« laut Managing Director Olha Olianishyna eines ihrer liebsten Projekte: »Als Kreative die Geschichte des eigenen Landes und die Bedeutung von Typografie hervorheben zu können hat uns Kraft gegeben.«

Projekt https://nabelschnurblut.eticur.de
Auftraggeber Eticur, München
Design und Development Jimmy Elias, Art Director und UX Designer, Köln, https://studiojimmyelias.com/de und der Entwicklungsfirma beawwweer aus Berlin, https://beawwwer.com
Webtechniken Parallax Scrolling, Animate-on-Scroll, Mikroanimationen; individuell programmiert und auf WordPress gehostet

Medizin menschlich machen

Unternehmen aus dem Pharmabereich präsentie­ren sich normalerweise eher nüchtern – nicht so der Dienstleister Eticur, der den Kölner Art Director und UX Designer Jimmy Elias mit seinem Branding und Design einer Website beauftragte. Eticur bietet die Entnahme und Einlagerung von Teilen der Nabelschnur bei der Geburt an. Diese erklärungsbedürftige Leistung sollte Jimmy Elias werdenden Müttern auf der Informationssuche nahebringen. »Um solche sensiblen Themen zu vermitteln, braucht es ein feinfühliges didaktisches Konzept«, erklärt der Designer. »Es geht darum, Vertrauen zur Marke zu schaf­fen und die Nutzerinnen und Nutzer zur persönli­chen Beratung zu führen.«

Dazu entwickelte Jimmy Elias ein Webkonzept mit zwei Navigationsebenen: zum einen per Scrolling auf der Startseite, die ungezwungen informieren soll, zum anderen über ein klassisches Menü, das di­rekt zu Leistungen, Preisen und telefonischer Beratung führt. Die Nähe zu den Kund:innen entsteht da­bei vor allem durch die Tonality der Texte. Die per­sönliche Ansprache per Du und regelmäßige Abfragen nach den Bedürfnissen erzeugen das Gefühl, sich direkt mit dem Unternehmen zu unterhalten. Jimmy Elias strukturierte die Informationen so, dass man immer wieder die Option hat, tiefer einzusteigen oder weiterzuscrollen. So können Nutzer:innen ihre Experience mitgestalten, ohne von Informationen überwältigt zu werden.

Visuell soll die Website subtil an einen Körper erinnern, in dem sich Inhalte wie Zellen bewegen. Ani­mierte organische Formen und Sprechblasen drif­ten beim Scrollen ins Bild, alles scheint im Fluss zu sein. »Die Wirkung entsteht im Zusammenspiel ver­schiedener Techniken«, erläutert Jimmy Elias. Das kann zur Hürde werden, wenn Kund:innen die In­hal­­te später selbst editieren wollen. Die individuelle Pro­grammierung übernahm schließlich die Ent­wick­lungsfirma beawwwer aus Berlin, die Jimmy Elias’ Entwürfe in WordPress umsetzte, sodass der Kunde Texte im gewohnten CMS austauschen konnte, ohne die perfekt ineinander verzahnten Animationen und Effekte zu stören.

Projekt https://decriminalizepoverty.org
Auftraggeber Vera Institute of Justice, New York, und Free Hearts, Nashville Design und Development Zealous, New York, https://zealo.us und Tubik Studio, Dnipro, https://tubikstudio.com
Webtechniken Parallax Scrolling, Hover-Animationen, Animate-on-Scroll; individuelle Programmierung, gehostet auf Cloudflare

Statistik hautnah abbilden

Wie eng Armut und Kriminalität miteinander zusammenhängen, beschreiben das New Yorker Vera Institute of Jus­tice und die Frauenrehabilitationshilfe Free Hearts aus Tennessee in ihrem »Decriminalize Poverty Report« – und zeigen gleichzeitig Auswege auf. Eine leicht verständliche interaktive Webexperience sollte die Erkenntnisse der Studie, die ver­schie­dene Datensätze sowie rund 500 reale Fälle, Gerichts­urteile und Berichte von Betroffenen zusammenträgt, öffentlich zugänglich machen.

Damit beauftragt wurde Tubik Studio, das bei der Umsetzung mit der gemeinnützigen Organisation Zealous kollaborierte, die Medienprojekte für so­zia­le und politische Bildung unterstützt. Tubik entwickelte ein Konzept, das auf Emotionalisierung und eindringlich visualisierte Fakten setzt. Nutzer:in­nen scrollen sich auf der Startseite durch drei Kapitel, die aufzeigen, wie der gesellschaftliche Umgang mit kriminalisierter Armut entstanden ist (Vergangenheit), wie Betroffene heute damit umgehen (Gegenwart) und wie sich die Situation verändern ließe (Zukunft). Die Texte, in der Du-Perspektive formuliert, bringen die Nutzer:innen dazu, sich in die Rolle der Betroffenen zu versetzen. So erleben sie immersiv, wie kleine Ereignisse im Alltag zu immer größerer Armut und schließlich Kriminalität führen können. Verschiedene Webtechniken animieren beim Scrollen eigens illustrierte Szenen und Collagen, die die immersive Wirkung der Experience verstärken.

»Uns war wichtig, dass keine Zahl ohne visuelle Begleitung auftaucht«, sagt Marina Yalanska, Chief Marketing Officer bei Tubik. »So sollten User:innen immer einen Bezug zur Geschichte herstellen kön­nen und die Information eher fühlen als lesen.« Die Texte sind deshalb auf sensibel formulierte Statements und kurze Infokästen heruntergebrochen, sodass man beim Scrollen nicht den Faden verliert. Trotz der beachtlichen Länge der Experience sichert Tubik so die Aufmerksamkeit der Nutzer:innen bis zum Schluss – wo das Vera Institute of Justice und Free Hearts Handlungsempfehlungen geben, um kri­mi­na­lisierte Armut auf gesellschaftlicher und poli­ti­scher Ebene zu bekämpfen.