Web-Design Trends 2021

Webdesign unterliegt Trends so wie viele andere Bereiche des Lebens auch. Manche Trends verkommen als Modeerscheinungen, manche dagegen setzen sich durch und bleiben über mehrere Jahre.
In diesem Artikel versuche ich diejenigen Trends aufzuzeigen, denen ich gute Chance auf ein längeres Dasein gebe.
Web-Design Trends 2021

Dark Mode

Als Dark-Mode bezeichnet man eine Design-Variante, bei welcher die Hintergrund-Farbtöne sehr dunkel sind.

Worin liegen die Vorteile des Dark-Modes

Ursprünglicher Gedanke war, dass man so a) Strom sparen kann und b) die Augen schonen kann.

Die meisten Betriebssysteme haben mittlerweile Blaufilter-Funktionen, welche unnötige Reizüberflutungen zu späten Stunden verhindern. Dadurch soll insbesondere das Einschlafen nach später, digitaler Aktivität erleichtert werden.

Im Trend liegt, dass auch Webseiten entweder komplett in Dark-Modes gestaltet werden oder (darin liegt der grosse Trend) den Dark-Mode als zweite Variante der Webseite anbietet.

Dark-Mode Switch und/oder Browser-Einstellung

Immer öfters kommen Switch-Buttons zum Einsatz, welche ein einfaches Umschalten der Webseite zwischen Dark- und Light-Mode ermöglichen. Bei dieser Variante kann der User manuell wählen, welcher Modus ihm lieber ist.


Damit dies funktioniert, braucht Ihre Webseite ein technisches Cookie. Darin wird gespeichert, welcher Modus die User gewählt hat, so dass sie den Modus nicht bei jedem Seitenaufruf neu wählen müssen. Da dies ein technisch notwendiges Cookie ist, ist es bzgl. Datenschutzkonformität unbedenklich.

In naher Zukunft wird es vermehrt die Möglichkeit geben, einen favorisierten Modus im Browser zu definieren. Webseiten werden künftig diese Information verarbeiten können und so direkt den bevorzugten Modus ausspielen können.

Fazit

Einen zweiten Design-Modus auf der eigenen Webseite anbieten wird - so meine persönliche Prognose - sehr bald zum State-of-the-art gehören.


Ungewiss ist noch, ob sich eher der manuelle Switch oder die Browser-Voreinstellung durchsetzen wird. Ich tippe auf letzteres, da die User vermutlich sowieso flächendeckend einen der beiden Modi bevorzugen und immer diesen wählen - sofern vorhanden.

Mobile First

Mobile First, also ein Design zuerst auf mobile Geräte auszurichten, ist längst im Trend und wird künftig noch wichtiger.

Online-Aktivität findet heute bereits mehrheitlich via Smartphones statt. Ergo lohnt es sich, dass dieser überwiegende Online-Verkehr gut bedient wird.

Dies gelingt mehrheitlich mit folgenden Massnahmen:
  • Bilder in geeigneter Grösse und Format ausliefern, damit die Ladezeiten (und mobilen Daten) geschont werden.
  • Schriftgrössen anpassen (meist kleiner machen).
  • Klickbare Elemente genug gross und genügend weit auseinander.
  • Bereits selbstverständlich: Die Webelemente auf die geringere Screen-Breite anpassen.

Webprojekt starten?

  1. Checkliste (PDF) kostenlos herunterladen
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Animierte SVG-Illustrationen

Illustrationen werden zunehmend als Vektorgrafiken (.svg-Format) erstellt und auf Webseiten eingebaut. Früher geschah dies eher im klassischen .png oder .jpg Format. Grund ist, dass bislang ein guter Teil der genutzten Webbrowser Vektorgrafiken nicht dargestellt hat (insb. der Internet Explorer).

Mittlerweile kann man zum Glück erwarten, dass dies bei nahezu allen Browsern möglich ist.

Dies bringt zwei grundlegende Vorteile mit sich:
a) Vektorgrafiken haben eine teils massiv geringere Dateigrösse (das schont die Ladezeiten)
b) In Vektorgrafiken können einzelne Elemente mit Websprachen bearbeitet und somit auch animiert werden.

Für kreative Köpfe bringt animierbare Illustrationen eine Fülle an neuen Möglichkeiten. Dennoch sollte man es nicht übertreiben, sonst lenken diese grafischen Werke zu sehr vom eigentlichen Hauptziel der Webseite ab. Ein dezenter Einsatz ist jedoch sicherlich zu empfehlen.

Bewegung und Reaktionen auf User-Interaktionen

Nahe verwandt ist der Trend, auf die Webseite Bewegung zu bringen, insbesondere auch als Reaktion auf User-Interaktionen.


Undici-Web hat zum Beispiel das Logo und das Firmen-Icon (das Zahnrad) an diversen Stellen animiert.

Beliebt sind auch kleine, meist geometrische Elemente, welche sich frei im Hintergrund bewegen.

Hero-Bereich

Schon immer war die erste View, also der oberste Bereich der Startseite von enormer Wichtigkeit. Nicht zuletzt könnte man diesen Bereich als den "ersten Eindruck" einer Webseite bezeichnen. In der Tat brechen viele User bereits nach diesem ersten View ab und kehren zurück zum Beispiel zur Suchmaschine.


Das gilt es zu verhindern, indem man im Hero-Bereich "Appetit" auf mehr macht.

In der Vergangenheit war es Trend, an erster Stelle eine Slideshow zu platzieren. Dies gibt die Möglichkeit, mehr Content zu verpacken und mehrere Themen zu zeigen. Tatsache ist leider, dass diese Slideshow meistens nicht so sehr beachtet werden, wie man es sich als Webseiten-Betreiber erhofft.

Der Trend geht hier ganz klar zum Video-Format. Ganzseitige Videos im Hintergrund oder Image-Filme umrahmt mit ersten Texten.

Cards

Längst im Trend und immer noch aktuell sind sogenannte Cards.

Als Card bezeichnet man eine kurze Infobox, welche in der Regel aus einem Bild, Text und einem Action-Button bestehen.
Beliebt sind Cards für Angebote bzw. Produkte und für Übersichten auf der Startseite. Dank den zunehmenden Möglichkeiten für Animationen, werden Cards immer mehr zu regelrechten Eye-Catchern.
Cards werden vermutlich noch lange im Trend liegen, da sie insbesondere eine der wichtigsten Anforderungen für gutes Webdesign erfüllen, nämlich Informationen schnell zu transferieren.

Minimalismus

Weniger ist mehr. Manche Webprojekte versuchen diesem Motto gerecht zu werden und gestalten die Webseite mit möglichst wenig Elementen.


Wie einst Goethe treffend sagte: "Ich habe heute nicht viel Zeit, darum muss ich dir einen langen Brief schreiben", ist es oft schwieriger Kompliziertes einfach zu machen als Einfaches kompliziert.

Dennoch hat der Versuch, mit nur 3-4 Elementen die gewünschte Wirkung zu erzielen, seinen Reiz. Ein Rahmen, ein Bild, ein Satz ein Action-Element. Mehr nicht. Nicht die Menge machts sondern, die Komposition. Gut gemacht haben minimale Webdesign eine wunderbare, angenehme Wirkung.

Parallax Scrolling

Nicht der jüngste Trend, aber mit zunehmender Beliebtheit und zusätzlichen Möglichkeiten ist der Parallax Scrolling-Effekt. Bei diesem scrollen verschiedene Elemente der Webseite mit unterschiedlichen Geschwindigkeiten.

Am Anfang waren es meistens die Hintergrundbilder, welche als Zwischensequenz in voller Breite die Webseite auflockern sollte. Immer öfters werden auch weitere Elemente, manchmal auch ganze Teile einer Webseite mit diesem Effekt ausgestattet.

One-Pager / Mehr Inhalt pro Seite

Soll mehr Inhalt auf eine Seite oder soll der Inhalt auf mehrere Seiten verteilt werden?
Der Trend geht in Richtung "Mehr Inhalt pro Seite". Viele Webseiten beschränken sich gar auf eine einzelne Seite, sog. One-Pager-Webseiten.
Der Vorteil liegt darin, dass man die Besucherinnen und Besucher besser leiten (an die Hand nehmen) kann. Die Gefahr, auf einer Webseite die Orientierung zu verlieren ist ausgeschlossen. Die Besucherinnen und Besucher können nur nach unten scrollen und erhalten so sämtliche Informationen in der vorgesehenen Reihenfolge.
Besonders Webseiten mit wenig Inhalt und einer einzigen Conversion-Absicht sollten diese Option in Betracht ziehen.

Abgeschrägte Übergänge

HTML5 und CSS3 macht es möglich.

Während früher quasi nur horizontale Übergänge möglich waren und man schräge Übergänge künstlich mit Bilddateien erzeugen musste, sind heute geformte Übergänge aller Art möglich.
Am einfachsten geht dies mit Code-definierten .svg-Grafiken. Diese können beliebig geformt werden, sie können auf alle Formate angepasst werden (relative Grössen) und mit CSS gestaltet (Farbverläufe, Ränder) werden.

Webprojekt starten?

  1. Checkliste (PDF) kostenlos herunterladen
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Bildschirm halbieren

Ein letzter Trend, welcher ich hier vorstellen möchte, ist das Halbieren (manchmal auch Vierteilung) des Bildschirms. Dabei wird das Design deutlich in zwei Hälften halbiert. Eine interessante Variante ist, wenn die beiden Hälften unterschiedlich auf das Scrollen reagieren.

So kann zum Beispiel die linke Hälfte fixiert sein, während die rechte Hälfte regulär durchscrollt. Erst wenn bei der rechten Hälfte ein bestimmter Abschnitt erreicht wird, reagiert auch die linke Hälfte.

CHECKLISTE

Webprojekt starten?

  1. Checkliste (PDF) kostenlos erhalten
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Über mich

Undici-Web ist Ihr digitaler Partner für Webentwicklung, Webdesign, Online-Marketing und Websolutions mit Sitz Bern.

Diese Webseite verwendet Cookies, welche für die Funktionalität notwendig sind. Durch die Nutzung der Webseite stimmen Sie dem Einsatz gemäss der Datenschutzerklärung von Undici-Web zu.