Erwecke deine Markengeschichten und Langform-Inhalte mit der Kunst des Scrollytellings zum Leben. Diese Beispiele zeigen dir, mit welchen raffinierten Designtechniken du diesen Webdesign-Trend meistern kannst.
Was verwenden Webentwickler, um ihr visuelles Storytelling – seine Botschaft, sein ästhetisches Prestige und natürlich seine tiefere Resonanz bei den Nutzern – zu untermauern? Inwieweit können unsere Markengeschichten auf der leeren Schiefertafel einer Webseite zum Leben erweckt werden? Die Antwort lautet Scrollytelling: eine illustre, immer beliebtere Art, eine digitale Schnittstelle zu nutzen und Ihre komplexe Geschichte zu vermitteln.
Aber was ist Scrollytelling? Warum ist es ein Favorit unter Webentwicklern? Die Antwort liegt auf der Hand: Die fortschrittlichen Designeffekte stellen traditionelle Techniken in den Schatten, die möglicherweise veraltet sind und deinem Inhalt nicht gerecht werden. Aber ist Scrollytelling immer die beste Methode, um deine Geschichte zu erzählen? Wie können Webentwickler herausfinden, wann diese Technik den Besuchern ihre Botschaft und ihren Produktwert am besten vermittelt?
Dies ist zweifelsohne eine spannende Nische für visuelles und Informationsdesign. Lass uns die Füße nass machen mit Scrollytelling, knöcheltief, wenn du so willst, und bewundere praktische Anwendungsfälle von Webentwicklern, die Scrollytelling nutzen, um ihre Marken- und Inhaltsstrategieziele zu erreichen.
Inhaltsverzeichnis:
Was ist Scrollytelling?
7 Anwendungsfälle, bei denen Scrollytelling die Antwort ist:
1. Langform-Journalismus
2. Marken-Storytelling
3. Produkt-Seiten
4. Online-Shops
5. Kreative Portfolios
6. Chronologische und historische Geschichten
7. Aktuelle Ereignisse
Jetzt bist du dran mit Scrollytell
Was ist Scrollytelling?
Scrollytelling ist die Verschmelzung von Scrolling und Storytelling: eine Möglichkeit, lange Geschichten dynamisch zu erzählen, während der Nutzer scrollt. In diesem Rahmen löst die Benutzeraktivität Übergänge zwischen Elementen und Styling-Methoden aller Art aus: wechselnde Texte, wechselnde Bilder, interaktive Hintergründe, Animationseffekte, Größenänderungen und mehr. Jedes einzelne Element verschmilzt und fügt sich zu einer fließenden, verführerischen Geschichte in Bewegung zusammen.
Diese visuellen Effekte sind darauf ausgerichtet, dein Publikum zu fesseln und ihm fesselnde Inhalte auf einem Silbertablett zu servieren. Scrollytelling wird auch als „narrative Visualisierung“ bezeichnet: eine Reihe von visuellen Elementen, die nach einer bestimmten Logik aneinandergereiht werden, um den Besuchern eine bestimmte Botschaft zu vermitteln.
Das Einzigartige an dieser innovativen Erzähltechnik ist, dass die Benutzer durch ihre eigenen individuellen Gesten zu deiner Erzählung beitragen. Dies geschieht sowohl auf kollektiver als auch auf individueller Ebene, da du für jedes Element unabhängige Einstellungen konfigurieren kannst, z. B. zeitgesteuerte Eingangsanimationen oder Bewegungseffekte.
7 Anwendungsfälle, bei denen Scrollytelling die Antwort ist
Es gibt keine festgeschriebene Regel, wann du Scrollytelling für deine Website einsetzen solltest, aber es gibt Anwendungsfälle, in denen Storytelling die Nutzerbindung stark fördert.
Diese Szenarien reichen von chronologischen Geschichten, Marken-Storytelling, Journalismus, E-Commerce-Websites und vielen mehr. In dem Maße, wie Webentwickler mehr und mehr Techniken zur Visualisierung von Inhalten entdecken, entstehen weitere Anwendungsfälle für Scrollytelling.
Anwendungsfall #1: Langform-Journalismus
Die Virtuosität von Scrollytelling als Form des Journalismus liegt in der Fähigkeit, digitale Medien zu nutzen, um komplexe Informationen und Geschichten zu vermitteln. Die Geschichte des Zwei-Sterne-Kochs José Andrés auf HuffPost passt dazu: Er gründete 2010 die „World Central Kitchen“, die intelligente Lösungen zur Bekämpfung von Hunger und Armut nach Katastrophen anbietet.
Als die COVID-19-Pandemie die Welt schwer traf, erkannte Andrés die Notwendigkeit, das Bewusstsein für die weltweite Nahrungsmittelknappheit aufrechtzuerhalten und Mahlzeiten in Großstädten und einkommensschwachen Vierteln zu verteilen. Es gibt haufenweise Informationen über Andrés‘ Reaktion auf die Pandemie; was ihn zur Gründung von World Central Kitchen inspirierte, Andrés‘ Aktivitäten zur Katastrophenhilfe seit 2010, das von ihm geschriebene Buch: „We Fed an Island“ und vieles mehr.
Im Fall von José Andrés wurde seine kulinarische Superheldengeschichte also in ein dynamisches, fesselndes Erlebnis verwandelt.
Das kannst du auch tun
- Verwende Hintergrundvideos für dein Heldenbild: Dies ist ein subtiler, aber dynamischer Weg, um deine Geschichte in einer Sprache vorzustellen, die die Nutzer begeistern wird.
- Erwäge die Verwendung eines einspaltigen Website-Layouts für dein Textkörper. Beim Scrollytelling werden oft viele kleinere, sich bewegende Objekte um den Hauptinhalt herum platziert, so dass es einfacher ist, die Augen der Besucher auf sich zu lenken, wenn das Leseerlebnis ausschließlich vertikal ist.
- Spiele mit der Schriftgröße und den Schriftarten. Sporadische vergrößerte Textelemente können lange Textabschnitte auflockern, ohne den Leser zu verwirren. Dies gilt insbesondere, wenn du zwei kontrastierende Schriftarten kombinierst: klobige Serifenüberschriften in Verbindung mit minimalistischen serifenlosen Texten.
Anwendungsfall #2: Brand Storytelling
Falls du es noch nicht bemerkt hast, wir als Webentwickler lieben Scrollytelling. Wir haben es sogar auf uns genommen, Scrollytelling in einem unserer jüngsten Blogbeiträge zu verwenden: „Elementor feiert 5 Jahre“. In diesem Beitrag teilen wir stolz einige unserer bemerkenswertesten Errungenschaften als Pioniere der Webentwicklung mit, zusammen mit lustigen Fakten über das Elementor-Team.
Wir haben einige unserer Lieblingswidgets verwendet, um einfache Fakten und Aussagen aufzupeppen und das feierliche Element unserer Geschichte zum 5. Geburtstag zu betonen. Wenn du nach unten scrollst, bewegen sich einige Elemente, andere verändern ihre Form, und wieder andere bleiben einfach an Ort und Stelle. Alles, was wir brauchten, waren ein paar Lottie-Animationen, rotierende Symbole, Eingangsanimationen und natürlich Lazy Load: und schon war ein lebendiges, sofort einsatzbereites Beitragsformat geboren.
Du kannst es auch tun
- Drehe deine Icon-Widgets mit dem Bildlaufeffekt „Rotate“. Wenn Icons einfach sind, ist es einfach, einen Hauch von Komplexität hinzuzufügen, indem man die Elemente ein wenig rotieren lässt.
- Halte deine Zahlen mit dem Zähler-Widget in Bewegung. Wenn du ein Phänomen wie zahlenmäßiges Wachstum zeigen möchtest, es aber nicht ausschreiben willst, zeigst du steigende Zahlen in Echtzeit.
Anwendungsfall #3: Produktseiten
Die Apple-Dynastie hat die Oberhand, wenn es darum geht, was sie mit ihrem Scrollytelling machen können: Du kannst dich stark auf das Visuelle konzentrieren und musst ihre Produkte weniger erklären oder einen Kontext über deren Mehrwert liefern.
Das liegt vor allem daran, dass Apple-Produkte so populär sind, dass jeder, der sich auf dem Markt für mobile Geräte auskennt, den Mehrwert und die Einzigartigkeit des Produkts leicht erkennen kann, sobald es auf einem neuen Apple-Produkt liegt.
Wenn es also um Scrollytelling geht, hat Apple den Vorteil, dass es die komplizierten Details seiner Waren hervorhebt, anstatt ein Gleichgewicht zwischen Bildern und Texten herzustellen.
Das ist genau das, was wir auf der AirPods Pro Produktseite sehen, die die Freiheit hat, die verschiedenen Farboptionen ihrer Ohrhörer interaktiv zu zeigen und einen Anwendungsfall eines glücklichen Kunden zu zeigen, der sie benutzt. Du kannst nur wenige Worte wählen und direkt auf den Punkt bringen, was die Ohrhörer einzigartig macht und wie sie das Kundenerlebnis verbessern – und das alles ohne große Erklärungen, was das Produkt eigentlich ist.
Das kannst du auch tun
- Verbessere dein Designspiel mit Custom CSS. Wenn du viele Bilder hast, die du den Nutzern zeigen möchtest, aber nur eines nach dem anderen, kannst du dafür sorgen, dass sich die Bilder beim Scrollen ändern.
- Zeige zufriedene Kunden. Wenn die Leute sehen, wie sehr Musikfans die AirPods lieben, wollen sie sie unbedingt ausprobieren.
Anwendungsfall #4: Online-Shops
Wenn dein Flaggschiff-Getränkeprodukt über ein wunderschönes Verpackungsdesign verfügt, kann dein Produktstorytelling in die Höhe schnellen. Je komplizierter und ausgefeilter deine Markenbilder und Designs sind, desto mehr Tiefe kannst du deiner Geschichte verleihen. Wer hätte gedacht, dass man so viel über ein mit Cannabis angereichertes soziales Tonic erzählen kann?
Eine Geschichte über ein so innovatives, originelles und vielseitiges Getränk beinhaltet viele Details: die Zutaten, die Geschichte dahinter, wie es hergestellt wird, wo man es kaufen kann, wann man es trinken sollte, usw. Bei so vielen Punkten, die es zu berücksichtigen gilt, muss Scrollytelling viele Fakten und Zahlen in einer visuellen Landschaft zusammenfassen.
Und jetzt kommt die Herausforderung: viele kleine Details anzusprechen, ohne dass es zu einer kognitiven Überlastung oder zu viel visueller Stimulation kommt. Hier kommen die Parallaxen-Effekte ins Spiel, die die einfachen, umrissenen Kreise animieren, die auf einem festen Hintergrund schweben. Mit winzigen Interaktionen, die zunächst als unbedeutende Designdetails erscheinen, werden winzige Animationen plötzlich überlebensgroß.
Das kannst du auch tun
- Verwende das Textpfad-Widget, um kleinen Textelementen eine aufregende Ebene zu verleihen. Wenn du sicherstellen willst, dass deine Worte gelesen werden, können kleinste Bewegungen viel bewirken.
- Wähle komplementäre Farbschemata, damit Animationen besser auffallen. Die Bewegung der dünnen lilafarbenen Illustrationen ist unter anderem deshalb so auffällig, weil sie sich auf einem kontrastreichen gelben Hintergrund befinden. Dank dieses Kontraste hebt sich das Lila von dem Gelb ab, und die sich bewegenden Elemente werden sofort wahrgenommen.
Anwendungsfall #5: Kreative Portfolios
Wenn du die Geschichte deines beruflichen Werdegangs und der von dir durchgeführten Projekte erzählst, hat dies das Potenzial für eine Handlung, die sich beim Herunterblättern der Seite verdichtet. Verschiedene visuelle Effekte und Animationen können die Projekt-Thumbnails aufwerten und deine Sammlung individueller Kreationen als eine zusammenhängende Einheit zeigen.
Der portugiesische Front-End-Entwickler Fábio Azevedo hat eine einzigartige Slider-Galerie, in der er seinen kreativen Workflow vorstellt. Mit einfachen, sofort einsetzbaren Bildformen schafft Fábio eine Galerie mit Miniaturansichten, die es schafft, viele verschiedene Bildstile in einer Reihe ohne Rahmen darzustellen, ohne dass es für den Benutzer zu chaotisch oder überwältigend wirkt. Wie wir sehen, wendet er sein Talent konsequent auf jedes Projekt an, und doch ist jedes von ihnen von besonderer Individualität geprägt.
Die Kohärenz von Fábios Galerie wird auch durch die von ihm verwendeten Hover-Effekte ermöglicht, bei denen das Bild-Overlay beim Hovern verschwindet und den Namen des Projekts, den Namen des Kunden und die verwendeten Programmiersprachen offenbart.
Das kannst du auch tun
- Verwende die Maskenoption, die wir kürzlich in Elementor 3.2 eingeführt haben. Mit der Maskenoption kannst du jedes beliebige Website-Element in eine maskenbasierte Form deiner Wahl verwandeln. Auf diese Weise kannst du die einzigartige Thumbnail-Galerie (oder eine ähnliche) nachbilden, die Fábio auf seiner Homepage zeigt.
- Nutze das Elementor Slides Widget, um responsive Slider zu erstellen, einschließlich Animationen und Spezialeffekten, die dein Designtalent in den Vordergrund deines Portfolios stellen.
Anwendungsfall #6: Chronologische und historische Geschichten
Warst du schon einmal in Amsterdam? Wenn nicht, musst du nicht weit reisen. Diese von Marcus Brown und Aristide Benoist erstellte Website erzählt die historische Geschichte der berühmten Amsterdamer Grachten, die im 17. Jahrhundert gebaut wurden. Kurz gesagt, man kann diese horizontale Erzählung als digitales Sightseeing-Erlebnis betrachten.
Manche mögen sagen, dass geografische und städtebauliche Geschichte langweilig ist, aber die CANALS-Website beweist das Gegenteil. Die Gegenüberstellung von Landschaftsbildern mit von oben nach unten verlaufenden Hintergründen und schweren schwarzen Texten macht es unglaublich einfach, sowohl den Bildinhalt als auch die geschriebenen Worte der Geschichte zu schätzen.
Wir dürfen nicht vergessen, dass die Geschichte von „Canals“ in der Mitte des 12. Jahrhunderts beginnt und sich bis ins 21. Wie wir sehen, ist es keine Kleinigkeit, Bilder, Text und Bewegung auf engem Raum harmonisch in Einklang zu bringen, aber durchaus machbar.
Das kannst du auch tun
- Probiere die Möglichkeit des horizontalen Bildlaufs aus. Wenn ein Großteil deines Inhalts aus großen Bildern und entsprechenden Textabschnitten besteht, kann eine Seite im Querformat dafür sorgen, dass jedes Element zu 100 % sichtbar ist.
- Nutze die Vorteile der verschiedenen Schriftschnitte, die für deine Schriftart zur Verfügung stehen. Wenn du möchtest, dass die Texte zurückhaltend sind, damit deine Bilder im Mittelpunkt stehen, können dünnere Schriftschnitte den Unterschied ausmachen.
Anwendungsfall #7: Aktuelle Ereignisse
Websites, die das Bewusstsein für eine Sache oder ein Ereignis schärfen wollen, müssen ihre Geschichte so effektiv wie möglich gestalten. Das Ziel einer Website wie „Every Last Drop“ besteht im Wesentlichen darin, ihre Kampagne zum Wassersparen einer breiten Öffentlichkeit bekannt zu machen. Wie könnte dies besser gelingen als mit einer cartoonartigen Geschichte über einen rothaarigen Astronauten, der sich morgens auf die Arbeit vorbereitet?
Die Zahlen darüber, wie viel Wasser in der heutigen Welt verschwendet wird, sind gelinde gesagt hoch. 150 Liter Wasser werden im Vereinigten Königreich pro Tag verschwendet, eine fünfminütige Dusche verbraucht 40 Liter, ein normales Bad 80 Liter … Wir hätten vielleicht erwartet, dass den Bildern Textabsätze folgen, die erklären, wie diese Zahlen überhaupt möglich sind.
Scrollytelling ist hier die Rettung. Statt langatmiger Erklärungen zu Forschungsergebnissen und wissenschaftlichen Überlegungen erzählt uns eine illustrierte Geschichte über einen ganz normalen Menschen auf dem Weg zur Arbeit alles, was wir wissen müssen. Der Astronaut steht stellvertretend für einen großen Teil der Weltbevölkerung, und die Verfolgung seines Tagesablaufs zeigt uns, wie schnell der Laie Wasser verbraucht, ohne sich dessen bewusst zu sein. Der Beweis liegt auf der Hand, und es besteht kein wirklicher Bedarf an Datenvisualisierung, Diagrammen, Dashboards und vor allem an Erklärungsabschnitten von oben nach unten.
Das kannst du auch tun
- Schaue dir Elementor Mouse Effects an. Diese Mausverfolgungsfunktionen ermöglichen es dir, bestimmte Elemente so zu konfigurieren, dass sie sich in Abhängigkeit von der Mausaktivität der Besucher bewegen. Dies ist die perfekte Option für Scrollytelling – denn dein Inhalt bewegt sich, wenn der Benutzer navigiert.
- Wende vertikale Bildlaufeffekte auf deine Seitenhintergründe an. Du kannst nicht nur die Bewegungsgeschwindigkeit wählen, sondern auch bestimmen, wo die Bewegung auf der Grundlage der Höhe des Ansichtsfensters beginnt.
Jetzt bist du dran mit Scrollytell
Wir haben die vielen Facetten des Scrollytellings angesprochen: wann man es einsetzen sollte, welche Funktionen es möglich machen, die vielversprechendsten Beispiele und warum es sich für dich lohnt.
Webentwickler müssen mit vielen Branchentrends Schritt halten – Bewegungseffekte, 3D-Design, interaktive Elemente – und du kannst jetzt alles miteinander kombinieren.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/guide-to-scrollytelling/
