Design-Trends für 2018: Von Scrolling-Effekten bis zur mobilen Animation

Design-Trends können mitunter als subjektiv verstanden werden, doch einige Entwicklungen in diesem Bereich sind nicht von der Hand zu weisen. Für 2018 nehmen wir ein paar Tendenzen zum Webdesign unter die Lupe. Sind Brutalismus und Scrolling-Effekte das neue Must-Have?

Design-Trends haben viele Gesichter

Dass für das beginnende Jahr Trends ausgerufen werden, ist in beinahe jeder Branche und in jedem Bereich obligatorisch. Auch wir haben etwa für 2017 Webdesign-Trends diskutiert. Da wir uns nun aber inzwischen im Jahr 2018 befinden, ist es Zeit wiederum einen Blick auf neue (oder alte?) Trends im Webdesign zu konzentrieren. Dazu untersuchen wir Vorschläge, die Ben Davis bei Econsultancy unterbreitet. Aber gleichzeitig werfen wir auch einen Blick auf die Ideen, die Tomas Laurinavicius bei Forbes zum Thema hat.

1. Flat Design ist auf dem absteigenden Ast – oder?

Schon für das letzte Jahr wurde der Abstieg von Flat Design prognostiziert. Dabei zeichnet sich diese Form durch grafischen Minimalismus aus. Als Musterbeispiel wird häufig das Kacheldesign bei Windows angegeben.

Trotz des guten Looks biete Flat Design jedoch nachweislich zu schwache Anzeiger für die Handlungen der Nutzer, sodass die UX leidet. Das fand eine Studie der Norman Nielsen Group heraus, die auch auf Eyetracking baute. Die Kernaussage der Studie ist, dass Nutzer 22 Prozent länger brauchen, um bei Seiten mit Flat Design produktiv zu navigieren. Das erklärt Kate Meyer noch einmal im Video.

Dass Flat Design daher nicht mehr en vogue ist, bedeutet jedoch nicht, dass nicht simple Designs zu den Hinguckern gehören könnten, wie auch Designer Paul Jarvis bei Forbes darstellt:

Simple will never go out style, but with advances in monitors, color saturation and brightness, minimalism doesn’t have to be boring

Dafür führt er die digitale Kreativ-Agentur Brave People als Beispiel an.

2. Video ist beim Webdesign stark im Kommen

Video ist wohl überall als erfolgreicher Content einsetzbar. Auch beim Design der Website. Das zeigt Davis am Beispiel der Website des Kulturzentrums Barbican.

Aber auch in Hamburg gibt es Websites, die auf Video bei der Startseite setzen, so etwa die Agentur Elbdudler. Hier wird quasi ein Firmenintro als Hintergrund gewählt.

Die Videos wirken auf einige Nutzer störend, wobei andere darin eine innovative Ästhetik sehen. Zudem können die Videos auch komplexe Zusammenhänge oder Strukturen, vielleicht sogar die USP, rasch visuell darstellen. Dabei bedarf es natürlich einer hochqualitativen Darstellung, damit die Besucher nicht direkt durch das Bewegtbild irritiert werden. Designer Sunil Joshi sagt bei Forbes:

Videos are no longer just something to watch, they are now becoming part of a brands presentation and communication […] expect to see videos used throughout websites in 2018.

3. Scrolling-Effekte halten ebenso Einzug

Verschiedene Scrolling-Effekte sind beim Webdesign von Bedeutung. Sie lockern die mitunter statische UX auf. So bewegen sich die Elemente bei trendigem Parallax Scrolling unterschiedlich schnell. Ein gutes Beispiel liefert der HubSpot-Blog.

via GIPHY, © HubSpot

Die Website PORSCHEvolution nutzt Scrolling in einer sehr kreativen Weise.

Auch bei Werbeanzeigen werden die Scrolling-Effekte inzwischen vermehrt genutzt. So bringt der Nutzer Rhen Wilson bei YouTube ein Beispiel von Mashables Seite an, das dieses Phänomen gut aufzeigt.

Dabei gibt es verschiedene Werbeformate mit Parallax Scrolling; und auch wenn sie manchmal desorientierend wirken können, ist doch ihre Andersartigkeit womöglich aufmerksamkeitswirksam.

4. Der Ghost Button muss weg

Die sogenannten Ghost Buttons sind auch eine Ausgeburt des Minimalismus. Gerade bei großflächigen Fotografien im Hintergrund bieten sich die Buttons an, die im Prinzip nur aus einer Umrandung und einem Call-to-Action bestehen, allerdings keine Farbfüllung haben. Interessanterweise hat die Website von Parallax solch einen Ghost Button, der vor wenigen Jahren als extrem im Trend galt.

Allerdings wird heute eher argumentiert, dass diese Buttons zu Einbrüchen bei Conversions führen können. Davon berichtet Luke Hay bei ConversionXL, wo ein A/B-Test dazu durchgeführt wurde. Das liegt womöglich an dem Mangel an Kontrast und einer geringeren Sichtbarkeit. Damit werden die CTAs doch eher „leise“. Dann nutzt es vielleicht auch nicht so viel, dass der Ghost Button sich bei Parallax mit Farbe füllt, sobald die Maus darüber fährt.

5. Sticky Navigation könnte sich durchsetzen

Sticky Navigation nennt man es, wenn eine Website beim Scrollen bestimmte Elemente an Ort und Stelle im Sichtbereich fixiert (daher auch manchmal fixierte Navigation genannt). Das Phänomen ist nicht neu, setzt sich aber so langsam bei einigen Seiten durch. Retailer nutzen es ebenso wie andere Websites. Bei Görtz läuft auf der Startseite die Angebotsübersicht fixiert mit.

Dabei ist es bei der Ansicht dieser Angebote ein Header mit Auswahlkriterien, der fest am oberen Bildrand bleibt. Die Agentur achtung! baut ebenfalls auf fixierte Navigation.

Beim britischen Retailer Argo’s findet sich, wie Davis zeigt, beispielsweise als fixiertes Element die Funktion, um das Produkt in den Warenkorb zu legen.

Als mögliche Erweiterung lassen sich auch Header beobachten, die – wie beim Beispiel von Reseau.coop, das Davis anführt – quasi über den visuellen Inhalten schweben.

6. Besondere Typografie 

Dass außergewöhnliche, vielleicht aber auch gerade gewöhnliche Typografie ein Webdesign bestimmt, kommt ebenso häufiger vor. Dabei muss das Design, wie immer, zum Unternehmen und der Zielgruppe passen. Ein Beispiel für ansprechende typografische Gestaltung liefert etwa Modeanbieter Jun Duffy.

Aber auch die Kreativagentur Antro setzt auf nicht viel mehr als akzentuierte Schriftzeichen auf der Landing Page.

Und besonders bei Agenturen könnte sich dieser vermeintliche Trend tatsächlich zu einem solchen entwickeln. Besonders wenn er mit Bewegtbild im Hintergrund kombiniert wird; oder mit den im Webdesign schon seit 2017 gehypten Formen des Brutalismus.

7. Der Brutalismus hält Einzug; was ist das?

Brutalismus ist eigentlich ein Architekturstil aus der Moderne. Hier wird mit Bezug auf béton brut (roher Beton) auf die Materialität eines Gebäudes, also im weiteren Sinne auch Kunstwerkes, verwiesen. Und UX-Designer Vytautas Alech erklärt bei Forbes:

Asymmetry and brutalism inspired free-form. This has been developing over the past few years. But only recently with a rise of such design expressions as brutalism and bolder visual fragments it became useful.

Dass Brutalismus beim Webdesign weniger leicht zu erkennen ist, als in der Architektur, dürfte klar sein. Als Beispiel könnte die Seite der Kunstorganisation Emma herhalten.

Wie dieses Exempel, hat Jeff Cardello bei Webflow aber auch die Seite der Yale University of Art vorgeschlagen.

Doch, wie Davis berichtet, ist auch das simple Design bei Balenciaga als Brutalismus zu erkennen.

Hierin könnte dank der Schlichtheit auch eine gute UX verankert und damit ein produktiver Trend verborgen sein.

8. Rundungen bei Bildern liegen „im Trend“ und haben Wiedererkennungswert

Rundungen bei Bildern sind vielleicht nicht der absolute Trend schlechthin. Es fällt nun doch auf, dass bei Twitter, Facebook, Instagram und Co. dein Profilbild im Rund dargestellt wird. Dazu kommt, dass in der Search Box bei Google in der mobilen Suche auf abgerundete Darstellungen zurückgegriffen wird, wie Davis auch dokumentiert.

Das kann jeder selbst nachvollziehen, indem er bei Google auf seinem Smartphone etwas sucht. Doch ob es sich, wie Davis hier anführt, dabei tatsächlich um einen Design-Trend handelt, darf bezweifelt werden. Das Festlegen auf bestimmte Formen scheint bei der Vielfalt von Websites und deren Ansätzen keine sichere Methode, um am Puls der Zeit zu sein.

Allerdings könnte der Gebrauch ähnlicher Abrundungen wie bei Google und in den sozialen Netzwerken zumindest einen Wiedererkennungseffekt haben, der womöglich im Cross-Channel-Bereich von Vorteil sein könnte. Ob rund, achteckig oder asymmetrisch, das bleibt sicherlich Geschmackssache.

9. Animationen für mobile Seiten

Eine ganze Reihe von Websites hat inzwischen Animationen bei der Landing Page implementiert. Das fördert die Aufmerksamkeit und auch die Interaktionsbereitschaft, sofern sie nicht sehr nervig sind. Allerdings sind mobil noch wenige Seiten oder auch Apps mit Animationen ausgestattet und hier sieht Ben Davis von Econsultancy tatsächlich einen weiteren Trend fürs Webdesign 2018.

Wie effektiv Animationen auf einem minimierten Screen letztlich sind, muss, auch in Abhängigkeit von der Seite oder App, womöglich per Trial and Error-Verfahren erfahren werden; wenn man denn überhaupt auf diesen Zug aufspringen möchte. Ist das der Fall, bietet etwa Airbnb ein Open Source Animationstool, das für Apps gedacht ist.

10. VR, AR usw. Was ist noch trendy im Jahr 2018?

Was könnte der Trend Nummer zehn sein, der eine solche Liste abschließt? Ben Davis stellt sowohl Virtual Reality als auch Augmented Reality als Aspekte dar, die auch in diesem Jahr an Bedeutung gewinnen werden. Hier bleibt jedoch fraglich, inwiefern sie das Webdesign bereits beeinflussen können.

Dennoch bieten viele Marken schon die Option, auf speziellen Seiten AR Features zu nutzen, so etwa Ray Bans Virtual Try-On.

Hier ist AR schon auf dem Vormarsch. Wer ähnliche Produkte verkauft, die sich leicht anprobieren lassen, könnte über solche Optionen nachdenken, sofern das Budget stimmt.

Aber hier ist sicherlich (noch) nicht von einem wirklichen Trend zu sprechen.

Überhaupt sind die Trends, die wir in Anlehnung vor allem an Ben Davis’ Vorschläge aufgenommen haben, lediglich Beobachtungen von mal mehr, mal weniger eindrücklichen Entwicklungen im Webdesign. Ein Blick auf Blogeinträge anderer Seiten zeigt bereits, dass Trends auch ganz anders ausgelegt werden können oder gar sehr unterschiedlich sind. Einige Erkenntnisse sind jedoch etwas objektiver, so die zunehmende Verwendung von Video bei Landing Pages.

Während diese Option eher der Ästhetik dient, sind auch pragmatische Entwicklungen sichtbar. Hier fällt sicher besonders die Sticky Navigation oder die Abkehr vom Ghost Button ins Auge. Ob ein Webdesigner sich nun nach kolportierten Trends richtet, bewusst mit ihnen bricht oder sich ganz auf seine eigenen Ansichten fokussiert, ist ohnehin nicht absehbar. Und gerade das macht ja die schöne Vielfalt der Websites aus. Und wo manche Seiten durch Extravaganz herausstechen wollen, mögen andere durch Funktionalität und Einfachheit bestechen.

Dabei ist also auch im Angesicht neuer Trends die Vielschichtigkeit der Gestaltungsmöglichkeiten noch immer der größte Trumpf; doch ein Blick auf aktuelle Entwicklungen, die mitunter mit Analyse-gestützten Erkenntnissen aufwarten, und die mehr Engagement und Innovation verprechen, lohnt sich immer. Ob man nun mit solchen Trends konform geht oder nicht.