Webdesign: 5 inspirierende Trends für Ihre Webseite

Webdesign im Wandel: Neue technische Möglichkeiten erlauben ausgefeiltere Webseiten. Wir stellen fünf der wichtigsten Trends im Webdesign vor. © Digitalgenossen

Modernes Webdesign verändert sich kontinuierlich. Das gilt für die technischen Möglichkeiten genauso wie für gestalterische Faktoren. Im Blog-Beitrag stellen wir fünf Trends im Webdesign vor, die Besucher in ihren Bann ziehen – von Scrollytelling bis 360° Produkten.

1. Trend im Webdesign: Mobile First

Seit 2011 hat sich die Anzahl der Nutzer mobilen Internets in Deutschland mehr als verdoppelt – von 20 Prozent auf etwa 55 Prozent (Quelle: ARD-ZDF-Onlinestudie.de). Weltweit sind sogar 2,58 Milliarden Menschen mobil online. Gleichzeitig verschiebt sich die Nutzung immer weiter von Desktop-Computern auf mobile Endgeräte.

Auf das Webdesign hat diese Entwicklung enormen Einfluss, denn auf den kleineren Bildschirmen der Smartphones und Tablet-PCs ist die klassische Darstellung von Webseiten unübersichtlich und für den Nutzer häufig lästig. Bei Gestaltern setzt sich daher der Grundsatz „mobile first“ immer weiter durch. Anstatt eine Webseite wie früher für große Bildschirme zu optimieren, legen sie ihren Fokus dabei auf die kleineren, mobilen Endgeräte. Erst nach der Gestaltung der mobilen Oberfläche befassen sich die Webdesigner mit der Desktop-Variante.

Beispiele (am Smartphone betrachten):

• Webseite von „The Verge“
• Europäische Webseite von Newsweek

2. Trend im Webdesign: Scrollytelling

Nicht mehr ganz neu im Webdesign, aber deswegen nicht weniger inspirierend ist das Scrollytelling (Wortneuschöpfung aus „Storytelling“ und „to scroll“). In Form eines One-Pagers und unter Verwendung von multimedialen Elementen wie Videos oder lebendigen Statistiken werden hier Geschichten erzählt, durch die sich der Nutzer durch runterscrollen navigiert. Handlung, Text, Bild und Video verschmelzen dabei zu einer Einheit, durch die eine Geschichte erzählt wird.

Die Idee zum Scrollytellings stammt aus dem Journalismus. Vorreiter des Webdesign Trends war „Snow Fall: The Avalanche at Tunnel Creek“, eine Reportage der New York Times. Inzwischen wird die Webseiten-Variante aber auch von absatzorientierten Akteuren genutzt.

Entscheidend für die Wirkung des Scrollytellings sind die technisch einwandfreie Umsetzung und eine funktionierende Nutzerführung. Wer ein Scrollytelling Projekt realisiert, muss also die entsprechenden Ressourcen bereitstellen: Konzept, Text, Webdesign, Programmierung und Video – für die Umsetzung benötigt man Experten mit verschiedenen Kompetenzen. Schnell bewegt man sich da im deutlich fünfstelligen Bereich.

Eine günstigere Variante des Scrollytellings ermöglichen Tools, wie Racontr oder Storyform, welche die Einbindung eigener Inhalte in einem vorgefertigten Rahmen ermöglichen. Die Möglichkeiten dabei sind jedoch begrenzter.

Beispiele:

• Making of des Kinofilms „Life of Pie“
• Scrollytelling-Bericht zum Thema Shitstorms

3. Trend im Webdesign: Material Design

Material Design ist eine Webdesign Sprache, die von Google entwickelt wurde und inzwischen für die meisten eigenen Webanwendungen genutzt wird. Sie kombiniert die Regeln vom klassischen Grafikdesign mit möglichst nutzerfreundlichen Oberflächen.

Die wichtigsten Faktoren bei dieser Variante des Webdesigns sind Minimalismus und Kontinuität. Wechselt der Nutzer zwischen zwei Google Angeboten erkennt er dadurch stets, dass er sich nach wie vor im Google-Universum bewegt. Material Design basiert außerdem auf physikalischen Gesetzen – zum Beispiel Schattenwurf. Entsprechend kann man sich die Ebenen (Materialien) des Designs als Pappe-Elemente innerhalb eines dreidimensionalen Raums vorstellen. So wurden im Übrigen die Prototypen der Design-Sprache entwickelt.

In der Dreidimensionalität liegt übrigens der Unterschied zum ebenfalls minimalistischen Flat-Design, bei dem alle Elemente auf gleicher, zweidimensionaler Ebene liegen. Wie schon der Name sagt, fehlen beim „flachen Design“ also Priorisierungen der Elemente auf der z-Achse sowie Schatten.

Beispiele:

• Materialup listet verschiedene Beispiele für Material Design

Leitfaden zum Material Design von Google:

4. Trend im Webdesign: 360° View / Produkt

Mit der Präsentation von Produkten oder Umgebungen im 360 Grad Format bieten Sie Ihren Kunden nicht nur einen Mehrwert, sondern laden ihn auch dazu ein, sich mit dem Objekt interaktiv und somit intensiver zu beschäftigen. Beim Verkauf im Internet verschaffen Sie Ihren Produkten damit einen klaren Vorteil.

Zu unterscheiden ist bei 360 Grad Bildern zwischen zwei Kategorien. Bei der ersten blickt der Betrachter von außen auf einen Gegenstand, welchen er drehen und von allen Seiten begutachten kann. Bei der zweiten Art von 360 Grad Aufnahme „steht“ der Betrachter im Mittelpunkt, schaut nach außen und bewegt sich perspektivisch um seine eigene Achse.

Deutlich an Bedeutung gewinnen dürften 360 Grad Aufnahmen zukünftig im Windschatten einer anderen Technologie. Je ausgereifter Virtual Reality Angebote werden und je intensiver diese Technologien genutzt werden, desto mehr wird der Verkauf von 360 Grad Kameras boomen.

Beispiel 1:

• Kategorie 1: Produktvorstellung von Bugaboo in 360 Grad
• Kategorie 2: 360 Grad Aufnahme bei Wimbledon

5. Trend im Webdesign: Background Videos

Videos hinterlassen einen stärkeren und intensiveren Eindruck als Bilder oder auch Text. Sie sorgen für Stimmung und transportieren Emotionen. Deshalb eignen sie sich besonders gut als multimedialer Eyecatcher im Webdesign. Das gilt insbesondere seit durch Flash, CSS3 und HTML5 die technischen Hürden für Webseiten gefallen sind.

Doch Hintergrund-Videos bei Webseiten können auch problematisch sein. Auf mobilen Endgeräten werden sie in der Regel nicht dargestellt. Gerade wenn Videos mit einer automatisch startenden Tonausgabe verbunden sind, fühlen sich Nutzer außerdem schnell genervt. Das Gesamterlebnis der Webseite leidet. Ein weiteres Usability-Problem von Webdesign Videos ist regional bedingt. Abseits der Großstädte in Gebieten mit geringer Bandbreite werden Webseiten deutlich länger laden. Die Nutzer frustriert das. Wenn sie können, werden sie die Seite meiden. Dieses Problem wird hoffentlich bald der Vergangenheit angehören, noch sind aber auch große Teile Deutschlands noch nicht mit ausreichender Bandbreite erschlossen.

Beispiele:

• Webseite der Digitalgenossen
• Webseite von Bloomberg Media