Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 48

Inspirationen fürs Webdesign: Storytelling statt Google-Optimierung

Gegen jede Optimierung: Webdesign kann auch anders, wie die Website von Lo-Flo Records zeigt (Screenshot: Lo-Flo Records)

Webdesigner müssen sich unzähligen Sachzwängen beugen: Die Zahl der Screens explodiert, die Bandbreite der technischen Anforderungen ebenso. Muss das sein? Warum nicht jede Optimierungsvorgabe sinnvoll ist.

Wir leben in Zeiten, in denen die Zahl der CTA-Elemente explodiert, an allen Ecken und Enden Klickköder lauern und sich alles um Conversion-Rate-Profilierung dreht. Da ist es eine schöne Abwechslung, auf Websites zu treffen, die tatsächlich noch etwas mitzuteilen haben. Dann wird klar: Nein, nicht jedes online präsentierte Produkt braucht eine einwandfreie Google-Optimierung, wenn das darauf hinausläuft, dass das Design seine Individualität oder die Botschaft ihr volles Potenzial verliert. Auch muss nicht jede Website bis ins letzte Detail mobil optimiert sein, wenn die Zielgruppe unterwegs nur ungern nach Informationen sucht.

Ja, auch wenn der SEO-Profi verständnislos den Kopf schütteln mag, weil die Startseite nicht die empfohlene Wiederholungsrate eines von ihm definierten Suchbegriffs aufweist – es gibt für gewisse Zwecke relevantere Scores als den von Google. Dies gilt besonders für Dinge, die sich nicht schnell abverkaufen sollen, sondern einen eher hohen Kaufwert und eine lange Verbrauchsdauer haben – sich also im High-Involvement-Bereich wiederfinden. Derlei Produkte umrahmen meist eine Story, die Designer besonders eindrucksvoll mit verschiedensten Stilmittel transportieren. Nicht jedes dieser Stilmittel eignet sich für jede Zielgruppe oder jede Art der Informationsübermittlung – zumal dabei manchmal moderne Webtechnik einige Besucher von der optimierten Ansicht ausschließt. Dennoch: Webdesigner sollten nicht allein auf die nüchternen Analysen technischer Möglichkeiten vertrauen, wenn es um die Inszenierung einer Marke geht, sondern ihr Repertoire an Möglichkeiten selbstbewusst zum Einsatz bringen.

Illustrationen

Eigene Illustrationen vermitteln zum Beispiel einen individuellen Stil und bleiben daher eher im Gedächtnis hängen als das hundertste Stock-Foto. Sie erfordern zwar oft mehr Aufwand und Kosten, bebildern eine Aussage aber dafür auch so präzise und einzigartig wie möglich und nötig.

Illustratives, interaktives Storytelling

(Screenshot: Climate under Pressure)

Kein Wunder daher, dass sich der Trend zu individuellen Illustrationen bei vielen Websites beobachten lässt. Ein besonders schönes Beispiel, wie sich maßgeschneiderte Illustrationen mit gutem Storytelling zu einem beeindruckenden Nutzererlebnis verbinden, liefert die Website „Climate Under Pressure“. Sie entstand zur Klimakonferenz in Paris und ist eine interaktive Dokumentation des Klimawandels und dessen Folgen. In sechs Kurzgeschichten können die Nutzer in das Schicksal der Hauptcharaktere eingreifen – und sich so bewusst machen, wie sie selbst zum Klimawandel beitragen, sich also selbst zum Mittäter entwickeln.

Parallax Scrolling und Off-Canvas-Elemente

Die Animation von Content ist ebenfalls ein hervorragendes Mittel, um Geschichten zum Leben zu erwecken – zumal der Nutzer interaktiv eingebunden wird. Scroll- oder cursorsensitive Animationen können zudem die Verweildauer und die Interaktionsrate einer Website beträchtlich erhöhen.

Eine astrophysikalische Reise

(Screenshot: Welcome to the Universe)

Dies dürfte bei der Online-Präsentation des Buchs „Welcome to the Universe“ mit Sicherheit der Fall sein. Während so manch andere Website auf Filme setzt, erweckt diese Seite die statischen Illustrationen allein durch Webtechnik zum Leben: Das Buchthema – Sterne, Planeten, Galaxien und das gesamte Universum – findet sich hier in Form einer interessanten Tour wieder, die beispielhafte Buchinhalte optisch spannend aufbereitet. Animierte SVGs führen minimalistisch durch die Kapitel, einfache Formen machen das immense Thema verständlich und greifbar. Die drei Beispielkapitel lassen sich im Detail betrachten.

Julia Lindenberg
Julia Lindenberg

ist Screen- und Print-Designerin bei der imbaa Kreativagentur und verantwortlich für Konzeption und Gestaltung. Der Fokus der Essener Werbeagentur liegt auf der Entwicklung innovativer Webauftritte.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Aaron Bolte
Aaron Bolte

Genau um diese Balance zwischen sinnvollen Sachzwängen und unkonventionellem Storytelling geht es. Und Google honoriert glücklicherweise mehr und mehr Content, der messbare Nutzer-Interaktionen und Verweildauern erzeugt und lässt bei guten alten Keywordhäufigkeiten auch mal Fünfe gerade sein. Storytelling, Relevanz und Nutzer-Intention sind nicht hack-bar und deshalb sind es Werte, die im Web überdauern werden.

ManfredFSchreyer
ManfredFSchreyer

Sehr interessante Beispiele und Anregungen. Guter Artikel. Als Anbieter von einem Webbaukasten (page4.com) suchen wir natürlich ständig nach Ideen, die wir umsetzen können. Das Problem ist vor allem, wie man solche Effekte "Bedienbar" macht. Das meiste davon kann man leider nur mit einer individuellen Programmierung machen, die genau auf die Inhalte passt. Aber einige Ideen habe ich mir notiert, die lassen sich bestimmt nutzen, um sie unseren Usern verfügbar zu machen.

Manfred F. Schreyer

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden