Webdesign-Trends

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.

Auf «Scroll» reagierende SVG-Grafiken

SVG-Grafiken sind Vektorgrafiken. Das heisst, sie sind nicht als «Pixel-Haufen» gespeichert, wie JPG und PNG Dateien, wo im Grunde Pixel für Pixel ein Farbwert definiert ist, sondern die Grafik ist geometrisch beschrieben.

Spezialfall: Sich über die ganze Seite aufbauende SVG-Grafiken

Das ist der Trend, der mir persönlich am meisten zusagt.

Aufwendig animierte «Above-the-Fold» Bereiche

Der erste Eindruck zählt. Es macht darum Sinn, den allerersten sichtbaren Teil, der Bereich auf der Startseite, den man ohne Scrollen sehen kann - fachsprachlich above-the-fold - aufwendig zu gestalten.

Elemente, welche auf Mausbewegungen reagieren

Grafiken, welche auf Mausbewegungen reagieren, geben einer Webseite das verspielte Extra. Zwar kann über den Nutzen solcher Elemente gestritten werden, doch lässt sich nicht bestreiten, dass damit das eine oder andere Lächeln auf die Gesichter gezaubert werden kann.

Icons/Bilder ersetzen den Mauszeiger

Auf einzelnen Elementen wird der Mauscursor kurzerhand ersetzt durch eine Grafik.

Neonlicht-Effekte

Aus der Design-Abteilung meldet sich das Neonlicht. Dieser optische Design-Trend hat sich in den letzten Jahren angebahnt und findet mittlerweile grössere Beliebtheit. Unterstützt und ermöglicht hat diesen Trend die Tatsache, dass die dafür benötigten Schatten-Attribute, auf allen Browsern stabil verfügbar sind.

Smoothe Parallax-Effekte bei vielen Elementen

Bereits in den Webdesign-Trends 2021 habe ich diesen Trend aufgenommen. Parallax-Effekte erhöhen die Aufmerksamkeit.
Dabei scrollen verschiedene Elemente mit unterschiedlicher Geschwindigkeiten oder entgegengesetzter Richtung und sorgen so für Spannung.

3D-Animationen

Ein schleichender, aber konstanter Trend, an den sich mittlerweile die ersten experimentierfreudigen Webentwickler wagen. Die dritte Dimension wird sich von Jahr zu Jahr durchsetzen. 

Grosse Schriften

Weniger ist mehr.

Web-Brutalismus / Retro-Look

Der Design-Stil «Web-Brutalismus» gibt es schon länger und erfreut sich in neuster Zeit grösserer Beliebtheit.