Webdesign-Trends: Sinnvoll oder viel Hype um nichts? Part 2

Nehmen wir nochmals den Begriff Webdesign-Trend unter die Lupe. Ein Trend ist etwas, das kommt und wieder geht. Macht das bei einer Website, für dessen Entwicklung der Kunde viel Geld bezahlt, aber Sinn, solchen Trends zu folgen? Zunächst sei gesagt: Ja. Denn gleichzusetzen mit der Schnelllebigkeit in der Modebranche sind Webtrends keineswegs, weisen sie doch eine deutlich längere Gültigkeit auf. Zudem unterliegen Websites - je nach CSS - sowieso nach ein paar Jahren einem Update. In diesem Zuge bietet es sich an, auch am Design ein paar Stellschrauben neu zu justieren. Und: neue Trends gehen im Webdesign oft mit einer Verbesserung der Usability einher, da sich die technische Entwicklung weiterentwickelt hat. Es geht also nicht nur um das Look & Feel.

Was liegt nun in Sachen Webdesign ganz weit vorn?
Die Trends sind sehr vielseitig und reichen vom weitverbreitenden, klassischen Template bis hin zum sehr speziellen Brutalist Webdesign, bei dem man sich an die Anfänge des Internet zurück versetzt fühlt (hier ein Beispiel der HGB Leipzig, die allerdings nicht von uns erstellt wurde). Und manchmal entwickelt sich ein Trend auch zu etwas sehr Langfristigem.

Bedingt unter anderem durch Word Press, hat sich ein Layout etabliert, bei dem man nichts falsch machen kann. Die Startseite ist dabei wie folgt aufgebaut:

1. Navigation mit Logo links, oft sticky (immer sichtbar)
2. Großes, emotionales Bild / Slider mit Headline
3. Folgende Inhalte zentriert
4. Welcome Text
5. Boxen, Cards, Akkordeons mit Beschreibung der Kernkompetenzen und Verlinkung zu mehr Content
6. News-/Blogartikel
7. Team
8. Footer mit Kontaktangaben

Die Flächen sind im Wechsel zwischen Contentbreite und Fullwidth.

Dieses Design ist zwar sehr verbreitet, doch hat es sich durchgesetzt, weil es eben funktioniert. Es hat weiter dazu geführt, dass Websites allgemein sehr viel ansprechender und nutzerfreundlicher geworden sind. 

Auch wir bei ADVA greifen oft auf diesen klassischen Aufbau zurück. Und trotzdem erreicht man einen ganz eigenen Stil indem man mit Farbflächen, Schriften, Anordnung und Bildern changiert.

Hier einige Beispiele aus unserem Portfolio: 
Partyservice Zwarg
Sprachschule Holfelder Languages
Künsterlin Sibylle Burrer
Enilux
Hautarztpraxis Tilo Freudenberger
Kanzlei Die Erbrechtexpertinnen

Wer etwas mehr aus dem Raster fallen will, für den bietet sich beispielsweise eine asymmetrische Anordnung der Inhalte an. Bilder und Text stehen im Wechsel, allerdings ohne den Halt zu verlieren. Sie ergeben einen gleichmäßigen Rhythmus, der dennoch aus dem Rahmen fällt, im Vergleich zu einem zentrierten Layout.

Besondere Aufmerksamkeit gilt hier der mobilen Ansicht. Es muss unbedingt darauf geachtet werden, dass die Inhalte im richtigen Kontext angeordnet werden. 

Auch hier ein paar Beispiele aus den Macs von ADVA:
Die Akademie² für Pflege und Gesundheit
Hautarztpraxis Roxana Stark
PSG Perlitz Strategy Group

Ein Grid-Design besteht aus vielen kleinen Modulen, die beliebig zusammengeführt werden können. So entsteht eine sehr flexible Website, die man schnell und einfach neu anordnen kann, ohne dazu in die Programmierung einzugreifen.

Ein weiterer Vorteil ist, dass sich diese Art von Design relativ unkompliziert jedem Viewport anpasst.

Ein Design, bei welchem wir das sehr konsequent umgesetzt haben, ist Holzbauwerte Elsässer:
Elsässer Holzbauwerte

Und auch bei einem recht aktuellen Projekt, der Karriere-Seite des Ortenau Klinikums, findet man diese Aufteilung sehr oft:
Karriere-Portal des Ortenau Klinikums, Pflege

Ein Bild sagt mehr als 1000 Worte. Diesen Spruch kennt jeder und er trifft oft ins Schwarze. So auch, wenn ich eine Website öffne, auf der ich noch nie war, und mich ein beeindrucḱendes, großes Foto mit einem klaren Fokus erwartet. Auf diese Art kann man so manchen Internet-Nutzer von überreizten Inhalten des Internets runterholen. Wenn es sich bei dem Bild um ein starkes Keyvisual handelt, kann es ganz allein für sich stehen. In den meisten Fällen ist es aber ratsam, eine aussagekräftige Headline mit hinzuzunehmen.

Hier ein paar Beispiele:
Karriere-Portal des Ortenau Klinikums, hier die Seite "Arbeiten am OK"
Naumer Architekten
Stark im Sturm
Partyservice Zwarg

Immer öfter sieht man auch kurze Video-Loops, was noch mehr Aufmerksamkeit erzeugen kann, als ein statisches Bild. Das Video sollte aber, genau wie bei Bildern auch, immer im Kontext zum Unternehmen stehen und die Aussage, die man treffen will, unterstreichen.

Bei einem unserer jüngsten Projekte unseres langjährigne Kunden Wahler Versicherungen hatten wir die Idee, eine Videosequenz eines Wals abzubilden. Der Kunde ließ sich auf die Idee ein. Das Ergebnis ist ziemlich gut geworden! 

Jedoch sollte man große Bilder als auch Videos sparsam einsetzen und auf die Ladezeiten achten. Sinn und Zweck ist es, das Interesse der Nutzenden zu wecken und sie auf der Website zu halten.

Sehr beliebt bei Kunden ist nach wie vor ein Slider auf der Startseite. Es ist einfach zu verführerisch, mehrere wichtige Themen an der prominentesten Stelle unterzubringen. Das Problem dabei: die Nutzenden nehmen in der Regel nur den ersten Slide war, weil sie, bevor der 2. sichtbar wird, schon nach unten weitergescrollt haben.

Besser ist es daher den Nutzenden zu überlassen, ob sie die weiteren Themen anklicken möchten oder nicht. So haben wir z. B. auf der Startseite von Holfelder Languages ein statisches Bild im Headerbereich mit einem Thema. Es wird nicht geslidet. Aber: Weitere Themen sind gut sichtbar über Buttons im Headerbereich positioniert, sodass der User je nach Interesse wechseln kann.

Beim Responsive Design ist schon lange nicht mehr von einem Trend die Rede, sondern vielmehr von einer der wichtigsten Ansätze im Webdesign und dessen Entwicklung. Die Range der Auflösungen reicht von der Smart Watch bis hin zu Flatscreens, ist also enorm. Mobile First rückt daher immer mehr in den Fokus, denn: auf wenig Fläche (Smartphone) ist es schwieriger Inhalte unterzubringen als auf großen (Desktop). Hat man also die Inhalte erstmal für das Smartphone konzipiert, ist es viel einfacher, diese dann auf Tablet und Desktop zu übertragen.

Ich habe nun zu diesem Thema wirklich nur an der Oberfläche gekratzt. Es gäbe noch viel mehr, auf das ich hätte eingehen können. Zwei große Themenblöcke zum Thema Trends sind z. B. Farben und Typografie. Ich wollte hier aber vor allem einen übersichtlichen Eindruck der vielen Möglichkeiten geben und erläutern, wie es sich mit Trends im Webdesign verhält. Zudem machen Webdesigntrends in den meisten Fällen auch Sinn, denn sie führen zu einer Verbesserung der Usability. 

Letztendlich muss das Look & Feel zu Ihrem Unternehmen passen. Das hat bei ADVA immer noch Priorität, dass wir mit Ihnen gemeinsam einen stimmigen, modernen und nutzerfreundlichen Webauftritt konzipieren. Kontaktieren Sie uns gerne für ein unverbindliches Beratungsgespräch.