Das gewisse Extra für moderne Webseiten.

Webdesign-Trends

Alle Jahre wieder fragt man sich, welche Trends setzen sich durch, welche lohnt es sich anzuwenden und welche Trends bleiben am Ende nur kurzfristige Modeerscheinungen?

Ich habe mich erkundigt, habe diverse Artikel über das Thema gelesen und wage hier in diesem Artikel die allgemeine Schnittmenge aufzulisten. Diese Liste hat keinen allgemeingültigen Anspruch, sondern entspricht meinem Dünken und meiner Filterung. Falls ich einen wichtigen Trend übersehen oder vergessen habe, freue ich mich über entsprechende Mitteilung.

Manchmal sind Trends schnell wieder vergessen. Da und dort äussere ich meine Vermutungen diesbezüglich. Ich bin primär Programmierer, bitte behaften Sie mich daher nicht für meine Prognosen bzgl. Design-Trends ;-).

Viel Vergnügen beim Lesen und möge der eine oder andere zumindest eine Inspiration für die eigene Webseite finden. Ein Trend gefällt mir besonders gut, welcher, das erfahren Sie im Artikel!

Autor: | Zuletzt aktualisiert: 28.05.2023
Inhalt

Dark Mode

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

Darstellung Darkmode

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.

SVG-Grafiken können darum auch in beliebiger Grösse dargestellt werden, ohne dass je ein Qualitätsverlust eintritt. Weil eben die Grafik einfach für die gewünschte Grösse berechnet wird.

Tipp: Gerade darum empfehle ich, auf Webseiten das Logo als SVG-Grafik zu hinterlegen.

Ebenfalls cool: Weil die Grafiken eben keine Pixel sind, sondern klare geometrische Formen, können diese beliebig animiert werden.

Bei «normalen» Grafiken ist es möglich sie zu vergrössern, verkleinern und zu drehen. Strecken oder gar einzelne Komponente separat zu animieren wird bereits schwierig bis unmöglich. Nicht so bei SVG-Grafiken. Da lassen sich von allen Komponenten (Flächen, Punkte, Linien) sämtliche Eigenschaften animieren.

Flächen können umgeformt, umgefärbt, vergrössert, Linien können gekrümmt, verlängert, verschoben, Punkte können herumschwirren und vieles mehr.

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

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

Grafiken können sich wahlweise über eine ganze Webseite erstrecken oder in der Position fixiert sein und sich je nach Scrollposition anpassen.

Beide Varianten geben der Webseite einen «roten» Faden und machen selbst lange One-Pager zu einer Einheit.

Ein gelungenes Beispiel: seed.com

Letztgenannte Design-Idee ist für Webseiten sehr interessant, welche ein einziges Produkt vertreiben.

SVG-Grafiken über ganze Webseite

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.

Diese Fläche wird zur Bühne. Mittels Animationen, guten Bildern und gutem Design kann man beim Betrachter den gewünschten guten Eindruck erzeugen.

Ein schönes Beispiel: Miti-Navi

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.

Sicherlich lassen sich damit Werte wie «Offenheit», «Lockerheit» und «Freundlichkeit» transportieren.

Grafiken reagieren auf Cursor

Icons/Bilder ersetzen den Mauszeiger

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

Mir persönlich geht dieser Trend zu weit. Ich empfinde den Cursor als meine persönliche Basis, der unter meiner Kontrolle sein soll. Darum mag ich diesen Trend nicht.

Ähnlich wie die Elemente, welche auf den Cursor reagieren, wird dieser Trend primär zur Wertevermittlung genutzt. Teilweise wird er unterstützend für die Seiten-Navigation eingesetzt.

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.

Meine Prognose: Wenn es zu viele machen, wird es wohl oder übel bald zu viel. Daher empfehle ich diesen Trend nur für Seiten, bei denen es auch nach Jahren noch passen wird. 

Beispiel Neon-Effekt

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.

Neu ist, dass dieser Effekt sehr dezent bei kleinsten Elementen angewendet wird. Das gibt ein sehr dezenter, kaum bemerkbarer Verlauf, gibt der Page dennoch eine geschmeidige Wirkung.

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. 

Nein, dafür braucht es keine fancy 3D-Brillen.

Javascript-Libraries wie zum Beispiel three.js sind mittlerweile gut genug und werden konstant besser.
(Dort findet man auch diverse Beispiele)

3D im Webdesign

Grosse Schriften

Weniger ist mehr.

»Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen, sondern wenn man nichts mehr weglassen kann.« - Antoine de Saint-Exupéry

Dieser Trend könnte langfristig bleiben. Weniger Text, dafür fokussiert auf das Wesentliche und das mit grosser Schrift hervorheben.

Webdesign - grosse Schrift

Web-Brutalismus / Retro-Look

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

Der Stil hat nichts mit Brutalität zu tun. Es geht bei diesem Stil, der einst auch in der Architektur beliebt war, darum, dass die zugrunde liegenden Elemente gerade nicht kaschiert werden.

Bei der Architektur hat man den Grundbaustoff (Beton) gezeigt, statt verputzt. Im Webdesign gestaltet man Elemente häufig nach einem bestimmten Design-Stil (Material-Design, Flat-Design) und «kaschiert» damit den eigentlichen Look von Webelementen.

Web-Brutalismus kaschiert nicht. Im Gegenteil. Web-Brutalismus schreibt sich auf die Fahne, gerade gegen die guten Design-Regeln anzugehen.

Diverse Beispiele: Brutalistwebsites

PS: Falls Sie eine solche Seite haben wollen, sind Sie bei mir falsch :-P

CHECKLISTE

Webprojekt starten?

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

Diese Webseite verwendet Cookies. Weitere Informationen finden Sie in der Datenschutzerklärung von Undici-Web.