BlogFachartikel, Interviews und Einblicke für Bio- und Naturkosmetik

Aktuelle Trends im Webdesign. Interview mit Lisa-Marie Faber

Kaum eine Welt verändert sich so schnell wie die digitale. Wer im Web am Puls der Zeit bleiben möchte, sollte aktuelle Trends im Webdesign im Auge behalten. Lisa-Marie Faber und David Faber haben diesem Thema eine Session beim NaturkosmetikCamp 2016 gewidmet. Im Interview mit uns gibt Lisa Einblicke in die derzeitigen richtungsweisenden Entwicklungen.

Webdesign betrifft die ganze Vielfalt an Endgeräten - vom Laptop bis zum Smartphone oder Tablet. Foto: Artur Marciniec/Fotolia

Webdesign betrifft die ganze Vielfalt an Endgeräten – vom Laptop bis zum Smartphone oder Tablet. Foto: Artur Marciniec/Fotolia

Lisa, die Session von David und dir drehte sich rund um das Thema der Trends im Webdesign. Welche Anforderungen muss ein Trend im Webdesign grundsätzlich erfüllen, um erfolgreich zu sein?

In meinen Augen muss ein Trend im Webdesign 3 Anforderungen erfüllen:

  1. Ästhetik
  2. Coolness Faktor
  3. Usability

In erster Linie muss eine Webseite bzw. ein trendiges, digitales Design-Element ästhetisch ansprechend sein. Zudem muss es natürlich hip und neuwertig sein, damit es Interesse weckt. Ganz entscheidend ist jedoch die Anwendbarkeit (Usability). Diese entscheidet, ob der Trend schnell wieder abzischt oder sich als Must-Have etablieren kann.

Der erste Trend, den ihr in eurer Session beleuchtet habt, ist der Trend der Single Sites. Was hat es damit auf sich?

Das Phänomen “Single Site” haben wir dem Smartphone zu verdanken. Vor 10 Jahren galt noch die Regel: Alle Inhalte der Webseite müssen above the fold dargestellt werden – also ohne dass der User scrollen muss. Heute ist alles anders und die Devise lautet: Mehr scrollen, weniger klicken. Am Smartphone machen wir das ganz intuitiv. Wir wischen einfach nach unten, um alle Inhalte der Webseite konsumieren zu können. Da wir heutzutage unseren Usern auf allen Geräten unvergessliche Nutzererlebnisse bieten wollen, setzt sich die Technik des Scrollens auch am Desktop durch.

Nun gibt es die “echten” Single Sites, bei denen der gesamte Inhalt auf einer langen Webseite dargestellt wird, wie z. B. bei der Blumenwerkstatt Röthlin.

Zudem gibt es “Semi Single Sites”, deren Homepage beispielsweise ebenso ein einzigartiges Scrollingerlebnis bietet, aber aus mehreren Unterseiten besteht, wie z. B. das Hotel Ploberger.

„Flat Design 2.0“ war ein weiteres Schlagwort. Was verbirgt sich dahinter und gibt es Best-Practice-Beispiele, die diesen Trend im Webdesign etwas anschaulicher machen?

Flat Design hat sich gegenüber dem Skeuomorphic Design vor ein paar Jahren durchgesetzt. Seither ist im Web alles flach. Elemente wie Buttons haben keine 3-D-Effekte mehr, Schatten werden im Flat Design nicht mehr als Design-Element eingesetzt. Dies kann man an der Webseite der Marktapotheke Greiff beobachten .

Das Thema “visuelle Schatten” ist auch die Grätsche zum Flat Design 2.0. Diesen Begriff benutzen wir, um aufzuzeigen, dass sich Flat Design weiterentwickelt hat. Es hat sich um den Material-Design-Ansatz von Google erweitert. Um beim Beispiel zu bleiben: Schatten sind nicht mehr verpönt, solange man sie aus Usability-Gründen einsetzt. Ein solcher Grund wäre das Hervorheben eines interaktiven Elementes, wie beispielsweise die Buttons und das Menü auf der Webseite von Nimbus 9.

Die emotionale Bildansprache ist auch 2016 noch ein wichtiges Thema, wie ihr in eurer Session verdeutlich habt. Darüber hinaus ist die Interaktion mit den Usern auch nach wie vor ein großes Thema. Welchen Trend sollten Website-Betreiber dabei derzeit nicht verschlafen?

Dass man mit einem Stockfoto, auf dem sich zwei Anzugträger die Hände schütteln, bei seinen Usern keine großen Emotionen weckt, ist mittlerweile allen klar. Wichtiger denn je ist die Authentizität von Bildern und Videos. In Zeiten von Snapchat dürfen wir nicht glauben, dass uns Hochglanzfotos und ein Alles-ist-bei-uns-perfekt-Image auf der Webseite jemand abkauft. User wollen echte Einblicke und erwarten diese auch. Mit spannenden, ehrlichen Bildern, Videos, virtuellen Rundgängen und 360°-Ansichten kann man als Unternehmen seine User erstens begeistern und zweitens zum Verweilen auf der Webseite bringen. Das moderne Webdesign spielt uns dabei in die Hände: Großflächiger Platz für Multimedia, dezente Scrolling-Effekte und Single Sites bieten den optimalen Spielraum für gutes Storytelling.

Ich freu mich immer riesig über Überraschungsmomente in Stories. Diese Überraschungen können sich natürlich auch in der Bildsprache finden – sie lösen dann ein Aha!, ein Lachen, eine Erkenntnis aus, die zum Nachdenken anregt. Und das wollen wir in der emotionalen Kommunikation: dass die Menschen bewegt sind, wir sie zum Denken anregen, „fesseln“. Ebenso ist es mit Mystifizierungen: „Was kann denn dieses Produkt noch alles … ?“, fragt sich der Konsument. Eine Spannung hat sich aufgebaut, die durch den Kauf des Produktes „entspannt“ beziehungsweise „gelöst“ wird.

Im Content Marketing wird Storytelling häufig als eine der Königsdisziplinen genannt. Gilt das auch im Webdesign? Und wenn ja, wie lässt sich Storytelling dort erfolgreich umsetzen?

Früher haben wir im Webdesign und Webdevelopment gesagt: “Mobile first”, d. h. zuerst ein mobiles Konzept entwickeln, dann das Desktop-Konzept. Daraus wurde: “Content first”. Heute sagen wir: “Story first”. Wenn ich als Unternehmen keine spannende Geschichte zu erzählen habe, bringt mir das schönste Design gar nichts. Die Bezeichnung Königsdisziplin trifft es also recht gut. In der klassischen Werbung weiß man das schon lange. Nun geht es darum, mit dem One-Story-Ansatz alle Kommunikations-Kanäle zu bedienen: also alle externen – und internen, offline sowie online! Dass die digitale Kommunikation hier eine wesentliche Rolle spielt, ist selbstverständlich!

Schöne Beispiele für digitales Storytelling im Rahmen eines Webauftrittes sind die Landing Page von Lily und die Produktinszenierung von Eska.

Im Bereich der Naturkosmetik habe ich noch keine vergleichbare Story gefunden. Hier hättet ihr also die Chance, die First-Mover-Advantage zu nutzen! ;-)