2021 war ein ereignisreiches Jahr. Als WordPress- und Webdesign-Agentur nehmen wir uns gerne am Ende des Jahres einmal die Zeit einen Blick auf die vergangenen Webdesign-Trends zu werfen und ihren Reiz zu analysieren. Und auch in diesem Jahr merken wir, dass Webdesign ein sich ständig weiter entwickelndes und weit gefächertes Thema ist, bei dem für jeden etwas dabei ist.

3D-Elemente

Das Thema 3D hat in diesem Jahr noch einmal stark an Popularität gewonnen. Während in den letzten Jahren die Leistung von Server und Internetverbindung oft noch hinderlich für die Darstellung von 3D-Elementen waren, werden mittlerweile gerne Produkte, Formen oder Schriften im Startbild der Website als solche dargestellt. Aber auch abstrakte Formen werden genutzt, um den Verstand auf eine Reise zu schicken. Dieser Trend in Kombination mit Animationen kann z.B. die Bewegungen der Maus des Besuchers verfolgen. Oder auch das Durchlaufen von 3D-Welten zum Übermitteln der Unternehmensgeschichte haucht der Website Leben ein und regt zum Verweilen auf der Website an.

Abbildung 1: Eine sich drehende Weltkugel in 3D auf perimeterwatch.com

In unseren Projekten haben wir bisher keine 3D-Elemente eingesetzt und können so direkt nichts zu ihrer aktuellen Belastung der Website sagen.

Animationen

Wenn es um Webdesigns geht, dürfen auch Animationen nicht fehlen. Gerade in diesem Jahr wurden Animationen immer häufiger genutzt, da sie für Dynamik und Verweildauer auf der Website sorgen. Je ausgefallener und detaillierter, desto besser.

Dabei lassen sich Animationen in verschiedensten Bereichen einer Website einsetzen: Ob sie, wie oben angesprochen, in Zusammenhang mit 3D-Elementen gebracht werden, oder Effekte beim Überfliegen eines Bereiches mit der Maus auslösen. Die Möglichkeiten sind hier nur an die eigene Kreativität gebunden.

Wir persönlich kennen den schmalen Grat zwischen einer schönen Animation und einem nervigen Gezappel nur zu gut. Wir setzen daher auf sanfte bzw. gezielte Animationen, die einen Mehrwert oder WOW-Effekt bieten.

Abbildung 2: Ob es um das gelegentliche Zwinkern eines Würfels geht (lite.games)…

Abbildung 3: … oder das Verschwinden eines Buttons (SC-Victoria Shop), beides ist bereits mit CSS möglich.

Doch Achtung! Animationen sollten sparsam eingesetzt werden, wenn Sie auf Googles Meinung Rücksicht nehmen wollen. Zu viele und vor allem aufgeblähte Animationen belasten die Ladegeschwindigkeit der Website.

Farbverläufe

Im Gegensatz zu einfachen Farbflächen bieten Farbverläufe Individualität und können sowohl minimalistische, als auch umfangreiche Webdesigns aufwerten. Das liegt daran, dass sie in vielen verschiedenen Bereichen eingesetzt werden können: Als Hintergrundfarben, in Button, als Stilelemente oder z.B. um Schatten zu erzeugen.

Hier ein paar Beispiele, wie Sie Farbverläufe einsetzen können:

Abbildung 4: „Goldener“ Button, erzeugt durch einen Verlauf bei Traumreisen.de

Abbildung 5: Verlauf im Hintergrund und in den Button bei Elbnetz.de

Blur-Effekt

Der Blur-Effekt ist ein beliebtes Stilmittel, das vor allem Apple-Nutzern bekannt sein sollte.

Abbildung 6: Blur-Effekt bei einem iPad Pro

Das verschwommene Durchscheinen von Hintergrundbildern wirkt hochwertig und sorgt für den gewünschten Wow-Effekt beim Besucher. Auch gemischt mit Farbverläufen können wir ihn sehr empfehlen.

Abbildung 7: Blur-Effekt auf Genius-consulting.de

Abbildung 8: Blur-Effekt auf kickenmitherz.de

Der Effekt ist auch bekannt unter den Namen „gefrorenes Glas“ oder „gaußscher Weichzeichner“, für alle Photoshop-Nutzer ;)

Neumorphismus

Neumorphismus ist vielleicht nicht jedem ein Begriff, doch optisch ist der Webdesign-Trend sicherlich schon dem einen oder anderen aufgefallen.

Beim Neumorphismus sollen die im Webdesign erstellten Oberflächen so wirken, als seien sie hervorgehoben oder eingedrückt, quasi berührbar. Hier wird vor allem mit Schatten gearbeitet, wodurch der 3D-Effekt entsteht.

Hier bekommen Sie einen guten Eindruck von dem Designtrend: Neumorphismus auf Google

Dazu muss erwähnt werden, dass Neumorphismus im Thema Barrierefreiheit ein paar Minuspunkte sammelt, vor allem, was die Kontraststärke angeht. Deshalb sind wir persönlich gespannt, ob und wie sich der Trend noch weiterentwickeln wird.

Darkmode

Der Darkmode: Bereits auf den meisten Social Media Apps, Mobilen Betriebssystemen und auch auf Apple-Geräten hat der Darkmode Einzug gehalten. Für viele bietet die dunkle Farbpalette Schonung für die Augen. Für uns ist es ebenfalls ein interessanter Aspekt im Bereich Webdesign geworden. Wir sind uns außerdem sicher, dass der Darkmode auch 2022 noch ein weiteres großes Thema bleiben wird.

Abbildung 9: Der Darkmode bei Elbnetz.com

Bold-Design

Was bei Bold-Design auffällt sind die SEHR großen Schriften, die vor allem zum Erregen von Aufmerksamkeit genutzt werden. Aber auch kräftige Bilder und das Aufbrechen von bekannten Designmustern ist beim Bold-Design gang und gäbe. Dass das für frischen Wind im Bereich Webdesigns sorgt, ist verständlich.

Nicht für jeden ist Bold-Design ansprechend und auch wird müssen zugeben, dass für die wenigsten unserer Kunden diese Designrichtung angebracht ist. Nichtsdestotrotz kann man sich davon inspirieren lassen und Aspekte für seine Designs verwenden.

Hier bekommen Sie einen guten Eindruck von dem Designtrend: Bold Design auf Google